Add src/app/booking/page.tsx
This commit is contained in:
187
src/app/booking/page.tsx
Normal file
187
src/app/booking/page.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export const metadata = {
|
||||
title: "Book Your Event - Paintasy Face and Body Art", description: "Book professional face painting and body art services for your event. Easy booking form, flexible scheduling, and transparent pricing.", keywords: "book face painting, event booking, face painter booking, party entertainment booking"};
|
||||
|
||||
export default function BookingPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
eventDate: '',
|
||||
eventType: '',
|
||||
guestCount: '',
|
||||
eventDuration: '',
|
||||
message: '',
|
||||
});
|
||||
|
||||
const handleFormSubmit = (data: Record<string, string>) => {
|
||||
console.log('Booking form submitted:', data);
|
||||
setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
eventDate: '',
|
||||
eventType: '',
|
||||
guestCount: '',
|
||||
eventDuration: '',
|
||||
message: '',
|
||||
});
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/#services" },
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Packages", id: "/#packages-home" },
|
||||
{ name: "About", id: "/#about-home" },
|
||||
{ name: "Booking", id: "/booking" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Kids Party Face Painting", href: "/services" },
|
||||
{ label: "Festival Face Art", href: "/services" },
|
||||
{ label: "Corporate Events", href: "/services" },
|
||||
{ label: "Body Painting", href: "/services" },
|
||||
{ label: "Custom Designs", href: "/services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#about-home" },
|
||||
{ label: "Gallery", href: "/gallery" },
|
||||
{ label: "Packages", href: "/#packages-home" },
|
||||
{ label: "FAQ", href: "/#faq-home" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "TikTok", href: "https://tiktok.com" },
|
||||
{ label: "Email", href: "mailto:paintasy@events.com" },
|
||||
{ label: "Phone", href: "tel:+15551234567" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Service Areas", items: [
|
||||
{ label: "Local Events", href: "/contact" },
|
||||
{ label: "Regional Coverage", href: "/contact" },
|
||||
{ label: "Book Now", href: "/booking" },
|
||||
{ label: "Get Quote", href: "/contact" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="Paintasy"
|
||||
navItems={navItems}
|
||||
bottomLeftText="Creative Face & Body Art"
|
||||
bottomRightText="paintasy@events.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking-hero" data-section="booking-hero" className="mx-auto px-4 md:px-6">
|
||||
<HeroLogoBillboardSplit
|
||||
logoText="Book Your Event"
|
||||
description="Schedule professional face painting and body art for your special occasion. Choose your package, date, and let us handle the magic."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "#booking-form" },
|
||||
{ text: "View Packages", href: "/#packages-home" },
|
||||
]}
|
||||
layoutOrder="default"
|
||||
mediaAnimation="blur-reveal"
|
||||
ariaLabel="Booking page hero section"
|
||||
containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12 min-h-screen"
|
||||
logoContainerClassName="flex-1"
|
||||
descriptionClassName="text-lg opacity-90 max-w-2xl"
|
||||
buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6">
|
||||
<ContactSplitForm
|
||||
title="Request Your Booking"
|
||||
description="Fill out the form below with your event details. We'll get back to you within 24 hours to confirm availability and discuss your specific needs."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
{
|
||||
name: "phone", type: "tel", placeholder: "Your Phone Number", required: true,
|
||||
},
|
||||
{
|
||||
name: "eventDate", type: "date", placeholder: "Event Date", required: true,
|
||||
},
|
||||
{
|
||||
name: "eventType", type: "text", placeholder: "Event Type (Birthday, Festival, Corporate, etc.)", required: true,
|
||||
},
|
||||
{
|
||||
name: "guestCount", type: "number", placeholder: "Expected Number of Guests", required: true,
|
||||
},
|
||||
{
|
||||
name: "eventDuration", type: "text", placeholder: "Event Duration (e.g., 2 hours)", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Tell us more about your event and any specific requests (designs, themes, special requirements)", rows: 5,
|
||||
required: false,
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="blur-reveal"
|
||||
mediaPosition="right"
|
||||
buttonText="Submit Booking Request"
|
||||
onSubmit={handleFormSubmit}
|
||||
ariaLabel="Event booking form section"
|
||||
containerClassName="py-16 gap-12"
|
||||
formCardClassName="p-8"
|
||||
titleClassName="text-4xl font-extrabold"
|
||||
descriptionClassName="text-lg opacity-90"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
|
||||
bottomRightText="Professional Event Entertainment | Creative Services"
|
||||
ariaLabel="Site footer with links"
|
||||
containerClassName="gap-12"
|
||||
columnsClassName="grid-cols-2 lg:grid-cols-4"
|
||||
columnTitleClassName="font-extrabold text-lg"
|
||||
columnItemClassName="hover:opacity-70 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user