Deploy

src/components/sections/HeroSection.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+
+export default function HeroSection() {
+  return (
+    <section data-vula-section="hero" id="hero" className="relative min-h-screen flex items-center">
+      <Image
+        src="https://images.pexels.com/photos/24596510/pexels-photo-24596510.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+        alt="Warm Spanish restaurant interior with candlelit tables"
+        fill
+        className="object-cover"
+        sizes="100vw"
+        priority
+      />
+      <div className="absolute inset-0 bg-black/40" />
+      <div className="relative z-10 container mx-auto px-4 text-center">
+        <p className="text-sm font-semibold tracking-widest uppercase text-[#d4af37] mb-4">Bienvenidos a</p>
+        <h1 className="text-5xl lg:text-7xl font-bold tracking-tight leading-tight text-white mb-6">
+          La Roc
+        </h1>
+        <p className="text-xl lg:text-2xl text-white/90 max-w-2xl mx-auto mb-10 leading-relaxed">
+          Authentic Spanish cuisine crafted with tradition from the heart of Granada. 
+          Every dish is a celebration of Iberian passion.
+        </p>
+        <div className="flex items-center justify-center gap-4">
+          <a href="#menu">
+            <Button size="lg" className="bg-[#dc2626] text-white px-8 py-4 rounded-lg font-semibold hover:opacity-90 transition-all duration-200 ease-out">
+              Explore Our Menu
+            </Button>
+          </a>
+          <a href="#contact">
+            <Button size="lg" variant="ghost" className="text-white border-2 border-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-[#dc2626] transition-all duration-200 ease-out">
+              Reserve a Table
+            </Button>
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}