Deploy

src/components/sections/ReserveYourSuiteSection.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useState } from 'react';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import Badge from '@/components/ui/Badge';
+import { Calendar, Check, Shield } from 'lucide-react';
+import Link from 'next/link';
+
+export default function ReserveYourSuiteSection() {
+  const [checkIn, setCheckIn] = useState('');
+  const [checkOut, setCheckOut] = useState('');
+
+  return (
+    <section data-vula-section="reserveyoursuite" id="book-now" className="bg-[#f9f4f4] py-20 px-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-10">
+          <h2 className="text-4xl md:text-5xl font-bold text-[#210d0d] mb-4 font-sans">
+            Secure your Maasai Mara escape
+          </h2>
+          <p className="text-lg text-[#210d0d]/70 italic font-serif max-w-2xl mx-auto">
+            Best rate guarantee &mdash; cancel free up to 48 hours before check-in.
+          </p>
+        </div>
+
+        <div className="bg-white rounded-2xl shadow-lg p-8 md:p-10 max-w-lg mx-auto">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+            <Input
+              label="Check-in"
+              type="date"
+              value={checkIn}
+              onChange={(e) => setCheckIn(e.target.value)}
+              className="w-full"
+            />
+            <Input
+              label="Check-out"
+              type="date"
+              value={checkOut}
+              onChange={(e) => setCheckOut(e.target.value)}
+              className="w-full"
+            />
+          </div>
+          <Link href="/booking" className="block w-full">
+            <Button variant="default" size="lg" className="w-full text-lg">
+              Check Availability
+            </Button>
+          </Link>
+          <div className="flex flex-wrap justify-center gap-3 mt-6">
+            <Badge variant="outline" className="flex items-center gap-1 text-sm px-3 py-1 border-[#d4af37] text-[#d4af37]">
+              <Shield className="w-4 h-4" /> Best Rate Guarantee
+            </Badge>
+            <Badge variant="outline" className="flex items-center gap-1 text-sm px-3 py-1 border-[#0f52ba] text-[#0f52ba]">
+              <Check className="w-4 h-4" /> Free Cancellation
+            </Badge>
+            <Badge variant="outline" className="flex items-center gap-1 text-sm px-3 py-1 border-[#dc2626] text-[#dc2626]">
+              <Calendar className="w-4 h-4" /> Instant Confirmation
+            </Badge>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}