Add src/app/reviews/page.tsx
This commit is contained in:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user