Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,162 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { Calendar, MessageSquare, Users } from 'lucide-react'
|
||||||
|
import Button from '@/components/ui/Button'
|
||||||
|
import Input from '@/components/ui/Input'
|
||||||
|
|
||||||
|
export default function BookingSection() {
|
||||||
|
const [form, setForm] = useState({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
checkIn: '',
|
||||||
|
checkOut: '',
|
||||||
|
guests: 2,
|
||||||
|
notes: ''
|
||||||
|
})
|
||||||
|
const [submitted, setSubmitted] = useState(false)
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
|
const { name, value } = e.target
|
||||||
|
setForm(prev => ({ ...prev, [name]: value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
// Simulate booking submission
|
||||||
|
setSubmitted(true)
|
||||||
|
setTimeout(() => setSubmitted(false), 3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section data-vula-section="booking" id="booking" className="py-20 lg:py-28 bg-white">
|
||||||
|
<div className="container mx-auto px-4 max-w-4xl">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<p className="text-sm font-semibold tracking-widest uppercase text-[#d4af37] mb-2">Reserve Your Stay</p>
|
||||||
|
<h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-[#36454F]">
|
||||||
|
Book Your Nguni Lodge Experience
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-lg leading-relaxed text-neutral-600 max-w-2xl mx-auto">
|
||||||
|
Secure your exclusive bush retreat in KwaZulu-Natal. Complete the form below and our team will confirm your reservation within 24 hours.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{submitted ? (
|
||||||
|
<div className="rounded-xl border border-[#6b8e23]/30 bg-[#6b8e23]/10 p-8 text-center">
|
||||||
|
<div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[#6b8e23] text-white mb-4">
|
||||||
|
<MessageSquare className="w-7 h-7" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-[#36454F]">Request Received</h3>
|
||||||
|
<p className="mt-2 text-neutral-600">We will be in touch within 24 hours to confirm your dates. Thank you for choosing Nguni Lodge.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] p-8">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-neutral-700">Full Name</label>
|
||||||
|
<Input
|
||||||
|
name="name"
|
||||||
|
value={form.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="e.g. Thandi Mokoena"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-neutral-700">Email Address</label>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={form.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="guest@example.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-neutral-700">Phone Number</label>
|
||||||
|
<Input
|
||||||
|
type="tel"
|
||||||
|
name="phone"
|
||||||
|
value={form.phone}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="+27 XX XXX XXXX"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-neutral-700">Number of Guests</label>
|
||||||
|
<div className="relative">
|
||||||
|
<Users className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
name="guests"
|
||||||
|
value={form.guests}
|
||||||
|
onChange={handleChange}
|
||||||
|
min={1}
|
||||||
|
max={12}
|
||||||
|
className="pl-10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-neutral-700">Check-in Date</label>
|
||||||
|
<div className="relative">
|
||||||
|
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
name="checkIn"
|
||||||
|
value={form.checkIn}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="pl-10"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-neutral-700">Check-out Date</label>
|
||||||
|
<div className="relative">
|
||||||
|
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" />
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
name="checkOut"
|
||||||
|
value={form.checkOut}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="pl-10"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 space-y-2">
|
||||||
|
<label className="text-sm font-medium text-neutral-700">Special Requests</label>
|
||||||
|
<textarea
|
||||||
|
name="notes"
|
||||||
|
value={form.notes}
|
||||||
|
onChange={handleChange}
|
||||||
|
rows={3}
|
||||||
|
placeholder="Dietary requirements, room preferences, celebration plans…"
|
||||||
|
className="w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm placeholder-neutral-400 focus:border-[#d4af37] focus:ring-1 focus:ring-[#d4af37] transition-colors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 flex justify-center">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="bg-[#d4af37] text-white px-10 py-3 rounded-lg font-semibold hover:opacity-90 transition-all duration-200 text-base"
|
||||||
|
>
|
||||||
|
Send Booking Request
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="mt-4 text-center text-xs text-neutral-400">
|
||||||
|
We respect your privacy. Your information will only be used to process your booking.
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user