Deploy

src/components/sections/BushveldHeroSection.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image"
+import Button from "@/components/ui/Button"
+
+export default function BushveldHeroSection() {
+  return (
+    <section data-vula-section="bushveldhero" id="hero" className="relative h-[70vh] lg:h-[90vh] overflow-hidden">
+      <Image
+        src="https://images.pexels.com/photos/9130978/pexels-photo-9130978.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+        alt="Golden bushveld sunset with thorn tree silhouettes"
+        fill
+        className="object-cover"
+        sizes="100vw"
+        priority
+      />
+      <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />
+      <div className="absolute inset-0 flex flex-col justify-center items-center text-center px-4">
+        <h1 className="font-heading text-4xl md:text-6xl lg:text-7xl text-[#f5f5dc] mb-4 max-w-3xl leading-tight">
+          Unhurried Days, Wild Nights.
+        </h1>
+        <p className="font-body italic text-lg md:text-xl lg:text-2xl text-[#f5f5dc]/90 mb-8 max-w-2xl">
+          "Where the bush tells its own stories."
+        </p>
+        <Button variant="default" size="lg" className="bg-[#6b8e23] hover:bg-[#5a7a1e] text-white px-8 py-3 rounded-xl shadow-md font-heading">
+          <a href="#thornveld-experiences">Explore the Lodge</a>
+        </Button>
+      </div>
+    </section>
+  )
+}