Bob AI: Create the 'Menu' page file and add basic content.

src/components/sections/MenuSection.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Card } from "@/components/ui/Card"
+import { TextAnimation } from "@/components/ui/TextAnimation"
+
+export default function MenuSection() {
+  const items = [
+    { title: "Espresso", description: "Rich, bold, and smooth.", price: "$3.50" },
+    { title: "Cappuccino", description: "Perfectly steamed milk.", price: "$4.50" },
+    { title: "Latte", description: "Creamy and comforting.", price: "$4.75" },
+    { title: "Mocha", description: "Decadent chocolate blend.", price: "$5.00" },
+    { title: "Americano", description: "Espresso with hot water.", price: "$3.75" },
+    { title: "Flat White", description: "Velvety microfoam finish.", price: "$4.25" },
+  ]
+
+  return (
+    <section id="menu" className="py-24 bg-background">
+      <div className="max-w-6xl mx-auto px-6">
+        <TextAnimation 
+          tag="h2" 
+          text="Our Menu" 
+          variant="fade-blur" 
+          className="text-4xl font-bold text-foreground mb-12 text-center luxury-serif" 
+        />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {items.map((item, i) => (
+            <Card key={i} className="p-6 flex flex-col gap-4">
+              <h3 className="text-xl font-bold text-foreground">{item.title}</h3>
+              <p className="text-muted-foreground">{item.description}</p>
+              <span className="text-lg font-bold text-primary-cta">{item.price}</span>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}