Deploy

src/components/sections/BookingCTASection.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import Button from '@/components/ui/Button'
+
+export default function BookingCTASection() {
+  return (
+    <section data-vula-section="bookingcta" id="booking-cta" className="relative bg-[#c0653a] text-white py-20 px-6 overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-r from-[#c0653a]/80 to-[#d4af37]/20 z-0" />
+      <div className="relative z-10 max-w-4xl mx-auto text-center">
+        <h2 className="text-4xl md:text-5xl font-bold mb-6 font-bricolage">Ready to Experience Venda?</h2>
+        <p className="text-lg md:text-xl mb-8 text-white/90 max-w-2xl mx-auto font-lora italic">
+          The baobab trees are waiting, the fire is lit, and your suite is ready. Book now and feel the warmth of Limpopo.
+        </p>
+        <Button
+          variant="accent"
+          size="lg"
+          className="bg-[#18181b] text-white hover:bg-[#18181b]/90 px-8 py-3 text-lg"
+          asChild
+        >
+          <a href="/booking">Reserve Your Stay</a>
+        </Button>
+      </div>
+      {/* Subtle decorative border using pseudo-element - safe Tailwind */}
+      <div className="absolute bottom-0 left-0 right-0 h-2 bg-[#d4af37]/40" />
+    </section>
+  )
+}