Merge version_3 into main
Merge version_3 into main
This commit was merged in pull request #3.
This commit is contained in:
114
src/app/about/page.tsx
Normal file
114
src/app/about/page.tsx
Normal 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
255
src/app/comparison/page.tsx
Normal 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
138
src/app/contact/page.tsx
Normal 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
157
src/app/features/page.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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
124
src/app/pricing/page.tsx
Normal 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
171
src/app/products/page.tsx
Normal 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
229
src/app/reviews/page.tsx
Normal 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,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);
|
||||
|
||||
Reference in New Issue
Block a user