Deploy

src/components/sections/NatureReserveRetreatHeroSection.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function NatureReserveRetreatHeroSection() {
+  return (
+    <section data-vula-section="naturereserveretreathero" id="nature-reserve-retreat" className="relative min-h-[80vh] overflow-hidden bg-[#FDF6EC]">
+      <div
+        className="absolute inset-0"
+        style={{ animation: 'kenBurns 16s ease-in-out infinite' }}
+      >
+        <Image
+          src="https://images.pexels.com/photos/12879064/pexels-photo-12879064.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="KwaNtofontofo lodge overlooking wild bushveld"
+          fill
+          className="object-cover"
+          sizes="100vw"
+          priority
+        />
+      </div>
+      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-black/20" />
+      <div className="relative z-10 flex flex-col items-center justify-center min-h-[80vh] text-center px-6 text-white">
+        <h1 className="text-5xl lg:text-6xl font-bold mb-4">
+          Your Tranquil Home on the Edge of the Wild
+        </h1>
+        <p className="text-lg lg:text-xl text-white/80 max-w-2xl mb-8">
+          Just 1 km from Pietermaritzburg Airport — where privacy meets the quiet magic of the bushveld.
+        </p>
+        <Link
+          href="/booking"
+          className="inline-block bg-[#F1C40F] text-[#2C1810] font-semibold px-8 py-4 rounded-lg hover:opacity-90 transition-all duration-200 ease-out shadow-lg"
+        >
+          Book Your Retreat
+        </Link>
+      </div>
+      <style jsx>{`
+        @keyframes kenBurns {
+          0% { transform: scale(1) translate(0, 0); }
+          50% { transform: scale(1.1) translate(-2%, -1%); }
+          100% { transform: scale(1) translate(0, 0); }
+        }
+      `}</style>
+    </section>
+  )
+}