Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -3,41 +3,18 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Zap, Sparkles, Quote, Star, Crown, Phone } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-type Page = 'home' | 'experience' | 'technology' | 'testimonials' | 'pricing' | 'contact';
 
 export default function LandingPage() {
-  const router = useRouter();
-  const [currentPage, setCurrentPage] = useState<Page>('home');
-
-  const navigateToPage = (page: Page) => {
-    setCurrentPage(page);
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-
-  const handleNavigation = (id: string) => {
-    const pageMap: { [key: string]: Page } = {
-      'experience': 'experience',
-      'technology': 'technology',
-      'testimonials': 'testimonials',
-      'pricing': 'pricing',
-      'contact': 'contact',
-    };
-    if (pageMap[id]) {
-      navigateToPage(pageMap[id]);
-    }
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -61,22 +38,17 @@ export default function LandingPage() {
             { name: "Pricing", id: "pricing" }
           ]}
           button={{
-            text: "Reserve Now",            onClick: () => navigateToPage('contact')
+            text: "Reserve Now",            href: "#contact"
           }}
-          className="bg-background/80 backdrop-blur-md border border-accent/20 rounded-full"
-          navItemClassName="text-foreground/80 hover:text-accent transition-colors duration-300"
-          buttonClassName="bg-primary-cta hover:bg-primary-cta/90 text-white rounded-full"
-          buttonTextClassName="font-semibold"
         />
       </div>
 
-      {currentPage === 'home' && (
       <div id="hero" data-section="hero">
         <HeroCarouselLogo
           logoText="BASE"
           description="Experience the future of premium audio with cutting-edge technology that redefines sound."
           buttons={[
-              { text: "Explore Now", onClick: () => navigateToPage('experience') },
+            { text: "Explore Now", href: "#experience" },
             { text: "Watch Demo", href: "#" }
           ]}
           slides={[
@@ -92,18 +64,46 @@ export default function LandingPage() {
           ]}
           autoplayDelay={5000}
           showDimOverlay={true}
-            logoLineHeight={1.05}
-            ariaLabel="BASE Speaker Hero Section"
-            className="relative min-h-screen overflow-hidden"
-            logoClassName="text-primary-cta drop-shadow-2xl"
-            descriptionClassName="text-foreground/90 font-light tracking-wide"
-            buttonClassName="group relative rounded-full overflow-hidden"
-            buttonTextClassName="relative z-10 font-semibold"
         />
       </div>
-      )}
 
-      {currentPage === 'experience' && (
+      <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" }
+          ]}
+        />
+      </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"
+        />
+      </div>
+
       <div id="experience" data-section="experience">
         <ProductCardTwo
           title="Immersive Audio Experience"
@@ -133,56 +133,76 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground="noInvert"
           buttons={[
-              { text: "Back to Home", onClick: () => navigateToPage('home') }
+            { text: "View All Models", href: "#" }
           ]}
-            className="py-20"
-            cardClassName="group hover:shadow-2xl transition-all duration-500"
-            imageClassName="group-hover:scale-105 transition-transform duration-700"
         />
       </div>
-      )}
 
-      {currentPage === 'technology' && (
       <div id="technology" data-section="technology">
-          <FeatureCardTwentyOne
+        <FeatureCardOne
-            title="Next-Generation Audio Technology"
+          title="Next-Generation Audio Innovation"
-            description="Explore the innovative engineering that powers BASE speakers and delivers unparalleled sound quality."
+          description="Explore the cutting-edge features and advanced engineering that make BASE the ultimate audio solution."
-            tag="Advanced Technology"
+          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."
+              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"
-              },
-              {
-                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."
             }
           ]}
-            imageSrc="https://img.b2bpic.net/free-photo/managing-smart-speakers-concept_23-2150170101.jpg"
+          gridVariant="two-columns-alternating-heights"
-            imageAlt="BASE Audio Technology"
+          animationType="blur-reveal"
+          textboxLayout="default"
           useInvertedBackground="invertDefault"
-            mediaPosition="right"
           buttons={[
-              { text: "Back to Home", onClick: () => navigateToPage('home') }
+            { 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"
         />
       </div>
-      )}
 
-      {currentPage === 'testimonials' && (
+      <div id="metrics" data-section="metrics">
+        <MetricCardSeven
+          title="Unmatched Performance"
+          description="Performance metrics that showcase why BASE is the choice of audiophiles worldwide."
+          tag="Performance"
+          tagIcon={Sparkles}
+          metrics={[
+            {
+              id: "1",              value: "20Hz-150kHz",              title: "Frequency Response Range",              items: [
+                "Ultrasonic clarity beyond human hearing",                "Subsonic bass frequencies",                "Crystal-clear midrange and treble"
+              ]
+            },
+            {
+              id: "2",              value: "200dB SPL",              title: "Maximum Sound Pressure",              items: [
+                "Concert-hall loudness capability",                "Zero distortion at high volumes",                "Dynamic range preservation"
+              ]
+            },
+            {
+              id: "3",              value: "0.001%",              title: "Total Harmonic Distortion",              items: [
+                "Studio-grade accuracy",                "Pure tone reproduction",                "Professional monitoring standard"
+              ]
+            },
+            {
+              id: "4",              value: "48-Core",              title: "Processing Power",              items: [
+                "Real-time audio optimization",                "AI-driven sound enhancement",                "Parallel processing architecture"
+              ]
+            }
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="blur-reveal"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardSix
           title="Trusted by Audio Professionals"
@@ -208,23 +228,15 @@ export default function LandingPage() {
             {
               id: "6",              name: "Priya Kapoor",              handle: "@priyakapoor_audio",              testimonial: "Worth every penny. BASE delivers an immersive experience that makes you forget about everything else. Pure audio bliss.",              imageSrc: "https://img.b2bpic.net/free-photo/cheerful-young-businesswoman-smiling-camera_74855-4022.jpg",              imageAlt: "Priya Kapoor"
             }
-            ]}
+          ]
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground="invertDefault"
           speed={50}
           topMarqueeDirection="left"
-            className="py-20"
-            cardClassName="bg-card rounded-xl border border-accent/10 p-6 hover:border-accent/40 transition-colors"
-            testimonialClassName="text-foreground/90 leading-relaxed line-clamp-2"
-            buttons={[
-              { text: "Back to Home", onClick: () => navigateToPage('home') }
-            ]}
         />
       </div>
-      )}
 
-      {currentPage === 'pricing' && (
       <div id="pricing" data-section="pricing">
         <PricingCardFive
           title="Investment in Sonic Perfection"
@@ -238,7 +250,7 @@ export default function LandingPage() {
             {
               id: "pro",              tag: "Pro Elite",              tagIcon: Star,
               price: "$8,999",              period: "one-time",              description: "Perfect for audiophile enthusiasts and high-quality home listening.",              button: {
-                  text: "Choose Pro Elite",                  onClick: () => navigateToPage('contact')
+                text: "Choose Pro Elite",                href: "#contact"
               },
               featuresTitle: "What's Included:",              features: [
                 "Quantum Acoustic Processor",                "Crystalline Driver Array",                "Zero-Latency Connectivity",                "Neural Listening Intelligence",                "Lifetime Technical Support",                "Premium Build Materials"
@@ -247,7 +259,7 @@ export default function LandingPage() {
             {
               id: "studio",              tag: "Studio Master",              tagIcon: Zap,
               price: "$12,499",              period: "one-time",              description: "Professional-grade system for studios and serious collectors.",              button: {
-                  text: "Choose Studio Master",                  onClick: () => navigateToPage('contact')
+                text: "Choose Studio Master",                href: "#contact"
               },
               featuresTitle: "What's Included:",              features: [
                 "Everything in Pro Elite",                "Advanced Magnetic Flux Waveguide",                "48-Core Processing Power",                "Studio Calibration Service",                "Custom Acoustic Tuning",                "Priority Support Hotline"
@@ -256,7 +268,7 @@ export default function LandingPage() {
             {
               id: "concert",              tag: "Concert Grand",              tagIcon: Crown,
               price: "$15,999",              period: "one-time",              description: "Ultimate reference system for the most demanding audiophiles.",              button: {
-                  text: "Choose Concert Grand",                  onClick: () => navigateToPage('contact')
+                text: "Choose Concert Grand",                href: "#contact"
               },
               featuresTitle: "What's Included:",              features: [
                 "Everything in Studio Master",                "Hand-Tuned Components",                "Concert Hall Acoustics Package",                "Dedicated Account Manager",                "Exclusive Firmware Updates",                "Lifetime Replacement Guarantee"
@@ -265,25 +277,16 @@ export default function LandingPage() {
             {
               id: "infinity",              tag: "Infinity Limited",              tagIcon: Zap,
               price: "$24,999",              period: "one-time",              description: "The absolute pinnacle of audio engineering. Extremely limited production.",              button: {
-                  text: "Reserve Infinity",                  onClick: () => navigateToPage('contact')
+                text: "Reserve Infinity",                href: "#contact"
               },
               featuresTitle: "What's Included:",              features: [
                 "Everything in Concert Grand",                "Custom Artisan Craftsmanship",                "Bespoke Installation Service",                "Personal Audio Consulting",                "Legacy Ownership Program",                "VIP Community Access"
               ]
             }
-            ]}
+          ]
-            className="py-24"
-            cardClassName="rounded-2xl border border-accent/20 hover:border-accent/60 transition-all duration-300"
-            planPriceClassName="text-5xl font-extrabold text-accent"
-            buttons={[
-              { text: "Back to Home", onClick: () => navigateToPage('home') }
-            ]}
         />
       </div>
-      )}
 
-      {currentPage === 'contact' && (
-        <>
       <div id="contact" data-section="contact">
         <ContactFaq
           ctaTitle="Ready to Experience BASE?"
@@ -311,15 +314,11 @@ export default function LandingPage() {
             {
               id: "6",              title: "What is the Neural Listening Intelligence feature?",              content: "This proprietary AI system learns your listening preferences and automatically optimizes the speaker's output over time. It continuously adjusts frequency response, dynamics, and spatial imaging for a personalized experience unique to you."
             }
-              ]}
+          ]
           useInvertedBackground="invertDefault"
           animationType="slide-up"
           accordionAnimationType="smooth"
           showCard={true}
-              className="py-24"
-              ctaTitleClassName="text-3xl md:text-4xl font-extrabold text-foreground"
-              ctaDescriptionClassName="text-lg text-foreground/70 mt-2"
-              accordionTitleClassName="font-semibold text-foreground"
         />
       </div>
 
@@ -355,23 +354,8 @@ export default function LandingPage() {
               ]
             }
           ]}
-              className="relative"
-              mediaWrapperClassName="absolute inset-0 opacity-30"
-              logoTextClassName="text-2xl font-extrabold text-foreground"
-              columnTitleClassName="text-foreground font-semibold mb-4"
-              columnItemClassName="text-foreground/70 hover:text-accent transition-colors"
         />
-            <div className="text-center py-4 border-t border-accent/20">
-              <button
-                onClick={() => navigateToPage('home')}
-                className="text-foreground/70 hover:text-accent transition-colors text-sm"
-              >
-                Back to Home
-              </button>
       </div>
-          </div>
-        </>
-      )}
     </ThemeProvider>
   );
 }