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

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

diff --git a/src/components/sections/BookingCTASection.tsx b/src/components/sections/BookingCTASection.tsx
new file mode 100644
index 0000000..9954ab3
--- /dev/null
+++ b/src/components/sections/BookingCTASection.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link"
+import Button from "@/components/ui/Button"
+
+export default function BookingCTASection() {
+  return (
+    <section data-vula-section="bookingcta" id="book-now" className="py-32 bg-[#17120f] relative overflow-hidden">
+      {/* subtle radial accent gradient */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_rgba(139,90,60,0.15)_0%,_transparent_70%)]" />
+      <div className="relative z-10 container mx-auto px-4 text-center max-w-2xl">
+        <div className="flex items-center justify-center gap-4 mb-6">
+          <span className="h-px w-14 bg-[#d4af37]" />
+          <span className="text-xs uppercase tracking-[0.2em] text-[#d4af37]">Reserve now</span>
+          <span className="h-px w-14 bg-[#d4af37]" />
+        </div>
+        <h2 className="text-4xl md:text-5xl font-light text-[#eeeae7] mb-6 leading-tight">
+          Your Kenyan Escape{" "}
+          <span className="italic text-[#d4af37] font-serif">Awaits</span>
+        </h2>
+        <p className="text-lg text-[#c4b8ae] mb-8 max-w-lg mx-auto">
+          Flexible dates + seamless online booking. Reserve your suite in minutes.
+        </p>
+        <Link href="/booking">
+          <Button
+            variant="default"
+            size="lg"
+            className="bg-[#8b5a3c] hover:bg-[#7a4e34] text-white px-10 py-3 text-base rounded-sm"
+          >
+            Book a Room
+          </Button>
+        </Link>
+      </div>
+    </section>
+  )
+}