Deploy

src/components/sections/AboutSection.tsx

@@ -0,0 +1,59 @@
+import Image from 'next/image'
+import { Check } from 'lucide-react'
+
+export default function AboutSection() {
+  return (
+    <section data-vula-section="about" id="about" className="py-20 lg:py-28 bg-white">
+      <div className="container mx-auto px-4 max-w-7xl">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div className="relative h-[400px] lg:h-[550px] overflow-hidden rounded-xl shadow-[var(--shadow-card)]">
+            <Image
+              src="https://images.pexels.com/photos/5326152/pexels-photo-5326152.jpeg?auto=compress&cs=tinysrgb&h=350"
+              alt="La Roc kitchen team preparing fresh ingredients"
+              fill
+              className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
+              sizes="(max-width: 1024px) 100vw, 50vw"
+            />
+          </div>
+          <div className="space-y-6">
+            <p className="text-sm font-semibold tracking-widest uppercase text-[#d4af37]">Nuestra Historia</p>
+            <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-gray-900">
+              From Granada to Your Table
+            </h2>
+            <p className="text-base lg:text-lg leading-relaxed text-neutral-600">
+              Chef Miguel Torres trained for over a decade in the kitchens of Granada's finest restaurants, mastering the art of Andalusian cuisine. In 2019, he brought his family's recipes to our city, sourcing Iberian ham directly from Jabugo and using organic olive oil from Jaén.
+            </p>
+            <ul className="space-y-3">
+              <li className="flex items-start gap-3 text-neutral-600">
+                <Check className="w-5 h-5 text-[#6b8e23] flex-shrink-0 mt-0.5" />
+                <span>Hand-picked seafood delivered daily from Galician coasts</span>
+              </li>
+              <li className="flex items-start gap-3 text-neutral-600">
+                <Check className="w-5 h-5 text-[#6b8e23] flex-shrink-0 mt-0.5" />
+                <span>Traditional wood-fired oven for authentic paella texture</span>
+              </li>
+              <li className="flex items-start gap-3 text-neutral-600">
+                <Check className="w-5 h-5 text-[#6b8e23] flex-shrink-0 mt-0.5" />
+                <span>Award-winning sangria based on a century-old family recipe</span>
+              </li>
+            </ul>
+            <div className="grid grid-cols-3 gap-4 pt-4">
+              <div className="text-center">
+                <p className="text-2xl font-bold text-[#dc2626]">15+</p>
+                <p className="text-sm text-neutral-500">Years Experience</p>
+              </div>
+              <div className="text-center">
+                <p className="text-2xl font-bold text-[#dc2626]">200+</p>
+                <p className="text-sm text-neutral-500">Traditional Recipes</p>
+              </div>
+              <div className="text-center">
+                <p className="text-2xl font-bold text-[#dc2626]">98%</p>
+                <p className="text-sm text-neutral-500">Guest Satisfaction</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}