Deploy

src/components/sections/IsibaniHeroSection.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+
+export default function IsibaniHeroSection() {
+  const handleScroll = () => {
+    const el = document.getElementById('ubuhle-suites')
+    el?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <section data-vula-section="isibanihero" id="isibani-hero" className="relative h-[80vh] lg:h-screen overflow-hidden">
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.pexels.com/photos/18611231/pexels-photo-18611231.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="Golden dawn over the African bush"
+          fill
+          sizes="100vw"
+          className="object-cover"
+          priority
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
+      </div>
+
+      <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-6">
+        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-[#f9f7f4] mb-4 leading-tight">
+          Awaken to the Golden Glow
+        </h1>
+        <p className="max-w-2xl text-lg md:text-xl text-[#e2dfd4] mb-8 font-light">
+          Zulu Lodge — where the first light of dawn paints the bush in amber, and every moment invites you to discover luxury in the wild.
+        </p>
+        <Button
+          variant="default"
+          size="lg"
+          onClick={handleScroll}
+          className="bg-[#d4af37] text-[#211c0d] hover:bg-[#c49f2e] font-semibold px-8 py-3 rounded-lg shadow-lg"
+        >
+          Explore Our Suites
+        </Button>
+      </div>
+    </section>
+  )
+}