bender/4c679f93-48dc-4cae-a068-01909fa9b249
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Update src/app/booking/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-14 05:42:16 +00:00
parent bfe2bb0d4f
commit 924549141e
1 changed files with 225 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
src/app/booking/page.tsx
View File

@@ -2,19 +2,30 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Calendar, Mail, Phone, MapPin } from 'lucide-react';
import { useState } from 'react';
import { Heart, Mail, Phone, MapPin, Facebook, Instagram, Twitter } from 'lucide-react';
export default function BookingPage() {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
eventDate: '',
eventType: '',
guestCount: '',
message: '',
});
const navItems = [
{ name: "Home", id: "/" },
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Gallery", id: "gallery" },
{ name: "Packages", id: "packages" },
{ name: "About", id: "about" },
{ name: "Booking", id: "/booking" },
{ name: "Contact", id: "/contact" },
{ name: "Booking", id: "booking" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
@@ -55,9 +66,24 @@ export default function BookingPage() {
},
];
const handleBookingSubmit = (data: Record<string, string>) => {
console.log("Booking inquiry:", data);
// Handle form submission
const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log('Booking form submitted:', formData);
alert('Thank you for your booking request! We will contact you soon.');
setFormData({
name: '',
email: '',
phone: '',
eventDate: '',
eventType: '',
guestCount: '',
message: '',
});
};
return (
@@ -82,58 +108,197 @@ export default function BookingPage() {
/>
</div>
<div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 lg:px-8 min-h-screen py-12 sm:py-16 lg:py-20">
<ContactSplitForm
title="Get Your Quote - Book Face Painting Services"
description="Ready to add color and magic to your event? Fill out our booking form and tell us about your special occasion. We'll review your request and get back to you within 24 hours with a personalized quote and availability."
imageSrc="http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1"
imageAlt="Professional face painting artist at work"
mediaAnimation="blur-reveal"
mediaPosition="right"
useInvertedBackground={false}
inputs={[
{
name: "eventName", type: "text", placeholder: "Event Name (e.g., Sarah's Birthday)", required: true,
className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
{
name: "eventDate", type: "date", placeholder: "Event Date", required: true,
className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"},
{
name: "eventTime", type: "time", placeholder: "Event Time", required: true,
className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"},
{
name: "eventLocation", type: "text", placeholder: "Event Location / Venue Name", required: true,
className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
{
name: "eventType", type: "text", placeholder: "Event Type (Birthday, Festival, Corporate, Wedding, etc.)", required: true,
className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
{
name: "guestCount", type: "number", placeholder: "Expected Number of Guests", required: true,
className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
{
name: "contactName", type: "text", placeholder: "Your Full Name", required: true,
className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
{
name: "contactEmail", type: "email", placeholder: "Your Email Address", required: true,
className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
{
name: "contactPhone", type: "tel", placeholder: "Your Phone Number", required: true,
className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
]}
textarea={{
name: "specialRequests", placeholder: "Tell us about your event! Share details about themes, design preferences, special requests, or any questions you have.", rows: 5,
required: false,
className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500 resize-none"}}
buttonText="Request Quote"
onSubmit={handleBookingSubmit}
ariaLabel="Booking request form"
containerClassName="gap-8 lg:gap-12"
titleClassName="text-3xl sm:text-4xl lg:text-5xl font-extrabold"
descriptionClassName="text-base sm:text-lg opacity-90 max-w-2xl"
formCardClassName="bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 rounded-2xl p-6 sm:p-8 border-2 border-purple-200 shadow-lg"
buttonClassName="bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 hover:from-purple-600 hover:via-pink-600 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 w-full sm:w-auto"
buttonTextClassName="text-white font-extrabold"
/>
<div id="booking-hero" data-section="booking-hero" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24 lg:py-32">
<div className="max-w-4xl mx-auto">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 text-center bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
Book Your Event
</h1>
<p className="text-lg md:text-xl text-center opacity-80 mb-12 max-w-2xl mx-auto">
Request a quote for professional face painting and body art services. Fill out the form below and we'll get back to you with availability and pricing.
</p>
</div>
</div>
<div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20">
<div className="max-w-2xl mx-auto">
<div className="rounded-lg p-8 md:p-12 bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 border-2 border-purple-200 shadow-lg">
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Full Name *</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleFormChange}
required
placeholder="Your name"
className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
/>
</div>
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Email Address *</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleFormChange}
required
placeholder="your@email.com"
className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Phone Number *</label>
<input
type="tel"
name="phone"
value={formData.phone}
onChange={handleFormChange}
required
placeholder="(555) 123-4567"
className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
/>
</div>
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Event Date *</label>
<input
type="date"
name="eventDate"
value={formData.eventDate}
onChange={handleFormChange}
required
className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800"
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Event Type *</label>
<select
name="eventType"
value={formData.eventType}
onChange={handleFormChange}
required
className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800"
>
<option value="">Select event type</option>
<option value="birthday-party">Birthday Party</option>
<option value="festival">Festival/Outdoor Event</option>
<option value="corporate">Corporate Event</option>
<option value="wedding">Wedding/Reception</option>
<option value="school-event">School Event</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Number of Guests *</label>
<input
type="number"
name="guestCount"
value={formData.guestCount}
onChange={handleFormChange}
required
placeholder="Approximate guest count"
min="1"
className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
/>
</div>
</div>
<div>
<label className="block text-sm font-semibold mb-2 text-gray-800">Message / Special Requests</label>
<textarea
name="message"
value={formData.message}
onChange={handleFormChange}
placeholder="Tell us about your event and any special requests..."
rows={5}
className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500 resize-none"
/>
</div>
<button
type="submit"
className="w-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg text-lg"
>
Get Your Quote
</button>
</form>
</div>
</div>
</div>
<div id="booking-info" data-section="booking-info" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20 bg-gradient-to-b from-transparent via-purple-50 to-transparent">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-12">Get In Touch</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="rounded-lg p-8 bg-white border-2 border-pink-200 shadow-lg text-center hover:shadow-xl transition-shadow">
<Phone className="w-12 h-12 mx-auto mb-4 text-pink-500" />
<h3 className="text-xl font-bold mb-2">Phone</h3>
<p className="text-gray-700 mb-4">Call us for quick inquiries</p>
<a href="tel:+15551234567" className="text-pink-500 font-semibold hover:text-pink-700 transition-colors">
(555) 123-4567
</a>
</div>
<div className="rounded-lg p-8 bg-white border-2 border-purple-200 shadow-lg text-center hover:shadow-xl transition-shadow">
<Mail className="w-12 h-12 mx-auto mb-4 text-purple-500" />
<h3 className="text-xl font-bold mb-2">Email</h3>
<p className="text-gray-700 mb-4">Send us your booking details</p>
<a href="mailto:paintasy@events.com" className="text-purple-500 font-semibold hover:text-purple-700 transition-colors">
paintasy@events.com
</a>
</div>
<div className="rounded-lg p-8 bg-white border-2 border-indigo-200 shadow-lg text-center hover:shadow-xl transition-shadow">
<MapPin className="w-12 h-12 mx-auto mb-4 text-indigo-500" />
<h3 className="text-xl font-bold mb-2">Location</h3>
<p className="text-gray-700 mb-4">We service events in your area</p>
<p className="text-indigo-500 font-semibold">
Regional Coverage Available
</p>
</div>
</div>
<div className="mt-16 text-center">
<h3 className="text-2xl font-bold mb-6">Follow Us On Social Media</h3>
<div className="flex justify-center gap-6 flex-wrap">
<a
href="https://facebook.com"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-blue-500 text-white font-semibold hover:bg-blue-600 transition-colors shadow-lg hover:shadow-xl"
>
<Facebook className="w-5 h-5" />
Facebook
</a>
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 text-white font-semibold hover:from-pink-600 hover:to-purple-600 transition-colors shadow-lg hover:shadow-xl"
>
<Instagram className="w-5 h-5" />
Instagram
</a>
<a
href="https://tiktok.com"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gray-900 text-white font-semibold hover:bg-gray-800 transition-colors shadow-lg hover:shadow-xl"
>
<Twitter className="w-5 h-5" />
TikTok
</a>
</div>
</div>
</div>
</div>
<div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6 lg:px-8">