Update src/app/products/page.tsx

Merge version_8 into main

src/app/consultation/page.tsx

@@ -8,23 +8,23 @@ 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: 'Products', id: '/products' },
+    { name: 'Portfolio', id: '/#portfolio' },
+    { name: 'Testimonials', id: '/#testimonials' },
+    { name: 'Book Now', 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 +70,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>
 
@@ -135,10 +143,11 @@ export default function ConsultationPage() {
               {
                 title: "Company",                items: [
                   { label: "Home", href: "/" },
+                  { label: "Products", href: "/products" },
                   { label: "Portfolio", href: "/#portfolio" },
                   { label: "Testimonials", href: "/#testimonials" },
-                  { label: "Contact", href: "/#contact" },
-                  { label: "Consultation", href: "/consultation" }
+                  { label: "Book Now", href: "/consultation" },
+                  { label: "Contact", href: "/#contact" }
                 ]
               },
               {
@@ -155,4 +164,4 @@ export default function ConsultationPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

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>
 

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>
+  );
+}