Update src/app/consultation/page.tsx

Merge version_4 into main

src/app/consultation/page.tsx

@@ -1,24 +1,30 @@
 "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 ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover';
 
 export default function ConsultationPage() {
   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: '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' }
   ];
 
+  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"
@@ -48,11 +54,12 @@ 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={[
               {
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/an-abstract-futuristic-digital-backgroun-1774275045926-cf3e365c.png",                imageAlt: "Abstract futuristic digital background"
+                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/an-abstract-futuristic-digital-backgroun-1774275045926-cf3e365c.png?_wi=1",                imageAlt: "Abstract futuristic digital background"
               },
               {
                 imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/futuristic-digital-brain-with-glowing-ne-1774275050013-64a6136e.png",                imageAlt: "Futuristic digital brain"
@@ -63,6 +70,18 @@ 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>
+
         <div id="value" data-section="value">
           <FeatureHoverPattern
             animationType="slide-up"
@@ -73,16 +92,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 +129,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 +139,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"
@@ -132,4 +155,4 @@ export default function ConsultationPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -82,7 +82,7 @@ export default function LandingPage() {
           src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-david-kim-produ-1774275046493-decfe591.png",          alt: "David Kim"},
       ]}
       avatarText="Trusted by industry leaders."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/an-abstract-futuristic-digital-backgroun-1774275045926-cf3e365c.png"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/an-abstract-futuristic-digital-backgroun-1774275045926-cf3e365c.png?_wi=2"
       imageAlt="Futuristic digital background with glowing particles and gradients"
       mediaAnimation="slide-up"
     />
@@ -109,6 +109,9 @@ export default function LandingPage() {
       ]}
       title="Our Core Services"
       description="Driving digital success through innovative solutions in web development, branding, and UI/UX design."
+      buttons={[
+        { text: "Book a Consultation", href: "#booking" }
+      ]}
     />
   </div>
 
@@ -132,6 +135,9 @@ export default function LandingPage() {
           reverse: false,
         },
       ]}
+      buttons={[
+        { text: "Book a Consultation", href: "#booking" }
+      ]}
       gapClassName="mt-vw-2_5"
       itemClassName="justify-center text-center"
       featureTitleClassName="text-transparent"
@@ -164,6 +170,9 @@ export default function LandingPage() {
           reverse: false,
         },
       ]}
+      buttons={[
+        { text: "Book a Consultation", href: "#booking" }
+      ]}
       gapClassName="mt-vw-2_5"
       itemClassName="justify-center text-center"
       featureTitleClassName="text-transparent"
@@ -195,10 +204,13 @@ export default function LandingPage() {
         {
           id: "p5",          name: "Health & Wellness Mobile App",          price: "Case Study",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-mobile-app-interface-design-for-a-heal-1774275047122-1c724469.png",          imageAlt: "Mobile app UI for a health platform"},
         {
-          id: "p6",          name: "Architecture Firm Redesign",          price: "Case Study",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-creative-website-redesign-for-a-cuttin-1774275050498-6dcb0395.png",          imageAlt: "Website redesign for an architecture firm"},
+          id: "p6",          name: "Architecture Firm Redesign",          price: "Case Study",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-creative-website-redesign-for-a-cuttin-1774275050498-6dcb0395.png",          imageAlt: "Website redesign for an an architecture firm"},
       ]}
       title="Our Transformative Work"
       description="Explore our recent case studies and see how we deliver measurable results for ambitious brands."
+      buttons={[
+        { text: "Book a Consultation", href: "#booking" }
+      ]}
     />
   </div>
 
@@ -223,6 +235,9 @@ export default function LandingPage() {
       ]}
       title="What Our Clients Say"
       description="Hear directly from brand leaders who have experienced transformative results with Vertex Digital."
+      buttons={[
+        { text: "Book a Consultation", href: "#booking" }
+      ]}
     />
   </div>
 
@@ -239,6 +254,9 @@ export default function LandingPage() {
       description="Our commitment to excellence has earned the trust of leading companies across various industries."
       speed={35}
       showCard={false}
+      buttons={[
+        { text: "Book a Consultation", href: "#booking" }
+      ]}
     />
   </div>
 
@@ -248,11 +266,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       background={{ variant: "plain" }}
       text="Ready to transform your digital presence? Book a personalized consultation to discuss your vision, goals, and how we can bring them to life."
-      buttons={[
-        {
-          text: "Confirm Booking",          href: "#contact", // Link to the contact form or a booking tool
-        },
-      ]}
+      buttons={[]}
       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"
@@ -339,4 +353,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/components/buttons/BookConsultationButton.tsx

@@ -0,0 +1,33 @@
+"use client";
+import ButtonTextStagger from '@/components/button/ButtonTextStagger/ButtonTextStagger';
+import React from 'react';
+
+interface BookConsultationButtonProps {
+  text?: string;
+  onClick?: () => void;
+  className?: string; // For additional styling
+  bgClassName?: string; // For background styling, typically handled by ThemeProvider primaryButtonStyle
+  textClassName?: string; // For text styling
+  ariaLabel?: string;
+}
+
+const BookConsultationButton: React.FC<BookConsultationButtonProps> = ({
+  text = "Book a Consultation",  onClick,
+  className,
+  bgClassName,
+  textClassName,
+  ariaLabel = "Book a consultation call"}) => {
+  return (
+    <ButtonTextStagger
+      text={text}
+      href="/consultation"
+      onClick={onClick}
+      className={className}
+      bgClassName={bgClassName} // Rely on ThemeProvider's primaryButtonStyle
+      textClassName={textClassName}
+      ariaLabel={ariaLabel}
+    />
+  );
+};
+
+export default BookConsultationButton;