Merge version_11 into main

Merge version_11 into main

src/app/booking/page.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import { Calendar } from 'lucide-react';
-
-export default function BookingPage() {
-  return (
-    <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
-      contentWidth="small"
-      sizing="large"
-      background="floatingGradient"
-      cardStyle="soft-shadow"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="radial-glow"
-      headingFontWeight="medium"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          brandName="Sharp Edge"
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Our Story", id: "/#about" },
-            { name: "Services", id: "/#cuts" },
-            { name: "Barbers", id: "/#team" },
-            { name: "Gallery", id: "/#experience" },
-            { name: "FAQ", id: "/#faq" }
-          ]}
-          button={{ text: "Book Now", href: "/booking" }}
-        />
-      </div>
-
-      <div id="booking-form" data-section="contact">
-        <ContactSplitForm
-          title="Secure Your Appointment"
-          description="Select your preferred barber, choose a time slot, and tell us which service you need. We'll confirm your booking shortly."
-          inputs={[
-            { name: "name", type: "text", placeholder: "Full Name", required: true },
-            { name: "email", type: "email", placeholder: "Email Address", required: true },
-            { name: "date", type: "date", placeholder: "Booking Date", required: true },
-            { name: "time", type: "time", placeholder: "Booking Time", required: true }
-          ]}
-          multiSelect={{
-            name: "barber",            label: "Select Staff (or choose 'Any Available')",            options: ["Any Available", "Marco V.", "Sarah J.", "David K.", "Liam R.", "Elena M.", "Jason B."]
-          }}
-          textarea={{ name: "notes", placeholder: "Additional notes (optional)", rows: 3 }}
-          buttonText="Confirm Booking"
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
-          logoText="Sharp Edge"
-          columns={[
-            { title: "Visit", items: [{ label: "Location", href: "#" }, { label: "Directions", href: "#" }] },
-            { title: "Services", items: [{ label: "Cuts", href: "#" }, { label: "Shaves", href: "#" }] },
-            { title: "Business", items: [{ label: "Book Now", href: "/booking" }, { label: "Contact", href: "/#contact" }] }
-          ]
-          }
-        />
-      </div>
-    </ThemeProvider>
-  );
-}

src/app/page.tsx

@@ -9,9 +9,9 @@ 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 ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Scissors, Calendar, Star, Clock, User, Award } from 'lucide-react';
+import { Scissors, Calendar, Award } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -38,7 +38,7 @@ export default function LandingPage() {
             { name: "FAQ", id: "faq" }
           ]}
           button={{
-            text: "Book Now", href: "/booking"
+            text: "Book Now", href: "#contact"
           }}
         />
       </div>
@@ -51,7 +51,7 @@ export default function LandingPage() {
           tagIcon={Scissors}
           background={{ variant: "plain" }}
           buttons={[
-            { text: "Book with Your Barber", href: "/booking" },
+            { text: "Book with Your Barber", href: "#contact" },
             { text: "View Services", href: "#cuts" }
           ]}
           buttonAnimation="slide-up"
@@ -77,6 +77,7 @@ export default function LandingPage() {
           imageAlt="Expert barber at work"
           mediaAnimation="slide-up"
           metricsAnimation="slide-up"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -94,6 +95,7 @@ export default function LandingPage() {
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -108,6 +110,7 @@ export default function LandingPage() {
             { tag: "Beard", title: "Beard Design", subtitle: "Expert shaping", description: "Sculpted beard care for the modern man.", imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg" }
           ]}
           textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -124,6 +127,7 @@ export default function LandingPage() {
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -139,6 +143,7 @@ export default function LandingPage() {
           ]}
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -155,19 +160,28 @@ export default function LandingPage() {
           imageSrc="http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6196.jpg"
           faqsAnimation="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Bookings"
+        <ContactSplitForm
           title="Book Your Appointment"
-          description="Use our online booking system to secure your spot with your preferred barber."
-          tagIcon={Calendar}
-          background={{ variant: "sparkles-gradient" }}
-          inputPlaceholder="Your name or email"
-          buttonText="Go to Booking Page"
-          onSubmit={() => window.location.href = '/booking'}
+          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>
 
@@ -177,10 +191,10 @@ export default function LandingPage() {
           columns={[
             { title: "Visit", items: [{ label: "Location", href: "#" }, { label: "Directions", href: "#" }] },
             { title: "Services", items: [{ label: "Cuts", href: "#" }, { label: "Shaves", href: "#" }] },
-            { title: "Business", items: [{ label: "Book Now", href: "/booking" }, { label: "Contact", href: "#contact" }] }
+            { title: "Business", items: [{ label: "Book Now", href: "#contact" }, { label: "Contact", href: "#" }] }
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}