Update src/app/page.tsx

src/app/page.tsx

@@ -2,14 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import { Camera, Database, Monitor, Shield, Signal } from "lucide-react";
+import { Instagram, Twitter, Facebook } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -20,251 +20,101 @@ export default function LandingPage() {
         contentWidth="mediumLarge"
         sizing="mediumLargeSizeMediumTitles"
         background="none"
-        cardStyle="layered-gradient"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="shadow"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="medium"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+      <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Features", id: "features" },
-          name: "Features",
+        { name: "Camera", id: "camera" },
-          id: "features",
+        { name: "FAQ", id: "faq" },
-        },
-        {
-          name: "Camera",
-          id: "camera",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
       ]}
       brandName="iPhone 17"
+      button={{ text: "Pre-order", href: "#" }}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroCentered
+      <HeroLogoBillboard
-      background={{
+      logoText="iPhone 17 Pro Max"
-        variant: "radial-gradient",
+      description="Transcend Reality. The ultimate leap in power, design, and optics."
-      }}
+      buttons={[{ text: "Learn More" }, { text: "Pre-order Now" }]}
-      title="iPhone 17 Pro Max: Transcend Reality."
+      background={{ variant: "sparkles-gradient" }}
-      description="The ultimate leap in power, design, and optics. Experience the future of mobile innovation in the palm of your hand."
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/a-hyper-realistic-cinematic-shot-of-the--1774858570572-45fef29d.png"
-      avatars={[
+      mediaAnimation="blur-reveal"
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/a-hyper-realistic-cinematic-shot-of-the--1774858570572-45fef29d.png",
-          alt: "iPhone 17 Pro Max",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/a-hyper-realistic-cinematic-shot-of-the--1774858570572-45fef29d.png",
-          alt: "Side profile",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/a-hyper-realistic-cinematic-shot-of-the--1774858570572-45fef29d.png",
-          alt: "Top view",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/a-hyper-realistic-cinematic-shot-of-the--1774858570572-45fef29d.png",
-          alt: "Back view",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/a-hyper-realistic-cinematic-shot-of-the--1774858570572-45fef29d.png",
-          alt: "Front view",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Pre-order Now",
-          href: "#",
-        },
-      ]}
-      buttonAnimation="slide-up"
-      marqueeItems={[
-        {
-          type: "text-icon",
-          text: "A19 Bionic Chip",
-          icon: Database,
-        },
-        {
-          type: "text-icon",
-          text: "Titanium Build",
-          icon: Shield,
-        },
-        {
-          type: "text-icon",
-          text: "Pro Camera",
-          icon: Camera,
-        },
-        {
-          type: "text-icon",
-          text: "Ultra 5G",
-          icon: Signal,
-        },
-        {
-          type: "text-icon",
-          text: "Super Retina XDR",
-          icon: Monitor,
-        },
-      ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardEight
+      <FeatureCardNineteen
       textboxLayout="split"
       useInvertedBackground={false}
+      title="Engineered for Excellence"
+      description="Push the boundaries of performance and efficiency."
       features={[
         {
           id: 1,
-          title: "A19 Bionic Chip",
+          tag: "Performance",          title: "A19 Bionic",          subtitle: "Unmatched speed",          description: "The fastest chip ever in a smartphone.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/macro-shot-of-a-high-performance-a-serie-1774858575383-e2d3f995.png"
-          description: "The fastest chip ever in a smartphone.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/macro-shot-of-a-high-performance-a-serie-1774858575383-e2d3f995.png",
         },
         {
           id: 2,
-          title: "Ultra 5G Connectivity",
+          tag: "Display",          title: "Super Retina XDR",          subtitle: "True-to-life",          description: "Stunning, edge-to-edge vibrant display.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/close-up-of-a-vibrant-color-accurate-ole-1774858572775-3e683bbc.png"
-          description: "Near-instant downloads and streaming.",
+        }
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/abstract-visualization-of-5g-ultra-fast--1774858572963-c103739d.png",
-        },
-        {
-          id: 3,
-          title: "Super Retina XDR",
-          description: "Stunning, edge-to-edge display.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/close-up-of-a-vibrant-color-accurate-ole-1774858572775-3e683bbc.png",
-        },
       ]}
-      title="Unmatched Performance"
-      description="Engineered for those who push boundaries, the A19 Bionic chip redefines efficiency and raw processing power."
     />
   </div>
 
   <div id="camera" data-section="camera">
-      <ProductCardThree
+      <ProductCardFour
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="asymmetric-60-wide-40-narrow"
+      gridVariant="bento-grid"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
+      title="Pro Camera System"
+      description="Capture your world in professional cinematic quality."
       products={[
-        {
+        { id: "1", name: "48MP Ultra-Wide", price: "$999", variant: "Silver", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/close-up-of-the-professional-grade-tripl-1774858574631-be3d0005.png" },
-          id: "cam-wide",
+        { id: "2", name: "Night Engine", price: "$1099", variant: "Titanium", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/a-stunning-night-photography-shot-of-a-c-1774858570000-f670d0cc.png" }
-          name: "48MP Ultra-Wide",
-          price: "Pro System",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/close-up-of-the-professional-grade-tripl-1774858574631-be3d0005.png",
-        },
-        {
-          id: "cam-night",
-          name: "Night Engine",
-          price: "Low-Light King",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/a-stunning-night-photography-shot-of-a-c-1774858570000-f670d0cc.png",
-        },
-        {
-          id: "cam-macro",
-          name: "Macro Optics",
-          price: "Extreme Detail",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/dramatic-macro-shot-of-a-butterfly-wing--1774858570460-557d8a8a.png",
-        },
       ]}
-      title="Professional Camera System"
-      description="Three advanced lenses working in harmony to capture every detail."
     />
   </div>
 
   <div id="social" data-section="social">
       <SocialProofOne
-      textboxLayout="split"
+      names={["TechDaily", "FutureLabs", "ProLens", "InnovateGrid"]}
+      title="Industry Leading Innovators"
+      description="Used by the creators shaping the future."
+      textboxLayout="default"
       useInvertedBackground={false}
-      names={[
-        "TechDaily",
-        "FutureLabs",
-        "ProLens",
-        "InnovateGrid",
-        "DigitalStream",
-      ]}
-      logos={[
-        "http://img.b2bpic.net/free-vector/technology-logo-template-with-abstract-shapes_23-2148240852.jpg",
-        "http://img.b2bpic.net/free-vector/surf-landing-page-template_1361-895.jpg",
-        "http://img.b2bpic.net/free-vector/round-technology-logo_1051-868.jpg",
-        "http://img.b2bpic.net/free-vector/flat-electronics-logo-templates_23-2148967984.jpg",
-        "http://img.b2bpic.net/free-vector/technology-logo-collection-gradient-style_52683-13893.jpg",
-      ]}
-      title="Trusted by Creators"
-      description="Join the global community of professional creators and innovators who trust our technology."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqSplitMedia
-      textboxLayout="split"
+      title="Questions?"
-      useInvertedBackground={false}
+      description="We have the answers you need about the iPhone 17."
       faqs={[
-        {
+        { id: "1", title: "Is it water resistant?", content: "Yes, IP68 rated." },
-          id: "1",
+        { id: "2", title: "When does it launch?", content: "Next month." }
-          title: "When will it be available?",
-          content: "The iPhone 17 Pro Max will be available next month.",
-        },
-        {
-          id: "2",
-          title: "Is it water resistant?",
-          content: "Yes, it features an IP68 rating.",
-        },
-        {
-          id: "3",
-          title: "Does it support fast charging?",
-          content: "Absolutely, it supports rapid charging.",
-        },
       ]}
-      title="Frequently Asked Questions"
-      description="Have questions about the new iPhone 17 Pro Max? We have answers."
       faqsAnimation="slide-up"
+      textboxLayout="split"
+      mediaPosition="right"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
+      <FooterCard
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BengpMbfPNHFPcX00ZM29mmSBd/a-hyper-realistic-cinematic-shot-of-the--1774858570572-45fef29d.png"
+      logoText="iPhone 17 Pro Max"
-      columns={[
+      socialLinks={[
-        {
+        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
-          title: "Product",
+        { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-          items: [
+        { icon: Facebook, href: "#", ariaLabel: "Facebook" }
-            {
-              label: "Features",
-              href: "#",
-            },
-            {
-              label: "Specs",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#",
-            },
-            {
-              label: "Press",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Help",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#",
-            },
-          ],
-        },
       ]}
     />
   </div>