diff --git a/src/app/comparison/page.tsx b/src/app/comparison/page.tsx
index 13746bf..1472b86 100644
--- a/src/app/comparison/page.tsx
+++ b/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 className="w-content-width mx-auto px-5">
-          <div className="mb-16 text-center">
-            <h1 className="text-4xl md:text-5xl font-bold mb-4">Compare AirPods Models</h1>
-            <p className="text-lg text-foreground/75 max-w-2xl mx-auto">
-              Choose the perfect AirPods for your lifestyle. Compare specs, features, and capabilities side-by-side.
-            </p>
-          </div>
+      <div id="hero" data-section="hero">
+        <HeroSplitKpi
+          title="PodsX Pro vs PodsX 4 - Side by Side Comparison"
+          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."
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "6 Hours", label: "Battery (Pro)" },
+            { 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">
-            <table className="w-full border-collapse">
-              <thead>
-                <tr className="border-b border-accent/20">
-                  <th className="text-left py-4 px-4 font-bold text-foreground">Feature</th>
-                  <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="p-8 rounded-2xl border border-accent/20 bg-card">
-              <h3 className="text-2xl font-bold mb-4 text-foreground">AirPods Pro</h3>
-              <p className="text-foreground/75 mb-6">
-                Perfect balance of premium features and portability. Best for active users who want professional-grade audio on the go.
-              </p>
-              <p className="text-3xl font-bold text-primary-cta mb-6">$249</p>
-              <a href="/#products" className="inline-block px-6 py-2 bg-primary-cta text-background rounded-lg font-semibold hover:opacity-90 transition-opacity">
-                Shop AirPods Pro
-              </a>
-            </div>
-
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
-              <h3 className="text-2xl font-bold mb-4 text-foreground">AirPods 4</h3>
-              <p className="text-foreground/75 mb-6">
-                Everyday audio made simple. Great entry point to the AirPods ecosystem with essential features at an affordable price.
-              </p>
-              <p className="text-3xl font-bold text-primary-cta mb-6">$129</p>
-              <a href="/#products" className="inline-block px-6 py-2 bg-primary-cta text-background rounded-lg font-semibold hover:opacity-90 transition-opacity">
-                Shop AirPods 4
-              </a>
-            </div>
-
-            <div className="p-8 rounded-2xl border border-accent/20 bg-card">
-              <h3 className="text-2xl font-bold mb-4 text-foreground">AirPods Max</h3>
-              <p className="text-foreground/75 mb-6">
-                Ultimate audio experience with immersive sound. Designed for professionals who demand the best in sound quality and features.
-              </p>
-              <p className="text-3xl font-bold text-primary-cta mb-6">$549</p>
-              <a href="/#products" className="inline-block px-6 py-2 bg-primary-cta text-background rounded-lg font-semibold hover:opacity-90 transition-opacity">
-                Shop AirPods Max
-              </a>
+      <div id="comparison-table" data-section="comparison-table">
+        <div className="py-20 px-6">
+          <div className="max-w-6xl mx-auto">
+            <h2 className="text-4xl font-bold text-center mb-4">Detailed Specifications</h2>
+            <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>
+            
+            <div className="overflow-x-auto bg-card rounded-lg border border-border p-8">
+              <table className="w-full">
+                <thead>
+                  <tr className="border-b border-border">
+                    <th className="text-left py-4 px-4 font-semibold text-foreground">Feature</th>
+                    <th className="text-center py-4 px-4 font-semibold text-foreground">PodsX Pro</th>
+                    <th className="text-center py-4 px-4 font-semibold text-foreground">PodsX 4</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Price</td>
+                    <td className="text-center py-4 px-4"><span className="font-bold text-primary-cta">$249</span></td>
+                    <td className="text-center py-4 px-4"><span className="font-bold text-primary-cta">$149</span></td>
+                  </tr>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <td className="py-4 px-4 font-medium text-foreground">Active Noise Cancellation</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">Transparency Mode</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">Listening Time (Per Charge)</td>
+                    <td className="text-center py-4 px-4">6 hours</td>
+                    <td className="text-center py-4 px-4">5 hours</td>
+                  </tr>
+                  <tr className="border-b border-border hover:bg-background/50 transition">
+                    <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: "AirPods Max", href: "/#products" },
-                { label: "AirPods (2nd Gen)", href: "/#products" },
+                { label: "PodsX Pro", href: "#products" },
+                { label: "PodsX 4", href: "#products" },
                 { label: "Compare Models", href: "/comparison" },
+                { label: "View All", href: "/" },
               ],
             },
             {
               title: "Support",              items: [
-                { label: "FAQ", href: "/#faq" },
-                { label: "Setup Guide", href: "#" },
-                { label: "Troubleshooting", href: "#" },
-                { label: "Contact Us", href: "/#contact-cta" },
+                { label: "Features", href: "/features" },
+                { label: "Setup Guide", href: "/" },
+                { label: "FAQ", href: "/" },
+                { label: "Contact Us", href: "/" },
               ],
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#" },
-                { label: "Blog", href: "#" },
-                { label: "Careers", href: "#" },
-                { label: "News", href: "#" },
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "/" },
+                { label: "Careers", href: "/" },
+                { label: "News", href: "/" },
               ],
             },
             {
@@ -246,8 +231,8 @@ export default function ComparisonPage() {
               ],
             },
           ]}
-          bottomLeftText="© 2025 AirPods. All rights reserved."
-          bottomRightText="Powered by Premium Audio Technology"
+          bottomLeftText="© 2025 PodsX. All rights reserved."
+          bottomRightText="Premium Audio Technology"
         />
       </div>
     </ThemeProvider>