From 2a31da71a901de929135bdfd2f8ad2ace09691da Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 14 Mar 2026 05:38:46 +0000
Subject: [PATCH] Switch to version 3: modified src/app/booking/page.tsx

---
 src/app/booking/page.tsx | 347 +++++++++++++++++++++++++++------------
 1 file changed, 246 insertions(+), 101 deletions(-)

diff --git a/src/app/booking/page.tsx b/src/app/booking/page.tsx
index 8951b91..a280845 100644
--- a/src/app/booking/page.tsx
+++ b/src/app/booking/page.tsx
@@ -2,48 +2,17 @@
 
 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"};
+import { Calendar, Clock, Users, Palette, Phone, Mail } from 'lucide-react';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 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: "Home", id: "home" },
+    { name: "Services", id: "services" },
     { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "/#packages-home" },
-    { name: "About", id: "/#about-home" },
-    { name: "Booking", id: "/booking" },
+    { name: "Packages", id: "/packages" },
+    { name: "About", id: "about" },
     { name: "Contact", id: "/contact" },
   ];
 
@@ -59,10 +28,10 @@ export default function BookingPage() {
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "/#about-home" },
+        { label: "About Us", href: "/about" },
         { label: "Gallery", href: "/gallery" },
-        { label: "Packages", href: "/#packages-home" },
-        { label: "FAQ", href: "/#faq-home" },
+        { label: "Packages", href: "/packages" },
+        { label: "FAQ", href: "#faq" },
         { label: "Contact", href: "/contact" },
       ],
     },
@@ -79,12 +48,54 @@ export default function BookingPage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/booking" },
+        { label: "Book Now", href: "/packages" },
         { 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 { name, value } = e.target;
+    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);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -107,67 +118,201 @@ export default function BookingPage() {
         />
       </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 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="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"
-        />
+        {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 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>
+
+              <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>
+            </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>
+                <label htmlFor="eventType" className="block text-sm font-semibold mb-2">Event Type *</label>
+                <select
+                  id="eventType"
+                  name="eventType"
+                  value={formData.eventType}
+                  onChange={handleChange}
+                  required
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                >
+                  <option value="">Select an event type</option>
+                  <option value="birthday">Birthday Party</option>
+                  <option value="festival">Festival or Outdoor Event</option>
+                  <option value="corporate">Corporate Event</option>
+                  <option value="wedding">Wedding</option>
+                  <option value="school">School Event</option>
+                  <option value="other">Other</option>
+                </select>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="eventDate" className="block text-sm font-semibold mb-2">Event Date *</label>
+                  <input
+                    id="eventDate"
+                    type="date"
+                    name="eventDate"
+                    value={formData.eventDate}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                  />
+                </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>
+                  <input
+                    id="eventTime"
+                    type="time"
+                    name="eventTime"
+                    value={formData.eventTime}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                  />
+                </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"
+                />
+              </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"
+              >
+                <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>
       </div>
 
       <div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6">