bender/7dc2a228-e862-48eb-a433-cc308fe21534
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #3

Merged
bender merged 9 commits from version_3 into main 2026-03-07 11:56:08 +00:00
Conversation 0 Commits 9 Files Changed 9 +1198 -7
9 changed files with 1198 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,114 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Battery, Globe, Volume2, Zap, Award, Sparkles } from "lucide-react";
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
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: "About", id: "/about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Shop Now", href: "/" }}
animateOnLoad={true}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[
{ type: "text", content: "Revolutionizing Audio with" },
{
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"},
{ type: "text", content: "Innovation and Excellence" },
]}
buttons={[
{ text: "Shop Now", href: "/" },
{ text: "Learn More", href: "#mission" },
]}
buttonAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="mission" data-section="mission">
<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."
metrics={[
{ icon: Sparkles, label: "Innovation Focus", value: "Leading" },
{ icon: Award, label: "Quality Standard", value: "Premium" },
{ icon: Globe, label: "Global Reach", value: "Millions" },
{ icon: Zap, label: "Performance", value: "Outstanding" },
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Products", items: [
{ label: "AirPods Pro", href: "/" },
{ label: "AirPods Max", href: "/" },
{ label: "AirPods (2nd Gen)", href: "/" },
{ label: "Compare Models", href: "#" },
],
},
{
title: "Support", items: [
{ label: "FAQ", href: "/" },
{ label: "Setup Guide", href: "#" },
{ label: "Troubleshooting", href: "#" },
{ label: "Contact Us", href: "/contact" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "News", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Warranty", href: "#" },
],
},
]}
bottomLeftText="© 2025 AirPods. All rights reserved."
bottomRightText="Powered by Premium Audio Technology"
/>
</div>
</ThemeProvider>
);
}

255
src/app/comparison/page.tsx Normal file
View File

@@ -0,0 +1,255 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Check, X, ShoppingBag } from "lucide-react";
export default function ComparisonPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
cardStyle="inset"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="AirPods"
navItems={[
{ name: "Products", id: "/" },
{ name: "Features", id: "/" },
{ name: "Why AirPods", id: "/" },
{ name: "Support", id: "/" },
{ name: "Compare", id: "/comparison" },
{ name: "Reviews", id: "/reviews" },
]}
button={{ text: "Shop Now", href: "/" }}
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 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>
</div>
</div>
</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: "Compare Models", href: "/comparison" },
],
},
{
title: "Support", items: [
{ label: "FAQ", href: "/#faq" },
{ label: "Setup Guide", href: "#" },
{ label: "Troubleshooting", href: "#" },
{ label: "Contact Us", href: "/#contact-cta" },
],
},
{
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: "Cookie Policy", href: "#" },
{ label: "Warranty", href: "#" },
],
},
]}
bottomLeftText="© 2025 AirPods. All rights reserved."
bottomRightText="Powered by Premium Audio Technology"
/>
</div>
</ThemeProvider>
);
}

138
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,138 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Mail, MapPin, Phone, MessageCircle } from "lucide-react";
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
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: "About", id: "/about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Shop Now", href: "/" }}
animateOnLoad={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get in Touch"
tagIcon={MessageCircle}
tagAnimation="slide-up"
title="We'd Love to Hear From You"
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."
background={{ variant: "animated-grid" }}
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 className="py-20">
<div className="mx-auto max-w-7xl px-4">
<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">
<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>
<div>
<h3 className="text-lg font-semibold">Email</h3>
<p className="mt-1 text-foreground/75">support@airpods.com</p>
<p className="text-sm text-foreground/60">We'll respond within 24 hours</p>
</div>
</div>
<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">
<Phone className="h-6 w-6 text-primary-cta" />
</div>
<div>
<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>
</div>
</div>
<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">
<MapPin className="h-6 w-6 text-primary-cta" />
</div>
<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">
<FooterSimple
columns={[
{
title: "Products", items: [
{ label: "AirPods Pro", href: "/" },
{ label: "AirPods Max", href: "/" },
{ label: "AirPods (2nd Gen)", href: "/" },
{ label: "Compare Models", href: "#" },
],
},
{
title: "Support", items: [
{ label: "FAQ", href: "/" },
{ label: "Setup Guide", href: "#" },
{ label: "Troubleshooting", href: "#" },
{ label: "Contact Us", href: "/contact" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "News", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Warranty", href: "#" },
],
},
]}
bottomLeftText="© 2025 AirPods. All rights reserved."
bottomRightText="Powered by Premium Audio Technology"
/>
</div>
</ThemeProvider>
);
}

157
src/app/features/page.tsx Normal file
View File

@@ -0,0 +1,157 @@
"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 ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Zap, Sparkles, Headphones } from "lucide-react";
export default function FeaturesPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
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" },
]}
button={{ text: "Shop Now", href: "/products" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="Discover Premium Audio Features"
description="Experience cutting-edge technology designed for the perfect listening experience. From active noise cancellation to spatial audio, every feature is crafted with precision."
background={{ variant: "noise" }}
kpis={[
{ value: "6", label: "Key Features" },
{ value: "Premium", label: "Audio Quality" },
{ value: "Advanced", label: "Technology" },
]}
enableKpiAnimation={true}
tag="Feature Showcase"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{ text: "Explore All Features", href: "#features" },
{ text: "Shop Now", href: "/products" },
]}
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"
imageAlt="Premium Audio Features Visualization"
mediaAnimation="blur-reveal"
imagePosition="right"
/>
</div>
<div id="features" data-section="features">
<FeatureCardMedia
title="Key Features That Matter"
description="Engineered excellence in every detail. Experience the features that make audio transcendent."
tag="Core Technology"
tagIcon={Sparkles}
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: "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: "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: "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"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Experience Premium Audio"
tagIcon={Headphones}
tagAnimation="slide-up"
title="Ready to Upgrade Your Listening?"
description="Discover how these advanced features can transform your audio experience. Shop our complete lineup and find the perfect model for your lifestyle."
buttons={[
{ text: "Shop Now", href: "/products" },
{ text: "View Specifications", href: "/products" },
]}
buttonAnimation="slide-up"
background={{ variant: "noise" }}
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: "Compare Models", href: "/products" },
],
},
{
title: "Support", items: [
{ label: "FAQ", href: "#faq" },
{ label: "Setup Guide", href: "#" },
{ label: "Troubleshooting", href: "#" },
{ label: "Contact Us", href: "/contact" },
],
},
{
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: "Cookie Policy", href: "#" },
{ label: "Warranty", href: "#" },
],
},
]}
bottomLeftText="© 2025 AirPods. All rights reserved."
bottomRightText="Powered by Premium Audio Technology"
/>
</div>
</ThemeProvider>
);
}

7
src/app/page.tsx
View File

@@ -35,6 +35,9 @@ export default function LandingPage() {
{ name: "Features", id: "features" },
{ name: "Why AirPods", id: "metrics" },
{ name: "Support", id: "faq" },
{ name: "About", id: "/about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Shop Now", href: "#products" }}
animateOnLoad={true}
@@ -234,12 +237,12 @@ export default function LandingPage() {
{ label: "FAQ", href: "#faq" },
{ 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: "Careers", href: "#" },
{ label: "News", href: "#" },

124
src/app/pricing/page.tsx Normal file
View File

@@ -0,0 +1,124 @@
"use client";
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";
export default function PricingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
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: "About", id: "/about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" },
]}
button={{ text: "Shop Now", href: "/" }}
animateOnLoad={true}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardTwo
title="Simple, Transparent Pricing"
description="Choose the perfect AirPods model for your needs and start enjoying premium audio today."
tag="Product Tiers"
tagIcon={ShoppingBag}
tagAnimation="slide-up"
plans={[
{
id: "airpods-standard", badge: "AirPods (2nd Generation)", badgeIcon: CheckCircle,
price: "$129", subtitle: "Perfect 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"],
},
{
id: "airpods-pro", badge: "AirPods Pro", badgeIcon: CheckCircle,
price: "$249", subtitle: "Advanced features for audio lovers", 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"],
},
{
id: "airpods-max", badge: "AirPods Max", badgeIcon: CheckCircle,
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"],
},
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Products", items: [
{ label: "AirPods Pro", href: "/" },
{ label: "AirPods Max", href: "/" },
{ label: "AirPods (2nd Gen)", href: "/" },
{ label: "Compare Models", href: "#" },
],
},
{
title: "Support", items: [
{ label: "FAQ", href: "/" },
{ label: "Setup Guide", href: "#" },
{ label: "Troubleshooting", href: "#" },
{ label: "Contact Us", href: "/contact" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "News", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Warranty", href: "#" },
],
},
]}
bottomLeftText="© 2025 AirPods. All rights reserved."
bottomRightText="Powered by Premium Audio Technology"
/>
</div>
</ThemeProvider>
);
}

171
src/app/products/page.tsx Normal file
View File

@@ -0,0 +1,171 @@
"use client";
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 ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Zap, ShoppingBag, Sparkles, Headphones } from "lucide-react";
export default function ProductsPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
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" },
]}
button={{ text: "Shop Now", href: "/products" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="Discover Our Complete Product Lineup"
description="Explore PodsX Pro and PodsX 4 - engineered for performance, designed for comfort. Choose the perfect audio experience for your lifestyle."
background={{ variant: "noise" }}
kpis={[
{ value: "2 Models", label: "Advanced Tech" },
{ value: "Premium", label: "Sound Quality" },
{ value: "Seamless", label: "Integration" },
]}
enableKpiAnimation={true}
tag="Our Product Collection"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{ text: "View Details", href: "#products" },
{ text: "Compare Models", href: "#specifications" },
]}
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"
mediaAnimation="blur-reveal"
imagePosition="right"
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
title="PodsX Pro & PodsX 4"
description="Handcrafted for audio excellence. Each model delivers premium sound with floating acoustic design and advanced noise control."
tag="Premium Lineup"
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", imageAlt: "PodsX Pro with advanced noise cancellation", 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", imageAlt: "PodsX 4 standard edition", initialQuantity: 1,
},
]}
gridVariant="two-columns-alternating-heights"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="specifications" data-section="specifications">
<FeatureCardMedia
title="Technical Specifications"
description="Detailed specs and features for each PodsX model to help you choose the right fit."
tag="Product Details"
tagIcon={Sparkles}
tagAnimation="slide-up"
features={[
{
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: "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: "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: "#" }],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Ready to Order?"
tagIcon={Headphones}
tagAnimation="slide-up"
title="Get Your PodsX 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."
buttons={[
{ text: "Shop Now", href: "/products" },
{ text: "Learn More", href: "/features" },
]}
buttonAnimation="slide-up"
background={{ variant: "noise" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Products", items: [
{ label: "PodsX Pro", href: "/products" },
{ label: "PodsX 4", href: "/products" },
{ label: "Compare Models", href: "/products" },
{ label: "Accessories", href: "#" },
],
},
{
title: "Support", items: [
{ label: "FAQ", href: "#faq" },
{ label: "Setup Guide", href: "#" },
{ label: "Troubleshooting", href: "#" },
{ label: "Contact Us", href: "/contact" },
],
},
{
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: "Cookie Policy", href: "#" },
{ label: "Warranty", href: "#" },
],
},
]}
bottomLeftText="© 2025 PodsX. All rights reserved."
bottomRightText="Powered by Premium Audio Technology"
/>
</div>
</ThemeProvider>
);
}

229
src/app/reviews/page.tsx Normal file
View File

@@ -0,0 +1,229 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { 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"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="noise"
cardStyle="inset"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="AirPods"
navItems={[
{ name: "Products", id: "/" },
{ name: "Features", id: "/" },
{ name: "Why AirPods", id: "/" },
{ name: "Support", id: "/" },
{ name: "Compare", id: "/comparison" },
{ name: "Reviews", id: "/reviews" },
]}
button={{ text: "Shop Now", href: "/" }}
animateOnLoad={true}
/>
</div>
<div id="reviews-header" data-section="reviews-header" 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">Customer Reviews</h1>
<p className="text-lg text-foreground/75 max-w-2xl mx-auto mb-8">
Read what thousands of satisfied customers have to say about their AirPods experience.
</p>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
{stats.map((stat, index) => (
<div key={index} className="p-6 rounded-2xl border border-accent/20 bg-card">
<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>
))}
</div>
</div>
</div>
</div>
<div id="testimonials" data-section="testimonials" className="w-full py-20">
<div className="w-full">
<TestimonialCardTen
testimonials={testimonials}
title="What Our Customers Are Saying"
description="Join thousands of happy customers who have transformed their audio experience."
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
</div>
<div id="rating-breakdown" data-section="rating-breakdown" className="w-full py-20">
<div className="w-content-width mx-auto px-5">
<h2 className="text-3xl font-bold mb-8 text-center">Rating Breakdown</h2>
<div className="max-w-2xl mx-auto space-y-4">
{[
{ 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">
<FooterSimple
columns={[
{
title: "Products", items: [
{ label: "AirPods Pro", href: "/#products" },
{ label: "AirPods Max", href: "/#products" },
{ label: "AirPods (2nd Gen)", href: "/#products" },
{ label: "Compare Models", href: "/comparison" },
],
},
{
title: "Support", items: [
{ label: "FAQ", href: "/#faq" },
{ label: "Setup Guide", href: "#" },
{ label: "Troubleshooting", href: "#" },
{ label: "Contact Us", href: "/#contact-cta" },
],
},
{
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: "Cookie Policy", href: "#" },
{ label: "Warranty", href: "#" },
],
},
]}
bottomLeftText="© 2025 AirPods. All rights reserved."
bottomRightText="Powered by Premium Audio Technology"
/>
</div>
</ThemeProvider>
);
}

10
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #efebe5;
--card: #f7f2ea;
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000000;
--primary-cta: #000000;
--primary-cta-text: #efebe5;
--secondary-cta: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta-text: #000000;
--accent: #ffffff;
--background-accent: #e1b875;
--accent: #e2e2e2;
--background-accent: #f0f0f0;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);