Deploy

src/components/sections/BookYourRoyalStaySection.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import Button from '@/components/ui/Button'
+import { Shield } from 'lucide-react'
+
+export default function BookYourRoyalStaySection() {
+  return (
+    <section
+      id="book-royal-stay"
+      data-vula-section="book-royal-stay"
+      className="relative bg-[#8b5a3c] py-20 px-6 overflow-hidden"
+    >
+      {/* Decorative golden accent bar */}
+      <div className="absolute top-0 left-0 w-full h-1 bg-[#d4af37]" />
+
+      <div className="max-w-3xl mx-auto text-center">
+        <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
+          Ready for Your Regal Retreat?
+        </h2>
+        <p className="text-lg md:text-xl text-white/80 mb-6 max-w-2xl mx-auto">
+          Every booking with KwaNtofoNtofo is secured with peace of mind – your private
+          en-suite, traditional breakfast, and tranquil garden views await.
+        </p>
+
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8">
+          <Button
+            variant="default"
+            size="lg"
+            className="bg-[#d4af37] hover:bg-[#c39d2e] text-white px-10 py-4 rounded-lg font-semibold shadow-[var(--shadow-lifted)] transition-all duration-200"
+            asChild
+          >
+            <a href="/booking">
+              Book Your Royal Stay
+            </a>
+          </Button>
+        </div>
+
+        <div className="flex items-center justify-center gap-2 text-white/70 text-sm">
+          <Shield className="w-4 h-4" />
+          <span>Secure booking &middot; Free cancellation up to 24h before arrival</span>
+        </div>
+      </div>
+    </section>
+  )
+}