Deploy

src/components/sections/DirectBookingCTASection.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import Link from 'next/link'
+
+const CURRENCY_SYMBOLS: Record<string, string> = { zar: 'R', usd: '$', eur: '€', gbp: '£', kes: 'KSh', ngn: '₦', ghs: '₵' }
+
+const formatPrice = (amount: number, code?: string) => {
+  const sym = CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '')
+  return `${sym}${(amount / 100).toFixed(2)}`
+}
+
+export default function DirectBookingCTASection() {
+  return (
+    <section data-vula-section="directbookingcta" id="direct-booking-cta" className="relative py-24 lg:py-28 bg-[#17170f] overflow-hidden">
+      {/* subtle background texture overlay */}
+      <div className="absolute inset-0 opacity-30"></div>
+      <div className="relative container mx-auto px-4 text-center">
+        {/* Eyebrow with accent rules */}
+        <div className="flex items-center justify-center gap-4 mb-6">
+          <span className="h-px w-14 bg-[#6b8e23]"></span>
+          <span className="text-[#6b8e23] text-sm uppercase tracking-[0.2em]" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>Book Direct</span>
+          <span className="h-px w-14 bg-[#6b8e23]"></span>
+        </div>
+        {/* Headline: benefit, not name */}
+        <h2 className="text-5xl lg:text-6xl text-[#eeeee7] font-light leading-tight mb-4" style={{ fontFamily: 'var(--font-cormorant, "Cormorant Garamond", serif)' }}>
+          Reserve Your <span className="italic text-[#6b8e23]">Sanctuary</span>
+        </h2>
+        <p className="text-[#eeeee7]/70 max-w-2xl mx-auto mb-8 text-sm uppercase tracking-widest" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>
+          The best rates and most personal touches await when you book direct.
+        </p>
+        {/* CTA Button */}
+        <div className="mb-4">
+          <Link
+            href="#booking"
+            className="inline-block bg-[#6b8e23] hover:bg-[#5a7a1c] text-[#eeeee7] px-10 py-4 text-lg uppercase tracking-widest transition-all duration-200 ease-out"
+            style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}
+          >
+            Reserve Your Sanctuary
+          </Link>
+        </div>
+        {/* Subtle availability cue */}
+        <p className="text-[#eeeee7]/50 text-xs uppercase tracking-wider" style={{ fontFamily: 'var(--font-jost, Jost, sans-serif)' }}>
+          Only 2 suites remaining for February — secure your stay
+        </p>
+      </div>
+    </section>
+  )
+}