From 1bc0a693c5cd29dfb48db2e59550c9884d4fa51e Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Wed, 3 Jun 2026 16:38:52 +0000
Subject: [PATCH] Deploy

---
 src/components/sections/HeroSection.tsx | 40 +++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/components/sections/HeroSection.tsx

diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
new file mode 100644
index 0000000..f886777
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file