Update src/app/products/page.tsx
This commit is contained in:
@@ -3,11 +3,15 @@
|
||||
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 ProductCardThree from "@/components/sections/product/ProductCardThree";
|
||||
import AboutMetric from "@/components/sections/about/AboutMetric";
|
||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Zap, ShoppingBag, Sparkles, Headphones } from "lucide-react";
|
||||
import { Zap, Sparkles, ShoppingBag, Battery, Globe, Volume2, Award, Headphones, HelpCircle } from "lucide-react";
|
||||
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
@@ -27,101 +31,207 @@ export default function ProductsPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="AirPods"
|
||||
navItems={[
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "Features", id: "/features" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Why AirPods", id: "metrics" },
|
||||
{ name: "Support", id: "faq" },
|
||||
{ name: "Reviews", id: "/reviews" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{ text: "Shop Now", href: "/products" }}
|
||||
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: "glowing-orb" }}
|
||||
title="Experience Sound Like Never Before"
|
||||
description="Premium wireless audio with active noise cancellation, spatial audio, and seamless Apple ecosystem integration. Discover the perfect fit for every moment."
|
||||
background={{ variant: "plain" }}
|
||||
kpis={[
|
||||
{ value: "2 Models", label: "Advanced Tech" },
|
||||
{ value: "Premium", label: "Sound Quality" },
|
||||
{ value: "Seamless", label: "Integration" },
|
||||
{ value: "6-30 Hours", label: "Battery Life" },
|
||||
{ value: "Adaptive", label: "Noise Control" },
|
||||
{ value: "Instant", label: "Setup" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tag="Our Product Collection"
|
||||
tag="The Next Generation of Audio"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "View Details", href: "#products" },
|
||||
{ text: "Compare Models", href: "#specifications" },
|
||||
{ text: "Shop AirPods", href: "#products" },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
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"
|
||||
imageAlt="AirPods Pro with premium charging case"
|
||||
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}
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
title="Engineered to Perfection"
|
||||
description="Discover the key features that make AirPods the world's most popular wireless audio experience."
|
||||
tag="Core Features"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
features={[
|
||||
{
|
||||
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: "noise-cancellation", title: "Active Noise Cancellation", description: "Experience breakthrough active noise cancellation that adapts to your environment in real time. Enjoy immersive listening wherever you go.", tag: "AirPods Pro", 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: "Explore Feature", href: "#" }],
|
||||
},
|
||||
{
|
||||
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,
|
||||
id: "spatial-audio", title: "Spatial Audio & Personalized Volume", description: "Feel like you're in the middle of the action with dynamic head tracking and room-aware audio. Theater-like experience in your everyday moments.", 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: "ecosystem", title: "Seamless Apple Ecosystem", description: "Instantly connect across all your Apple devices. One tap setup with automatic switching between iPhone, Mac, iPad, and Apple Watch.", tag: "Connected", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png", imageAlt: "Apple ecosystem integration", buttons: [{ text: "See Integration", href: "#" }],
|
||||
},
|
||||
]}
|
||||
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}
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
title="Find Your Perfect Fit"
|
||||
description="Choose from our premium lineup designed for every lifestyle and listening preference."
|
||||
tag="Shop Collection"
|
||||
tagIcon={ShoppingBag}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
products={[
|
||||
{
|
||||
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: "airpods-pro", name: "AirPods Pro", price: "$249", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png", imageAlt: "AirPods Pro with active noise cancellation", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
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: "airpods-max", name: "AirPods Max", price: "$549", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-max-over-ear-headphones-displaye-1772884352294-e666eff4.png", imageAlt: "AirPods Max over-ear headphones", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
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: "#" }],
|
||||
id: "airpods-standard", name: "AirPods (2nd Gen)", price: "$129", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png", imageAlt: "AirPods 2nd generation standard model", initialQuantity: 1,
|
||||
},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<AboutMetric
|
||||
title="Trusted by Millions Worldwide - The Leading Choice in Wireless Audio Since Day One"
|
||||
metrics={[
|
||||
{ icon: Battery, label: "Extended Battery Life", value: "30+ Hours" },
|
||||
{ icon: Globe, label: "Customers Globally", value: "Millions" },
|
||||
{ icon: Volume2, label: "Audio Quality Rating", value: "Premium" },
|
||||
{ icon: Zap, label: "Quick Setup Time", value: "Instant" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Trusted by Audio Leaders"
|
||||
description="Integrated with the world's most respected audio and technology platforms."
|
||||
tag="Industry Partners"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
names={[
|
||||
"Apple Music", "Spotify", "Apple", "Beats", "Shure", "Sennheiser", "Bose"
|
||||
]}
|
||||
logos={[
|
||||
"http://img.b2bpic.net/free-photo/top-view-apples-around-frame-white-background-with-copy-space_141793-11956.jpg", "http://img.b2bpic.net/free-vector/flat-design-minimal-music-festival-youtube-channel-art_23-2149155264.jpg", "http://img.b2bpic.net/free-vector/set-retro-music-stickers_23-2147592207.jpg", "http://img.b2bpic.net/free-vector/music-festival-logo-collection-with-flat-design_23-2147825729.jpg", "http://img.b2bpic.net/free-vector/gradient-colored-dj-logo-set_23-2148874408.jpg", "http://img.b2bpic.net/free-vector/flat-design-dj-logo-collection_23-2148872847.jpg", "http://img.b2bpic.net/free-vector/neumorph-business-card_52683-59098.jpg"
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="AirPods have completely transformed how I listen to music and take calls. The seamless integration with my Apple devices is unmatched. I can't imagine my daily routine without them. The sound quality and comfort are exceptional."
|
||||
rating={5}
|
||||
author="Sarah Chen, Audio Engineer"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-of-a-satisfied-use-1772884351817-6dec7f08.png", alt: "Sarah Chen"
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/happy-lifestyle-photo-of-person-wearing--1772884353901-6ee88695.png", alt: "Customer 2"
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-businessperson-using-airpod-1772884353609-0ef52970.png", alt: "Customer 3"
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/creative-professional-or-content-creator-1772884352345-f1e1d55c.png", alt: "Customer 4"
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/active-lifestyle-user-athlete-or-fitness-1772884351718-1b549457.png", alt: "Customer 5"
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/diverse-user-in-relaxed-comfortable-sett-1772884352272-d4dc5302.png", alt: "Customer 6"
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about AirPods, compatibility, and setup."
|
||||
tag="Support"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How do I set up my AirPods?", content: "Simply bring your AirPods near your iPhone, iPad, Mac, or Apple Watch. A setup screen will appear automatically. Tap 'Connect' and follow the on-screen instructions. Your AirPods will automatically connect to all your Apple devices through your iCloud account."
|
||||
},
|
||||
{
|
||||
id: "2", title: "What's the battery life?", content: "AirPods Pro offer up to 6 hours of listening time or 30 hours with the charging case. AirPods (2nd generation) provide up to 5 hours of listening time or 24 hours with the case. Battery life varies based on listening volume and active features used."
|
||||
},
|
||||
{
|
||||
id: "3", title: "Are AirPods water resistant?", content: "AirPods Pro are water and sweat resistant (IPX4). They can withstand splashes, rain, and sweat during workouts. However, they're not designed for swimming or submersion in water. AirPods (2nd generation) are not water resistant."
|
||||
},
|
||||
{
|
||||
id: "4", title: "Can I use AirPods with Android?", content: "Yes, AirPods can connect to Android devices via Bluetooth. However, you won't have access to some features like easy setup, automatic switching between devices, or Siri integration. For the best experience, we recommend using AirPods with Apple devices."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Do AirPods work with Windows?", content: "Yes, AirPods can pair with Windows PCs and laptops via Bluetooth. Simply put your AirPods in pairing mode and connect them through your Windows Bluetooth settings. Some exclusive Apple features won't be available on Windows."
|
||||
},
|
||||
{
|
||||
id: "6", title: "What if I lose one AirPod?", content: "You can purchase replacement AirPods individually from Apple's website or authorized retailers. Visit apple.com and select your AirPods model to order a replacement earbud or charging case."
|
||||
},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
tag="Ready to Order?"
|
||||
tag="Ready to Upgrade?"
|
||||
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."
|
||||
title="Start Your Audio Journey Today"
|
||||
description="Discover the perfect AirPods for your lifestyle. Experience premium sound, seamless connectivity, and the ecosystem that just works."
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "/products" },
|
||||
{ text: "Learn More", href: "/features" },
|
||||
{ text: "Shop Now", href: "#products" },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -131,10 +241,10 @@ export default function ProductsPage() {
|
||||
columns={[
|
||||
{
|
||||
title: "Products", items: [
|
||||
{ label: "PodsX Pro", href: "/products" },
|
||||
{ label: "PodsX 4", href: "/products" },
|
||||
{ label: "Compare Models", href: "/products" },
|
||||
{ label: "Accessories", href: "#" },
|
||||
{ label: "AirPods Pro", href: "#products" },
|
||||
{ label: "AirPods Max", href: "#products" },
|
||||
{ label: "AirPods (2nd Gen)", href: "#products" },
|
||||
{ label: "Compare Models", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -147,8 +257,8 @@ export default function ProductsPage() {
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Reviews", href: "/reviews" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "News", href: "#" },
|
||||
],
|
||||
@@ -162,7 +272,7 @@ export default function ProductsPage() {
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 PodsX. All rights reserved."
|
||||
bottomLeftText="© 2025 AirPods. All rights reserved."
|
||||
bottomRightText="Powered by Premium Audio Technology"
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user