From b14cd725ed19b9fc73b0a881fd25a95f8f3c8319 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sat, 25 Jul 2026 11:17:58 +0000
Subject: [PATCH] Deploy

---
 .../sections/SavannaSanctuaryHeroSection.tsx  | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/sections/SavannaSanctuaryHeroSection.tsx

diff --git a/src/components/sections/SavannaSanctuaryHeroSection.tsx b/src/components/sections/SavannaSanctuaryHeroSection.tsx
new file mode 100644
index 0000000..82ceba5
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file