Update src/app/booking/page.tsx

Merge version_2 into main

src/app/booking/page.tsx

@@ -1,20 +1,33 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
 
 export default function BookingPage() {
+  const handleBookingSubmit = (email: string) => {
+    alert(`Booking request received for: ${email}. We will contact you soon!`);
+  };
+
   return (
     <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="background-highlight" borderRadius="pill" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen brandName="Divya Jyot" navItems={[{ name: "Home", id: "/" }, { name: "Book Now", id: "/booking" }]} />
+        <NavbarStyleApple brandName="Divya Jyot" navItems={[{ name: "Home", id: "/" }, { name: "Book Now", id: "/booking" }]} />
       </div>
       <div id="booking-form" data-section="booking-form">
-        <ContactSplitForm title="Book Your Slot" description="Select your sport, date, and time." imageSrc="http://img.b2bpic.net/free-photo/abstract-dark-diagonal-stripes-background_84443-82398.jpg" useInvertedBackground={false} inputs={[{ name: "name", type: "text", placeholder: "Name", required: true }, { name: "phone", type: "tel", placeholder: "Phone Number", required: true }, { name: "date", type: "date", placeholder: "Select Date", required: true }, { name: "time", type: "time", placeholder: "Select Time Slot", required: true }]} multiSelect={{ name: "sport", label: "Select Sport", options: ["Box Cricket", "Football", "Basketball", "Pickleball"] }} buttonText="Confirm Booking" />
+        <ContactSplit 
+          tag="Reservation"
+          title="Book Your Court"
+          description="Fill out the details below to secure your preferred slot at Divya Jyot Sports Academy. Our team will confirm your booking shortly."
+          imageSrc="http://img.b2bpic.net/free-photo/sports-equipment-arrangement-view_23-2149129583.jpg?_wi=1"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          buttonText="Confirm Booking"
+          onSubmit={handleBookingSubmit}
+        />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBase logoText="Divya Jyot" columns={[{ title: "Academy", items: [{ label: "About Us", href: "#" }, { label: "Pricing", href: "#" }] }, { title: "Support", items: [{ label: "Contact", href: "#" }, { label: "FAQ", href: "#" }] }]} />
+        <FooterMedia logoText="Divya Jyot" imageSrc="http://img.b2bpic.net/free-photo/sports-equipment-arrangement-view_23-2149129583.jpg?_wi=2" columns={[{ title: "Academy", items: [{ label: "About Us", href: "/" }, { label: "Pricing", href: "/" }] }, { title: "Support", items: [{ label: "Contact", href: "/" }, { label: "FAQ", href: "/" }] }]} />
       </div>
     </ThemeProvider>
   );

src/app/layout.tsx

@@ -19,8 +19,8 @@ const inter = Inter({
 });
 
 export const metadata: Metadata = {
-  title: 'Divya Jyot Sports Academy | Book Your Slot',
-  description: 'Divya Jyot Sports Academy - The premier spot for box cricket, football, basketball, and pickleball in the city.',
+  title: 'Book Your Court | Divya Jyot',
+  description: 'Secure your sports court at Divya Jyot Sports Academy.',
   openGraph: {
     "title": "Divya Jyot Sports Academy",
     "siteName": "Divya Jyot Sports Academy"