Update src/app/booking/page.tsx
This commit is contained in:
@@ -2,17 +2,31 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import { useState } from 'react';
|
||||
import { Calendar, Clock, Users, Palette, Phone, Mail } from 'lucide-react';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { useState } from 'react';
|
||||
import { Calendar, Clock, Users, Palette, CheckCircle } from 'lucide-react';
|
||||
|
||||
export default function BookingPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
eventType: '',
|
||||
eventDate: '',
|
||||
eventTime: '',
|
||||
guestCount: '',
|
||||
budget: '',
|
||||
notes: '',
|
||||
});
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/#services" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Packages", id: "/packages" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Packages", id: "/#packages" },
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Booking", id: "/booking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
@@ -28,10 +42,10 @@ export default function BookingPage() {
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/packages" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Packages", href: "/#packages" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
@@ -48,54 +62,35 @@ export default function BookingPage() {
|
||||
title: "Service Areas", items: [
|
||||
{ label: "Local Events", href: "/contact" },
|
||||
{ label: "Regional Coverage", href: "/contact" },
|
||||
{ label: "Book Now", href: "/packages" },
|
||||
{ label: "Book Now", href: "/booking" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
eventType: '',
|
||||
eventDate: '',
|
||||
eventTime: '',
|
||||
guestCount: '',
|
||||
serviceType: '',
|
||||
additionalNotes: '',
|
||||
});
|
||||
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log('Form submitted:', formData);
|
||||
setSubmitted(true);
|
||||
setTimeout(() => {
|
||||
setFormData({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
eventType: '',
|
||||
eventDate: '',
|
||||
eventTime: '',
|
||||
guestCount: '',
|
||||
serviceType: '',
|
||||
additionalNotes: '',
|
||||
});
|
||||
setSubmitted(false);
|
||||
}, 3000);
|
||||
setTimeout(() => setSubmitted(false), 5000);
|
||||
};
|
||||
|
||||
const availableDates = [
|
||||
{ date: '2025-02-15', available: true },
|
||||
{ date: '2025-02-16', available: false },
|
||||
{ date: '2025-02-17', available: true },
|
||||
{ date: '2025-02-22', available: true },
|
||||
{ date: '2025-02-23', available: true },
|
||||
{ date: '2025-03-01', available: true },
|
||||
{ date: '2025-03-02', available: false },
|
||||
{ date: '2025-03-08', available: true },
|
||||
{ date: '2025-03-09', available: true },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -118,201 +113,183 @@ export default function BookingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-20 max-w-2xl">
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl font-extrabold mb-4">Book Your Event</h1>
|
||||
<p className="text-lg opacity-90 mb-8">Complete this form to request a booking for professional face and body art services at your event. We'll get back to you within 24 hours with availability and pricing details.</p>
|
||||
</div>
|
||||
<div id="hero-booking" data-section="hero-booking" className="mx-auto px-4 md:px-6">
|
||||
<HeroLogo
|
||||
logoText="Event Booking"
|
||||
description="Secure your date and customize your face painting and body art experience. Check availability, fill out your booking form, and let's create something amazing."
|
||||
buttons={[{ text: "Scroll to Book", href: "#booking-form" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
showDimOverlay={false}
|
||||
ariaLabel="Booking page hero section"
|
||||
className="min-h-screen flex items-center justify-center"
|
||||
containerClassName="text-center"
|
||||
descriptionClassName="text-lg opacity-90 max-w-2xl mx-auto"
|
||||
logoContainerClassName="mb-6"
|
||||
logoClassName="text-5xl md:text-6xl font-extrabold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{submitted && (
|
||||
<div className="mb-6 p-4 bg-green-100 border border-green-300 rounded-lg text-green-800">
|
||||
<p className="font-semibold">Thank you! Your booking request has been submitted. We'll contact you soon to confirm details.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Contact Information Section */}
|
||||
<div className="border-b pb-6">
|
||||
<h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
|
||||
<Mail className="w-5 h-5" />
|
||||
Contact Information
|
||||
</h2>
|
||||
|
||||
<div id="availability-calendar" data-section="availability-calendar" className="mx-auto px-4 md:px-6 py-16">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-4xl font-extrabold mb-4 text-center">Availability Calendar</h2>
|
||||
<p className="text-lg opacity-90 text-center mb-12 max-w-2xl mx-auto">Check our availability and select your preferred event date. Green indicates available dates, red shows booked slots.</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="fullName" className="block text-sm font-semibold mb-2">Full Name *</label>
|
||||
<input
|
||||
id="fullName"
|
||||
type="text"
|
||||
name="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="Your full name"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<div className="flex items-center gap-3 p-3 bg-green-100 rounded-lg">
|
||||
<div className="w-4 h-4 bg-green-500 rounded"></div>
|
||||
<span className="text-sm font-medium">Available</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-semibold mb-2">Email Address *</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="your.email@example.com"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-semibold mb-2">Phone Number *</label>
|
||||
<input
|
||||
id="phone"
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="(555) 123-4567"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
<div className="flex items-center gap-3 p-3 bg-red-100 rounded-lg">
|
||||
<div className="w-4 h-4 bg-red-500 rounded"></div>
|
||||
<span className="text-sm font-medium">Booked</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Event Details Section */}
|
||||
<div className="border-b pb-6">
|
||||
<h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5" />
|
||||
Event Details
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{availableDates.map((slot) => {
|
||||
const date = new Date(slot.date);
|
||||
return (
|
||||
<button
|
||||
key={slot.date}
|
||||
className={`p-3 rounded-lg font-semibold text-sm transition-all ${
|
||||
slot.available
|
||||
? 'bg-green-100 text-green-900 hover:bg-green-200 cursor-pointer'
|
||||
: 'bg-red-100 text-red-900 cursor-not-allowed opacity-50'
|
||||
}`}
|
||||
disabled={!slot.available}
|
||||
>
|
||||
{date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-16">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h2 className="text-4xl font-extrabold mb-4 text-center">Booking Form</h2>
|
||||
<p className="text-lg opacity-90 text-center mb-12">Tell us about your event and we'll customize the perfect package for you.</p>
|
||||
|
||||
{submitted ? (
|
||||
<div className="bg-green-100 border-2 border-green-500 rounded-lg p-8 text-center">
|
||||
<CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4" />
|
||||
<h3 className="text-2xl font-bold mb-2">Booking Request Submitted!</h3>
|
||||
<p className="text-lg opacity-90">We'll contact you within 24 hours to confirm your event details and finalize your booking.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6 bg-white bg-opacity-5 backdrop-blur-sm p-8 rounded-lg border border-white border-opacity-10">
|
||||
<div>
|
||||
<label htmlFor="eventType" className="block text-sm font-semibold mb-2">Event Type *</label>
|
||||
<select
|
||||
id="eventType"
|
||||
name="eventType"
|
||||
value={formData.eventType}
|
||||
onChange={handleChange}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
>
|
||||
<option value="">Select an event type</option>
|
||||
<option value="">Select event type</option>
|
||||
<option value="birthday">Birthday Party</option>
|
||||
<option value="festival">Festival or Outdoor Event</option>
|
||||
<option value="festival">Festival/Outdoor Event</option>
|
||||
<option value="corporate">Corporate Event</option>
|
||||
<option value="wedding">Wedding</option>
|
||||
<option value="school">School Event</option>
|
||||
<option value="wedding">Wedding/Reception</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="eventDate" className="block text-sm font-semibold mb-2">Event Date *</label>
|
||||
<label htmlFor="eventDate" className="block text-sm font-semibold mb-2 flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" /> Event Date *
|
||||
</label>
|
||||
<input
|
||||
id="eventDate"
|
||||
type="date"
|
||||
id="eventDate"
|
||||
name="eventDate"
|
||||
value={formData.eventDate}
|
||||
onChange={handleChange}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="eventTime" className="block text-sm font-semibold mb-2 flex items-center gap-1">
|
||||
<Clock className="w-4 h-4" />
|
||||
Event Time *
|
||||
<label htmlFor="eventTime" className="block text-sm font-semibold mb-2 flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" /> Event Time *
|
||||
</label>
|
||||
<input
|
||||
id="eventTime"
|
||||
type="time"
|
||||
id="eventTime"
|
||||
name="eventTime"
|
||||
value={formData.eventTime}
|
||||
onChange={handleChange}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="guestCount" className="block text-sm font-semibold mb-2 flex items-center gap-2">
|
||||
<Users className="w-4 h-4" /> Expected Guest Count *
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="guestCount"
|
||||
name="guestCount"
|
||||
value={formData.guestCount}
|
||||
onChange={handleInputChange}
|
||||
placeholder="e.g., 30"
|
||||
required
|
||||
min="1"
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="budget" className="block text-sm font-semibold mb-2 flex items-center gap-2">
|
||||
<Palette className="w-4 h-4" /> Budget (Optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="budget"
|
||||
name="budget"
|
||||
value={formData.budget}
|
||||
onChange={handleInputChange}
|
||||
placeholder="e.g., $200-300"
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="guestCount" className="block text-sm font-semibold mb-2 flex items-center gap-1">
|
||||
<Users className="w-4 h-4" />
|
||||
Expected Guest Count *
|
||||
</label>
|
||||
<input
|
||||
id="guestCount"
|
||||
type="number"
|
||||
name="guestCount"
|
||||
value={formData.guestCount}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="e.g., 25"
|
||||
min="1"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
|
||||
<label htmlFor="notes" className="block text-sm font-semibold mb-2">Additional Notes</label>
|
||||
<textarea
|
||||
id="notes"
|
||||
name="notes"
|
||||
value={formData.notes}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Tell us about your vision, themes, special requests, etc."
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Service Selection Section */}
|
||||
<div className="border-b pb-6">
|
||||
<h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
|
||||
<Palette className="w-5 h-5" />
|
||||
Service Selection
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<label htmlFor="serviceType" className="block text-sm font-semibold mb-2">What service are you interested in? *</label>
|
||||
<select
|
||||
id="serviceType"
|
||||
name="serviceType"
|
||||
value={formData.serviceType}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<option value="">Select a service</option>
|
||||
<option value="face-painting">Face Painting Only</option>
|
||||
<option value="body-painting">Body Painting</option>
|
||||
<option value="both">Face & Body Painting</option>
|
||||
<option value="custom">Custom Design Package</option>
|
||||
<option value="unsure">Not sure - need consultation</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Notes Section */}
|
||||
<div>
|
||||
<label htmlFor="additionalNotes" className="block text-sm font-semibold mb-2">Additional Notes or Special Requests</label>
|
||||
<textarea
|
||||
id="additionalNotes"
|
||||
name="additionalNotes"
|
||||
value={formData.additionalNotes}
|
||||
onChange={handleChange}
|
||||
placeholder="Tell us about your vision, theme, any special requests, allergies, or other details that would help us serve you better."
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Submit Booking Request
|
||||
</button>
|
||||
<p className="text-xs text-gray-600 mt-3 text-center">We'll respond to your booking request within 24 hours with availability and pricing.</p>
|
||||
</div>
|
||||
</form>
|
||||
Submit Booking Request
|
||||
</button>
|
||||
|
||||
<p className="text-sm opacity-75 text-center">* Required fields. We'll contact you shortly to confirm and discuss details.</p>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6">
|
||||
@@ -329,4 +306,4 @@ export default function BookingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user