Update src/app/page.tsx

Merge version_2 into main

src/app/consultation/page.tsx

@@ -52,7 +52,7 @@ export default function ConsultationPage() {
             ]}
             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"

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"
@@ -199,6 +208,9 @@ export default function LandingPage() {
       ]}
       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>
 

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;