From f680cb5cc48a84e6c4f2906b0d8bb6fc840e8fd4 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 14 Mar 2026 05:26:27 +0000
Subject: [PATCH] Add src/app/booking/page.tsx

---
 src/app/booking/page.tsx | 159 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 src/app/booking/page.tsx

diff --git a/src/app/booking/page.tsx b/src/app/booking/page.tsx
new file mode 100644
index 0000000..5129ac5
--- /dev/null
+++ b/src/app/booking/page.tsx
@@ -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>
+  );
+}
\ No newline at end of file