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