Update src/app/page.tsx

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
@@ -11,8 +11,33 @@ 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"
@@ -36,7 +61,7 @@ export default function LandingPage() {
             { name: "Pricing", id: "pricing" }
           ]}
           button={{
-            text: "Reserve Now",            href: "#contact"
+            text: "Reserve Now",            onClick: () => navigateToPage('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"
@@ -45,12 +70,13 @@ export default function LandingPage() {
         />
       </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", href: "#experience" },
+              { text: "Explore Now", onClick: () => navigateToPage('experience') },
               { text: "Watch Demo", href: "#" }
             ]}
             slides={[
@@ -75,7 +101,9 @@ export default function LandingPage() {
             buttonTextClassName="relative z-10 font-semibold"
           />
         </div>
+      )}
 
+      {currentPage === 'experience' && (
         <div id="experience" data-section="experience">
           <ProductCardTwo
             title="Immersive Audio Experience"
@@ -105,14 +133,16 @@ export default function LandingPage() {
             textboxLayout="default"
             useInvertedBackground="noInvert"
             buttons={[
-            { text: "View All Models", href: "#" }
+              { text: "Back to Home", onClick: () => navigateToPage('home') }
             ]}
             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
             title="Next-Generation Audio Technology"
@@ -141,7 +171,7 @@ export default function LandingPage() {
             useInvertedBackground="invertDefault"
             mediaPosition="right"
             buttons={[
-            { text: "Technical Specifications", href: "#" }
+              { text: "Back to Home", onClick: () => navigateToPage('home') }
             ]}
             className="py-24"
             titleClassName="text-4xl md:text-5xl font-extrabold text-foreground"
@@ -150,46 +180,9 @@ export default function LandingPage() {
             accordionTitleClassName="font-semibold text-foreground hover:text-accent transition-colors"
           />
         </div>
+      )}
 
-      <div id="metrics" data-section="metrics">
+      {currentPage === 'testimonials' && (
-        <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"
-          className="py-24 bg-gradient-to-br from-background via-background to-background-accent/10"
-          valueClassName="text-5xl font-extrabold text-accent"
-          metricTitleClassName="text-xl font-bold text-foreground mt-4"
-          featureItemClassName="flex items-center gap-2 text-foreground/80"
-        />
-      </div>
-
         <div id="testimonials" data-section="testimonials">
           <TestimonialCardSix
             title="Trusted by Audio Professionals"
@@ -224,9 +217,14 @@ export default function LandingPage() {
             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"
@@ -240,7 +238,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",                href: "#contact"
+                  text: "Choose Pro Elite",                  onClick: () => navigateToPage('contact')
                 },
                 featuresTitle: "What's Included:",                features: [
                   "Quantum Acoustic Processor",                  "Crystalline Driver Array",                  "Zero-Latency Connectivity",                  "Neural Listening Intelligence",                  "Lifetime Technical Support",                  "Premium Build Materials"
@@ -249,7 +247,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",                href: "#contact"
+                  text: "Choose Studio Master",                  onClick: () => navigateToPage('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"
@@ -258,7 +256,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",                href: "#contact"
+                  text: "Choose Concert Grand",                  onClick: () => navigateToPage('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"
@@ -267,7 +265,7 @@ 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",                href: "#contact"
+                  text: "Reserve Infinity",                  onClick: () => navigateToPage('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"
@@ -277,9 +275,15 @@ export default function LandingPage() {
             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?"
@@ -357,7 +361,17 @@ export default function LandingPage() {
               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>
   );
 }