Add src/app/products/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -2,10 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
+import MediaAbout from "@/components/sections/about/MediaAbout";
 import AboutMetric from "@/components/sections/about/AboutMetric";
+import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Battery, Globe, Volume2, Zap, Award, Sparkles } from "lucide-react";
+import { Award, Users, Target, Zap, Battery, Globe } from "lucide-react";
 
 export default function AboutPage() {
   return (
@@ -15,7 +16,7 @@ export default function AboutPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumLargeSizeMediumTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="inset"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="solid"
@@ -25,10 +26,11 @@ export default function AboutPage() {
         <NavbarLayoutFloatingInline
           brandName="AirPods"
           navItems={[
-            { name: "Products", id: "products" },
+            { name: "Products", id: "/" },
-            { name: "Features", id: "features" },
+            { name: "Features", id: "/" },
-            { name: "Why AirPods", id: "metrics" },
+            { name: "Why AirPods", id: "/" },
-            { name: "Support", id: "faq" },
+            { name: "Support", id: "/" },
+            { name: "Reviews", id: "/reviews" },
             { name: "About", id: "/about" },
             { name: "Pricing", id: "/pricing" },
             { name: "Contact", id: "/contact" },
@@ -38,37 +40,55 @@ export default function AboutPage() {
         />
       </div>
 
-      <div id="about" data-section="about">
+      <div id="about-hero" data-section="about-hero">
-        <InlineImageSplitTextAbout
+        <MediaAbout
-          heading={[
+          title="About PodsX - Revolutionizing Audio Technology"
-            { type: "text", content: "Revolutionizing Audio with" },
+          description="We're committed to delivering premium wireless audio experiences that seamlessly integrate with your lifestyle. Since our founding, we've been dedicated to innovation, quality, and customer satisfaction."
-            {
+          tag="Our Story"
-              type: "image",              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png",              alt: "AirPods Logo"},
+          tagIcon={Award}
-            { type: "text", content: "Innovation and Excellence" },
+          tagAnimation="slide-up"
-          ]}
+          buttons={[{ text: "Explore Our Mission", href: "/" }]}
-          buttons={[
-            { text: "Shop Now", href: "/" },
-            { text: "Learn More", href: "#mission" },
-          ]}
           buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png"
+          imageAlt="PodsX company headquarters and innovation center"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="mission" data-section="mission">
+      <div id="about-metrics" data-section="about-metrics">
         <AboutMetric
-          title="Our mission is to deliver premium audio experiences that seamlessly integrate with your lifestyle, setting new standards for wireless audio technology and customer satisfaction."
+          title="Our Impact and Growth"
           metrics={[
-            { icon: Sparkles, label: "Innovation Focus", value: "Leading" },
+            { icon: Users, label: "Active Users Worldwide", value: "50+ Million" },
-            { icon: Award, label: "Quality Standard", value: "Premium" },
+            { icon: Target, label: "Countries We Serve", value: "150+" },
-            { icon: Globe, label: "Global Reach", value: "Millions" },
+            { icon: Zap, label: "Products Developed", value: "12+" },
-            { icon: Zap, label: "Performance", value: "Outstanding" },
+            { icon: Globe, label: "Years of Innovation", value: "10+" },
           ]}
           metricsAnimation="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
+      <div id="social-proof" data-section="social-proof">
+        <SocialProofOne
+          title="Trusted Partnerships"
+          description="Collaborating with leading technology and audio companies to bring you the best experience"
+          tag="Our Partners"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          names={[
+            "Apple",            "Spotify",            "Amazon",            "Google",            "Samsung",            "Sony",            "Microsoft"
+          ]}
+          logos={[
+            "http://img.b2bpic.net/free-photo/top-view-apples-around-frame-white-background-with-copy-space_141793-11956.jpg",            "http://img.b2bpic.net/free-vector/flat-design-minimal-music-festival-youtube-channel-art_23-2149155264.jpg",            "http://img.b2bpic.net/free-vector/set-retro-music-stickers_23-2147592207.jpg",            "http://img.b2bpic.net/free-vector/music-festival-logo-collection-with-flat-design_23-2147825729.jpg",            "http://img.b2bpic.net/free-vector/gradient-colored-dj-logo-set_23-2148874408.jpg",            "http://img.b2bpic.net/free-vector/flat-design-dj-logo-collection_23-2148872847.jpg",            "http://img.b2bpic.net/free-vector/neumorph-business-card_52683-59098.jpg"
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          speed={40}
+          showCard={true}
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterSimple
           columns={[
@@ -91,7 +111,7 @@ export default function AboutPage() {
             {
               title: "Company",              items: [
                 { label: "About Us", href: "/about" },
-                { label: "Blog", href: "#" },
+                { label: "Reviews", href: "/reviews" },
                 { label: "Careers", href: "#" },
                 { label: "News", href: "#" },
               ],

src/app/comparison/page.tsx

@@ -2,8 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Check, X, ShoppingBag } from "lucide-react";
+import { Zap, ShoppingBag, Check, X } from "lucide-react";
 
 export default function ComparisonPage() {
   return (
@@ -13,7 +16,7 @@ export default function ComparisonPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumLargeSizeMediumTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="inset"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="solid"
@@ -24,217 +27,199 @@ export default function ComparisonPage() {
           brandName="AirPods"
           navItems={[
             { name: "Products", id: "/" },
-            { name: "Features", id: "/" },
+            { name: "Features", id: "/features" },
+            { name: "Comparison", id: "/comparison" },
             { name: "Why AirPods", id: "/" },
             { name: "Support", id: "/" },
-            { name: "Compare", id: "/comparison" },
-            { name: "Reviews", id: "/reviews" },
           ]}
-          button={{ text: "Shop Now", href: "/" }}
+          button={{ text: "Shop Now", href: "#products" }}
           animateOnLoad={true}
         />
       </div>
 
-      <div id="comparison" data-section="comparison" className="w-full py-20">
+      <div id="hero" data-section="hero">
-        <div className="w-content-width mx-auto px-5">
+        <HeroSplitKpi
-          <div className="mb-16 text-center">
+          title="PodsX Pro vs PodsX 4 - Side by Side Comparison"
-            <h1 className="text-4xl md:text-5xl font-bold mb-4">Compare AirPods Models</h1>
+          description="Compare the premium PodsX Pro with advanced noise cancellation against the budget-friendly PodsX 4. Find which model best fits your needs, lifestyle, and budget."
-            <p className="text-lg text-foreground/75 max-w-2xl mx-auto">
+          background={{ variant: "plain" }}
-              Choose the perfect AirPods for your lifestyle. Compare specs, features, and capabilities side-by-side.
+          kpis={[
-            </p>
+            { value: "6 Hours", label: "Battery (Pro)" },
-          </div>
+            { value: "30 Hours", label: "Total (with Case)" },
+            { value: "IPX4", label: "Water Resistance" },
+          ]}
+          enableKpiAnimation={true}
+          tag="Product Comparison"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Shop Pro", href: "#products" },
+            { text: "Shop 4", href: "#products" },
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png"
+          imageAlt="PodsX Pro comparison"
+          mediaAnimation="blur-reveal"
+          imagePosition="right"
+        />
+      </div>
 
-          <div className="overflow-x-auto">
+      <div id="comparison-table" data-section="comparison-table">
-            <table className="w-full border-collapse">
+        <div className="py-20 px-6">
-              <thead>
+          <div className="max-w-6xl mx-auto">
-                <tr className="border-b border-accent/20">
+            <h2 className="text-4xl font-bold text-center mb-4">Detailed Specifications</h2>
-                  <th className="text-left py-4 px-4 font-bold text-foreground">Feature</th>
+            <p className="text-center text-foreground/70 mb-12 max-w-2xl mx-auto">Compare every feature side-by-side to make the right choice for your audio needs.</p>
-                  <th className="text-center py-4 px-4 font-bold text-foreground">AirPods Pro</th>
-                  <th className="text-center py-4 px-4 font-bold text-foreground">AirPods 4</th>
-                  <th className="text-center py-4 px-4 font-bold text-foreground">AirPods Max</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr className="border-b border-accent/20">
-                  <td className="py-4 px-4 font-semibold text-foreground">Price</td>
-                  <td className="text-center py-4 px-4">$249</td>
-                  <td className="text-center py-4 px-4">$129</td>
-                  <td className="text-center py-4 px-4">$549</td>
-                </tr>
-                <tr className="border-b border-accent/20 bg-background-accent/5">
-                  <td className="py-4 px-4 font-semibold text-foreground">Active Noise Cancellation</td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <X className="w-5 h-5 text-accent/50 mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                </tr>
-                <tr className="border-b border-accent/20">
-                  <td className="py-4 px-4 font-semibold text-foreground">Spatial Audio with Head Tracking</td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <X className="w-5 h-5 text-accent/50 mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                </tr>
-                <tr className="border-b border-accent/20 bg-background-accent/5">
-                  <td className="py-4 px-4 font-semibold text-foreground">Battery Life (Single Charge)</td>
-                  <td className="text-center py-4 px-4">6 hours</td>
-                  <td className="text-center py-4 px-4">5 hours</td>
-                  <td className="text-center py-4 px-4">20 hours</td>
-                </tr>
-                <tr className="border-b border-accent/20">
-                  <td className="py-4 px-4 font-semibold text-foreground">Total Battery with Case</td>
-                  <td className="text-center py-4 px-4">30 hours</td>
-                  <td className="text-center py-4 px-4">24 hours</td>
-                  <td className="text-center py-4 px-4">80 hours</td>
-                </tr>
-                <tr className="border-b border-accent/20 bg-background-accent/5">
-                  <td className="py-4 px-4 font-semibold text-foreground">Water & Sweat Resistant</td>
-                  <td className="text-center py-4 px-4">IPX4</td>
-                  <td className="text-center py-4 px-4">IPX4</td>
-                  <td className="text-center py-4 px-4">No</td>
-                </tr>
-                <tr className="border-b border-accent/20">
-                  <td className="py-4 px-4 font-semibold text-foreground">Adaptive Audio</td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <X className="w-5 h-5 text-accent/50 mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                </tr>
-                <tr className="border-b border-accent/20 bg-background-accent/5">
-                  <td className="py-4 px-4 font-semibold text-foreground">Personalized Volume</td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <X className="w-5 h-5 text-accent/50 mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                </tr>
-                <tr className="border-b border-accent/20">
-                  <td className="py-4 px-4 font-semibold text-foreground">Automatic Switching</td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                </tr>
-                <tr className="border-b border-accent/20 bg-background-accent/5">
-                  <td className="py-4 px-4 font-semibold text-foreground">Transparency Mode</td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                </tr>
-                <tr className="border-b border-accent/20">
-                  <td className="py-4 px-4 font-semibold text-foreground">Conversation Awareness</td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <X className="w-5 h-5 text-accent/50 mx-auto" />
-                  </td>
-                  <td className="text-center py-4 px-4">
-                    <Check className="w-5 h-5 text-primary-cta mx-auto" />
-                  </td>
-                </tr>
-                <tr className="bg-background-accent/5">
-                  <td className="py-4 px-4 font-semibold text-foreground">Form Factor</td>
-                  <td className="text-center py-4 px-4">Earbuds</td>
-                  <td className="text-center py-4 px-4">Earbuds</td>
-                  <td className="text-center py-4 px-4">Over-Ear</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
             
-          <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="overflow-x-auto bg-card rounded-lg border border-border p-8">
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
+              <table className="w-full">
-              <h3 className="text-2xl font-bold mb-4 text-foreground">AirPods Pro</h3>
+                <thead>
-              <p className="text-foreground/75 mb-6">
+                  <tr className="border-b border-border">
-                Perfect balance of premium features and portability. Best for active users who want professional-grade audio on the go.
+                    <th className="text-left py-4 px-4 font-semibold text-foreground">Feature</th>
-              </p>
+                    <th className="text-center py-4 px-4 font-semibold text-foreground">PodsX Pro</th>
-              <p className="text-3xl font-bold text-primary-cta mb-6">$249</p>
+                    <th className="text-center py-4 px-4 font-semibold text-foreground">PodsX 4</th>
-              <a href="/#products" className="inline-block px-6 py-2 bg-primary-cta text-background rounded-lg font-semibold hover:opacity-90 transition-opacity">
+                  </tr>
-                Shop AirPods Pro
+                </thead>
-              </a>
+                <tbody>
-            </div>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
-
+                    <td className="py-4 px-4 font-medium text-foreground">Price</td>
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
+                    <td className="text-center py-4 px-4"><span className="font-bold text-primary-cta">$249</span></td>
-              <h3 className="text-2xl font-bold mb-4 text-foreground">AirPods 4</h3>
+                    <td className="text-center py-4 px-4"><span className="font-bold text-primary-cta">$149</span></td>
-              <p className="text-foreground/75 mb-6">
+                  </tr>
-                Everyday audio made simple. Great entry point to the AirPods ecosystem with essential features at an affordable price.
+                  <tr className="border-b border-border hover:bg-background/50 transition">
-              </p>
+                    <td className="py-4 px-4 font-medium text-foreground">Active Noise Cancellation</td>
-              <p className="text-3xl font-bold text-primary-cta mb-6">$129</p>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
-              <a href="/#products" className="inline-block px-6 py-2 bg-primary-cta text-background rounded-lg font-semibold hover:opacity-90 transition-opacity">
+                    <td className="text-center py-4 px-4"><X className="inline text-red-500" size={20} /></td>
-                Shop AirPods 4
+                  </tr>
-              </a>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
-            </div>
+                    <td className="py-4 px-4 font-medium text-foreground">Transparency Mode</td>
-
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
+                    <td className="text-center py-4 px-4"><X className="inline text-red-500" size={20} /></td>
-              <h3 className="text-2xl font-bold mb-4 text-foreground">AirPods Max</h3>
+                  </tr>
-              <p className="text-foreground/75 mb-6">
+                  <tr className="border-b border-border hover:bg-background/50 transition">
-                Ultimate audio experience with immersive sound. Designed for professionals who demand the best in sound quality and features.
+                    <td className="py-4 px-4 font-medium text-foreground">Listening Time (Per Charge)</td>
-              </p>
+                    <td className="text-center py-4 px-4">6 hours</td>
-              <p className="text-3xl font-bold text-primary-cta mb-6">$549</p>
+                    <td className="text-center py-4 px-4">5 hours</td>
-              <a href="/#products" className="inline-block px-6 py-2 bg-primary-cta text-background rounded-lg font-semibold hover:opacity-90 transition-opacity">
+                  </tr>
-                Shop AirPods Max
+                  <tr className="border-b border-border hover:bg-background/50 transition">
-              </a>
+                    <td className="py-4 px-4 font-medium text-foreground">Total Battery (with Case)</td>
+                    <td className="text-center py-4 px-4">30 hours</td>
+                    <td className="text-center py-4 px-4">24 hours</td>
+                  </tr>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Spatial Audio</td>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
+                  </tr>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Water Resistance</td>
+                    <td className="text-center py-4 px-4">IPX4</td>
+                    <td className="text-center py-4 px-4">IPX2</td>
+                  </tr>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Personalized Audio</td>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
+                  </tr>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Adaptive Audio</td>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
+                    <td className="text-center py-4 px-4"><X className="inline text-red-500" size={20} /></td>
+                  </tr>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Conversation Awareness</td>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
+                    <td className="text-center py-4 px-4"><X className="inline text-red-500" size={20} /></td>
+                  </tr>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Automatic Device Switching</td>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
+                  </tr>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Find My Support</td>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
+                    <td className="text-center py-4 px-4"><Check className="inline text-green-500" size={20} /></td>
+                  </tr>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Case Charging</td>
+                    <td className="text-center py-4 px-4">Wireless</td>
+                    <td className="text-center py-4 px-4">USB-C</td>
+                  </tr>
+                  <tr className="hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Best For</td>
+                    <td className="text-center py-4 px-4 text-sm">Professional Audio, All-Day Use</td>
+                    <td className="text-center py-4 px-4 text-sm">Casual Listening, Budget-Conscious</td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </div>
         </div>
       </div>
 
+      <div id="products" data-section="products">
+        <ProductCardThree
+          title="Choose Your Perfect AirPods"
+          description="Both models offer exceptional audio quality. Select the one that matches your lifestyle and budget."
+          tag="Shop Collection"
+          tagIcon={ShoppingBag}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "airpods-pro",              name: "PodsX Pro",              price: "$249",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png",              imageAlt: "PodsX Pro with active noise cancellation",              initialQuantity: 1,
+            },
+            {
+              id: "airpods-4",              name: "PodsX 4",              price: "$149",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png",              imageAlt: "PodsX 4 standard model",              initialQuantity: 1,
+            },
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact-cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Need Help Deciding?"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          title="Get Expert Recommendation"
+          description="Not sure which model is right for you? Our team can help you find the perfect AirPods based on your needs and preferences."
+          buttons={[
+            { text: "Shop Now", href: "#products" },
+            { text: "View Features", href: "/features" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterSimple
           columns={[
             {
               title: "Products",              items: [
-                { label: "AirPods Pro", href: "/#products" },
+                { label: "PodsX Pro", href: "#products" },
-                { label: "AirPods Max", href: "/#products" },
+                { label: "PodsX 4", href: "#products" },
-                { label: "AirPods (2nd Gen)", href: "/#products" },
                 { label: "Compare Models", href: "/comparison" },
+                { label: "View All", href: "/" },
               ],
             },
             {
               title: "Support",              items: [
-                { label: "FAQ", href: "/#faq" },
+                { label: "Features", href: "/features" },
-                { label: "Setup Guide", href: "#" },
+                { label: "Setup Guide", href: "/" },
-                { label: "Troubleshooting", href: "#" },
+                { label: "FAQ", href: "/" },
-                { label: "Contact Us", href: "/#contact-cta" },
+                { label: "Contact Us", href: "/" },
               ],
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#" },
+                { label: "About Us", href: "/" },
-                { label: "Blog", href: "#" },
+                { label: "Blog", href: "/" },
-                { label: "Careers", href: "#" },
+                { label: "Careers", href: "/" },
-                { label: "News", href: "#" },
+                { label: "News", href: "/" },
               ],
             },
             {
@@ -246,8 +231,8 @@ export default function ComparisonPage() {
               ],
             },
           ]}
-          bottomLeftText="© 2025 AirPods. All rights reserved."
+          bottomLeftText="© 2025 PodsX. All rights reserved."
-          bottomRightText="Powered by Premium Audio Technology"
+          bottomRightText="Premium Audio Technology"
         />
       </div>
     </ThemeProvider>

src/app/contact/page.tsx

@@ -2,9 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import ContactFaq from "@/components/sections/contact/ContactFaq";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Mail, MapPin, Phone, MessageCircle } from "lucide-react";
+import { Phone, Mail, MapPin, MessageCircle } from "lucide-react";
 
 export default function ContactPage() {
   return (
@@ -14,7 +15,7 @@ export default function ContactPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumLargeSizeMediumTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="inset"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="solid"
@@ -24,10 +25,11 @@ export default function ContactPage() {
         <NavbarLayoutFloatingInline
           brandName="AirPods"
           navItems={[
-            { name: "Products", id: "products" },
+            { name: "Products", id: "/" },
-            { name: "Features", id: "features" },
+            { name: "Features", id: "/" },
-            { name: "Why AirPods", id: "metrics" },
+            { name: "Why AirPods", id: "/" },
-            { name: "Support", id: "faq" },
+            { name: "Support", id: "/" },
+            { name: "Reviews", id: "/reviews" },
             { name: "About", id: "/about" },
             { name: "Pricing", id: "/pricing" },
             { name: "Contact", id: "/contact" },
@@ -37,60 +39,54 @@ export default function ContactPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact-cta" data-section="contact-cta">
-        <ContactCenter
+        <ContactCTA
           tag="Get in Touch"
           tagIcon={MessageCircle}
           tagAnimation="slide-up"
-          title="We'd Love to Hear From You"
+          title="Contact Our Support Team"
-          description="Have questions about AirPods or need support? Our team is here to help. Reach out to us and we'll get back to you as soon as possible."
+          description="Have questions about AirPods? We're here to help with product inquiries, technical support, and customer service."
-          background={{ variant: "animated-grid" }}
+          buttons={[
+            { text: "Email Us", href: "mailto:support@airpods.com" },
+            { text: "Live Chat", href: "/" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
-          inputPlaceholder="Enter your email address"
-          buttonText="Subscribe"
-          onSubmit={(email) => console.log("Email submitted:", email)}
         />
       </div>
 
-      <div id="contact-info" data-section="contact-info">
+      <div id="contact-faq" data-section="contact-faq">
-        <div className="py-20">
+        <ContactFaq
-          <div className="mx-auto max-w-7xl px-4">
+          faqs={[
-            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {
-              <div className="flex flex-col items-start space-y-4">
+              id: "1",              title: "What are your business hours?",              content: "Our customer support team is available Monday to Friday, 9 AM to 6 PM EST. We also offer 24/7 online chat support through our website."
-                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-cta/10">
+            },
-                  <Mail className="h-6 w-6 text-primary-cta" />
+            {
-                </div>
+              id: "2",              title: "How quickly will I receive a response?",              content: "We aim to respond to all inquiries within 24 hours. For urgent issues, please use our live chat feature for immediate assistance."
-                <div>
+            },
-                  <h3 className="text-lg font-semibold">Email</h3>
+            {
-                  <p className="mt-1 text-foreground/75">support@airpods.com</p>
+              id: "3",              title: "Do you offer phone support?",              content: "Yes, phone support is available for customers with active accounts. Call our support line at 1-800-AIRPODS during business hours."
-                  <p className="text-sm text-foreground/60">We'll respond within 24 hours</p>
+            },
-                </div>
+            {
-              </div>
+              id: "4",              title: "Can I return my AirPods?",              content: "We offer a 30-day money-back guarantee on all AirPods purchases. Please visit our returns portal or contact support for assistance."
-
+            },
-              <div className="flex flex-col items-start space-y-4">
+            {
-                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-cta/10">
+              id: "5",              title: "What about warranty coverage?",              content: "All AirPods come with a 1-year limited warranty covering manufacturing defects. Extended warranty options are also available."
-                  <Phone className="h-6 w-6 text-primary-cta" />
+            },
-                </div>
+            {
-                <div>
+              id: "6",              title: "How do I track my order?",              content: "You can track your order using the tracking number sent to your email after purchase. Visit our orders page or contact support for details."
-                  <h3 className="text-lg font-semibold">Phone</h3>
+            },
-                  <p className="mt-1 text-foreground/75">1-800-MY-APPLE</p>
+          ]}
-                  <p className="text-sm text-foreground/60">Available Monday to Friday, 9am-6pm EST</p>
+          ctaTitle="Schedule a Call"
-                </div>
+          ctaDescription="Get personalized assistance from our product specialists"
-              </div>
+          ctaButton={{ text: "Book a Call", href: "#" }}
-
+          ctaIcon={Phone}
-              <div className="flex flex-col items-start space-y-4">
+          useInvertedBackground={false}
-                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-cta/10">
+          animationType="slide-up"
-                  <MapPin className="h-6 w-6 text-primary-cta" />
+          accordionAnimationType="smooth"
-                </div>
+          showCard={true}
-                <div>
+        />
-                  <h3 className="text-lg font-semibold">Visit Us</h3>
-                  <p className="mt-1 text-foreground/75">Apple Retail Stores</p>
-                  <p className="text-sm text-foreground/60">Find your nearest store worldwide</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
 
       <div id="footer" data-section="footer">
@@ -115,7 +111,7 @@ export default function ContactPage() {
             {
               title: "Company",              items: [
                 { label: "About Us", href: "/about" },
-                { label: "Blog", href: "#" },
+                { label: "Reviews", href: "/reviews" },
                 { label: "Careers", href: "#" },
                 { label: "News", href: "#" },
               ],

src/app/features/page.tsx

@@ -4,9 +4,10 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
 import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import AboutMetric from "@/components/sections/about/AboutMetric";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Zap, Sparkles, Headphones } from "lucide-react";
+import { Zap, Sparkles, Headphones, Battery, Waves, Music, Zap as ZapIcon } from "lucide-react";
 
 export default function FeaturesPage() {
   return (
@@ -16,7 +17,7 @@ export default function FeaturesPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumLargeSizeMediumTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="inset"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="solid"
@@ -26,67 +27,59 @@ export default function FeaturesPage() {
         <NavbarLayoutFloatingInline
           brandName="AirPods"
           navItems={[
-            { name: "Products", id: "/products" },
+            { name: "Products", id: "/" },
             { name: "Features", id: "/features" },
-            { name: "Why AirPods", id: "metrics" },
+            { name: "Comparison", id: "/comparison" },
-            { name: "Support", id: "faq" },
+            { name: "Why AirPods", id: "/" },
+            { name: "Support", id: "/" },
           ]}
-          button={{ text: "Shop Now", href: "/products" }}
+          button={{ text: "Shop Now", href: "#products" }}
           animateOnLoad={true}
         />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroSplitKpi
-          title="Discover Premium Audio Features"
+          title="Advanced Features Built for You"
-          description="Experience cutting-edge technology designed for the perfect listening experience. From active noise cancellation to spatial audio, every feature is crafted with precision."
+          description="Discover the cutting-edge technology that powers AirPods Pro and AirPods Max. From intelligent noise control to immersive spatial audio, experience audio innovation at its finest."
-          background={{ variant: "noise" }}
+          background={{ variant: "plain" }}
           kpis={[
-            { value: "6", label: "Key Features" },
+            { value: "30+ Hours", label: "Total Battery" },
-            { value: "Premium", label: "Audio Quality" },
+            { value: "Adaptive", label: "Noise Control" },
-            { value: "Advanced", label: "Technology" },
+            { value: "360°", label: "Spatial Audio" },
           ]}
           enableKpiAnimation={true}
-          tag="Feature Showcase"
+          tag="Feature Deep Dive"
-          tagIcon={Zap}
+          tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Explore All Features", href: "#features" },
+            { text: "Shop Now", href: "/" },
-            { text: "Shop Now", href: "/products" },
+            { text: "Back Home", href: "/" },
           ]}
           buttonAnimation="slide-up"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png"
-          imageAlt="Premium Audio Features Visualization"
+          imageAlt="AirPods Pro with premium charging case"
           mediaAnimation="blur-reveal"
           imagePosition="right"
         />
       </div>
 
-      <div id="features" data-section="features">
+      <div id="noise-cancellation" data-section="features-noise">
         <FeatureCardMedia
-          title="Key Features That Matter"
+          title="Noise Cancellation Excellence"
-          description="Engineered excellence in every detail. Experience the features that make audio transcendent."
+          description="Experience advanced active noise cancellation that learns and adapts to your environment."
           tag="Core Technology"
-          tagIcon={Sparkles}
+          tagIcon={Zap}
           tagAnimation="slide-up"
           features={[
             {
-              id: "active-noise-cancellation",              title: "Active Noise Cancellation",              description: "Revolutionary ANC that adapts to your environment in real time. Experience breakthrough silence and immersive listening wherever you go.",              tag: "Pro Feature",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png",              imageAlt: "Active noise cancellation visualization",              buttons: [{ text: "Learn More", href: "#" }],
+              id: "anc-adaptive",              title: "Adaptive Audio Intelligence",              description: "Our advanced algorithms analyze ambient sound patterns in real-time. AirPods Pro automatically adjusts noise cancellation strength based on your environment, whether you're in a bustling airport, quiet office, or moving between locations.",              tag: "Pro Feature",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png",              imageAlt: "Adaptive noise cancellation visualization",              buttons: [{ text: "Learn More", href: "#" }],
             },
             {
-              id: "spatial-audio",              title: "Spatial Audio & Head Tracking",              description: "Immerse yourself in dynamic head tracking with room-aware audio. Feel the action unfold around you with theater-like presence in every moment.",              tag: "Immersive",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png",              imageAlt: "Spatial audio 3D visualization",              buttons: [{ text: "Experience It", href: "#" }],
+              id: "transparency-mode",              title: "Transparency Mode",              description: "Stay aware of your surroundings when you need to. Transparency mode lets ambient sounds through so you can hear announcements, conversations, and environmental audio while still enjoying your music or calls at optimal levels.",              tag: "Smart Feature",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png",              imageAlt: "Transparency mode feature",              buttons: [{ text: "Discover", href: "#" }],
             },
             {
-              id: "adaptive-audio",              title: "Adaptive Audio Control",              description: "Smart algorithms learn your preferences and adapt audio playback. Personalized volume and sound profile that evolves with your listening habits.",              tag: "Smart",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png",              imageAlt: "Adaptive audio control interface",              buttons: [{ text: "Discover More", href: "#" }],
+              id: "conversation-awareness",              title: "Conversation Awareness",              description: "Automatically detect when you're speaking to someone and lower music volume while activating transparency mode. Continue your conversation naturally without removing your AirPods. Perfect for quick interactions while staying immersed in your content.",              tag: "Intelligent",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png",              imageAlt: "Conversation awareness illustration",              buttons: [{ text: "Experience", href: "#" }],
-            },
-            {
-              id: "battery-life",              title: "Extended Battery Performance",              description: "Up to 30 hours of battery life with charging case. Stay connected all day and beyond with advanced power management technology.",              tag: "Endurance",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png",              imageAlt: "Battery performance showcase",              buttons: [{ text: "View Specs", href: "#" }],
-            },
-            {
-              id: "seamless-connectivity",              title: "Seamless Device Switching",              description: "Intelligent automatic switching between iPhone, Mac, iPad, and Apple Watch. One setup connects everything - experience true ecosystem integration.",              tag: "Connected",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png",              imageAlt: "Device ecosystem integration",              buttons: [{ text: "See Integration", href: "#" }],
-            },
-            {
-              id: "personalization",              title: "Personalized Sound Experience",              description: "Customize audio to match your unique preferences. Fine-tune EQ, enable or disable features, and create your perfect listening profile.",              tag: "Customizable",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png",              imageAlt: "Personalization settings interface",              buttons: [{ text: "Customize Now", href: "#" }],
             },
           ]}
           animationType="slide-up"
@@ -95,19 +88,81 @@ export default function FeaturesPage() {
         />
       </div>
 
+      <div id="battery-life" data-section="features-battery">
+        <FeatureCardMedia
+          title="Extended Battery Performance"
+          description="Power that keeps up with your lifestyle - all day listening with intelligent battery management."
+          tag="Power & Performance"
+          tagIcon={Battery}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "battery-duration",              title: "All-Day Battery Life",              description: "AirPods Pro deliver up to 6 hours of listening time per charge, with 30 hours total using the charging case. AirPods Max provide up to 20 hours per charge. Intelligent power management optimizes battery based on your usage patterns and audio settings.",              tag: "Extended",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png",              imageAlt: "Battery performance chart",              buttons: [{ text: "View Specs", href: "#" }],
+            },
+            {
+              id: "fast-charging",              title: "Fast Charging Technology",              description: "Get back in the action quickly with our optimized charging system. Just 15 minutes of charging provides up to 1 hour of listening time. The wireless charging case uses advanced power management to maximize battery health over the device's lifetime.",              tag: "Quick Charge",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png",              imageAlt: "Fast charging capability",              buttons: [{ text: "Compare", href: "#" }],
+            },
+            {
+              id: "battery-health",              title: "Battery Health Monitoring",              description: "Track your AirPods battery status in real-time through the iOS battery widget. Receive automatic notifications when battery is low. Our smart battery conditioning helps maintain longevity and performance, keeping your AirPods performing optimally for years.",              tag: "Smart Monitoring",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png",              imageAlt: "Battery health interface",              buttons: [{ text: "Learn More", href: "#" }],
+            },
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="immersive-sound" data-section="features-sound">
+        <FeatureCardMedia
+          title="Immersive Sound Experience"
+          description="Premium audio quality with spatial rendering and personalized audio tuning."
+          tag="Audio Technology"
+          tagIcon={Music}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "spatial-audio-feature",              title: "Spatial Audio with Dynamic Head Tracking",              description: "Experience cinema-like spatial audio that places sound around you in three-dimensional space. Dynamic head tracking follows your movement, making it feel like sound sources stay positioned in the room. Perfect for movies, music, and gaming with compatible content.",              tag: "Immersive",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png",              imageAlt: "Spatial audio 3D visualization",              buttons: [{ text: "Experience", href: "#" }],
+            },
+            {
+              id: "audio-personalization",              title: "Personalized Audio & Volume",              description: "AirPods automatically adjust audio personalization based on your hearing capabilities and preferences. Custom eq settings enhance bass, mids, and treble to match your unique audio preferences. Adaptive audio adjusts volume intelligently based on ambient noise levels.",              tag: "Personal",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png",              imageAlt: "Audio personalization settings",              buttons: [{ text: "Customize", href: "#" }],
+            },
+            {
+              id: "quality-codec",              title: "Premium Audio Codec & Drivers",              description: "Our advanced H1 and H2 chips process audio with minimal latency. Custom-engineered acoustic design combined with premium speaker drivers delivers rich, detailed sound across all frequencies. Whether streaming music or taking calls, experience superior audio clarity.",              tag: "Technical",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png",              imageAlt: "Audio codec technology",              buttons: [{ text: "Explore", href: "#" }],
+            },
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <AboutMetric
+          title="Feature Specifications That Matter"
+          metrics={[
+            { icon: Battery, label: "Maximum Battery Life", value: "30+ Hours" },
+            { icon: Waves, label: "Noise Cancellation Levels", value: "Multi-Stage" },
+            { icon: Headphones, label: "Audio Modes", value: "4+ Modes" },
+            { icon: ZapIcon, label: "Setup Time", value: "Instant" },
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="contact-cta" data-section="contact-cta">
         <ContactCTA
-          tag="Experience Premium Audio"
+          tag="Ready to Experience?"
           tagIcon={Headphones}
           tagAnimation="slide-up"
-          title="Ready to Upgrade Your Listening?"
+          title="Discover Premium Audio Innovation"
-          description="Discover how these advanced features can transform your audio experience. Shop our complete lineup and find the perfect model for your lifestyle."
+          description="All these advanced features come together in AirPods Pro and AirPods Max. Find the perfect model for your lifestyle and experience the difference."
           buttons={[
-            { text: "Shop Now", href: "/products" },
+            { text: "Shop AirPods Pro", href: "/" },
-            { text: "View Specifications", href: "/products" },
+            { text: "View Comparison", href: "/comparison" },
           ]}
           buttonAnimation="slide-up"
-          background={{ variant: "noise" }}
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
         />
       </div>
@@ -117,26 +172,26 @@ export default function FeaturesPage() {
           columns={[
             {
               title: "Products",              items: [
-                { label: "AirPods Pro", href: "/products" },
+                { label: "AirPods Pro", href: "/" },
-                { label: "AirPods Max", href: "/products" },
+                { label: "AirPods Max", href: "/" },
-                { label: "AirPods (2nd Gen)", href: "/products" },
+                { label: "AirPods (2nd Gen)", href: "/" },
-                { label: "Compare Models", href: "/products" },
+                { label: "Compare Models", href: "/comparison" },
+              ],
+            },
+            {
+              title: "Features",              items: [
+                { label: "Noise Cancellation", href: "#noise-cancellation" },
+                { label: "Battery Life", href: "#battery-life" },
+                { label: "Sound Quality", href: "#immersive-sound" },
+                { label: "Ecosystem", href: "/" },
               ],
             },
             {
               title: "Support",              items: [
-                { label: "FAQ", href: "#faq" },
+                { label: "Setup Guide", href: "/" },
-                { label: "Setup Guide", href: "#" },
+                { label: "FAQ", href: "/" },
-                { label: "Troubleshooting", href: "#" },
+                { label: "Troubleshooting", href: "/" },
-                { label: "Contact Us", href: "/contact" },
+                { label: "Contact Us", href: "/" },
-              ],
-            },
-            {
-              title: "Company",              items: [
-                { label: "About Us", href: "#" },
-                { label: "Blog", href: "#" },
-                { label: "Careers", href: "#" },
-                { label: "News", href: "#" },
               ],
             },
             {

src/app/layout.tsx

@@ -1,48 +1,24 @@
 import type { Metadata } from "next";
-import { Mulish } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const mulish = Mulish({
-  variable: "--font-mulish",  subsets: ["latin"],
-});
 
 const inter = Inter({
   variable: "--font-inter",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });
 
 export const metadata: Metadata = {
-  title: "AirPods - Premium Wireless Audio Experience",  description: "Discover AirPods Pro, Max, and more. Premium wireless audio with active noise cancellation, spatial audio, and seamless Apple ecosystem integration.",  keywords: "AirPods, wireless earbuds, premium audio, active noise cancellation, spatial audio, Apple audio",  robots: {
+  title: "PodsX - Premium Wireless Audio",  description: "Experience the future of wireless audio with PodsX. Premium sound, seamless connectivity, and industry-leading features."};
-    index: true,
-    follow: true,
-  },
-  openGraph: {
-    title: "AirPods - Premium Wireless Audio Experience",    description: "Experience the next generation of wireless audio with AirPods. Premium sound, instant setup, and seamless connectivity.",    siteName: "AirPods",    type: "website",    images: [
-      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png",        alt: "AirPods Pro Premium Audio"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "AirPods - Premium Wireless Audio",    description: "Discover AirPods Pro, Max, and more. Premium audio experience starts here.",    images: [
-      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png"],
-  },
-};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
-      <ServiceWrapper>
+      <body className={`${inter.variable} antialiased`}>
-        <body
+        {children}
-          className={`${mulish.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
       
         <script
           dangerouslySetInnerHTML={{
@@ -1411,7 +1387,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -21,7 +21,7 @@ export default function LandingPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumLargeSizeMediumTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="inset"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="solid"
@@ -35,6 +35,7 @@ export default function LandingPage() {
             { name: "Features", id: "features" },
             { name: "Why AirPods", id: "metrics" },
             { name: "Support", id: "faq" },
+            { name: "Reviews", id: "/reviews" },
             { name: "About", id: "/about" },
             { name: "Pricing", id: "/pricing" },
             { name: "Contact", id: "/contact" },
@@ -48,7 +49,7 @@ export default function LandingPage() {
         <HeroSplitKpi
           title="Experience Sound Like Never Before"
           description="Premium wireless audio with active noise cancellation, spatial audio, and seamless Apple ecosystem integration. Discover the perfect fit for every moment."
-          background={{ variant: "noise" }}
+          background={{ variant: "plain" }}
           kpis={[
             { value: "6-30 Hours", label: "Battery Life" },
             { value: "Adaptive", label: "Noise Control" },
@@ -141,9 +142,11 @@ export default function LandingPage() {
           tagIcon={Award}
           tagAnimation="slide-up"
           names={[
-            "Apple Music",            "Spotify",            "Apple",            "Beats",            "Shure",            "Sennheiser",            "Bose"]}
+            "Apple Music",            "Spotify",            "Apple",            "Beats",            "Shure",            "Sennheiser",            "Bose"
+          ]}
           logos={[
-            "http://img.b2bpic.net/free-photo/top-view-apples-around-frame-white-background-with-copy-space_141793-11956.jpg",            "http://img.b2bpic.net/free-vector/flat-design-minimal-music-festival-youtube-channel-art_23-2149155264.jpg",            "http://img.b2bpic.net/free-vector/set-retro-music-stickers_23-2147592207.jpg",            "http://img.b2bpic.net/free-vector/music-festival-logo-collection-with-flat-design_23-2147825729.jpg",            "http://img.b2bpic.net/free-vector/gradient-colored-dj-logo-set_23-2148874408.jpg",            "http://img.b2bpic.net/free-vector/flat-design-dj-logo-collection_23-2148872847.jpg",            "http://img.b2bpic.net/free-vector/neumorph-business-card_52683-59098.jpg"]}
+            "http://img.b2bpic.net/free-photo/top-view-apples-around-frame-white-background-with-copy-space_141793-11956.jpg",            "http://img.b2bpic.net/free-vector/flat-design-minimal-music-festival-youtube-channel-art_23-2149155264.jpg",            "http://img.b2bpic.net/free-vector/set-retro-music-stickers_23-2147592207.jpg",            "http://img.b2bpic.net/free-vector/music-festival-logo-collection-with-flat-design_23-2147825729.jpg",            "http://img.b2bpic.net/free-vector/gradient-colored-dj-logo-set_23-2148874408.jpg",            "http://img.b2bpic.net/free-vector/flat-design-dj-logo-collection_23-2148872847.jpg",            "http://img.b2bpic.net/free-vector/neumorph-business-card_52683-59098.jpg"
+          ]}
           textboxLayout="default"
           useInvertedBackground={false}
           speed={40}
@@ -158,17 +161,23 @@ export default function LandingPage() {
           author="Sarah Chen, Audio Engineer"
           avatars={[
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-of-a-satisfied-use-1772884351817-6dec7f08.png",              alt: "Sarah Chen"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-of-a-satisfied-use-1772884351817-6dec7f08.png",              alt: "Sarah Chen"
+            },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/happy-lifestyle-photo-of-person-wearing--1772884353901-6ee88695.png",              alt: "Customer 2"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/happy-lifestyle-photo-of-person-wearing--1772884353901-6ee88695.png",              alt: "Customer 2"
+            },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-businessperson-using-airpod-1772884353609-0ef52970.png",              alt: "Customer 3"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-businessperson-using-airpod-1772884353609-0ef52970.png",              alt: "Customer 3"
+            },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/creative-professional-or-content-creator-1772884352345-f1e1d55c.png",              alt: "Customer 4"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/creative-professional-or-content-creator-1772884352345-f1e1d55c.png",              alt: "Customer 4"
+            },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/active-lifestyle-user-athlete-or-fitness-1772884351718-1b549457.png",              alt: "Customer 5"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/active-lifestyle-user-athlete-or-fitness-1772884351718-1b549457.png",              alt: "Customer 5"
+            },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/diverse-user-in-relaxed-comfortable-sett-1772884352272-d4dc5302.png",              alt: "Customer 6"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/diverse-user-in-relaxed-comfortable-sett-1772884352272-d4dc5302.png",              alt: "Customer 6"
+            },
           ]}
           ratingAnimation="slide-up"
           avatarsAnimation="slide-up"
@@ -185,17 +194,23 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           faqs={[
             {
-              id: "1",              title: "How do I set up my AirPods?",              content: "Simply bring your AirPods near your iPhone, iPad, Mac, or Apple Watch. A setup screen will appear automatically. Tap 'Connect' and follow the on-screen instructions. Your AirPods will automatically connect to all your Apple devices through your iCloud account."},
+              id: "1",              title: "How do I set up my AirPods?",              content: "Simply bring your AirPods near your iPhone, iPad, Mac, or Apple Watch. A setup screen will appear automatically. Tap 'Connect' and follow the on-screen instructions. Your AirPods will automatically connect to all your Apple devices through your iCloud account."
+            },
             {
-              id: "2",              title: "What's the battery life?",              content: "AirPods Pro offer up to 6 hours of listening time or 30 hours with the charging case. AirPods (2nd generation) provide up to 5 hours of listening time or 24 hours with the case. Battery life varies based on listening volume and active features used."},
+              id: "2",              title: "What's the battery life?",              content: "AirPods Pro offer up to 6 hours of listening time or 30 hours with the charging case. AirPods (2nd generation) provide up to 5 hours of listening time or 24 hours with the case. Battery life varies based on listening volume and active features used."
+            },
             {
-              id: "3",              title: "Are AirPods water resistant?",              content: "AirPods Pro are water and sweat resistant (IPX4). They can withstand splashes, rain, and sweat during workouts. However, they're not designed for swimming or submersion in water. AirPods (2nd generation) are not water resistant."},
+              id: "3",              title: "Are AirPods water resistant?",              content: "AirPods Pro are water and sweat resistant (IPX4). They can withstand splashes, rain, and sweat during workouts. However, they're not designed for swimming or submersion in water. AirPods (2nd generation) are not water resistant."
+            },
             {
-              id: "4",              title: "Can I use AirPods with Android?",              content: "Yes, AirPods can connect to Android devices via Bluetooth. However, you won't have access to some features like easy setup, automatic switching between devices, or Siri integration. For the best experience, we recommend using AirPods with Apple devices."},
+              id: "4",              title: "Can I use AirPods with Android?",              content: "Yes, AirPods can connect to Android devices via Bluetooth. However, you won't have access to some features like easy setup, automatic switching between devices, or Siri integration. For the best experience, we recommend using AirPods with Apple devices."
+            },
             {
-              id: "5",              title: "Do AirPods work with Windows?",              content: "Yes, AirPods can pair with Windows PCs and laptops via Bluetooth. Simply put your AirPods in pairing mode and connect them through your Windows Bluetooth settings. Some exclusive Apple features won't be available on Windows."},
+              id: "5",              title: "Do AirPods work with Windows?",              content: "Yes, AirPods can pair with Windows PCs and laptops via Bluetooth. Simply put your AirPods in pairing mode and connect them through your Windows Bluetooth settings. Some exclusive Apple features won't be available on Windows."
+            },
             {
-              id: "6",              title: "What if I lose one AirPod?",              content: "You can purchase replacement AirPods individually from Apple's website or authorized retailers. Visit apple.com and select your AirPods model to order a replacement earbud or charging case."},
+              id: "6",              title: "What if I lose one AirPod?",              content: "You can purchase replacement AirPods individually from Apple's website or authorized retailers. Visit apple.com and select your AirPods model to order a replacement earbud or charging case."
+            },
           ]}
           textboxLayout="default"
           faqsAnimation="slide-up"
@@ -216,7 +231,7 @@ export default function LandingPage() {
             { text: "Learn More", href: "#features" },
           ]}
           buttonAnimation="slide-up"
-          background={{ variant: "noise" }}
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
         />
       </div>
@@ -243,7 +258,7 @@ export default function LandingPage() {
             {
               title: "Company",              items: [
                 { label: "About Us", href: "/about" },
-                { label: "Blog", href: "#" },
+                { label: "Reviews", href: "/reviews" },
                 { label: "Careers", href: "#" },
                 { label: "News", href: "#" },
               ],

src/app/podsx-4/page.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Zap, Sparkles, ShoppingBag, Headphones, HelpCircle } from "lucide-react";
+
+export default function PodsX4Page() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "#products" },
+            { name: "Features", id: "#features" },
+            { name: "PodsX Pro", id: "/podsx-pro" },
+          ]}
+          button={{ text: "Buy Now", href: "#cta" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="PodsX 4 - Advanced Audio Excellence"
+          description="The next generation of wireless audio technology. Featuring intelligent noise management, crystal-clear audio, and all-day battery life. Designed for modern users who demand performance and value."
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "8 Hours", label: "Battery Per Charge" },
+            { value: "Smart", label: "Noise Control" },
+            { value: "Crystal Clear", label: "Audio" },
+          ]}
+          enableKpiAnimation={true}
+          tag="Next-Generation Audio Technology"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Buy PodsX 4", href: "#products" },
+            { text: "Specifications", href: "#features" },
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png"
+          imageAlt="PodsX 4 Advanced Wireless Earbuds"
+          mediaAnimation="blur-reveal"
+          imagePosition="right"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardMedia
+          title="Smart Technology Meets Audio Quality"
+          description="Discover the intelligent features that make PodsX 4 the perfect choice for everyday audio."
+          tag="Smart Features"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "smart-anc",              title: "Intelligent Noise Management",              description: "Smart active noise cancellation that intelligently manages ambient sound. Choose between passive transparency and active cancellation, or let the earbuds decide based on your activity.",              tag: "PodsX 4",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png",              imageAlt: "Intelligent noise management",              buttons: [{ text: "Learn More", href: "#" }],
+            },
+            {
+              id: "premium-sound",              title: "Premium Audio Drivers",              description: "Custom-engineered audio drivers deliver rich, balanced sound across all frequencies. Experience deep bass, clear mids, and pristine highs in every note.",              tag: "Premium",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png",              imageAlt: "Premium audio drivers",              buttons: [{ text: "Explore", href: "#" }],
+            },
+            {
+              id: "all-day",              title: "All-Day Audio Experience",              description: "8 hours of listening per charge with the case providing 40+ hours total. Built for the full day—work, commute, workout, and beyond.",              tag: "Long-lasting",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png",              imageAlt: "All-day battery life",              buttons: [{ text: "Details", href: "#" }],
+            },
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardThree
+          title="PodsX 4 Models & Variants"
+          description="Choose the perfect PodsX 4 model for your lifestyle and needs."
+          tag="Complete Lineup"
+          tagIcon={ShoppingBag}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "podsx-4-standard",              name: "PodsX 4 Standard",              price: "$199",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png",              imageAlt: "PodsX 4 Standard Model",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-4-plus",              name: "PodsX 4 Plus",              price: "$299",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png",              imageAlt: "PodsX 4 Plus Model",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-4-elite",              name: "PodsX 4 Elite",              price: "$399",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-max-over-ear-headphones-displaye-1772884352294-e666eff4.png",              imageAlt: "PodsX 4 Elite Model",              initialQuantity: 1,
+            },
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqDouble
+          title="PodsX 4 - Frequently Asked Questions"
+          description="Get answers to common questions about PodsX 4 features, compatibility, and specifications."
+          tag="Support"
+          tagIcon={HelpCircle}
+          tagAnimation="slide-up"
+          faqs={[
+            {
+              id: "1",              title: "What are the key features of PodsX 4?",              content: "PodsX 4 features intelligent noise management, premium audio drivers, 8-hour battery life per charge, 40+ hours total with case, IPX4 water resistance, and seamless multi-device connectivity. Perfect for everyday use and professional environments."
+            },
+            {
+              id: "2",              title: "How long does the battery last on PodsX 4?",              content: "PodsX 4 provides up to 8 hours of listening time on a single charge. With the premium charging case, you get 40+ hours of total listening time. Quick charging gives you 2 hours of listening time from just 10 minutes of charging."
+            },
+            {
+              id: "3",              title: "Does PodsX 4 have active noise cancellation?",              content: "Yes, PodsX 4 features intelligent noise management with adaptive ANC. You can manually switch between active cancellation, transparency mode, and off mode, or enable adaptive mode to automatically switch based on your activity and environment."
+            },
+            {
+              id: "4",              title: "What's the difference between PodsX 4 models?",              content: "PodsX 4 Standard: Core features with standard ANC. PodsX 4 Plus: Enhanced audio drivers and extended battery. PodsX 4 Elite: Premium materials, advanced ANC, and priority support. All models offer the same core connectivity and water resistance."
+            },
+            {
+              id: "5",              title: "Are PodsX 4 water-resistant?",              content: "PodsX 4 have an IPX4 rating, making them water and sweat resistant. They can handle splashes, rain, heavy sweat during workouts. However, they're not suitable for swimming or submersion in water."
+            },
+            {
+              id: "6",              title: "Which devices are compatible with PodsX 4?",              content: "PodsX 4 work with any Bluetooth-enabled device, including iPhones, iPads, Macs, Android phones, Windows PCs, and more. Full feature support is available on Apple devices for optimal performance."
+            },
+          ]}
+          textboxLayout="default"
+          faqsAnimation="slide-up"
+          useInvertedBackground={false}
+          animationType="smooth"
+        />
+      </div>
+
+      <div id="cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Smart Audio Technology"
+          tagIcon={Headphones}
+          tagAnimation="slide-up"
+          title="Experience PodsX 4 Today"
+          description="Get intelligent noise management, premium audio quality, and all-day battery life. PodsX 4 is the perfect balance of performance and value for modern users."
+          buttons={[
+            { text: "Buy PodsX 4 Now", href: "#products" },
+            { text: "View All Models", href: "#products" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "PodsX 4", href: "/podsx-4" },
+                { label: "PodsX Pro", href: "/podsx-pro" },
+                { label: "Standard AirPods", href: "/" },
+                { label: "Compare All", href: "/" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Documentation", href: "#" },
+                { label: "Setup Guide", href: "#" },
+                { label: "Contact Support", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Press", href: "#" },
+                { label: "Careers", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy", href: "#" },
+                { label: "Terms", href: "#" },
+                { label: "Cookies", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 PodsX 4. All rights reserved."
+          bottomRightText="Powered by Smart Audio Innovation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/podsx-pro/page.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Zap, Sparkles, ShoppingBag, Headphones, HelpCircle, Zap as Bolt } from "lucide-react";
+
+export default function PodsXProPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "#products" },
+            { name: "Features", id: "#features" },
+            { name: "PodsX 4", id: "/podsx-4" },
+          ]}
+          button={{ text: "Buy Now", href: "#cta" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="PodsX Pro - Ultimate Performance"
+          description="Experience the pinnacle of audio technology with advanced active noise cancellation, extended battery life, and premium build quality. Engineered for professionals and audio enthusiasts."
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "12+ Hours", label: "Battery Per Charge" },
+            { value: "Advanced", label: "ANC Technology" },
+            { value: "Premium", label: "Materials" },
+          ]}
+          enableKpiAnimation={true}
+          tag="Professional Grade Audio"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Buy PodsX Pro", href: "#products" },
+            { text: "View Specs", href: "#features" },
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png"
+          imageAlt="PodsX Pro Premium Wireless Earbuds"
+          mediaAnimation="blur-reveal"
+          imagePosition="right"
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardMedia
+          title="Premium Features Built For Professionals"
+          description="Discover what makes PodsX Pro the choice for serious audio professionals and demanding users."
+          tag="Technical Excellence"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "anc-pro",              title: "Advanced Adaptive ANC",              description: "Industry-leading active noise cancellation that learns your environment and adapts in real-time. Perfect isolation for focused work and travel.",              tag: "PodsX Pro",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png",              imageAlt: "Advanced noise cancellation",              buttons: [{ text: "Learn More", href: "#" }],
+            },
+            {
+              id: "hi-res",              title: "Hi-Res Audio Support",              description: "Studio-quality audio with support for lossless and hi-res formats. Experience music exactly as the artist intended with pristine clarity.",              tag: "Premium",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png",              imageAlt: "Hi-res audio visualization",              buttons: [{ text: "Explore", href: "#" }],
+            },
+            {
+              id: "battery-pro",              title: "Extended Battery Life",              description: "Up to 12 hours of continuous listening per charge with the charging case providing up to 60 hours total. All-day power for your lifestyle.",              tag: "Long-lasting",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png",              imageAlt: "Battery performance",              buttons: [{ text: "Details", href: "#" }],
+            },
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardThree
+          title="PodsX Pro Specifications"
+          description="Complete product lineup with detailed specifications and pricing."
+          tag="Premium Selection"
+          tagIcon={ShoppingBag}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "podsx-pro-standard",              name: "PodsX Pro Standard",              price: "$399",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png",              imageAlt: "PodsX Pro Standard Model",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-pro-max",              name: "PodsX Pro Max",              price: "$549",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-max-over-ear-headphones-displaye-1772884352294-e666eff4.png",              imageAlt: "PodsX Pro Max Model",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-pro-limited",              name: "PodsX Pro Limited Edition",              price: "$649",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png",              imageAlt: "PodsX Pro Limited Edition",              initialQuantity: 1,
+            },
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqDouble
+          title="PodsX Pro - Frequently Asked Questions"
+          description="Everything you need to know about PodsX Pro specifications, compatibility, and usage."
+          tag="Support"
+          tagIcon={HelpCircle}
+          tagAnimation="slide-up"
+          faqs={[
+            {
+              id: "1",              title: "What makes PodsX Pro different from standard models?",              content: "PodsX Pro features advanced adaptive ANC, hi-res audio support, extended 12-hour battery life, premium materials, and professional-grade audio processing. These are designed specifically for professionals and audio enthusiasts who demand the best."
+            },
+            {
+              id: "2",              title: "What is the battery life specification?",              content: "PodsX Pro provides up to 12 hours of continuous listening per charge. With the premium charging case, you get up to 60 hours of total listening time. Fast charging provides 2 hours of listening time from just 15 minutes of charging."
+            },
+            {
+              id: "3",              title: "Does PodsX Pro support Hi-Res audio?",              content: "Yes, PodsX Pro includes full Hi-Res audio support (up to 24-bit/192kHz). You can stream lossless and hi-res content from compatible streaming services and get studio-quality audio."
+            },
+            {
+              id: "4",              title: "How effective is the ANC on PodsX Pro?",              content: "The advanced adaptive ANC on PodsX Pro reduces ambient noise by up to 35dB, making it some of the most effective active noise cancellation available. It continuously adapts to your environment for optimal performance."
+            },
+            {
+              id: "5",              title: "Are PodsX Pro water-resistant?",              content: "PodsX Pro have an IPX5 rating, making them water and sweat resistant. They can handle splashes, rain, sweat, and light submersion. Perfect for workouts, travel, and daily use."
+            },
+            {
+              id: "6",              title: "What devices are compatible with PodsX Pro?",              content: "PodsX Pro work with any device that supports Bluetooth, including iPhone, iPad, Mac, Android devices, Windows PCs, and more. Premium features are optimized for Apple ecosystem devices."
+            },
+          ]}
+          textboxLayout="default"
+          faqsAnimation="slide-up"
+          useInvertedBackground={false}
+          animationType="smooth"
+        />
+      </div>
+
+      <div id="cta" data-section="contact-cta">
+        <ContactCTA
+          tag="Premium Audio Experience"
+          tagIcon={Headphones}
+          tagAnimation="slide-up"
+          title="Upgrade to PodsX Pro Today"
+          description="Experience professional-grade audio quality with advanced ANC, hi-res support, and extended battery life. Perfect for professionals, audiophiles, and demanding users."
+          buttons={[
+            { text: "Buy PodsX Pro Now", href: "#products" },
+            { text: "Compare Models", href: "#products" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "PodsX Pro", href: "/podsx-pro" },
+                { label: "PodsX 4", href: "/podsx-4" },
+                { label: "Standard AirPods", href: "/" },
+                { label: "Compare All", href: "/" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Documentation", href: "#" },
+                { label: "Tutorials", href: "#" },
+                { label: "Contact Support", href: "#" },
+                { label: "Warranty Info", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Press", href: "#" },
+                { label: "Careers", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy", href: "#" },
+                { label: "Terms", href: "#" },
+                { label: "Cookies", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 PodsX Pro. All rights reserved."
+          bottomRightText="Powered by Premium Audio Innovation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/pricing/page.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { ShoppingBag, CheckCircle } from "lucide-react";
+import { Sparkles, Check } from "lucide-react";
 
 export default function PricingPage() {
   return (
@@ -14,7 +14,7 @@ export default function PricingPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumLargeSizeMediumTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="inset"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="solid"
@@ -24,10 +24,11 @@ export default function PricingPage() {
         <NavbarLayoutFloatingInline
           brandName="AirPods"
           navItems={[
-            { name: "Products", id: "products" },
+            { name: "Products", id: "/" },
-            { name: "Features", id: "features" },
+            { name: "Features", id: "/" },
-            { name: "Why AirPods", id: "metrics" },
+            { name: "Why AirPods", id: "/" },
-            { name: "Support", id: "faq" },
+            { name: "Support", id: "/" },
+            { name: "Reviews", id: "/reviews" },
             { name: "About", id: "/about" },
             { name: "Pricing", id: "/pricing" },
             { name: "Contact", id: "/contact" },
@@ -39,42 +40,42 @@ export default function PricingPage() {
 
       <div id="pricing" data-section="pricing">
         <PricingCardTwo
-          title="Simple, Transparent Pricing"
+          title="Choose Your Perfect Plan"
-          description="Choose the perfect AirPods model for your needs and start enjoying premium audio today."
+          description="Select the premium audio solution that matches your lifestyle and listening preferences."
-          tag="Product Tiers"
+          tag="Pricing"
-          tagIcon={ShoppingBag}
+          tagIcon={Sparkles}
           tagAnimation="slide-up"
           plans={[
             {
-              id: "airpods-standard",              badge: "AirPods (2nd Generation)",              badgeIcon: CheckCircle,
+              id: "standard",              badge: "AirPods (2nd Gen)",              badgeIcon: Sparkles,
-              price: "$129",              subtitle: "Perfect for everyday listening",              buttons: [
+              price: "$129",              subtitle: "Great for everyday listening",              buttons: [
                 { text: "Buy Now", href: "/" },
                 { text: "Learn More", href: "/" },
               ],
               features: [
-                "Up to 5 hours listening time",                "24 hours with charging case",                "Easy setup with Apple devices",                "Automatic ear detection",                "Double tap to play or skip forward"],
+                "Up to 5 hours of listening time",                "24 hours with charging case",                "Easy setup with Apple devices",                "Siri voice assistant",                "Automatic ear detection"]
             },
             {
-              id: "airpods-pro",              badge: "AirPods Pro",              badgeIcon: CheckCircle,
+              id: "pro",              badge: "AirPods Pro",              badgeIcon: Sparkles,
-              price: "$249",              subtitle: "Advanced features for audio lovers",              buttons: [
+              price: "$249",              subtitle: "Our most popular choice",              buttons: [
                 { text: "Buy Now", href: "/" },
                 { text: "Learn More", href: "/" },
               ],
               features: [
-                "Up to 6 hours listening time",                "30 hours with charging case",                "Active Noise Cancellation",                "Transparency mode",                "Spatial audio with dynamic head tracking",                "Water and sweat resistant (IPX4)",                "Adaptive Audio",                "Personalized Volume"],
+                "Active Noise Cancellation",                "Up to 6 hours of listening time",                "30 hours with charging case",                "Spatial Audio with dynamic head tracking",                "Adaptive Audio",                "Conversation Awareness",                "Water and sweat resistant"]
             },
             {
-              id: "airpods-max",              badge: "AirPods Max",              badgeIcon: CheckCircle,
+              id: "max",              badge: "AirPods Max",              badgeIcon: Sparkles,
               price: "$549",              subtitle: "Premium over-ear experience",              buttons: [
                 { text: "Buy Now", href: "/" },
                 { text: "Learn More", href: "/" },
               ],
               features: [
-                "Up to 20 hours listening time",                "Advanced Active Noise Cancellation",                "Immersive Spatial Audio",                "Adaptive Audio",                "Conversation Awareness",                "Automatic Switching",                "Digital Crown control",                "Premium design with premium materials",                "Easy pairing with Apple devices"],
+                "Breakthrough over-ear design",                "Up to 20 hours of listening time",                "Computational audio",                "Spatial Audio with dynamic head tracking",                "Active Noise Cancellation",                "Transparency mode",                "Premium build quality",                "Digital Crown control"]
             },
           ]}
-          textboxLayout="default"
           animationType="slide-up"
+          textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
@@ -101,7 +102,7 @@ export default function PricingPage() {
             {
               title: "Company",              items: [
                 { label: "About Us", href: "/about" },
-                { label: "Blog", href: "#" },
+                { label: "Reviews", href: "/reviews" },
                 { label: "Careers", href: "#" },
                 { label: "News", href: "#" },
               ],

src/app/products/page.tsx

@@ -3,11 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
-import ProductCardThree from "@/components/sections/product/ProductCardThree";
 import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
+import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Zap, ShoppingBag, Sparkles, Headphones } from "lucide-react";
+import { Zap, Sparkles, ShoppingBag, Battery, Globe, Volume2, Award, Headphones, HelpCircle } from "lucide-react";
 
 export default function ProductsPage() {
   return (
@@ -17,7 +21,7 @@ export default function ProductsPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumLargeSizeMediumTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="inset"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="solid"
@@ -27,101 +31,207 @@ export default function ProductsPage() {
         <NavbarLayoutFloatingInline
           brandName="AirPods"
           navItems={[
-            { name: "Products", id: "/products" },
+            { name: "Products", id: "products" },
-            { name: "Features", id: "/features" },
+            { name: "Features", id: "features" },
             { name: "Why AirPods", id: "metrics" },
             { name: "Support", id: "faq" },
+            { name: "Reviews", id: "/reviews" },
+            { name: "About", id: "/about" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Contact", id: "/contact" },
           ]}
-          button={{ text: "Shop Now", href: "/products" }}
+          button={{ text: "Shop Now", href: "#products" }}
           animateOnLoad={true}
         />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroSplitKpi
-          title="Discover Our Complete Product Lineup"
+          title="Experience Sound Like Never Before"
-          description="Explore PodsX Pro and PodsX 4 - engineered for performance, designed for comfort. Choose the perfect audio experience for your lifestyle."
+          description="Premium wireless audio with active noise cancellation, spatial audio, and seamless Apple ecosystem integration. Discover the perfect fit for every moment."
-          background={{ variant: "noise" }}
+          background={{ variant: "plain" }}
           kpis={[
-            { value: "2 Models", label: "Advanced Tech" },
+            { value: "6-30 Hours", label: "Battery Life" },
-            { value: "Premium", label: "Sound Quality" },
+            { value: "Adaptive", label: "Noise Control" },
-            { value: "Seamless", label: "Integration" },
+            { value: "Instant", label: "Setup" },
           ]}
           enableKpiAnimation={true}
-          tag="Our Product Collection"
+          tag="The Next Generation of Audio"
           tagIcon={Zap}
           tagAnimation="slide-up"
           buttons={[
-            { text: "View Details", href: "#products" },
+            { text: "Shop AirPods", href: "#products" },
-            { text: "Compare Models", href: "#specifications" },
+            { text: "Learn More", href: "#features" },
           ]}
           buttonAnimation="slide-up"
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png"
-          imageAlt="PodsX Premium Collection"
+          imageAlt="AirPods Pro with premium charging case"
           mediaAnimation="blur-reveal"
           imagePosition="right"
         />
       </div>
 
-      <div id="products" data-section="products">
+      <div id="features" data-section="features">
-        <ProductCardThree
+        <FeatureCardMedia
-          title="PodsX Pro & PodsX 4"
+          title="Engineered to Perfection"
-          description="Handcrafted for audio excellence. Each model delivers premium sound with floating acoustic design and advanced noise control."
+          description="Discover the key features that make AirPods the world's most popular wireless audio experience."
-          tag="Premium Lineup"
+          tag="Core Features"
-          tagIcon={ShoppingBag}
+          tagIcon={Sparkles}
           tagAnimation="slide-up"
-          products={[
+          features={[
             {
-              id: "podsx-pro",              name: "PodsX Pro",              price: "$299",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png",              imageAlt: "PodsX Pro with advanced noise cancellation",              initialQuantity: 1,
+              id: "noise-cancellation",              title: "Active Noise Cancellation",              description: "Experience breakthrough active noise cancellation that adapts to your environment in real time. Enjoy immersive listening wherever you go.",              tag: "AirPods Pro",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png",              imageAlt: "Active noise cancellation visualization",              buttons: [{ text: "Explore Feature", href: "#" }],
             },
             {
-              id: "podsx-4",              name: "PodsX 4",              price: "$199",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png",              imageAlt: "PodsX 4 standard edition",              initialQuantity: 1,
+              id: "spatial-audio",              title: "Spatial Audio & Personalized Volume",              description: "Feel like you're in the middle of the action with dynamic head tracking and room-aware audio. Theater-like experience in your everyday moments.",              tag: "Immersive",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png",              imageAlt: "Spatial audio 3D visualization",              buttons: [{ text: "Experience It", href: "#" }],
+            },
+            {
+              id: "ecosystem",              title: "Seamless Apple Ecosystem",              description: "Instantly connect across all your Apple devices. One tap setup with automatic switching between iPhone, Mac, iPad, and Apple Watch.",              tag: "Connected",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png",              imageAlt: "Apple ecosystem integration",              buttons: [{ text: "See Integration", href: "#" }],
             },
           ]}
-          gridVariant="two-columns-alternating-heights"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="specifications" data-section="specifications">
+      <div id="products" data-section="products">
-        <FeatureCardMedia
+        <ProductCardThree
-          title="Technical Specifications"
+          title="Find Your Perfect Fit"
-          description="Detailed specs and features for each PodsX model to help you choose the right fit."
+          description="Choose from our premium lineup designed for every lifestyle and listening preference."
-          tag="Product Details"
+          tag="Shop Collection"
-          tagIcon={Sparkles}
+          tagIcon={ShoppingBag}
           tagAnimation="slide-up"
-          features={[
+          products={[
             {
-              id: "podsx-pro-specs",              title: "PodsX Pro Specifications",              description: "Active noise cancellation, transparency mode, spatial audio with dynamic head tracking, up to 30 hours battery with case, water resistant (IPX4), premium materials and floating design for supreme comfort.",              tag: "Pro Model",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png",              imageAlt: "PodsX Pro specifications showcase",              buttons: [{ text: "Buy PodsX Pro", href: "#products" }],
+              id: "airpods-pro",              name: "AirPods Pro",              price: "$249",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png",              imageAlt: "AirPods Pro with active noise cancellation",              initialQuantity: 1,
             },
             {
-              id: "podsx-4-specs",              title: "PodsX 4 Specifications",              description: "Refined noise control, pristine audio quality, up to 24 hours battery with case, optimized comfort for all-day wear, floating ergonomic design, seamless ecosystem integration across all devices.",              tag: "Standard Model",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png",              imageAlt: "PodsX 4 specifications showcase",              buttons: [{ text: "Buy PodsX 4", href: "#products" }],
+              id: "airpods-max",              name: "AirPods Max",              price: "$549",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-max-over-ear-headphones-displaye-1772884352294-e666eff4.png",              imageAlt: "AirPods Max over-ear headphones",              initialQuantity: 1,
             },
             {
-              id: "comparison",              title: "Side-by-Side Comparison",              description: "PodsX Pro offers premium active noise cancellation and spatial audio, while PodsX 4 delivers excellent sound quality at an accessible price point. Both feature floating acoustic design and premium comfort.",              tag: "Compare",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png",              imageAlt: "Product comparison visualization",              buttons: [{ text: "View Full Specs", href: "#" }],
+              id: "airpods-standard",              name: "AirPods (2nd Gen)",              price: "$129",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png",              imageAlt: "AirPods 2nd generation standard model",              initialQuantity: 1,
             },
           ]}
+          gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
+      <div id="metrics" data-section="metrics">
+        <AboutMetric
+          title="Trusted by Millions Worldwide - The Leading Choice in Wireless Audio Since Day One"
+          metrics={[
+            { icon: Battery, label: "Extended Battery Life", value: "30+ Hours" },
+            { icon: Globe, label: "Customers Globally", value: "Millions" },
+            { icon: Volume2, label: "Audio Quality Rating", value: "Premium" },
+            { icon: Zap, label: "Quick Setup Time", value: "Instant" },
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="social-proof" data-section="social-proof">
+        <SocialProofOne
+          title="Trusted by Audio Leaders"
+          description="Integrated with the world's most respected audio and technology platforms."
+          tag="Industry Partners"
+          tagIcon={Award}
+          tagAnimation="slide-up"
+          names={[
+            "Apple Music",            "Spotify",            "Apple",            "Beats",            "Shure",            "Sennheiser",            "Bose"
+          ]}
+          logos={[
+            "http://img.b2bpic.net/free-photo/top-view-apples-around-frame-white-background-with-copy-space_141793-11956.jpg",            "http://img.b2bpic.net/free-vector/flat-design-minimal-music-festival-youtube-channel-art_23-2149155264.jpg",            "http://img.b2bpic.net/free-vector/set-retro-music-stickers_23-2147592207.jpg",            "http://img.b2bpic.net/free-vector/music-festival-logo-collection-with-flat-design_23-2147825729.jpg",            "http://img.b2bpic.net/free-vector/gradient-colored-dj-logo-set_23-2148874408.jpg",            "http://img.b2bpic.net/free-vector/flat-design-dj-logo-collection_23-2148872847.jpg",            "http://img.b2bpic.net/free-vector/neumorph-business-card_52683-59098.jpg"
+          ]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          speed={40}
+          showCard={true}
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardFifteen
+          testimonial="AirPods have completely transformed how I listen to music and take calls. The seamless integration with my Apple devices is unmatched. I can't imagine my daily routine without them. The sound quality and comfort are exceptional."
+          rating={5}
+          author="Sarah Chen, Audio Engineer"
+          avatars={[
+            {
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-of-a-satisfied-use-1772884351817-6dec7f08.png",              alt: "Sarah Chen"
+            },
+            {
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/happy-lifestyle-photo-of-person-wearing--1772884353901-6ee88695.png",              alt: "Customer 2"
+            },
+            {
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-businessperson-using-airpod-1772884353609-0ef52970.png",              alt: "Customer 3"
+            },
+            {
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/creative-professional-or-content-creator-1772884352345-f1e1d55c.png",              alt: "Customer 4"
+            },
+            {
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/active-lifestyle-user-athlete-or-fitness-1772884351718-1b549457.png",              alt: "Customer 5"
+            },
+            {
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/diverse-user-in-relaxed-comfortable-sett-1772884352272-d4dc5302.png",              alt: "Customer 6"
+            },
+          ]}
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqDouble
+          title="Frequently Asked Questions"
+          description="Everything you need to know about AirPods, compatibility, and setup."
+          tag="Support"
+          tagIcon={HelpCircle}
+          tagAnimation="slide-up"
+          faqs={[
+            {
+              id: "1",              title: "How do I set up my AirPods?",              content: "Simply bring your AirPods near your iPhone, iPad, Mac, or Apple Watch. A setup screen will appear automatically. Tap 'Connect' and follow the on-screen instructions. Your AirPods will automatically connect to all your Apple devices through your iCloud account."
+            },
+            {
+              id: "2",              title: "What's the battery life?",              content: "AirPods Pro offer up to 6 hours of listening time or 30 hours with the charging case. AirPods (2nd generation) provide up to 5 hours of listening time or 24 hours with the case. Battery life varies based on listening volume and active features used."
+            },
+            {
+              id: "3",              title: "Are AirPods water resistant?",              content: "AirPods Pro are water and sweat resistant (IPX4). They can withstand splashes, rain, and sweat during workouts. However, they're not designed for swimming or submersion in water. AirPods (2nd generation) are not water resistant."
+            },
+            {
+              id: "4",              title: "Can I use AirPods with Android?",              content: "Yes, AirPods can connect to Android devices via Bluetooth. However, you won't have access to some features like easy setup, automatic switching between devices, or Siri integration. For the best experience, we recommend using AirPods with Apple devices."
+            },
+            {
+              id: "5",              title: "Do AirPods work with Windows?",              content: "Yes, AirPods can pair with Windows PCs and laptops via Bluetooth. Simply put your AirPods in pairing mode and connect them through your Windows Bluetooth settings. Some exclusive Apple features won't be available on Windows."
+            },
+            {
+              id: "6",              title: "What if I lose one AirPod?",              content: "You can purchase replacement AirPods individually from Apple's website or authorized retailers. Visit apple.com and select your AirPods model to order a replacement earbud or charging case."
+            },
+          ]}
+          textboxLayout="default"
+          faqsAnimation="slide-up"
+          useInvertedBackground={false}
+          animationType="smooth"
+        />
+      </div>
+
       <div id="contact-cta" data-section="contact-cta">
         <ContactCTA
-          tag="Ready to Order?"
+          tag="Ready to Upgrade?"
           tagIcon={Headphones}
           tagAnimation="slide-up"
-          title="Get Your PodsX Today"
+          title="Start Your Audio Journey Today"
-          description="Experience the pinnacle of audio technology. Choose PodsX Pro for premium features or PodsX 4 for exceptional value. Both deliver the quality you deserve."
+          description="Discover the perfect AirPods for your lifestyle. Experience premium sound, seamless connectivity, and the ecosystem that just works."
           buttons={[
-            { text: "Shop Now", href: "/products" },
+            { text: "Shop Now", href: "#products" },
-            { text: "Learn More", href: "/features" },
+            { text: "Learn More", href: "#features" },
           ]}
           buttonAnimation="slide-up"
-          background={{ variant: "noise" }}
+          background={{ variant: "plain" }}
           useInvertedBackground={false}
         />
       </div>
@@ -131,10 +241,10 @@ export default function ProductsPage() {
           columns={[
             {
               title: "Products",              items: [
-                { label: "PodsX Pro", href: "/products" },
+                { label: "AirPods Pro", href: "#products" },
-                { label: "PodsX 4", href: "/products" },
+                { label: "AirPods Max", href: "#products" },
-                { label: "Compare Models", href: "/products" },
+                { label: "AirPods (2nd Gen)", href: "#products" },
-                { label: "Accessories", href: "#" },
+                { label: "Compare Models", href: "#" },
               ],
             },
             {
@@ -147,8 +257,8 @@ export default function ProductsPage() {
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#" },
+                { label: "About Us", href: "/about" },
-                { label: "Blog", href: "#" },
+                { label: "Reviews", href: "/reviews" },
                 { label: "Careers", href: "#" },
                 { label: "News", href: "#" },
               ],
@@ -162,7 +272,7 @@ export default function ProductsPage() {
               ],
             },
           ]}
-          bottomLeftText="© 2025 PodsX. All rights reserved."
+          bottomLeftText="© 2025 AirPods. All rights reserved."
           bottomRightText="Powered by Premium Audio Technology"
         />
       </div>

src/app/reviews/page.tsx

@@ -2,33 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
+import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
+import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Star } from "lucide-react";
+import { Award, Star } from "lucide-react";
 
 export default function ReviewsPage() {
-  const testimonials = [
-    {
-      id: "1",      title: "Best Audio Experience I've Had",      quote: "The sound quality is absolutely incredible. Active noise cancellation works flawlessly, and the spatial audio feature is mind-blowing. I use them daily for work calls and music, and they never disappoint.",      name: "Michael Thompson",      role: "Software Engineer",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-of-a-satisfied-use-1772884351817-6dec7f08.png",      imageAlt: "Michael Thompson"},
-    {
-      id: "2",      title: "Seamless Integration with Apple Ecosystem",      quote: "Switching between my iPhone, iPad, and Mac is seamless. The automatic device switching is a game-changer. Setup was literally just one tap. This is what premium integration looks like.",      name: "Sarah Chen",      role: "Creative Director",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/happy-lifestyle-photo-of-person-wearing--1772884353901-6ee88695.png",      imageAlt: "Sarah Chen"},
-    {
-      id: "3",      title: "Perfect for Fitness and Daily Use",      quote: "I take these to the gym, on runs, and they stay secure the entire time. Water resistant, reliable connectivity, and the battery lasts through my entire workout routine. Highly recommend!",      name: "James Rodriguez",      role: "Fitness Coach",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-businessperson-using-airpod-1772884353609-0ef52970.png",      imageAlt: "James Rodriguez"},
-    {
-      id: "4",      title: "Worth Every Penny",      quote: "I was skeptical about the price, but after using these for three months, I can confirm they're worth every dollar. The build quality, sound fidelity, and features are exceptional. Best tech purchase I've made.",      name: "Emma Wilson",      role: "Product Manager",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/creative-professional-or-content-creator-1772884352345-f1e1d55c.png",      imageAlt: "Emma Wilson"},
-    {
-      id: "5",      title: "Game-Changing Noise Cancellation",      quote: "The adaptive noise cancellation is revolutionary. On airplanes, in coffee shops, or at home – it adapts perfectly to my environment. Conversation awareness is fantastic for staying connected while immersed in audio.",      name: "David Park",      role: "Business Consultant",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/active-lifestyle-user-athlete-or-fitness-1772884351718-1b549457.png",      imageAlt: "David Park"},
-    {
-      id: "6",      title: "Premium Design Meets Performance",      quote: "These are beautiful. The design is minimalist yet premium, they fit comfortably for hours, and the charging case is elegant. Performance matches the aesthetics perfectly. A truly well-thought product.",      name: "Sophie Laurent",      role: "Design Enthusiast",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/diverse-user-in-relaxed-comfortable-sett-1772884352272-d4dc5302.png",      imageAlt: "Sophie Laurent"},
-  ];
-
-  const stats = [
-    { label: "Average Rating", value: "4.8/5" },
-    { label: "Customer Reviews", value: "10k+" },
-    { label: "Recommendation Rate", value: "95%" },
-    { label: "Verified Purchases", value: "98%" },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -36,7 +15,7 @@ export default function ReviewsPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="mediumLargeSizeMediumTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="inset"
       primaryButtonStyle="double-inset"
       secondaryButtonStyle="solid"
@@ -50,138 +29,74 @@ export default function ReviewsPage() {
             { name: "Features", id: "/" },
             { name: "Why AirPods", id: "/" },
             { name: "Support", id: "/" },
-            { name: "Compare", id: "/comparison" },
             { name: "Reviews", id: "/reviews" },
+            { name: "About", id: "/about" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Contact", id: "/contact" },
           ]}
           button={{ text: "Shop Now", href: "/" }}
           animateOnLoad={true}
         />
       </div>
 
-      <div id="reviews-header" data-section="reviews-header" className="w-full py-20">
+      <div id="testimonials" data-section="testimonials">
-        <div className="w-content-width mx-auto px-5">
+        <TestimonialCardOne
-          <div className="mb-16 text-center">
+          title="What Our Customers Say"
-            <h1 className="text-4xl md:text-5xl font-bold mb-4">Customer Reviews</h1>
+          description="Real feedback from users who love their AirPods experience"
-            <p className="text-lg text-foreground/75 max-w-2xl mx-auto mb-8">
+          tag="Customer Reviews"
-              Read what thousands of satisfied customers have to say about their AirPods experience.
+          tagIcon={Star}
-            </p>
+          tagAnimation="slide-up"
-            
+          testimonials={[
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
+            {
-              {stats.map((stat, index) => (
+              id: "1",              name: "Alisa Hester",              role: "Product Manager",              company: "Tech Innovations",              rating: 5,
-                <div key={index} className="p-6 rounded-2xl border border-accent/20 bg-card">
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-of-a-satisfied-use-1772884351817-6dec7f08.png",              imageAlt: "Alisa Hester"
-                  <p className="text-foreground/75 text-sm mb-2">{stat.label}</p>
+            },
-                  <p className="text-3xl font-bold text-primary-cta">{stat.value}</p>
+            {
-                </div>
+              id: "2",              name: "James Mitchell",              role: "Creative Director",              company: "Design Studio",              rating: 5,
-              ))}
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/happy-lifestyle-photo-of-person-wearing--1772884353901-6ee88695.png",              imageAlt: "James Mitchell"
-            </div>
+            },
-          </div>
+            {
-        </div>
+              id: "3",              name: "Emily Rodriguez",              role: "Fitness Coach",              company: "Wellness Center",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-businessperson-using-airpod-1772884353609-0ef52970.png",              imageAlt: "Emily Rodriguez"
+            },
+            {
+              id: "4",              name: "Michael Chen",              role: "Software Engineer",              company: "Tech Company",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/creative-professional-or-content-creator-1772884352345-f1e1d55c.png",              imageAlt: "Michael Chen"
+            },
+            {
+              id: "5",              name: "Sophie Laurent",              role: "Digital Nomad",              company: "Content Creator",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/active-lifestyle-user-athlete-or-fitness-1772884351718-1b549457.png",              imageAlt: "Sophie Laurent"
+            },
+            {
+              id: "6",              name: "David Park",              role: "Music Producer",              company: "Studio Audio",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/diverse-user-in-relaxed-comfortable-sett-1772884352272-d4dc5302.png",              imageAlt: "David Park"
+            },
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
       </div>
 
-      <div id="testimonials" data-section="testimonials" className="w-full py-20">
+      <div id="social-proof" data-section="social-proof">
-        <div className="w-full">
+        <SocialProofOne
-          <TestimonialCardTen
+          title="Trusted by Industry Leaders"
-            testimonials={testimonials}
+          description="Recommended and endorsed by top audio professionals and technology experts worldwide"
-            title="What Our Customers Are Saying"
+          tag="Social Proof"
-            description="Join thousands of happy customers who have transformed their audio experience."
+          tagIcon={Award}
-            textboxLayout="default"
+          tagAnimation="slide-up"
-            useInvertedBackground={false}
+          names={[
-          />
+            "Audio Professionals",            "Tech Reviewers",            "Music Experts",            "Industry Awards",            "Customer Choice",            "Best in Class",            "Editor's Pick"
-        </div>
+          ]}
-      </div>
+          logos={[
-
+            "http://img.b2bpic.net/free-photo/top-view-apples-around-frame-white-background-with-copy-space_141793-11956.jpg",            "http://img.b2bpic.net/free-vector/flat-design-minimal-music-festival-youtube-channel-art_23-2149155264.jpg",            "http://img.b2bpic.net/free-vector/set-retro-music-stickers_23-2147592207.jpg",            "http://img.b2bpic.net/free-vector/music-festival-logo-collection-with-flat-design_23-2147825729.jpg",            "http://img.b2bpic.net/free-vector/gradient-colored-dj-logo-set_23-2148874408.jpg",            "http://img.b2bpic.net/free-vector/flat-design-dj-logo-collection_23-2148872847.jpg",            "http://img.b2bpic.net/free-vector/neumorph-business-card_52683-59098.jpg"
-      <div id="rating-breakdown" data-section="rating-breakdown" className="w-full py-20">
+          ]}
-        <div className="w-content-width mx-auto px-5">
+          textboxLayout="default"
-          <h2 className="text-3xl font-bold mb-8 text-center">Rating Breakdown</h2>
+          useInvertedBackground={false}
-          
+          speed={40}
-          <div className="max-w-2xl mx-auto space-y-4">
+          showCard={true}
-            {[
+        />
-              { stars: 5, percentage: 75, count: 7500 },
-              { stars: 4, percentage: 18, count: 1800 },
-              { stars: 3, percentage: 5, count: 500 },
-              { stars: 2, percentage: 1.5, count: 150 },
-              { stars: 1, percentage: 0.5, count: 50 },
-            ].map((rating) => (
-              <div key={rating.stars} className="flex items-center gap-4">
-                <div className="flex gap-1">
-                  {Array.from({ length: rating.stars }).map((_, i) => (
-                    <Star key={i} className="w-4 h-4 fill-primary-cta text-primary-cta" />
-                  ))}
-                </div>
-                <div className="flex-1 h-3 bg-accent/20 rounded-full overflow-hidden">
-                  <div
-                    className="h-full bg-primary-cta"
-                    style={{ width: `${rating.percentage}%` }}
-                  />
-                </div>
-                <div className="text-right">
-                  <p className="text-sm font-semibold text-foreground">{rating.percentage}%</p>
-                  <p className="text-xs text-foreground/50">{rating.count} reviews</p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div id="why-choose" data-section="why-choose" className="w-full py-20 bg-background-accent/5">
-        <div className="w-content-width mx-auto px-5">
-          <h2 className="text-3xl font-bold mb-12 text-center">Why Choose AirPods?</h2>
-          
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
-              <h3 className="text-xl font-bold mb-3 text-foreground">Premium Sound Quality</h3>
-              <p className="text-foreground/75">
-                Industry-leading audio quality with crystal-clear highs, rich mids, and deep bass. Every note is perfectly tuned for optimal listening.
-              </p>
-            </div>
-            
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
-              <h3 className="text-xl font-bold mb-3 text-foreground">Seamless Integration</h3>
-              <p className="text-foreground/75">
-                Works perfectly across all Apple devices with automatic switching, iCloud sync, and unified controls. One ecosystem for everything.
-              </p>
-            </div>
-            
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
-              <h3 className="text-xl font-bold mb-3 text-foreground">All-Day Comfort</h3>
-              <p className="text-foreground/75">
-                Ergonomic design engineered for comfort during extended use. Lightweight, secure fit, and breathable materials keep you comfortable all day.
-              </p>
-            </div>
-            
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
-              <h3 className="text-xl font-bold mb-3 text-foreground">Active Noise Cancellation</h3>
-              <p className="text-foreground/75">
-                Advanced ANC technology adapts to your environment in real-time. Immersive listening whether you're in a bustling city or quiet office.
-              </p>
-            </div>
-            
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
-              <h3 className="text-xl font-bold mb-3 text-foreground">Extended Battery Life</h3>
-              <p className="text-foreground/75">
-                Get through full days on a single charge. Quick charging and intelligent power management ensure you're always connected.
-              </p>
-            </div>
-            
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
-              <h3 className="text-xl font-bold mb-3 text-foreground">Spatial Audio Experience</h3>
-              <p className="text-foreground/75">
-                Immersive 3D sound with dynamic head tracking. Feel like you're in the middle of the action with theater-like audio.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div id="cta" data-section="cta" className="w-full py-20">
-        <div className="w-content-width mx-auto px-5 text-center">
-          <h2 className="text-3xl font-bold mb-4">Ready to Experience Premium Audio?</h2>
-          <p className="text-lg text-foreground/75 mb-8">Join thousands of satisfied customers today.</p>
-          <a href="/#products" className="inline-block px-8 py-3 bg-primary-cta text-background rounded-lg font-semibold hover:opacity-90 transition-opacity">
-            Shop AirPods Now
-          </a>
-        </div>
       </div>
 
       <div id="footer" data-section="footer">
@@ -189,24 +104,24 @@ export default function ReviewsPage() {
           columns={[
             {
               title: "Products",              items: [
-                { label: "AirPods Pro", href: "/#products" },
+                { label: "AirPods Pro", href: "/" },
-                { label: "AirPods Max", href: "/#products" },
+                { label: "AirPods Max", href: "/" },
-                { label: "AirPods (2nd Gen)", href: "/#products" },
+                { label: "AirPods (2nd Gen)", href: "/" },
-                { label: "Compare Models", href: "/comparison" },
+                { label: "Compare Models", href: "#" },
               ],
             },
             {
               title: "Support",              items: [
-                { label: "FAQ", href: "/#faq" },
+                { label: "FAQ", href: "/" },
                 { label: "Setup Guide", href: "#" },
                 { label: "Troubleshooting", href: "#" },
-                { label: "Contact Us", href: "/#contact-cta" },
+                { label: "Contact Us", href: "/contact" },
               ],
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#" },
+                { label: "About Us", href: "/about" },
-                { label: "Blog", href: "#" },
+                { label: "Reviews", href: "/reviews" },
                 { label: "Careers", href: "#" },
                 { label: "News", href: "#" },
               ],

src/app/shop/page.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { ShoppingBag, Headphones } from "lucide-react";
+
+export default function ShopPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="AirPods"
+          navItems={[
+            { name: "Products", id: "products" },
+            { name: "Features", id: "#features" },
+            { name: "Why AirPods", id: "#metrics" },
+            { name: "Support", id: "#faq" },
+            { name: "Shop", id: "shop" },
+          ]}
+          button={{ text: "Home", href: "/" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardThree
+          title="PodsX Pro & PodsX 4 - Premium Wireless Audio"
+          description="Explore our flagship PodsX Pro with advanced noise cancellation and the versatile PodsX 4 designed for everyday excellence. Both models deliver premium sound quality and seamless connectivity."
+          tag="Shop Now"
+          tagIcon={ShoppingBag}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "podsx-pro",              name: "PodsX Pro",              price: "$299",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png?_wi=4",              imageAlt: "PodsX Pro with advanced active noise cancellation",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-pro-specs",              name: "PodsX Pro - Specifications",              price: "Details",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png?_wi=2",              imageAlt: "PodsX Pro premium specifications showcase",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-4",              name: "PodsX 4",              price: "$199",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png?_wi=3",              imageAlt: "PodsX 4 versatile everyday audio solution",              initialQuantity: 1,
+            },
+            {
+              id: "podsx-4-specs",              name: "PodsX 4 - Specifications",              price: "Details",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-max-over-ear-headphones-displaye-1772884352294-e666eff4.png?_wi=3",              imageAlt: "PodsX 4 comprehensive specifications overview",              initialQuantity: 1,
+            },
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="cta" data-section="cta">
+        <ContactCTA
+          tag="Ready to Order?"
+          tagIcon={Headphones}
+          tagAnimation="slide-up"
+          title="Get Your PodsX Today"
+          description="Choose between PodsX Pro for ultimate performance or PodsX 4 for everyday excellence. Both models feature premium sound, extended battery life, and intuitive controls."
+          buttons={[
+            { text: "Buy PodsX Pro", href: "#podsx-pro" },
+            { text: "Buy PodsX 4", href: "#podsx-4" },
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "PodsX Pro", href: "#podsx-pro" },
+                { label: "PodsX 4", href: "#podsx-4" },
+                { label: "Compare Models", href: "#" },
+                { label: "Accessories", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Setup Guide", href: "#" },
+                { label: "Troubleshooting", href: "#" },
+                { label: "Warranty", href: "#" },
+                { label: "Contact Us", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "News", href: "#" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Return Policy", href: "#" },
+                { label: "Shipping Info", href: "#" },
+              ],
+            },
+          ]}
+          bottomLeftText="© 2025 PodsX. All rights reserved."
+          bottomRightText="Premium Audio Technology"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -18,7 +18,7 @@
   --secondary-cta: #f9f9f9;
   --secondary-cta-text: #000000;
   --accent: #e2e2e2;
-  --background-accent: #f0f0f0;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);