Update src/app/page.tsx

src/app/page.tsx

@@ -2,15 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
+import { Cpu, Zap, Camera } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -30,22 +28,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Overview", id: "overview" },
-          name: "Overview",
+        { name: "Specs", id: "specs" },
-          id: "overview",
+        { name: "Features", id: "features" },
-        },
+        { name: "Details", id: "details" },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Specs",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="OnePlus 15"
     />
@@ -53,77 +39,53 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       title="OnePlus 15. The Next Evolution."
       description="Experience power beyond limits with the most advanced processor, stunning display, and professional-grade camera system."
       kpis={[
-        {
+        { value: "Snapdragon 8", label: "Processor" },
-          value: "Snapdragon 8",
+        { value: "144Hz", label: "Refresh Rate" },
-          label: "Processor",
+        { value: "5000mAh", label: "Battery" },
-        },
-        {
-          value: "144Hz",
-          label: "Refresh Rate",
-        },
-        {
-          value: "5000mAh",
-          label: "Battery",
-        },
       ]}
       enableKpiAnimation={true}
       imageSrc="http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074266.jpg"
       mediaAnimation="slide-up"
-      avatars={[
+    />
+  </div>
+
+  <div id="specs" data-section="specs">
+      <TimelinePhoneView
+      title="Technical Specifications"
+      description="Precision engineering in every component."
+      textboxLayout="split"
+      animationType="slide-up"
+      items={[
         {
-          src: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072188.jpg",
+          trigger: "Processor Power",          content: "Equipped with the latest Snapdragon 8 Elite chipset for unmatched performance."},
-          alt: "Tech user portrait",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074259.jpg",
+          trigger: "Display Technology",          content: "144Hz Fluid AMOLED display with extreme brightness and color accuracy."},
-          alt: "Tech user portrait",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/still-life-wireless-cyberpunk-headphones_23-2151072191.jpg",
+          trigger: "Battery System",          content: "5000mAh capacity with SuperVOOC fast charging capabilities."}
-          alt: "Tech user portrait",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074279.jpg",
-          alt: "Tech user portrait",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139320.jpg",
-          alt: "Tech user portrait",
-        },
-      ]}
-      avatarText="Join 50,000+ early adopters"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Ultra-Fast Charging",
-        },
-        {
-          type: "text",
-          text: "Pro-Grade Camera",
-        },
-        {
-          type: "text",
-          text: "144Hz Fluid Display",
-        },
-        {
-          type: "text",
-          text: "Snapdragon 8 Elite",
-        },
-        {
-          type: "text",
-          text: "AI-Enhanced Software",
-        },
       ]}
     />
   </div>
 
   <div id="features" data-section="features">
+      <FeatureBorderGlow
+      title="What is in the Box"
+      description="Everything you need to get started right away."
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={true}
+      features={[
+        { icon: Cpu, title: "OnePlus 15 Device", description: "The main unit with pre-applied screen protector." },
+        { icon: Zap, title: "100W Fast Charger", description: "High-speed power adapter for rapid charging." },
+        { icon: Camera, title: "Pro-Grade Cables", description: "High-durability data and charging cable." },
+      ]}
+    />
+  </div>
+
+  <div id="details" data-section="details">
       <FeatureCardTwentyNine
       animationType="slide-up"
       textboxLayout="split"
@@ -131,251 +93,20 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Ultra-Clear Camera",
+          title: "Advanced Camera System",          description: "Professional-grade sensors for all your photography needs.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-afternoon-shoots-phone-field_78492-3731.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/kitchen-faucet-water-aerator-metal-texture_169016-69557.jpg",          buttonText: "Learn More"},
-          description: "Capture life in stunning detail.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-afternoon-shoots-phone-field_78492-3731.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/kitchen-faucet-water-aerator-metal-texture_169016-69557.jpg",
-          buttonText: "Explore",
-        },
         {
-          title: "Pro Display",
+          title: "Enhanced Design",          description: "Ergonomic grip with premium materials.",          imageSrc: "http://img.b2bpic.net/free-photo/full-frame-water-droplets-grey-feather-surface_23-2148114606.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-colorful-background_58702-4932.jpg",          buttonText: "Learn More"},
-          description: "Fluid, crisp, and incredibly bright.",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-frame-water-droplets-grey-feather-surface_23-2148114606.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-colorful-background_58702-4932.jpg",
-          buttonText: "Discover",
-        },
-        {
-          title: "Rapid Charging",
-          description: "Go from zero to full in minutes.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-technological-pieces-background_23-2148882665.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-with-flowing-cyber-particles_1048-14023.jpg",
-          buttonText: "Read More",
-        },
       ]}
-      title="Unrivaled Capabilities"
+      title="Product Details"
-      description="Engineered for excellence in every detail."
+      description="Deep dive into what makes the OnePlus 15 unique."
-    />
-  </div>
-
-  <div id="performance" data-section="performance">
-      <MetricCardTwo
-      animationType="depth-3d"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "20%",
-          description: "Faster CPU speeds",
-        },
-        {
-          id: "m2",
-          value: "30%",
-          description: "Better energy efficiency",
-        },
-        {
-          id: "m3",
-          value: "40%",
-          description: "Graphics improvement",
-        },
-      ]}
-      title="Built for Performance"
-      description="Setting new benchmarks in the industry."
-    />
-  </div>
-
-  <div id="products" data-section="products">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Black Obsidian",
-          price: "$899",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-with-short-hair-white-turtleneck-wearing-beret-red-sunglasses-doing-selfie-using-smartphone-smiling-cheerfully-standing-orange-wall_141793-62268.jpg",
-        },
-        {
-          id: "p2",
-          name: "Midnight Blue",
-          price: "$899",
-          imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-colorful-background_58702-4863.jpg",
-        },
-        {
-          id: "p3",
-          name: "Sterling Silver",
-          price: "$949",
-          imageSrc: "http://img.b2bpic.net/free-photo/new-cell-phone-colorful-background_58702-5033.jpg",
-        },
-        {
-          id: "p4",
-          name: "Matte Forest",
-          price: "$899",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-asian-woman-taking-selfie_23-2149122949.jpg",
-        },
-        {
-          id: "p5",
-          name: "Horizon Orange",
-          price: "$999",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-excited-blond-girl-hat-using-voice-command-recorder-smartphone-yellow-background_574295-4456.jpg",
-        },
-        {
-          id: "p6",
-          name: "Arctic White",
-          price: "$949",
-          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-phone-14-with-crescent-left-side-white-background_187299-35109.jpg",
-        },
-      ]}
-      title="Choose Your Style"
-      description="Available in a range of premium finishes."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "Sarah J.",
-          role: "Tech Reviewer",
-          testimonial: "The best OnePlus experience yet.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",
-        },
-        {
-          id: "2",
-          name: "Michael B.",
-          role: "Creative Director",
-          testimonial: "The camera is absolutely stunning.",
-          imageSrc: "http://img.b2bpic.net/free-photo/image-corporate-woman-working-office-sitting-front-laptop-preparing-business_1258-194628.jpg",
-        },
-        {
-          id: "3",
-          name: "Alex R.",
-          role: "Developer",
-          testimonial: "Unmatched performance for daily tasks.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-exhausted-workaholic-man-manager-typing-financial-strategy-using-laptop-computer-while-sitting-desk-table-business-company-office_482257-2321.jpg",
-        },
-        {
-          id: "4",
-          name: "Chloe M.",
-          role: "Photographer",
-          testimonial: "It's replaced my secondary camera.",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-technology-leisure-concept-fashionable-young-man-with-beard-listening-songs-earphones-using-online-music-app-his-laptop-computer_273609-1957.jpg",
-        },
-        {
-          id: "5",
-          name: "James K.",
-          role: "Gamer",
-          testimonial: "Graphics performance is top-tier.",
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-artist-looking-vase-model-draw-canvas-using-hobby-artistic-skills-create-professional-authentic-sketch-creative-masterpiece-drawing-with-inspiration-imagination_482257-49973.jpg",
-        },
-      ]}
-      title="Loved by Critics and Users"
-      description="Hear what the world is saying about the new OnePlus."
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "basic",
-          price: "$899",
-          name: "Standard Edition",
-          buttons: [
-            {
-              text: "Buy Now",
-            },
-          ],
-          features: [
-            "12GB RAM",
-            "256GB Storage",
-            "Standard Camera",
-          ],
-        },
-        {
-          id: "pro",
-          price: "$1099",
-          name: "Pro Edition",
-          buttons: [
-            {
-              text: "Buy Now",
-            },
-          ],
-          features: [
-            "16GB RAM",
-            "512GB Storage",
-            "Pro Camera System",
-          ],
-        },
-        {
-          id: "ultra",
-          price: "$1299",
-          name: "Ultra Edition",
-          buttons: [
-            {
-              text: "Buy Now",
-            },
-          ],
-          features: [
-            "24GB RAM",
-            "1TB Storage",
-            "Ultra Camera Lens",
-          ],
-        },
-      ]}
-      title="Select Your Configuration"
-      description="Choose the model that fits your needs."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "q1",
-          title: "Does it support fast charging?",
-          content: "Yes, it supports SuperVOOC fast charging.",
-        },
-        {
-          id: "q2",
-          title: "Is it water resistant?",
-          content: "Yes, it comes with an IP68 rating.",
-        },
-        {
-          id: "q3",
-          title: "Does it have a telephoto lens?",
-          content: "Yes, it includes a professional telephoto lens.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Everything you need to know about OnePlus 15."
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="OnePlus 15"
-      leftLink={{
+      leftLink={{ text: "Privacy Policy", href: "#" }}
-        text: "Privacy Policy",
+      rightLink={{ text: "Terms of Service", href: "#" }}
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #ffffff;
-  --card: #1a1a1a;
+  --card: #f9f9f9;
-  --foreground: #ffffff;
+  --foreground: #000612e6;
-  --primary-cta: #1f7cff;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #010101;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #ffffff;
-  --accent: #1f7cff;
+  --accent: #e2e2e2;
-  --background-accent: #f96b2f;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);