Deploy

src/components/sections/UnhurriedBookingCTASection.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+import { Phone } from 'lucide-react'
+
+export default function UnhurriedBookingCTASection() {
+  const whatsappNumber = '+27823456789'
+  const whatsappLink = `https://wa.me/${whatsappNumber.replace(/\+/g, '').replace(/\s/g, '')}`
+
+  return (
+    <section data-vula-section="unhurriedbookingcta" id="book-now" className="relative py-24 overflow-hidden bg-[#f7f9f4]">
+      <div className="absolute inset-0 z-0">
+        <Image
+          src="https://images.pexels.com/photos/29684877/pexels-photo-29684877.jpeg?auto=compress&cs=tinysrgb&h=400&w=800&fit=crop"
+          alt="Chalet veranda at dawn"
+          fill
+          sizes="100vw"
+          className="object-cover opacity-30"
+        />
+      </div>
+      <div className="relative z-10 max-w-3xl mx-auto px-6 text-center">
+        <h2 className="text-3xl md:text-4xl font-bold text-[#1b210d] mb-4 leading-snug">
+          Ready to trade city noise for the call of a fish eagle?
+        </h2>
+        <p className="text-lg text-[#1b210d]/80 mb-8 font-light">
+          A direct booking with us means no middleman, no pressure. Just the bushveld, a cold drink on the stoep, and the fireflies. Chat to us directly.
+        </p>
+        <a
+          href={whatsappLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-block"
+        >
+          <Button variant="default" size="lg" className="gap-2 bg-[#6b8e23] hover:bg-[#5a7a1f] text-white">
+            <Phone className="w-5 h-5" />
+            Enquire via WhatsApp
+          </Button>
+        </a>
+      </div>
+    </section>
+  )
+}