Update src/app/comparison/page.tsx
This commit is contained in:
@@ -3,11 +3,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 ProductCardThree from "@/components/sections/product/ProductCardThree";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Zap, Sparkles, ShoppingBag, CheckCircle, AlertCircle } from "lucide-react";
|
||||
import { Zap, ShoppingBag, Check, X } from "lucide-react";
|
||||
|
||||
export default function ComparisonPage() {
|
||||
return (
|
||||
@@ -29,84 +28,150 @@ export default function ComparisonPage() {
|
||||
navItems={[
|
||||
{ name: "Products", id: "/" },
|
||||
{ name: "Features", id: "/features" },
|
||||
{ name: "Comparison", id: "/comparison" },
|
||||
{ name: "Why AirPods", id: "/" },
|
||||
{ name: "Support", id: "/" },
|
||||
{ name: "Compare", id: "/comparison" },
|
||||
]}
|
||||
button={{ text: "Shop Now", href: "/#products" }}
|
||||
button={{ text: "Shop Now", href: "#products" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="AirPods Pro vs AirPods 4 Comparison"
|
||||
description="Find your perfect match. Compare detailed specifications, features, and performance between AirPods Pro and AirPods 4. Make an informed decision based on your needs."
|
||||
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: "2 Models", label: "Full Comparison" },
|
||||
{ value: "20+ Specs", label: "Detailed Analysis" },
|
||||
{ value: "All Features", label: "Side by Side" },
|
||||
{ value: "6 Hours", label: "Battery (Pro)" },
|
||||
{ value: "30 Hours", label: "Total (with Case)" },
|
||||
{ value: "IPX4", label: "Water Resistance" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tag="Choose Wisely"
|
||||
tagIcon={Sparkles}
|
||||
tag="Product Comparison"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Shop AirPods Pro", href: "/#products" },
|
||||
{ text: "Shop AirPods 4", href: "/#products" },
|
||||
{ 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?_wi=1"
|
||||
imageAlt="AirPods Pro and AirPods 4 side by side"
|
||||
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 id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
title="Detailed Feature Comparison Matrix"
|
||||
description="Everything you need to know to choose between these two premium models."
|
||||
tag="Specifications"
|
||||
tagIcon={CheckCircle}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "audio-quality", title: "Audio Quality & Performance", description: "AirPods Pro delivers superior audio with premium drivers, adaptive audio, and personalized spatial audio with dynamic head tracking. AirPods 4 provides excellent audio quality with AAC codec support and dynamic range optimization, perfect for everyday listening.", tag: "Audio", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png?_wi=1", imageAlt: "Audio quality comparison visualization", buttons: [{ text: "Learn More", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "noise-control", title: "Noise Control Technologies", description: "AirPods Pro feature industry-leading active noise cancellation (up to 40dB reduction) plus transparency mode with conversation awareness. AirPods 4 offer passive noise isolation through secure fit design, making them perfect for moderate noise environments.", tag: "Comparison", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png?_wi=1", imageAlt: "Noise control feature comparison", buttons: [{ text: "Explore", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "battery-endurance", title: "Battery Life & Charging", description: "AirPods Pro: 6 hours per charge (30 hours total with case). AirPods 4: 5 hours per charge (24 hours total with case). Both support fast charging - 5 minutes equals up to an hour of playback. Wireless charging available on both premium models.", tag: "Battery", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/battery-charge-indicator-visualization-sh-1772884352345-a1b2c3d4.png?_wi=1", imageAlt: "Battery life comparison chart", buttons: [{ text: "Details", href: "#" }],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<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="Shop the Comparison"
|
||||
description="Compare side-by-side and choose the AirPods that fit your needs perfectly."
|
||||
tag="Premium Models"
|
||||
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: "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?_wi=2", imageAlt: "AirPods Pro - Premium noise cancellation model", initialQuantity: 1,
|
||||
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: "AirPods 4", price: "$129", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png?_wi=1", imageAlt: "AirPods 4 - Standard model with excellent value", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
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?_wi=1", imageAlt: "AirPods Max - Premium over-ear headphones", 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="three-columns-all-equal-width"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -115,13 +180,13 @@ export default function ComparisonPage() {
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
tag="Still Deciding?"
|
||||
tagIcon={AlertCircle}
|
||||
tag="Need Help Deciding?"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
title="Get Expert Guidance"
|
||||
description="Our specialists can help you choose the perfect AirPods model for your lifestyle. Compare features, read reviews, and make your purchase with confidence."
|
||||
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: "Shop Now", href: "#products" },
|
||||
{ text: "View Features", href: "/features" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -135,26 +200,26 @@ export default function ComparisonPage() {
|
||||
columns={[
|
||||
{
|
||||
title: "Products", items: [
|
||||
{ label: "AirPods Pro", href: "/#products" },
|
||||
{ label: "AirPods Max", href: "/#products" },
|
||||
{ label: "AirPods 4", 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: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -166,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>
|
||||
|
||||
Reference in New Issue
Block a user