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>
  )
 }