Update src/app/page.tsx

Merge version_7 into main

src/app/consultation/page.tsx

@@ -1,22 +1,27 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
-import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import FooterSimple from "@/components/sections/footer/FooterSimple";
-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 { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import ReactLenis from 'lenis/react';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+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 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' }
   ];
 
   return (
@@ -48,7 +53,8 @@ export default function ConsultationPage() {
             tag="Strategic Partnership"
             buttons={[
               {
-                text: "Schedule a Call",                href: "https://calendly.com/yourcompany/consultation"},
+                text: "Schedule a Call",                href: "https://calendly.com/yourcompany/consultation"
+              }
             ]}
             mediaItems={[
               {
@@ -63,6 +69,26 @@ export default function ConsultationPage() {
           />
         </div>
 
+        <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>
+
         <div id="value" data-section="value">
           <FeatureHoverPattern
             animationType="slide-up"
@@ -73,16 +99,20 @@ export default function ConsultationPage() {
             features={[
               {
                 icon: ClipboardList,
-                title: "Discipline Audit",                description: "Comprehensive review of your current digital operations to identify strengths and areas for improvement."},
+                title: "Discipline Audit",                description: "Comprehensive review of your current digital operations to identify strengths and areas for improvement."
+              },
               {
                 icon: Brain,
-                title: "AI-Driven Study System",                description: "Leverage advanced AI insights to optimize your strategies and predict market trends effectively."},
+                title: "AI-Driven Study System",                description: "Leverage advanced AI insights to optimize your strategies and predict market trends effectively."
+              },
               {
                 icon: Target,
-                title: "Focus Optimization",                description: "Streamline your objectives and resources to maximize impact and accelerate project completion."},
+                title: "Focus Optimization",                description: "Streamline your objectives and resources to maximize impact and accelerate project completion."
+              },
               {
                 icon: Calendar,
-                title: "Daily Execution Plan",                description: "Receive a clear, actionable roadmap for daily tasks, ensuring consistent progress towards your goals."},
+                title: "Daily Execution Plan",                description: "Receive a clear, actionable roadmap for daily tasks, ensuring consistent progress towards your goals."
+              }
             ]}
           />
         </div>
@@ -106,8 +136,8 @@ export default function ConsultationPage() {
                   { label: "Web Development", href: "/#services" },
                   { label: "Branding", href: "/#services" },
                   { label: "UI/UX Design", href: "/#services" },
-                  { label: "Digital Growth", href: "/#services" },
-                ],
+                  { label: "Digital Growth", href: "/#services" }
+                ]
               },
               {
                 title: "Company",                items: [
@@ -116,14 +146,14 @@ export default function ConsultationPage() {
                   { label: "Testimonials", href: "/#testimonials" },
                   { label: "Contact", href: "/#contact" },
                   { label: "Consultation", href: "/consultation" }
-                ],
+                ]
               },
               {
                 title: "Legal",                items: [
                   { label: "Privacy Policy", href: "#" },
-                  { label: "Terms of Service", href: "#" },
-                ],
-              },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
             ]}
             bottomLeftText="© 2024 Vertex Digital. All rights reserved."
             bottomRightText="Powered by Innovation"

src/app/page.tsx

@@ -121,7 +121,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       title="Who This Is For"
-      description="Our services are designed for ambitious brands ready to make a significant impact online."
+      description="Ambitious brands often struggle to cut through the noise and achieve tangible digital growth. Vertex Digital partners with you to overcome these challenges, delivering bespoke, high-performance digital solutions that not only captivate your audience but also drive measurable results and position you as an industry leader."
       features={[
         {
           id: "who-1",          title: "", description: "",          media: {
@@ -270,7 +270,6 @@ export default function LandingPage() {
       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"
       textClassName="!text-3xl lg:!text-4xl"
-      buttonClassName="!py-vw-0_75 !px-vw-2"
     />
   </div>
 
@@ -286,7 +285,6 @@ export default function LandingPage() {
       ]}
       className="!py-vw-4"
       textClassName="!text-3xl lg:!text-4xl"
-      buttonClassName="!py-vw-0_75 !px-vw-2"
     />
   </div>