Update src/app/book-appointment/page.tsx

Merge version_9 into main

src/app/admin/page.tsx

@@ -40,7 +40,7 @@ export default function AdminDashboard() {
                     className="px-4 py-2 bg-blue-600 text-white rounded-md cursor-pointer hover:bg-blue-700 transition-colors"
                     onClick={() => setBookings(prev => prev.map(b => b.id === booking.id ? {...b, status: "Confirmed"} : b))}
                   >
-                    Process Booking
+                    Confirm Booking
                   </button>
                 )}
               </div>

src/app/book-appointment/page.tsx

@@ -24,11 +24,10 @@ export default function BookAppointmentPage() {
         <div id="nav" data-section="nav">
           <NavbarStyleFullscreen
             navItems={[
-              { name: "Home", id: "/" },
-              { name: "Services", id: "/" },
-              { name: "Gallery", id: "/" },
-              { name: "Contact", id: "/" },
-              { name: "Book", id: "/book-appointment" },
+              { name: "Home", id: "hero" },
+              { name: "Services", id: "services" },
+              { name: "Gallery", id: "gallery" },
+              { name: "Contact", id: "contact" },
               { name: "Admin", id: "/admin" }
             ]}
             brandName="Elite Grooming"
@@ -38,7 +37,7 @@ export default function BookAppointmentPage() {
         <div id="booking" data-section="booking" className="py-24">
           <ContactSplitForm
             title="Schedule Your Appointment"
-            description="Select your preferred service and time. Our team will confirm your booking shortly."
+            description="Select your preferred service and time. Our team will review and approve your booking request."
             inputs={[
               { name: "fullName", type: "text", placeholder: "Full Name", required: true },
               { name: "email", type: "email", placeholder: "Email Address", required: true },
@@ -50,8 +49,8 @@ export default function BookAppointmentPage() {
               options: ["Precision Fade", "Beard Sculpt", "Hot Towel Shave"]
             }}
             textarea={{ name: "notes", placeholder: "Any special instructions or requests?" }}
-            buttonText="Confirm Booking"
-            onSubmit={(data) => console.log("Booking submitted:", data)}
+            buttonText="Submit Request"
+            onSubmit={(data) => alert("Booking request submitted! We will contact you to confirm.")}
             useInvertedBackground={false}
           />
         </div>
@@ -60,8 +59,8 @@ export default function BookAppointmentPage() {
           <FooterBase
             logoText="Elite Grooming"
             columns={[
-              { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/" }] },
-              { title: "Support", items: [{ label: "FAQ", href: "/" }, { label: "Book", href: "/book-appointment" }] }
+              { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/#services" }] },
+              { title: "Support", items: [{ label: "FAQ", href: "/#faq" }, { label: "Book Appointment", href: "/book-appointment" }] }
             ]}
           />
         </div>

src/app/page.tsx

@@ -47,7 +47,7 @@ export default function LandingPage() {
       title="Elite Grooming for the Modern Gentleman"
       description="Precision fades, classic hot towel shaves, and professional beard sculpting. Elevate your style at our premier barbershop."
       tag="Since 2015"
-      buttons={[{ text: "Book Appointment", href: "#contact" }]}
+      buttons={[{ text: "Book Appointment", href: "/book-appointment" }]}
       mediaItems={[
         { imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7361.jpg", imageAlt: "modern barber shop interior" },
         { imageSrc: "http://img.b2bpic.net/free-photo/barbershop-close-up-barber-holds-razor-shaving-his-beard_1157-43556.jpg", imageAlt: "barber grooming detail" }
@@ -62,7 +62,7 @@ export default function LandingPage() {
       <TextAbout
       useInvertedBackground={false}
       title="Refined Grooming in the Heart of the City"
-      buttons={[{ text: "Learn More", href: "#contact" }]}
+      buttons={[{ text: "Learn More", href: "/book-appointment" }]}
     />
   </div>
 
@@ -72,9 +72,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       plans={[
-        { id: "fade", price: "$35", name: "Precision Fade", features: ["Consultation", "Skin fade", "Hot towel finish"], buttons: [{ text: "Book Now", href: "#contact" }] },
-        { id: "beard", price: "$25", name: "Beard Sculpt", features: ["Beard trim", "Lineup", "Conditioning balm"], buttons: [{ text: "Book Now", href: "#contact" }] },
-        { id: "shave", price: "$45", name: "Hot Towel Shave", features: ["Steam treatment", "Straight razor shave", "Aftershave balm"], buttons: [{ text: "Book Now", href: "#contact" }] }
+        { id: "fade", price: "$35", name: "Precision Fade", features: ["Consultation", "Skin fade", "Hot towel finish"], buttons: [{ text: "Book Now", href: "/book-appointment" }] },
+        { id: "beard", price: "$25", name: "Beard Sculpt", features: ["Beard trim", "Lineup", "Conditioning balm"], buttons: [{ text: "Book Now", href: "/book-appointment" }] },
+        { id: "shave", price: "$45", name: "Hot Towel Shave", features: ["Steam treatment", "Straight razor shave", "Aftershave balm"], buttons: [{ text: "Book Now", href: "/book-appointment" }] }
       ]}
       title="Our Professional Services"
       description="Expert grooming to keep you sharp."