Deploy

src/components/sections/BookYourStaySection.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import Button from "@/components/ui/Button"
+import Image from "next/image"
+
+export default function BookYourStaySection() {
+  return (
+    <section data-vula-section="bookyourstay" id="book-your-stay" className="relative py-24 bg-[#111827] overflow-hidden">
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.pexels.com/photos/33613747/pexels-photo-33613747.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
+          alt="Luxurious guest suite at KwaNtofontofo"
+          fill
+          sizes="100vw"
+          className="object-cover opacity-40"
+        />
+      </div>
+      <div className="relative container mx-auto px-4 text-center">
+        <h2 className="text-4xl md:text-5xl font-bold text-[#d4af37] mb-6">
+          Your Private Sanctuary Awaits
+        </h2>
+        <p className="text-xl text-white/90 max-w-2xl mx-auto mb-10 leading-relaxed">
+          Step into a world where African warmth meets English elegance. 
+          Each themed suite is a haven of quiet luxury — air-conditioned, 
+          en-suite, and appointed with DStv, plush linens, and the promise 
+          of personalised royal treatment from the moment you arrive.
+        </p>
+        <Button variant="default" className="bg-[#d4af37] text-[#111827] hover:bg-[#c49f2e] text-lg px-8 py-4">
+          <a href="/booking">Book a Room</a>
+        </Button>
+      </div>
+    </section>
+  )
+}