From 88b7476bba45d6c19694b4fffd4e6bdacb5ecd0c Mon Sep 17 00:00:00 2001
From: development <mulikavj@gmail.com>
Date: Wed, 21 Jan 2026 19:52:53 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 84 ++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 67 insertions(+), 17 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0a5d2ea..9aacb7c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,9 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
 import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import { Zap, Sparkles, Quote, Star, Crown, Phone } from "lucide-react";
 
 export default function LandingPage() {
@@ -76,6 +79,55 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="hero-kpi" data-section="hero-kpi">
+        <HeroSplitKpi
+          title="Performance That Defies Expectation"
+          description="Witness the convergence of cutting-edge engineering and sonic perfection with BASE's immersive KPI showcase."
+          kpis={[
+            { value: "20Hz-150kHz", label: "Frequency Range" },
+            { value: "200dB SPL", label: "Sound Pressure" },
+            { value: "0.001%", label: "THD Distortion" }
+          ]}
+          enableKpiAnimation={true}
+          tag="Performance Metrics"
+          tagIcon={Sparkles}
+          imageSrc="https://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13940.jpg"
+          imageAlt="BASE Audio Performance"
+          imagePosition="right"
+          buttons={[
+            { text: "Explore Specs", href: "#technology" }
+          ]}
+          className="py-24"
+          titleClassName="text-4xl md:text-5xl font-extrabold text-foreground"
+          descriptionClassName="text-lg text-foreground/70 mt-4"
+          kpiClassName="group backdrop-blur-sm bg-card/80 rounded-xl border border-accent/20 p-6 hover:border-accent/60 transition-all"
+          kpiValueClassName="text-4xl font-extrabold text-accent"
+          kpiLabelClassName="text-sm text-foreground/70 mt-2"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <MetricSplitMediaAbout
+          tag="About BASE"
+          tagIcon={Zap}
+          title="Engineered for Excellence"
+          description="BASE represents the pinnacle of audio innovation. Every component is meticulously crafted and tested to deliver uncompromising sound quality that transcends traditional audio boundaries."
+          metrics={[
+            { value: "30+", title: "Years of Audio Expertise" },
+            { value: "50k+", title: "Satisfied Audiophiles" }
+          ]}
+          imageSrc="https://img.b2bpic.net/free-photo/wireless-speaker-amplifier-black_140725-7484.jpg"
+          imageAlt="BASE Engineering"
+          useInvertedBackground="invertDefault"
+          className="py-24"
+          titleClassName="text-4xl md:text-5xl font-extrabold text-foreground"
+          descriptionClassName="text-lg text-foreground/70 mt-4"
+          metricCardClassName="bg-card rounded-xl border border-accent/20 p-6 hover:border-accent/40 transition-colors"
+          metricValueClassName="text-4xl font-extrabold text-accent"
+          metricTitleClassName="text-sm text-foreground/70 mt-3"
+        />
+      </div>
+
       <div id="experience" data-section="experience">
         <ProductCardTwo
           title="Immersive Audio Experience"
@@ -114,40 +166,38 @@ export default function LandingPage() {
       </div>
 
       <div id="technology" data-section="technology">
-        <FeatureCardTwentyOne
-          title="Next-Generation Audio Technology"
-          description="Explore the innovative engineering that powers BASE speakers and delivers unparalleled sound quality."
-          tag="Advanced Technology"
+        <FeatureCardOne
+          title="Next-Generation Audio Innovation"
+          description="Explore the cutting-edge features and advanced engineering that make BASE the ultimate audio solution."
+          tag="Advanced Features"
           tagIcon={Zap}
-          accordionItems={[
+          features={[
             {
-              id: "1",              title: "Quantum Acoustic Processor",              content: "Our proprietary Quantum Acoustic Processor uses AI-driven algorithms to analyze and optimize sound in real-time, delivering perfectly balanced audio regardless of your room's acoustics. Each frequency is processed independently through our 48-core parallel processing system."
+              title: "Quantum Acoustic Processor",              description: "AI-driven real-time sound optimization with 48-core parallel processing for perfect audio balance.",              imageSrc: "https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170101.jpg",              imageAlt: "Quantum Acoustic Processor"
             },
             {
-              id: "2",              title: "Crystalline Driver Array",              content: "Hand-crafted crystalline drivers with molecular alignment create unprecedented clarity. Each driver is individually tuned to vibrate at precise frequencies, producing pure, untainted sound with zero distortion even at maximum volume."
+              title: "Crystalline Driver Array",              description: "Hand-crafted drivers with molecular alignment delivering unprecedented clarity and zero distortion.",              imageSrc: "https://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13940.jpg",              imageAlt: "Crystalline Driver Array"
             },
             {
-              id: "3",              title: "Magnetic Flux Waveguide",              content: "The proprietary Magnetic Flux Waveguide technology uses advanced electromagnetic fields to guide sound waves with surgical precision. This innovation eliminates phase distortion and creates an immersive 360-degree acoustic experience."
+              title: "Magnetic Flux Waveguide",              description: "Advanced electromagnetic field guidance eliminating phase distortion for immersive 360-degree sound.",              imageSrc: "https://img.b2bpic.net/free-photo/wireless-speaker-amplifier-black_140725-7484.jpg",              imageAlt: "Magnetic Flux Waveguide"
             },
             {
-              id: "4",              title: "Neural Listening Intelligence",              content: "Our Neural Listening system learns your preferences and automatically adapts the speaker's output over time. Machine learning algorithms continuously optimize bass response, midrange clarity, and treble extension based on your listening habits."
-            },
-            {
-              id: "5",              title: "Zero-Latency Connectivity",              content: "Quantum-encrypted wireless transmission with zero latency ensures your music is never delayed. Support for all major audio codecs including exclusive BASE-Lossless format for studio-quality streaming."
+              title: "Neural Listening Intelligence",              description: "Machine learning system that learns preferences and adapts audio output in real-time.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-military-protection-item_23-2149341299.jpg",              imageAlt: "Neural Listening Intelligence"
             }
           ]}
-          imageSrc="https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170101.jpg"
-          imageAlt="BASE Audio Technology"
+          gridVariant="two-columns-alternating-heights"
+          animationType="blur-reveal"
+          textboxLayout="default"
           useInvertedBackground="invertDefault"
-          mediaPosition="right"
           buttons={[
             { text: "Technical Specifications", href: "#" }
           ]}
           className="py-24"
           titleClassName="text-4xl md:text-5xl font-extrabold text-foreground"
           descriptionClassName="text-lg text-foreground/70 mt-4"
-          accordionClassName="border-b border-accent/20 last:border-b-0"
-          accordionTitleClassName="font-semibold text-foreground hover:text-accent transition-colors"
+          cardClassName="bg-card rounded-xl border border-accent/20 p-6 hover:border-accent/40 transition-all"
+          cardTitleClassName="text-xl font-bold text-foreground mt-4"
+          cardDescriptionClassName="text-foreground/70 mt-2"
         />
       </div>