Deploy

src/components/sections/WineSection.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import Image from 'next/image'
+import { BookOpen, MapPin, Wine } from 'lucide-react'
+
+export default function WineSection() {
+  const wines = [
+    {
+      region: 'Tuscany',
+      varietal: 'Brunello di Montalcino',
+      notes: 'Aged 5 years in Slavonian oak. Intense ruby red with aromas of ripe cherry, tobacco, and leather. Pair with wild boar ragù or aged pecorino.',
+      image: 'https://images.pexels.com/photos/7491886/pexels-photo-7491886.jpeg?auto=compress&cs=tinysrgb&h=350',
+    },
+    {
+      region: 'Piedmont',
+      varietal: 'Barolo DOCG',
+      notes: "Nebbiolo grapes from the Serralunga d'Alba commune. Ethereal rose, violet, and truffle notes. Perfect with braised beef or truffle risotto.",
+      image: 'https://images.pexels.com/photos/7491886/pexels-photo-7491886.jpeg?auto=compress&cs=tinysrgb&h=350',
+    },
+    {
+      region: 'Veneto',
+      varietal: 'Amarone della Valpolicella',
+      notes: 'Appassimento method concentrates dried fruit, chocolate, and spice. Full-bodied, velvety tannins. Ideal with aged cheeses or roasted lamb.',
+      image: 'https://images.pexels.com/photos/7491886/pexels-photo-7491886.jpeg?auto=compress&cs=tinysrgb&h=350',
+    },
+  ]
+
+  return (
+    <section data-vula-section="wine" id="wine" className="bg-neutral-50 py-24 px-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#722F37]/10 mb-4">
+            <Wine className="w-8 h-8 text-[#722F37]" />
+          </div>
+          <h2 className="text-4xl md:text-5xl font-serif font-bold text-[#722F37] mb-2">
+            La Villa Wine Collection
+          </h2>
+          <p className="text-lg text-[#6b8e23] max-w-2xl mx-auto">
+            Curated by our head sommelier, each bottle tells a story of Italian terroir
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {wines.map((wine, idx) => (
+            <div
+              key={idx}
+              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 group"
+            >
+              <div className="aspect-[4/3] overflow-hidden">
+                <Image
+                  src={wine.image}
+                  alt={`${wine.varietal} from ${wine.region}`}
+                  width={400}
+                  height={300}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
+                />
+              </div>
+              <div className="p-6">
+                <div className="flex items-center gap-2 mb-2">
+                  <MapPin className="w-4 h-4 text-[#6b8e23]" />
+                  <span className="text-sm font-semibold text-[#6b8e23] uppercase tracking-wider">{wine.region}</span>
+                </div>
+                <h3 className="font-serif text-2xl font-semibold text-[#722F37] mb-2">{wine.varietal}</h3>
+                <p className="text-neutral-600 mb-4 leading-relaxed">{wine.notes}</p>
+                <div className="flex items-center gap-2 text-[#d4af37] text-sm">
+                  <BookOpen className="w-4 h-4" />
+                  <span className="font-medium">Sommelier's pick</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-16 text-center">
+          <p className="text-neutral-600 max-w-2xl mx-auto italic">
+            Our wine list features over 150 labels from all 20 Italian regions, with exclusive vertical tastings available for private events. Ask your server for a pairing recommendation.
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}