Merge version_11 into main

Merge version_11 into main

src/app/page.tsx

@@ -2,7 +2,6 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
@@ -10,6 +9,7 @@ import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNinete
 import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import { Scissors, Calendar, Award } from 'lucide-react';
 
@@ -38,24 +38,11 @@ export default function LandingPage() {
             { name: "FAQ", id: "faq" }
           ]}
           button={{
-            text: "Book Now",            href: "#contact"
+            text: "Book Now", href: "#contact"
           }}
         />
       </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Bookings"
-          title="Book Your Appointment"
-          description="Use the calendar below to secure your spot with your preferred barber."
-          tagIcon={Calendar}
-          background={{ variant: "sparkles-gradient" }}
-          useInvertedBackground={false}
-          inputPlaceholder="Your name or email"
-          buttonText="Reserve Now"
-        />
-      </div>
-
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel
           title="Precision Grooming & Style"
@@ -177,6 +164,27 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="contact" data-section="contact">
+        <ContactSplitForm
+          title="Book Your Appointment"
+          description="Experience the finest grooming services in the city. Select your preferences and lock in your session today."
+          inputs={[
+            { name: "fullName", type: "text", placeholder: "Full Name", required: true },
+            { name: "email", type: "email", placeholder: "Email", required: true },
+            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+            { name: "service", type: "text", placeholder: "Preferred Service (Cut, Shave, etc.)" },
+            { name: "notes", type: "text", placeholder: "Additional Notes" }
+          ]}
+          multiSelect={{ name: "barber", label: "Select Barber", options: ["Barber 1", "Barber 2", "Barber 3", "Barber 4", "Barber 5", "Barber 6"] }}
+          textarea={{ name: "message", placeholder: "Any special requests?", rows: 4 }}
+          buttonText="Request My Appointment"
+          useInvertedBackground={false}
+          containerClassName="min-h-screen py-24"
+          imageSrc="http://img.b2bpic.net/free-photo/barber-holding-razor-hair-client_23-2148353483.jpg"
+          imageAlt="Barber serving client"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="Sharp Edge"