Deploy

src/components/sections/SavannaSanctuaryHeroSection.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image"
+import Link from "next/link"
+
+export default function SavannaSanctuaryHeroSection() {
+  return (
+    <section data-vula-section="savannasanctuaryhero" id="savanna-sanctuary" className="relative min-h-[80vh] overflow-hidden">
+      <style>{`@keyframes kenBurns { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.1) translate(-2%, -2%); } 100% { transform: scale(1) translate(0, 0); } }`}</style>
+      <div className="absolute inset-0" style={{ animation: "kenBurns 16s ease-in-out infinite" }}>
+        <Image
+          src="https://images.pexels.com/photos/27720736/pexels-photo-27720736.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="Savanna landscape at golden hour"
+          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 font-bold mb-4">Rest, Roam, Reconnect</h1>
+        <p className="text-lg text-white/80 max-w-2xl mb-8">
+          Find your rhythm beneath wide Kenyan skies — where the earth steadies
+          your breath and every sunset offers a fresh beginning.
+        </p>
+        <Link
+          href="/booking"
+          className="inline-flex items-center justify-center px-8 py-3 rounded-full bg-[#F1C40F] text-black font-semibold hover:bg-[#D4AC0D] transition-colors duration-200"
+        >
+          Book a Room
+        </Link>
+      </div>
+    </section>
+  )
+}