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

Add src/app/booking/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-14 05:26:51 +00:00
parent e464a9af91
commit 8769bf441f
1 changed files with 159 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/app/booking/page.tsx Normal file
View File

@@ -0,0 +1,159 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactForm from '@/components/form/ContactForm';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Calendar } from 'lucide-react';
export default function BookingPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "Gallery", id: "/gallery" },
{ name: "Packages", id: "packages" },
{ name: "About", id: "about" },
{ name: "Book Event", 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" },
{ label: "Gallery", href: "/gallery" },
{ label: "Packages", href: "/packages" },
{ label: "FAQ", href: "#faq" },
{ 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-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-16">
<div className="max-w-2xl mx-auto">
<ContactForm
title="Book Your Event"
description="Get started with a quick inquiry. We'll follow up with you within 24 hours with availability and pricing details tailored to your event."
tag="Lead Generation"
tagIcon={Calendar}
inputPlaceholder="Your email address"
buttonText="Get Started"
termsText="By submitting this form, you agree to be contacted about your event booking inquiry. We respect your privacy."
centered={true}
onSubmit={(email) => {
console.log('Booking inquiry from:', email);
}}
className="w-full"
titleClassName="text-4xl font-extrabold mb-4"
descriptionClassName="text-lg opacity-90 mb-8"
tagClassName="mb-4"
formWrapperClassName="mt-8"
/>
</div>
</div>
<div id="booking-features" data-section="booking-features" className="mx-auto px-4 md:px-6 py-16">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-extrabold mb-12 text-center">Our Booking Process</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg">
<div className="text-4xl font-extrabold text-blue-600 mb-4">1</div>
<h3 className="text-xl font-bold mb-3">Submit Inquiry</h3>
<p className="text-opacity-80">Fill out our quick booking form with your event details and preferred date.</p>
</div>
<div className="p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg">
<div className="text-4xl font-extrabold text-purple-600 mb-4">2</div>
<h3 className="text-xl font-bold mb-3">Get Quote</h3>
<p className="text-opacity-80">We'll review your event details and send you a custom quote within 24 hours.</p>
</div>
<div className="p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg">
<div className="text-4xl font-extrabold text-green-600 mb-4">3</div>
<h3 className="text-xl font-bold mb-3">Confirm Booking</h3>
<p className="text-opacity-80">Once confirmed, we'll send you all the details and setup information for your event.</p>
</div>
</div>
</div>
</div>
<div id="booking-contact" data-section="booking-contact" className="mx-auto px-4 md:px-6">
<ContactText
text="Prefer to discuss your event first? Contact us directly and let's create something amazing together."
animationType="background-highlight"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
buttons={[
{ text: "Call Us", href: "tel:+15551234567" },
{ text: "Email Us", href: "mailto:paintasy@events.com" },
]}
ariaLabel="Booking contact call-to-action section"
containerClassName="py-16"
contentClassName="max-w-3xl mx-auto"
textClassName="text-4xl font-extrabold text-center"
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
/>
</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>
);
}