Deploy

src/components/sections/HeroSection.tsx

@@ -0,0 +1,31 @@
+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 h-[90vh] lg:h-screen overflow-hidden">
+      <Image
+        src="https://images.pexels.com/photos/37464853/pexels-photo-37464853.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+        alt="Kapa Roast coffee roastery interior — warm light on burlap sacks"
+        fill
+        sizes="100vw"
+        className="object-cover"
+        priority
+      />
+      <div className="absolute inset-0 bg-black/50" />
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="text-center px-6 max-w-4xl">
+          <h1 className="text-5xl lg:text-7xl font-bold tracking-tight leading-tight text-white mb-6">
+            Kapa Roast — Cape Town&apos;s Single-Origin Coffee Roastery
+          </h1>
+          <p className="text-lg lg:text-xl text-white/80 leading-relaxed max-w-2xl mx-auto mb-10">
+            Sourcing the finest African beans, small-batch roasted in the heart of the Mother City.
+          </p>
+          <Button variant="primary" size="lg" className="bg-[#8b5a3c] hover:bg-[#7a4c2e] transition-colors duration-200">
+            Explore Our Roasts
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}