Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,12 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
 
 export default function LandingPage() {
   return (
@@ -25,101 +25,86 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleCentered
+      <NavbarStyleApple
       navItems={[
         { name: "Home", id: "hero" },
-        { name: "Products", id: "products" },
-        { name: "Pricing", id: "pricing" },
+        { name: "Solutions", id: "products" },
+        { name: "Plans", id: "pricing" },
         { name: "Contact", id: "contact" },
       ]}
-      brandName="GrowthAccelerate"
+      brandName="PayScaleSystem"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
+      <HeroLogoBillboard
       background={{
-        variant: "plain"}}
-      title="Scale Your Revenue to $10k+ Weekly"
-      description="Unlock high-growth systems tailored to scale your operations and drive predictable revenue effortlessly."
+        variant: "sparkles-gradient"}}
+      logoText="Monetize Your Software"
+      description="Leverage our robust payment integration infrastructure to start charging $100+ for your application usage instantly."
       buttons={[
-        { text: "View Products", href: "#products" },
-      ]}
-      carouselItems={[
-        { id: "h1", imageSrc: "http://img.b2bpic.net/free-photo/empty-business-workplace-equipped-with-modern-tech-tools-serve-enterprise_482257-125151.jpg?_wi=1", imageAlt: "Dashboard View" },
-        { id: "h2", imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904311.jpg?_wi=1", imageAlt: "Metrics View" },
-        { id: "h3", imageSrc: "http://img.b2bpic.net/free-photo/solar-panels-plant-engineer-uses-pc-oversee-systems_482257-126156.jpg", imageAlt: "Network View" },
-        { id: "h4", imageSrc: "http://img.b2bpic.net/free-photo/jolly-it-expert-doing-maintenance-server-room-infrastructure_482257-124598.jpg", imageAlt: "Server View" },
-        { id: "h5", imageSrc: "http://img.b2bpic.net/free-photo/futurism-perspective-digital-nomads-lifestyle_23-2151252440.jpg?_wi=1", imageAlt: "Code View" },
-        { id: "h6", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-desktop-with-laptop-headphones_23-2148430894.jpg", imageAlt: "Workspace View" },
+        { text: "View Solutions", href: "#products" },
+        { text: "Start Monetizing", href: "#pricing" }
       ]}
+      mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardThree
-      title="Revenue Products"
-      description="Premium digital assets and systems to accelerate your business growth."
-      gridVariant="three-columns-all-equal-width"
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
+      <ProductCatalog
+      layout="section"
       products={[
-        { id: "prod1", name: "Growth Funnel Kit", price: "$499", imageSrc: "http://img.b2bpic.net/free-photo/paperwork-report-graphs-market-business_1232-3838.jpg", imageAlt: "Growth Kit" },
-        { id: "prod2", name: "Automation Scripts Pack", price: "$299", imageSrc: "http://img.b2bpic.net/free-photo/futurism-perspective-digital-nomads-lifestyle_23-2151252440.jpg?_wi=2", imageAlt: "Automation Scripts" },
-        { id: "prod3", name: "Strategy Session", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/group-graphics-designers-using-digital-tablet_1170-989.jpg?_wi=1", imageAlt: "Strategy Session" }
+        { id: "s1", name: "Basic Access Tier", price: "$100", rating: 4.8, imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904311.jpg?_wi=1" },
+        { id: "s2", name: "Professional Suite", price: "$250", rating: 4.9, imageSrc: "http://img.b2bpic.net/free-photo/empty-business-workplace-equipped-with-modern-tech-tools-serve-enterprise_482257-125151.jpg?_wi=1" },
+        { id: "s3", name: "Enterprise Module", price: "$500", rating: 5.0, imageSrc: "http://img.b2bpic.net/free-photo/futurism-perspective-digital-nomads-lifestyle_23-2151252440.jpg?_wi=1" }
       ]}
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardNine
+      <PricingCardFive
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
         {
-          id: "p1", title: "Accelerator", price: "$2,999", period: "/mo", features: [ "1-on-1 Strategy", "Funnel Automation", "Support" ],
-          button: { text: "Secure Checkout", href: "#contact" },
-          imageSrc: "http://img.b2bpic.net/free-photo/group-graphics-designers-using-digital-tablet_1170-989.jpg?_wi=2" 
+          id: "p1", tag: "Starter", price: "$100", period: "/mo", 
+          description: "Entry level access to premium features.",          featuresTitle: "Core Benefits",          features: [ "Payment API Access", "Standard Support", "1 User Seat" ],
+          button: { text: "Buy Now" }
         },
         {
-          id: "p2", title: "Growth Engine", price: "$5,999", period: "/mo", features: [ "Everything in Accelerator", "Custom Automation", "Priority" ],
-          button: { text: "Secure Checkout", href: "#contact" },
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-business-workplace-equipped-with-modern-tech-tools-serve-enterprise_482257-125151.jpg?_wi=2" 
-        },
-        {
-          id: "p3", title: "Enterprise Elite", price: "$10,999", period: "/mo", features: [ "Everything in Growth", "Full Dedicated Team", "24/7 Support" ],
-          button: { text: "Contact Sales", href: "#contact" },
-          imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904311.jpg?_wi=2" 
-        },
+          id: "p2", tag: "Growth", price: "$499", period: "/mo", 
+          description: "Perfect for scaling operations.",          featuresTitle: "Everything in Starter, plus:",          features: [ "Advanced Analytics", "Custom Webhooks", "5 User Seats" ],
+          button: { text: "Buy Now" }
+        }
       ]}
-      title="Transparent Growth Plans"
-      description="Secure your success with industry-leading systems."
+      title="Flexible Subscription Plans"
+      description="Pick the right plan to start earning $100+ per user."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactSplit
+      tag="Get Started"
+      title="Deploy Your Paywall"
+      description="Our team will help you integrate billing systems within 24 hours. Connect today."
+      background={{ variant: "gradient-bars" }}
       useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      tag="Conversion"
-      title="Ready to start?"
-      description="Our payment infrastructure is secure and verified. Apply today to finalize setup."
-      buttonText="Apply & Checkout"
-      onSubmit={(email) => console.log("Setup payment for:", email)}
+      buttonText="Request Integration"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="GrowthAccelerate"
-      leftLink={{ text: "Privacy Policy", href: "#" }}
-      rightLink={{ text: "Contact Support", href: "mailto:support@growthaccelerate.com" }}
+      <FooterMedia
+      logoText="PayScaleSystem"
+      imageSrc="http://img.b2bpic.net/free-photo/flat-lay-desktop-with-laptop-headphones_23-2148430894.jpg"
+      columns={[
+        { title: "Platform", items: [{ label: "Security", href: "#" }, { label: "Terms", href: "#" }] },
+        { title: "Support", items: [{ label: "Docs", href: "#" }, { label: "Email", href: "#" }] }
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}