Update src/app/booking/page.tsx

src/app/booking/page.tsx

@@ -2,12 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactFaq from '@/components/sections/contact/ContactFaq';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import { Calendar } from "lucide-react";
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
-export default function LandingPage() {
+export default function BookingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -22,72 +21,46 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Book Appointment",
-          id: "/booking",
-        },
-        {
-          name: "Status",
-          id: "/status",
-        },
-        {
-          name: "Admin",
-          id: "/admin",
-        },
-      ]}
-      brandName="HennaArt"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Book Appointment", id: "/booking" },
+              { name: "Status", id: "/status" },
+              { name: "Admin", id: "/admin" },
+            ]}
+            brandName="HennaArt"
+          />
+        </div>
 
-  <div id="booking-form" data-section="booking-form">
-      <ContactFaq
-      animationType="slide-up"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Availability",
-          content: "Bookings are open for this month. Check your preferred date in the calendar above.",
-        },
-      ]}
-      ctaTitle="Schedule Your Session"
-      ctaDescription="Fill out the details below to request your booking."
-      ctaButton={{
-        text: "Submit Booking",
-        href: "/status",
-      }}
-      ctaIcon={Calendar}
-    />
-  </div>
+        <div id="booking-form" data-section="booking-form">
+          <ContactSplit
+            tag="Booking"
+            title="Schedule Your Mehndi Session"
+            description="Ready to get beautiful henna art? Fill out the form below and we'll get back to you to confirm your appointment details."
+            background={{ variant: 'plain' }}
+            useInvertedBackground={false}
+            inputPlaceholder="Enter your email"
+            buttonText="Book Now"
+            onSubmit={(email) => console.log("Booking requested for:", email)}
+            imageSrc="http://img.b2bpic.net/free-photo/closeup-indian-bride-s-hands-covered-with-mehndi-holding_8353-761.jpg"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="HennaArt"
-      columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "Home",
-              href: "/",
-            },
-            {
-              label: "Booking",
-              href: "/booking",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="HennaArt"
+            columns={[
+              {
+                items: [
+                  { label: "Home", href: "/" },
+                  { label: "Booking", href: "/booking" },
+                ],
+              },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}