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 ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import { Calendar } from "lucide-react";
 
-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">
+        <div id="nav" data-section="nav">
-      <NavbarStyleCentered
+          <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "/" },
-          name: "Home",
+              { name: "Book Appointment", id: "/booking" },
-          id: "/",
+              { name: "Status", id: "/status" },
-        },
+              { name: "Admin", id: "/admin" },
-        {
+            ]}
-          name: "Book Appointment",
+            brandName="HennaArt"
-          id: "/booking",
+          />
-        },
+        </div>
-        {
-          name: "Status",
-          id: "/status",
-        },
-        {
-          name: "Admin",
-          id: "/admin",
-        },
-      ]}
-      brandName="HennaArt"
-    />
-  </div>
 
-  <div id="booking-form" data-section="booking-form">
+        <div id="booking-form" data-section="booking-form">
-      <ContactFaq
+          <ContactSplit
-      animationType="slide-up"
+            tag="Booking"
-      useInvertedBackground={false}
+            title="Schedule Your Mehndi Session"
-      faqs={[
+            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' }}
-          id: "f1",
+            useInvertedBackground={false}
-          title: "Availability",
+            inputPlaceholder="Enter your email"
-          content: "Bookings are open for this month. Check your preferred date in the calendar above.",
+            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"
-      ctaTitle="Schedule Your Session"
+          />
-      ctaDescription="Fill out the details below to request your booking."
+        </div>
-      ctaButton={{
-        text: "Submit Booking",
-        href: "/status",
-      }}
-      ctaIcon={Calendar}
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterBaseCard
+          <FooterLogoEmphasis
-      logoText="HennaArt"
+            logoText="HennaArt"
-      columns={[
+            columns={[
-        {
+              {
-          title: "Navigation",
+                items: [
-          items: [
+                  { label: "Home", href: "/" },
-            {
+                  { label: "Booking", href: "/booking" },
-              label: "Home",
+                ],
-              href: "/",
+              },
-            },
+            ]}
-            {
+          />
-              label: "Booking",
+        </div>
-              href: "/booking",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}