Add src/app/features/page.tsx
This commit is contained in:
167
src/app/features/page.tsx
Normal file
167
src/app/features/page.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
"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 AboutMetric from "@/components/sections/about/AboutMetric";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Zap, Sparkles, Headphones, Battery, Volume2, Lightbulb, ShieldCheck, Radio } 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: "/" },
|
||||
{ name: "Features", id: "/features" },
|
||||
{ name: "Comparison", id: "/comparison" },
|
||||
{ name: "Why AirPods", id: "/" },
|
||||
{ name: "Support", id: "/" },
|
||||
]}
|
||||
button={{ text: "Shop Now", href: "/" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="Discover Premium Audio Features"
|
||||
description="Explore the cutting-edge technology that powers AirPods. From industry-leading noise cancellation to immersive spatial audio, experience features designed for the ultimate listening experience."
|
||||
background={{ variant: "noise" }}
|
||||
kpis={[
|
||||
{ value: "99%", label: "Noise Reduction" },
|
||||
{ value: "360°", label: "Spatial Audio" },
|
||||
{ value: "30H", label: "Battery Power" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tag="Features Showcase"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Shop AirPods", href: "/" },
|
||||
{ text: "Compare Models", href: "/comparison" },
|
||||
]}
|
||||
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="AirPods Pro premium features showcase"
|
||||
mediaAnimation="blur-reveal"
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
title="Key Features That Define Excellence"
|
||||
description="Advanced technology engineered to deliver the best audio experience, wherever life takes you."
|
||||
tag="Technology"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "noise-cancellation", title: "Active Noise Cancellation", description: "Up to 99% noise reduction with adaptive active noise cancellation that continuously monitors your environment. Automatically switches between noise cancellation, transparency, and off modes to match your activities in real-time. Experience immersive focus like never before, whether you're working, traveling, or relaxing.", tag: "Pro Technology", 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 visual demonstration", buttons: [{ text: "Learn More", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "battery-life", title: "Extended Battery Life", description: "Up to 6 hours of listening time on a single charge, extending to 30 hours with the charging case. Smart battery management intelligently optimizes power consumption based on your usage patterns. Fast charging gives you 1 hour of listening time with just 5 minutes of charging. Never miss a moment with industry-leading battery performance.", tag: "All Day Power", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-charging-case-battery-indicator-1772884352294-e666eff4.png", imageAlt: "Long battery life demonstration", buttons: [{ text: "View Specs", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "immersive-sound", title: "Immersive Spatial Audio", description: "Experience theater-quality sound with 360-degree spatial audio and dynamic head tracking. Precise directional audio creates an immersive soundstage that surrounds you. Perfect for movies, music, and gaming. Personalized audio tuning adapts to your unique ear shape for optimal listening experience tailored just for you.", 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 immersive demonstration", buttons: [{ text: "Experience Now", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "personalization", title: "Smart Personalization", description: "Adaptive audio adjusts playback based on your environment, movement, and preferences. Machine learning algorithms learn your listening habits and automatically optimize audio settings. Conversation Awareness instantly lowers volume when you speak, making interaction seamless. Automatic ear detection knows when you remove one AirPod and adjusts playback accordingly.", tag: "AI-Powered", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png", imageAlt: "Smart personalization features", buttons: [{ text: "Discover More", href: "#" }],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<AboutMetric
|
||||
title="Performance Metrics That Stand Out"
|
||||
metrics={[
|
||||
{ icon: Battery, label: "Maximum Battery Life", value: "30 Hours" },
|
||||
{ icon: Volume2, label: "Sound Quality Grade", value: "Premium" },
|
||||
{ icon: ShieldCheck, label: "Noise Isolation", value: "99%" },
|
||||
{ icon: Radio, label: "Connection Range", value: "33 Feet" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
tag="Experience the Difference"
|
||||
tagIcon={Headphones}
|
||||
tagAnimation="slide-up"
|
||||
title="Find Your Perfect AirPods Today"
|
||||
description="With multiple models to choose from, there's a perfect pair of AirPods for everyone. Shop our collection and experience premium audio with all these incredible features."
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "/" },
|
||||
{ text: "Compare Models", href: "/comparison" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "noise" }}
|
||||
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: "/comparison" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Features", href: "/features" },
|
||||
{ label: "Setup Guide", href: "#" },
|
||||
{ label: "Troubleshooting", href: "#" },
|
||||
{ label: "Contact Us", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
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