Deploy

src/components/sections/ExclusiveBookingCtaSection.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import Button from '@/components/ui/Button'
+import { Sparkles, Star } from 'lucide-react'
+
+export default function ExclusiveBookingCtaSection() {
+  return (
+    <section data-vula-section="exclusivebookingcta" id="book-direct" className="bg-[#36454F] py-24 px-6">
+      <div className="max-w-4xl mx-auto text-center">
+        <Sparkles className="w-10 h-10 text-[#d4af37] mx-auto mb-6" />
+        <h2 className="text-4xl md:text-5xl font-light text-[#f2f4f5] mb-6 leading-tight">
+          <span className="text-[#d4af37]">Reserve</span> your suite directly
+        </h2>
+        <p className="text-[#d4dadd] text-lg mb-8 max-w-[44ch] mx-auto leading-relaxed">
+          Book with us and receive the best available rate, a personalised
+          itinerary tailored to your preferences, and a curated welcome
+          amenity upon arrival.
+        </p>
+        <div className="flex flex-col sm:flex-row justify-center gap-4 mb-10">
+          <div className="flex items-center gap-3 bg-[#2a3a44] rounded-2xl px-5 py-3 text-left">
+            <Star className="w-6 h-6 text-[#16a34a]" />
+            <span className="text-sm text-[#f2f4f5]">Best rate guarantee</span>
+          </div>
+          <div className="flex items-center gap-3 bg-[#2a3a44] rounded-2xl px-5 py-3 text-left">
+            <Sparkles className="w-6 h-6 text-[#16a34a]" />
+            <span className="text-sm text-[#f2f4f5]">Personalised itinerary</span>
+          </div>
+        </div>
+        <Button variant="default" size="lg" className="bg-[#d4af37] hover:bg-[#be9c2f] text-[#1f2b33] font-medium px-10 py-4 rounded-full shadow-lg hover:shadow-[#d4af37]/30 transition-all duration-200 ease-out">
+          <a href="/booking" className="inline-block">Secure Your Stay</a>
+        </Button>
+      </div>
+    </section>
+  )
+}