Merge version_9 into main

Merge version_9 into main

src/app/consultation/page.tsx

@@ -0,0 +1,167 @@
+"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 ContactCenter from '@/components/sections/contact/ContactCenter';
+import { useRouter } from 'next/navigation';
+
+export default function ConsultationPage() {
+  const router = useRouter();
+  const navItems = [
+    { 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: 'Products', id: '/products' },
+    { name: 'Portfolio', id: '/#portfolio' },
+    { name: 'Testimonials', id: '/#testimonials' },
+    { name: 'Book Now', id: '/consultation' },
+    { name: 'Contact', id: '/#contact' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="largeSmallSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={navItems}
+            brandName="Vertex Digital"
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroSplitDualMedia
+            title="Book Your Consultation Today"
+            description="Unlock your potential with our tailored strategies for success. Schedule a free discovery call to outline your path to digital excellence."
+            background={{ variant: "sparkles-gradient" }}
+            tag="Strategic Partnership"
+            buttons={[
+              {
+                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?_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"
+              }
+            ]}
+            rating={5}
+            ratingText="Highly Rated"
+          />
+        </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"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="What We Offer"
+            description="Our specialized services are designed to address your unique challenges and drive measurable growth."
+            features={[
+              {
+                icon: ClipboardList,
+                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."
+              },
+              {
+                icon: Target,
+                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."
+              }
+            ]}
+          />
+        </div>
+
+        <div id="authority" data-section="authority">
+          <TextBox
+            title="Empowering Your Future Through Strategic Innovation"
+            description="We provide bespoke solutions designed to elevate your brand, optimize performance, and achieve unparalleled digital excellence. Partner with us to transform your vision into reality."
+            textboxLayout="default"
+            center={true}
+            tag="Our Vision"
+            className="py-16"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Web Development", href: "/#services" },
+                  { label: "Branding", href: "/#services" },
+                  { label: "UI/UX Design", href: "/#services" },
+                  { label: "Digital Growth", href: "/#services" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "Home", href: "/" },
+                  { label: "Products", href: "/products" },
+                  { label: "Portfolio", href: "/#portfolio" },
+                  { label: "Testimonials", href: "/#testimonials" },
+                  { label: "Book Now", href: "/consultation" },
+                  { label: "Contact", href: "/#contact" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            bottomLeftText="© 2024 Vertex Digital. All rights reserved."
+            bottomRightText="Powered by Innovation"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -3,14 +3,16 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactFaq from '@/components/sections/contact/ContactFaq';
+import ContactText from '@/components/sections/contact/ContactText';
 import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import { Code, Grid, MessageSquare, Palette, Rocket } from "lucide-react";
+import { CheckCircle, Code, Grid, MessageSquare, Palette, Rocket } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -31,25 +33,21 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
-          id: "home",
-        },
+          name: "Home",          id: "home"},
         {
-          name: "Services",
-          id: "services",
-        },
+          name: "Services",          id: "services"},
         {
-          name: "Portfolio",
-          id: "portfolio",
-        },
+          name: "Who This Is For",          id: "who-this-is-for"},
         {
-          name: "Testimonials",
-          id: "testimonials",
-        },
+          name: "What You Get",          id: "what-you-get"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Portfolio",          id: "portfolio"},
+        {
+          name: "Testimonials",          id: "testimonials"},
+        {
+          name: "Book Now",          id: "booking"},
+        {
+          name: "Contact",          id: "contact"},
       ]}
       brandName="Vertex Digital"
     />
@@ -59,49 +57,32 @@ export default function LandingPage() {
       <HeroBillboardTestimonial
       useInvertedBackground={false}
       background={{
-        variant: "canvas-reveal",
-      }}
+        variant: "canvas-reveal"}}
       title="Elevate Your Digital Presence"
       description="We build high-performance digital experiences that drive measurable results for modern, ambitious brands ready to lead their industry."
       testimonials={[
         {
-          name: "Sarah Johnson",
-          handle: "@TechCorpCEO",
-          testimonial: "Vertex Digital transformed our online presence. Their expertise is unmatched!",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-sarah-johnson-c-1774275046318-80ad333a.png?_wi=1",
-        },
+          name: "Sarah Johnson",          handle: "@TechCorpCEO",          testimonial: "Vertex Digital transformed our online presence. Their expertise is unmatched!",          rating: 5,
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-sarah-johnson-c-1774275046318-80ad333a.png?_wi=1"},
       ]}
       buttons={[
         {
-          text: "Get Started",
-          href: "#contact",
-        },
+          text: "Get Started",          href: "#booking"},
         {
-          text: "View Work",
-          href: "#portfolio",
-        },
+          text: "View Work",          href: "#portfolio"},
       ]}
       avatars={[
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-sarah-johnson-c-1774275046318-80ad333a.png",
-          alt: "Sarah Johnson",
-        },
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-sarah-johnson-c-1774275046318-80ad333a.png",          alt: "Sarah Johnson"},
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-michael-chen-fo-1774275046608-3c456103.png",
-          alt: "Michael Chen",
-        },
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-michael-chen-fo-1774275046608-3c456103.png",          alt: "Michael Chen"},
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-emily-rodriguez-1774275047482-502e58ac.png",
-          alt: "Emily Rodriguez",
-        },
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-emily-rodriguez-1774275047482-502e58ac.png",          alt: "Emily Rodriguez"},
         {
-          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",
-        },
+          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"
     />
@@ -115,27 +96,92 @@ export default function LandingPage() {
       features={[
         {
           icon: Code,
-          title: "High-Performance Web Development",
-          description: "Crafting scalable, secure, and lightning-fast websites and applications tailored to your business needs.",
-        },
+          title: "High-Performance Web Development",          description: "Crafting scalable, secure, and lightning-fast websites and applications tailored to your business needs."},
         {
           icon: Palette,
-          title: "Transformative Branding Solutions",
-          description: "Building powerful brand identities that resonate with your audience and set you apart in the digital landscape.",
-        },
+          title: "Transformative Branding Solutions",          description: "Building powerful brand identities that resonate with your audience and set you apart in the digital landscape."},
         {
           icon: Grid,
-          title: "Intuitive UI/UX Design",
-          description: "Designing exceptional user interfaces and experiences that are not only beautiful but also highly functional and engaging.",
-        },
+          title: "Intuitive UI/UX Design",          description: "Designing exceptional user interfaces and experiences that are not only beautiful but also highly functional and engaging."},
         {
           icon: Rocket,
-          title: "Strategic Digital Growth",
-          description: "Implementing data-driven strategies to enhance your online visibility, drive traffic, and achieve sustainable growth.",
-        },
+          title: "Strategic Digital Growth",          description: "Implementing data-driven strategies to enhance your online visibility, drive traffic, and achieve sustainable growth."},
       ]}
       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>
+
+  <div id="who-this-is-for" data-section="who-this-is-for">
+    <FeatureCardTen
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      title="Who This Is For"
+      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: {
+            imageSrc: ""},
+          items: [
+            { icon: CheckCircle, text: "Brands seeking measurable ROI from their digital presence" },
+            { icon: CheckCircle, text: "Companies looking for a premium, custom digital solution" },
+            { icon: CheckCircle, text: "Businesses aiming to stand out in a competitive market" },
+            { icon: CheckCircle, text: "Visionaries who value design, performance, and strategic growth" },
+          ],
+          reverse: false,
+        },
+      ]}
+      buttons={[
+        { text: "Book a Consultation", href: "#booking" }
+      ]}
+      gapClassName="mt-vw-2_5"
+      itemClassName="justify-center text-center"
+      featureTitleClassName="text-transparent"
+      featureDescriptionClassName="text-transparent"
+      contentWrapperClassName="p-vw-0_5 lg:p-vw-1_5"
+      listItemClassName="flex items-center gap-vw-0_5 !justify-center"
+      iconContainerClassName="shrink-0"
+      iconClassName="text-primary-cta !w-vw-1_5 !h-vw-1_5"
+      className="!py-vw-2_5"
+    />
+  </div>
+
+  <div id="what-you-get" data-section="what-you-get">
+    <FeatureCardTen
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      title="What You Get"
+      description="Our comprehensive approach ensures you receive unparalleled support and resources."
+      features={[
+        {
+          id: "get-1",          title: "", description: "",          media: {
+            imageSrc: ""},
+          items: [
+            { icon: CheckCircle, text: "30-45 minute in-depth consultation" },
+            { icon: CheckCircle, text: "Personalized digital blueprint tailored to your goals" },
+            { icon: CheckCircle, text: "Strategic execution plan with clear milestones" },
+            { icon: CheckCircle, text: "Transparent performance breakdown and analytics" },
+          ],
+          reverse: false,
+        },
+      ]}
+      buttons={[
+        { text: "Book a Consultation", href: "#booking" }
+      ]}
+      gapClassName="mt-vw-2_5"
+      itemClassName="justify-center text-center"
+      featureTitleClassName="text-transparent"
+      featureDescriptionClassName="text-transparent"
+      contentWrapperClassName="p-vw-0_5 lg:p-vw-1_5"
+      listItemClassName="flex items-center gap-vw-0_5 !justify-center"
+      iconContainerClassName="shrink-0"
+      iconClassName="text-primary-cta !w-vw-1_5 !h-vw-1_5"
+      className="!py-vw-2_5"
     />
   </div>
 
@@ -148,50 +194,23 @@ export default function LandingPage() {
       carouselMode="buttons"
       products={[
         {
-          id: "p1",
-          name: "Fintech Dashboard UI/UX",
-          price: "Case Study",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-sleek-dark-themed-dashboard-ui-for-a-f-1774275046582-283751e2.png",
-          imageAlt: "Fintech Dashboard UI with data visualizations",
-        },
+          id: "p1",          name: "Fintech Dashboard UI/UX",          price: "Case Study",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-sleek-dark-themed-dashboard-ui-for-a-f-1774275046582-283751e2.png",          imageAlt: "Fintech Dashboard UI with data visualizations"},
         {
-          id: "p2",
-          name: "Luxury E-commerce Platform",
-          price: "Case Study",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-minimalist-website-design-for-a-luxury-1774275046775-b342d5d6.png",
-          imageAlt: "Luxury e-commerce website design",
-        },
+          id: "p2",          name: "Luxury E-commerce Platform",          price: "Case Study",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-minimalist-website-design-for-a-luxury-1774275046775-b342d5d6.png",          imageAlt: "Luxury e-commerce website design"},
         {
-          id: "p3",
-          name: "AI SaaS Landing Page",
-          price: "Case Study",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-dynamic-and-interactive-landing-page-d-1774275050620-0f69e6f7.png",
-          imageAlt: "AI SaaS platform landing page",
-        },
+          id: "p3",          name: "AI SaaS Landing Page",          price: "Case Study",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-dynamic-and-interactive-landing-page-d-1774275050620-0f69e6f7.png",          imageAlt: "AI SaaS platform landing page"},
         {
-          id: "p4",
-          name: "Tech Startup Brand Identity",
-          price: "Case Study",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-comprehensive-branding-guideline-showc-1774275049992-41614640.png",
-          imageAlt: "Branding guidelines for a tech startup",
-        },
+          id: "p4",          name: "Tech Startup Brand Identity",          price: "Case Study",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/a-comprehensive-branding-guideline-showc-1774275049992-41614640.png",          imageAlt: "Branding guidelines for a tech startup"},
         {
-          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: "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>
 
@@ -202,50 +221,23 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
-          name: "Sarah Johnson",
-          handle: "CEO, TechCorp",
-          testimonial: "Vertex Digital delivered beyond our expectations. Their blend of creativity and technical prowess is truly unique.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-sarah-johnson-c-1774275046318-80ad333a.png?_wi=2",
-        },
+          id: "t1",          name: "Sarah Johnson",          handle: "CEO, TechCorp",          testimonial: "Vertex Digital delivered beyond our expectations. Their blend of creativity and technical prowess is truly unique.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-sarah-johnson-c-1774275046318-80ad333a.png?_wi=2"},
         {
-          id: "t2",
-          name: "Michael Chen",
-          handle: "Founder, InnovateLab",
-          testimonial: "The team at Vertex Digital brought our vision to life with a stunning website that performs incredibly well.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-michael-chen-fo-1774275046608-3c456103.png",
-        },
+          id: "t2",          name: "Michael Chen",          handle: "Founder, InnovateLab",          testimonial: "The team at Vertex Digital brought our vision to life with a stunning website that performs incredibly well.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-michael-chen-fo-1774275046608-3c456103.png"},
         {
-          id: "t3",
-          name: "Emily Rodriguez",
-          handle: "Marketing Director, GrowthCo",
-          testimonial: "Our branding overhaul by Vertex Digital was a game-changer. We've seen significant engagement improvements.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-emily-rodriguez-1774275047482-502e58ac.png",
-        },
+          id: "t3",          name: "Emily Rodriguez",          handle: "Marketing Director, GrowthCo",          testimonial: "Our branding overhaul by Vertex Digital was a game-changer. We've seen significant engagement improvements.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-emily-rodriguez-1774275047482-502e58ac.png"},
         {
-          id: "t4",
-          name: "David Kim",
-          handle: "Product Lead, StartupXYZ",
-          testimonial: "Their UI/UX expertise is top-tier. Our users love the new app interface – it's intuitive and beautiful.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-david-kim-produ-1774275046493-decfe591.png",
-        },
+          id: "t4",          name: "David Kim",          handle: "Product Lead, StartupXYZ",          testimonial: "Their UI/UX expertise is top-tier. Our users love the new app interface – it's intuitive and beautiful.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-david-kim-produ-1774275046493-decfe591.png"},
         {
-          id: "t5",
-          name: "Jessica Lee",
-          handle: "Brand Strategist, Visionary Brands",
-          testimonial: "Vertex Digital understood our brand's essence and amplified it digitally. Outstanding work!",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-jessica-lee-bra-1774275047298-849cc271.png",
-        },
+          id: "t5",          name: "Jessica Lee",          handle: "Brand Strategist, Visionary Brands",          testimonial: "Vertex Digital understood our brand's essence and amplified it digitally. Outstanding work!",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-jessica-lee-bra-1774275047298-849cc271.png"},
         {
-          id: "t6",
-          name: "Alex Stone",
-          handle: "CTO, FutureTech",
-          testimonial: "The technical implementation for our platform was flawless. Vertex Digital sets the standard for high-performance development.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-alex-stone-cto--1774275046395-65e8504e.png",
-        },
+          id: "t6",          name: "Alex Stone",          handle: "CTO, FutureTech",          testimonial: "The technical implementation for our platform was flawless. Vertex Digital sets the standard for high-performance development.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/professional-headshot-of-alex-stone-cto--1774275046395-65e8504e.png"},
       ]}
       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>
 
@@ -257,18 +249,42 @@ export default function LandingPage() {
         "Google",        "Microsoft",        "Amazon",        "Adobe",        "Meta",        "Apple",        "IBM"
       ]}
       logos={[
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-google-logo-wi-1774275045725-f3a4c067.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-microsoft-logo-1774275046594-7d9a6116.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-amazon-logo-wi-1774275045750-7d5409da.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-adobe-logo-wit-1774275046237-116ba5e9.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-meta-logo-infi-1774275045767-39d15e00.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-apple-logo-wit-1774275046227-1d95f261.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-ibm-logo-with--1774275046265-1f2d0170.png",
-      ]}
+        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-google-logo-wi-1774275045725-f3a4c067.png",        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-microsoft-logo-1774275046594-7d9a6116.png",        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-amazon-logo-wi-1774275045750-7d5409da.png",        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-adobe-logo-wit-1774275046237-116ba5e9.png",        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-meta-logo-infi-1774275045767-39d15e00.png",        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-apple-logo-wit-1774275046227-1d95f261.png",        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLiVwn3hCu2CTKdfreiAnFI1la/minimalist-version-of-the-ibm-logo-with--1774275046265-1f2d0170.png"]}
       title="Trusted by Elite Brands"
       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>
+
+  <div id="booking" data-section="booking">
+    <ContactText
+      animationType="entrance-slide"
+      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={[]}
+      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"
+    />
+  </div>
+
+  <div id="final-cta" data-section="final-cta">
+    <ContactText
+      animationType="entrance-slide"
+      useInvertedBackground={false}
+      background={{ variant: "plain" }}
+      text="Don't just compete, lead. Partner with Vertex Digital and redefine what's possible for your brand online."
+      buttons={[
+        {
+          text: "Book Your Consultation",          href: "#booking"},
+      ]}
+      className="!py-vw-4"
+      textClassName="!text-3xl lg:!text-4xl"
     />
   </div>
 
@@ -278,27 +294,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "faq1",
-          title: "What is Vertex Digital's specialization?",
-          content: "We specialize in high-performance web development, transformative branding, and intuitive UI/UX design for modern, ambitious brands.",
-        },
+          id: "faq1",          title: "What is Vertex Digital's specialization?",          content: "We specialize in high-performance web development, transformative branding, and intuitive UI/UX design for modern, ambitious brands."},
         {
-          id: "faq2",
-          title: "What is your typical project timeline?",
-          content: "Project timelines vary based on scope and complexity. We work closely with clients to establish clear milestones and deliver efficient, high-quality results.",
-        },
+          id: "faq2",          title: "What is your typical project timeline?",          content: "Project timelines vary based on scope and complexity. We work closely with clients to establish clear milestones and deliver efficient, high-quality results."},
         {
-          id: "faq3",
-          title: "How do you measure project success?",
-          content: "We define success through measurable KPIs, including user engagement, conversion rates, SEO performance, and overall client satisfaction, aligning with your business objectives.",
-        },
+          id: "faq3",          title: "How do you measure project success?",          content: "We define success through measurable KPIs, including user engagement, conversion rates, SEO performance, and overall client satisfaction, aligning with your business objectives."},
       ]}
       ctaTitle="Ready to Elevate Your Brand?"
       ctaDescription="Let's discuss how Vertex Digital can transform your digital presence. Get a personalized quote today."
       ctaButton={{
-        text: "Book a Consultation",
-        href: "#",
-      }}
+        text: "Book a Consultation",        href: "#booking"}}
       ctaIcon={MessageSquare}
     />
   </div>
@@ -307,58 +312,35 @@ export default function LandingPage() {
       <FooterSimple
       columns={[
         {
-          title: "Services",
-          items: [
+          title: "Services",          items: [
             {
-              label: "Web Development",
-              href: "#services",
-            },
+              label: "Web Development",              href: "#services"},
             {
-              label: "Branding",
-              href: "#services",
-            },
+              label: "Branding",              href: "#services"},
             {
-              label: "UI/UX Design",
-              href: "#services",
-            },
+              label: "UI/UX Design",              href: "#services"},
             {
-              label: "Digital Growth",
-              href: "#services",
-            },
+              label: "Digital Growth",              href: "#services"},
           ],
         },
         {
-          title: "Company",
-          items: [
+          title: "Company",          items: [
             {
-              label: "About Us",
-              href: "#",
-            },
+              label: "About Us",              href: "#"},
             {
-              label: "Portfolio",
-              href: "#portfolio",
-            },
+              label: "Portfolio",              href: "#portfolio"},
             {
-              label: "Testimonials",
-              href: "#testimonials",
-            },
+              label: "Testimonials",              href: "#testimonials"},
             {
-              label: "Contact",
-              href: "#contact",
-            },
+              label: "Contact",              href: "#contact"},
           ],
         },
         {
-          title: "Legal",
-          items: [
+          title: "Legal",          items: [
             {
-              label: "Privacy Policy",
-              href: "#",
-            },
+              label: "Privacy Policy",              href: "#"},
             {
-              label: "Terms of Service",
-              href: "#",
-            },
+              label: "Terms of Service",              href: "#"},
           ],
         },
       ]}
@@ -369,4 +351,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import ReactLenis from 'lenis/react';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Sparkles, Gem, CheckCircle, ArrowRight } from 'lucide-react';
+
+export default function ProductsPage() {
+  const navItems = [
+    { 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: 'Products', id: '/products' },
+    { name: 'Portfolio', id: '/#portfolio' },
+    { name: 'Testimonials', id: '/#testimonials' },
+    { name: 'Book Now', id: '/consultation' },
+    { name: 'Contact', id: '/#contact' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="largeSmallSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={navItems}
+            brandName="Vertex Digital"
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroBillboardTestimonial
+            title="High-Performance Websites. Built to Convert."
+            description="From clean landing pages to advanced systems—choose a plan designed for speed, design, and results."
+            background={{ variant: "radial-gradient" }}
+            buttons={[
+              { text: "Get Started", href: "/consultation" },
+              { text: "Book Consultation", href: "/consultation" }
+            ]}
+            useInvertedBackground={true}
+            testimonials={[]}
+          />
+        </div>
+
+        <div id="pricing" data-section="pricing">
+          <PricingCardFive
+            title="Our Website Development Plans"
+            description="Find the perfect solution to launch or scale your online presence with our tailored website development plans."
+            animationType="scale-rotate"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+              {
+                id: "starter",                tag: "Starter",                price: "₹9,999",                period: "one-time",                description: "Essential for launching your online presence.",                button: { text: "Choose Starter", href: "/consultation" },
+                featuresTitle: "Key Features",                features: [
+                  "1-page custom design",                  "Responsive layout",                  "3-5 day delivery",                  "Basic SEO optimization",                  "Contact form integration"
+                ]
+              },
+              {
+                id: "growth",                tag: "Growth",                price: "₹19,999",                period: "one-time",                description: "Ideal for growing businesses needing more content.",                button: { text: "Choose Growth", href: "/consultation" },
+                featuresTitle: "Key Features",                features: [
+                  "3-5 page custom design",                  "Advanced responsive layout",                  "5-7 day delivery",                  "Enhanced SEO optimization",                  "CMS integration (basic)",                  "Basic analytics setup"
+                ]
+              },
+              {
+                id: "pro",                tag: "Most Popular",                tagIcon: Sparkles,
+                price: "₹29,999",                period: "one-time",                description: "For professional businesses demanding robust features.",                button: { text: "Choose Pro", href: "/consultation" },
+                featuresTitle: "Key Features",                features: [
+                  "5-8 page custom design",                  "Premium responsive experience",                  "7-10 day delivery",                  "Comprehensive SEO strategy",                  "Advanced CMS integration",                  "CRM integration",                  "Performance analytics dashboard"
+                ]
+              },
+              {
+                id: "elite",                tag: "Best Value",                tagIcon: Gem,
+                price: "₹49,999",                period: "one-time",                description: "Fully customized solution for complex requirements.",                button: { text: "Choose Elite", href: "/consultation" },
+                featuresTitle: "Key Features",                features: [
+                  "Fully custom pages & features",                  "Bespoke design & development",                  "10-14 day delivery",                  "Dedicated project manager",                  "Ongoing support & maintenance",                  "Custom integrations & APIs",                  "Advanced security features"
+                ]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="why-us" data-section="why-us">
+          <FeatureCardTwentySeven
+            title="Why Vertex Digital?"
+            description="Partner with us for unparalleled expertise and dedicated support."
+            animationType="blur-reveal"
+            textboxLayout="default"
+            gridVariant="two-items-per-row"
+            useInvertedBackground={true}
+            features={[
+              {
+                id: "perf",                title: "Built for performance, not just design",                description: "Our websites are engineered for speed, efficiency, and flawless functionality, ensuring a superior user experience."
+              },
+              {
+                id: "conv",                title: "Conversion-focused structure",                description: "Every element is strategically placed to guide users towards your business goals, optimizing for conversions."
+              },
+              {
+                id: "fast",                title: "Fast, responsive, optimized",                description: "We deliver lightning-fast load times, seamless responsiveness across all devices, and meticulous optimization for search engines."
+              },
+              {
+                id: "premium",                title: "Premium, modern UI systems",                description: "Leverage cutting-edge design principles and modern UI frameworks to create an intuitive and engaging interface."
+              }
+            ]}
+          />
+        </div>
+
+        <div id="final-cta" data-section="final-cta">
+          <ContactCTA
+            title="Not sure which plan fits you?"
+            description="Let us help you find the perfect solution tailored to your needs. Reach out for a personalized consultation."
+            buttons={[
+              { text: "Book Consultation", href: "/consultation" },
+              { text: "Get Started", href: "/consultation" }
+            ]}
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
+            tag="Get In Touch"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Web Development", href: "/#services" },
+                  { label: "Branding", href: "/#services" },
+                  { label: "UI/UX Design", href: "/#services" },
+                  { label: "Digital Growth", href: "/#services" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "Home", href: "/" },
+                  { label: "Products", href: "/products" },
+                  { label: "Portfolio", href: "/#portfolio" },
+                  { label: "Testimonials", href: "/#testimonials" },
+                  { label: "Book Now", href: "/consultation" },
+                  { label: "Contact", href: "/#contact" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            bottomLeftText="© 2024 Vertex Digital. All rights reserved."
+            bottomRightText="Powered by Innovation"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-font-family: var(--font-inter), sans-serif;), sans-serif;
+  font-family: var(--font-font-family: var(--font-archivo), sans-serif;), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-font-family: var(--font-inter), sans-serif;), sans-serif;
+  font-family: var(--font-font-family: var(--font-archivo), sans-serif;), sans-serif;
 }

src/app/styles/variables.css

@@ -10,8 +10,8 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0A0A0A;
-  --card: #1A1A1A;
+  --background: #000000;
+  --card: #1a1a1a;
   --foreground: #E0E0E0;
   --primary-cta: #00D9FF;
   --primary-cta-text: #0A0A0A;

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;