Deploy

src/components/sections/HeroSection.tsx

@@ -0,0 +1,39 @@
+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 justify-center overflow-hidden">
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.pexels.com/photos/9316203/pexels-photo-9316203.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="Warm ambience of an Indian restaurant with rich colours"
+          fill
+          className="object-cover"
+          sizes="100vw"
+          priority
+        />
+        <div className="absolute inset-0 bg-black/50" />
+      </div>
+      <div className="relative z-10 text-center max-w-4xl mx-auto px-4">
+        <span className="inline-block text-sm font-semibold tracking-widest uppercase text-[#ea580c] bg-white/90 px-4 py-1.5 rounded-full mb-6 shadow-[var(--shadow-lifted)]">
+          Established 2012 · Durban's Favourite Curry House
+        </span>
+        <h1 className="text-5xl lg:text-7xl font-bold tracking-tight text-white leading-tight mb-6">
+          Durban Curry — Authentic Indian Flavours, Durban Soul
+        </h1>
+        <p className="text-lg lg:text-xl text-gray-200 leading-relaxed max-w-2xl mx-auto mb-10">
+          Bold spices from India meet the warmth of South African hospitality. Every dish tells a story of family recipes, local ingredients, and ubuntu spirit.
+        </p>
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+          <Button variant="default" size="lg" className="bg-[#ea580c] hover:bg-[#d4520a] text-white px-8 py-3.5 rounded-lg font-semibold shadow-[var(--shadow-card)] transition-all duration-200 ease-out">
+            <a href="#menu" className="text-inherit no-underline">Explore Our Menu</a>
+          </Button>
+          <Button variant="secondary" size="lg" className="border-2 border-white text-white bg-transparent hover:bg-white hover:text-gray-900 px-8 py-3.5 rounded-lg font-semibold transition-all duration-200 ease-out">
+            <a href="#contact" className="text-inherit no-underline">Book a Table</a>
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}