Merge version_6 into main

Merge version_6 into main

src/app/consultation/page.tsx

@@ -8,23 +8,22 @@ import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import TextBox from '@/components/Textbox';
 import { ClipboardList, Brain, Target, Calendar } from 'lucide-react';
-import ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import { useRouter } from 'next/navigation';
 
 export default function ConsultationPage() {
+  const router = useRouter();
   const navItems = [
-    { name: 'Home', id: 'home', href: '/' },
-    { name: 'Services', id: 'services', href: '/#services' },
-    { name: 'Portfolio', id: 'portfolio', href: '/#portfolio' },
-    { name: 'Testimonials', id: 'testimonials', href: '/#testimonials' },
-    { name: 'Contact', id: 'contact', href: '/#contact' },
-    { name: 'Consultation', id: '/consultation', href: '/consultation' }
+    { name: 'Home', id: '/' },
+    { name: 'Services', id: '/#services' },
+    { name: 'Who This Is For', id: '/#who-this-is-for' },
+    { name: 'What You Get', id: '/#what-you-get' },
+    { name: 'Portfolio', id: '/#portfolio' },
+    { name: 'Testimonials', id: '/#testimonials' },
+    { name: 'Consultation', id: '/consultation' },
+    { name: 'Contact', id: '/#contact' }
   ];
 
-  const handleConfirmBooking = () => {
-    alert("Booking Confirmed! (This would submit the form or confirm the booking.)");
-    // In a real application, this would trigger form submission or a booking confirmation API call.
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -70,15 +69,23 @@ export default function ConsultationPage() {
           />
         </div>
 
-        {/* New "Confirm Booking" button below the booking form/scheduler section */}
-        <div className="flex justify-center py-vw-2_5" data-section="confirm-booking-button">
-          <ButtonShiftHover
-            text="Confirm Booking"
-            onClick={handleConfirmBooking}
-            ariaLabel="Confirm Booking"
-            // In a real application, 'disabled' state would be managed by form validation logic.
-            // For this static implementation, it's always enabled.
-            // disabled={!isFormFilledOrTimeSelected}
+        <div id="booking-form" data-section="booking-form">
+          <ContactCenter
+            tag="Booking"
+            title="Confirm Your Consultation"
+            description="Enter your email to finalize your booking, and we'll send you a calendar invite."
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
+            inputPlaceholder="Your Email Address"
+            buttonText="Confirm Booking"
+            onSubmit={(email: string) => {
+              console.log("Email submitted:", email);
+              router.push('/confirmation');
+            }}
+            className="!py-vw-4 !bg-background-accent/50"
+            contentClassName="!py-vw-4 !px-vw-2_5 !bg-card border border-accent/20 rounded-pill shadow-xl"
+            titleClassName="!text-3xl lg:!text-4xl"
+            buttonClassName="!py-vw-0_75 !px-vw-2"
           />
         </div>
 
@@ -155,4 +162,4 @@ export default function ConsultationPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}