From 97555db030f873108ca441ec259e163f82d27ce5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 1 Apr 2026 01:50:57 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 384 +++++++++++++----------------------------------
 1 file changed, 104 insertions(+), 280 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 80dd8e7..5b5187d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,14 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import { Cpu, Zap, CreditCard, ShieldCheck, Target, BarChart3, Users, MessageSquareText } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -19,287 +20,110 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="mediumLarge"
         sizing="largeSmallSizeMediumTitles"
-        background="noise"
-        cardStyle="outline"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="layered"
-        headingFontWeight="extrabold"
+        background="grid"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Metrics",
-          id: "metrics",
-        },
-        {
-          name: "Support",
-          id: "faq",
-        },
-      ]}
-      brandName="AI-Shop"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="ModernTech"
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Features", id: "features" },
+              { name: "Metrics", id: "metrics" },
+              { name: "Testimonials", id: "testimonials" },
+              { name: "Support", id: "faq" },
+              { name: "Contact", id: "contact" }
+            ]}
+            button={{ text: "Get Started", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardCarousel
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      title="Next-Gen AI E-Commerce Platform"
-      description="Drive +25% AOV and <2s load times with our Google-native AI commerce architecture. Zero-friction checkout meets hyper-personalization."
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#",
-        },
-        {
-          text: "View Specs",
-          href: "#features",
-        },
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=1",
-          imageAlt: "Platform Dashboard",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=2",
-          imageAlt: "Platform Dashboard",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=3",
-          imageAlt: "Platform Dashboard",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=4",
-          imageAlt: "Platform Dashboard",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=5",
-          imageAlt: "Platform Dashboard",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=6",
-          imageAlt: "Platform Dashboard",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroOverlay
+            title="Future-Proof Commerce Architecture"
+            description="Scale effortlessly with high-performance, AI-native infrastructure designed for modern digital storefronts."
+            tag="Modern Tech Stack"
+            tagIcon={Cpu}
+            buttons={[{ text: "Explore Tech", href: "#features" }, { text: "Contact Us", href: "#contact" }]}
+            imageSrc="http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150519159.jpg?_wi=1"
+            showBlur={true}
+            showDimOverlay={true}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardEight
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: 1,
-          title: "Vertex AI Search",
-          description: "Deliver lightning-fast, semantic product discovery.",
-          imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-web-shop-e-shopping-concept_53876-124856.jpg",
-          imageAlt: "Search AI",
-        },
-        {
-          id: 2,
-          title: "Dialogflow Chatbot",
-          description: "Automate support with human-like AI agents.",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-95318.jpg",
-          imageAlt: "Chat AI",
-        },
-        {
-          id: 3,
-          title: "Zero-Friction Pay",
-          description: "Streamlined Google Pay native integration.",
-          imageSrc: "http://img.b2bpic.net/free-vector/onboarding-app-concept-online-purchase_23-2148415352.jpg",
-          imageAlt: "Payment AI",
-        },
-      ]}
-      title="AI-Powered Conversion Pillars"
-      description="Unlock growth with our comprehensive Google Cloud-native feature set."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureBorderGlow
+            title="Next-Gen Capabilities"
+            description="Built for scale, speed, and maximum engagement."
+            features={[
+              { icon: Zap, title: "Hyper-Fast Performance", description: "Optimized load times with global edge caching." },
+              { icon: CreditCard, title: "Seamless Payments", description: "Frictionless checkout with smart routing." },
+              { icon: ShieldCheck, title: "Enterprise Security", description: "End-to-end encryption for total store protection." }
+            ]}
+            animationType="blur-reveal"
+            textboxLayout="split"
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
-      useInvertedBackground={false}
-      title="Performance KPIs"
-      tag="Data Driven"
-      metrics={[
-        {
-          id: "m1",
-          value: "3%",
-          description: "Target Conversion Rate",
-        },
-        {
-          id: "m2",
-          value: "2s",
-          description: "Target Load Time",
-        },
-        {
-          id: "m3",
-          value: "25%",
-          description: "Target AOV Increase",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardEleven
+            title="Proven Impact"
+            description="Data-backed improvements across the entire funnel."
+            animationType="slide-up"
+            metrics={[
+              { id: "1", value: "35%", title: "AOV Increase", description: "Driven by smarter recommendation engines.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5353.jpg?_wi=1" },
+              { id: "2", value: "40%", title: "Latency Reduction", description: "Global distribution optimization.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-sofa-waiting-area_107420-95816.jpg" }
+            ]}
+            textboxLayout="split"
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Johnson",
-          handle: "@sarahj",
-          testimonial: "The AI personalization doubled our engagement in weeks.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5353.jpg?_wi=1",
-        },
-        {
-          id: "t2",
-          name: "Michael Chen",
-          handle: "@mchen",
-          testimonial: "Unmatched load speeds. Our conversion rate never looked better.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-thinking-posing-beige-wall_176420-144.jpg",
-        },
-        {
-          id: "t3",
-          name: "Emily Rodriguez",
-          handle: "@erod",
-          testimonial: "Seamless integration, instant results. Highly recommended.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-sofa-waiting-area_107420-95816.jpg",
-        },
-        {
-          id: "t4",
-          name: "David Kim",
-          handle: "@dkim",
-          testimonial: "The Vertex AI implementation was effortless and transformative.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-dress-code-holding-black-jacket-his-shoulder_114579-19028.jpg",
-        },
-        {
-          id: "t5",
-          name: "Jessica Lee",
-          handle: "@jlee",
-          testimonial: "Finally, a platform that understands modern retail tech stacks.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5353.jpg?_wi=2",
-        },
-      ]}
-      showRating={true}
-      title="What Partners Say"
-      description="See why high-growth brands trust our commerce architecture."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTen
+            title="Industry Insights"
+            description="Hear from our partners successfully navigating growth."
+            textboxLayout="split"
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "1", title: "Unmatched Growth", quote: "The transformation to this architecture was seamless.", name: "Alex Rivera", role: "CTO, ShopScale", imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-thinking-posing-beige-wall_176420-144.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How long is the build?",
-          content: "Our structured timeline is exactly 8 weeks from setup to go-live.",
-        },
-        {
-          id: "f2",
-          title: "Do you use Vertex AI?",
-          content: "Yes, we integrate Vertex AI for search, recommendations, and copy generation.",
-        },
-        {
-          id: "f3",
-          title: "What about payments?",
-          content: "We prioritize Google-native flows including Google Pay for maximum trust.",
-        },
-      ]}
-      title="Implementation FAQs"
-      description="Common questions regarding our 8-week build timeline."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            faqs={[
+              { id: "1", title: "Integration timeline?", content: "Our rapid migration process takes 4-6 weeks." },
+              { id: "2", title: "Scaling support?", content: "Fully managed infrastructure with 24/7 monitoring." }
+            ]}
+            sideTitle="Frequently Asked Questions"
+            sideDescription="Everything you need to know about our modern tech solutions."
+            faqsAnimation="blur-reveal"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Ready to Start"
-      title="Build Your High-Converting Store"
-      description="Ready to hit these KPIs? Let’s map out your 8-week launch roadmap today."
-      buttons={[
-        {
-          text: "Schedule Consultation",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Get In Touch"
+            title="Ready to Modernize?"
+            description="Let's discuss how our platform fits your growth goals."
+            background={{ variant: "sparkles-gradient" }}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Platform",
-          items: [
-            {
-              label: "Architecture",
-              href: "#",
-            },
-            {
-              label: "Vertex AI",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Timeline",
-          items: [
-            {
-              label: "8-Week Plan",
-              href: "#",
-            },
-            {
-              label: "Go-Live",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Documentation",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 AI-Shop Architecture"
-      bottomRightText="All rights reserved."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="ModernTech"
+            socialLinks={[{ icon: MessageSquareText, href: "#", ariaLabel: "Support" }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1