Update components/menu.tsx

components/menu.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const menuItems = {
+  starters: [
+    { name: "Foie Gras Terrine", price: "€24", description: "Fig jam, toasted brioche, truffle oil" },
+    { name: "Scallop Carpaccio", price: "€22", description: "Citrus dressing, pink peppercorn, micro herbs" },
+    { name: "Wild Mushroom Soup", price: "€18", description: "Chestnut cream, crispy sage, truffle foam" },
+  ],
+  mains: [
+    { name: "Duck Confit", price: "€34", description: "Sarladaise potatoes, orange glaze, thyme jus" },
+    { name: "Pan-Seared Sea Bass", price: "€36", description: "Fennel purée, saffron sauce, seasonal vegetables" },
+    { name: "Beef Tenderloin", price: "€42", description: "Potato gratin, bordelaise sauce, glazed carrots" },
+    { name: "Truffle Risotto", price: "€28", description: "Arborio rice, parmesan crisp, fresh black truffle" },
+  ],
+  desserts: [
+    { name: "Chocolate Soufflé", price: "€16", description: "Valrhona chocolate, vanilla bean ice cream" },
+    { name: "Lemon Tart", price: "€14", description: "Meringue, lime zest, raspberry coulis" },
+    { name: "Crème Brûlée", price: "€12", description: "Madagascar vanilla, caramelized sugar crust" },
+  ]
+};
+
+export function Menu() {
+  const [activeTab, setActiveTab] = useState<"starters" | "mains" | "desserts">("starters");
+
+  return (
+    <section id="menu" className="py-20 bg-stone-50">
+      <Container>
+        <div className="text-center mb-16">
+          <Heading className="text-4xl font-serif text-stone-900 mb-4">Our Menu</Heading>
+          <Subheading className="text-stone-600">Seasonal ingredients, timeless recipes</Subheading>
+        </div>
+
+        <div className="flex justify-center mb-12">
+          <div className="inline-flex bg-stone-200 p-1 rounded-lg">
+            {(["starters", "mains", "desserts"] as const).map((tab) => (
+              <button
+                key={tab}
+                type="button"
+                onClick={() => setActiveTab(tab)}
+                className={`px-6 py-2 rounded-md text-sm font-medium transition-all capitalize ${
+                  activeTab === tab
+                    ? "bg-white text-stone-900 shadow-sm"
+                    : "text-stone-600 hover:text-stone-900"
+                }`}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="max-w-3xl mx-auto">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={activeTab}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.3 }}
+              className="grid gap-6"
+            >
+              {menuItems[activeTab].map((item, index) => (
+                <div key={index} className="flex justify-between items-baseline border-b border-stone-200 pb-4 last:border-0">
+                  <div className="flex-1 pr-8">
+                    <h3 className="text-xl font-serif text-stone-900 mb-1">{item.name}</h3>
+                    <p className="text-stone-600 text-sm italic">{item.description}</p>
+                  </div>
+                  <span className="text-amber-700 font-semibold">{item.price}</span>
+                </div>
+              ))}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </Container>
+    </section>
+  );
+}