Deploy

2026-06-27 09:51:16 +00:00
parent 8d858b1138
commit e37ed9ebc2
1 changed files with 70 additions and 0 deletions
@@ -0,0 +1,70 @@
+import Image from "next/image"
+import { Leaf, Star, Utensils } from 'lucide-react'
+
+export default function MenuSection() {
+  const dishes = [
+    {
+      name: "Carbonara",
+      description: "Guanciale, pecorino, egg yolk, black pepper – our family recipe since 1968.",
+      price: "€14",
+      icon: Utensils,
+      image: "https://images.pexels.com/photos/5876/food-salad-healthy-vegetables.jpg?auto=compress&cs=tinysrgb&h=350&w=350",
+    },
+    {
+      name: "Cacio e Pepe",
+      description: "Pecorino Romano, tonnarelli, cracked black pepper – simplicity perfected.",
+      price: "€12",
+      icon: Star,
+      image: "https://images.pexels.com/photos/37931489/pexels-photo-37931489.jpeg?auto=compress&cs=tinysrgb&h=350&w=350",
+    },
+    {
+      name: "Pizza Margherita",
+      description: "San Marzano tomatoes, fior di latte, fresh basil – wood-fired at 450°C.",
+      price: "€16",
+      icon: Leaf,
+      image: "https://images.pexels.com/photos/5876/food-salad-healthy-vegetables.jpg?auto=compress&cs=tinysrgb&h=350&w=350",
+    },
+  ]
+
+  return (
+    <section data-vula-section="menu" id="menu" className="py-24 bg-[#F1F8E9]">
+      <div className="max-w-6xl mx-auto px-6">
+        <h2 className="text-4xl font-bold text-[#1B3A1F] mb-4 text-center">
+          Our Menu
+        </h2>
+        <p className="text-lg text-[#1B3A1F]/70 max-w-2xl mx-auto text-center mb-16">
+          Signature Roman dishes crafted with organic, locally sourced ingredients
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {dishes.map((dish, i) => {
+            const Icon = dish.icon
+            return (
+              <div
+                key={i}
+                className="rounded-xl overflow-hidden bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out"
+              >
+                <div className="h-48 overflow-hidden">
+                  <Image
+                    src={dish.image}
+                    alt={dish.name}
+                    width={400}
+                    height={300}
+                    className="w-full h-full object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                  />
+                </div>
+                <div className="p-5">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Icon className="w-5 h-5 text-[#2E7D32]" />
+                    <h3 className="text-xl font-bold text-[#1B3A1F]">{dish.name}</h3>
+                  </div>
+                  <p className="text-[#1B3A1F]/70 text-sm mb-3">{dish.description}</p>
+                  <span className="text-lg font-bold text-[#8BC34A]">{dish.price}</span>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}