diff --git a/src/components/sections/MenuPreview.tsx b/src/components/sections/MenuPreview.tsx
new file mode 100644
index 0000000..8703e1d
--- /dev/null
+++ b/src/components/sections/MenuPreview.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/Card"
+import Button from "@/components/ui/Button"
+import Badge from "@/components/ui/Badge"
+import Image from "next/image"
+
+export default function MenuPreview() {
+  const items = [
+    {
+      id: "1",
+      name: "Margherita Pizza",
+      description: "San Marzano tomatoes, fresh mozzarella, basil",
+      image: "https://images.pexels.com/photos/31596394/pexels-photo-31596394.jpeg?auto=compress&cs=tinysrgb&h=350",
+      price: 16.95,
+      badge: "Wood-Fired"
+    },
+    {
+      id: "2",
+      name: "Pappardelle al Ragu",
+      description: "Slow-braised beef & pork ragu over fresh pappardelle",
+      image: "https://images.pexels.com/photos/34380267/pexels-photo-34380267.jpeg?auto=compress&cs=tinysrgb&h=350",
+      price: 21.50,
+      badge: "House Special"
+    },
+    {
+      id: "3",
+      name: "Tiramisu",
+      description: "Espresso-soaked ladyfingers, mascarpone cream, cocoa",
+      image: "https://images.pexels.com/photos/35759996/pexels-photo-35759996.jpeg?auto=compress&cs=tinysrgb&h=350",
+      price: 10.00,
+      badge: "Dessert"
+    }
+  ]
+
+  return (
+    <section data-vula-section="menupreview" id="menu" className="py-20 lg:py-28 bg-white">
+      <div className="container mx-auto px-4 max-w-7xl">
+        <div className="text-center mb-12">
+          <p className="text-sm font-semibold tracking-widest uppercase text-[#6b8e23] mb-3">
+            From Our Kitchen
+          </p>
+          <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-[#111827]">
+            Signature Dishes
+          </h2>
+          <p className="mt-4 text-lg text-neutral-600 max-w-2xl mx-auto">
+            Handpicked favorites from Pino&apos;s menu — each crafted with imported Italian ingredients and generations of family tradition.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {items.map((item) => (
+            <Card key={item.id} className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out overflow-hidden">
+              <div className="aspect-video overflow-hidden">
+                <Image
+                  src={item.image}
+                  alt={item.name}
+                  width={400}
+                  height={300}
+                  className="object-cover w-full h-full hover:scale-105 transition-transform duration-500 ease-out"
+                />
+              </div>
+              <CardHeader className="p-6 pb-0">
+                <div className="flex items-center justify-between mb-1">
+                  <CardTitle className="text-xl font-semibold text-[#111827]">{item.name}</CardTitle>
+                  <Badge className="bg-[#d4af37]/10 text-[#d4af37] border-0">{item.badge}</Badge>
+                </div>
+                <CardDescription className="text-neutral-600 mt-2">{item.description}</CardDescription>
+              </CardHeader>
+              <CardContent className="p-6 pt-4">
+                <p className="text-2xl font-bold text-[#dc2626]">${Number(item.price || 0).toFixed(2)}</p>
+              </CardContent>
+              <CardFooter className="p-6 pt-0">
+                <Button
+                  variant="default"
+                  size="sm"
+                  href="/order"
+                  className="w-full bg-[#dc2626] hover:bg-[#b71c1c] text-white transition-all duration-200"
+                >
+                  Add to Order
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+
+        <div className="text-center mt-12">
+          <Button
+            variant="secondary"
+            size="lg"
+            href="/menu"
+            className="border-2 border-[#6b8e23] text-[#6b8e23] px-8 py-3 rounded-lg font-semibold hover:bg-[#6b8e23] hover:text-white transition-all duration-200"
+          >
+            View Full Menu
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file