Add src/app/features/page.tsx
This commit is contained in:
164
src/app/features/page.tsx
Normal file
164
src/app/features/page.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
"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, Battery, Headphones, Volume2, Radio, Wifi } 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: "Why AirPods", id: "/" },
|
||||
{ name: "Support", id: "/" },
|
||||
{ name: "Compare", id: "/comparison" },
|
||||
]}
|
||||
button={{ text: "Shop Now", href: "/#products" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="Discover AirPods Key Features"
|
||||
description="Explore the innovative technologies that make AirPods the world's most advanced wireless audio experience. From noise cancellation to seamless connectivity."
|
||||
background={{ variant: "noise" }}
|
||||
kpis={[
|
||||
{ value: "Active", label: "Noise Cancellation" },
|
||||
{ value: "Spatial", label: "3D Audio" },
|
||||
{ value: "Instant", label: "Device Switching" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tag="Innovation at Work"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Explore All Products", href: "/#products" },
|
||||
{ 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="Signature AirPods Technologies"
|
||||
description="Experience the cutting-edge features that define premium wireless audio."
|
||||
tag="Core Technologies"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "noise-cancellation", title: "Active Noise Cancellation (ANC)", description: "Industry-leading active noise cancellation uses outward and inward microphones to detect and cancel unwanted sound. Adapts to your environment in real time, blocking background noise while letting important sounds through.", 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: "battery-life", title: "Extended Battery Life", description: "Get up to 6 hours of listening time on a single charge with AirPods Pro, extending to 30 hours with the wireless charging case. Smart power management ensures you stay connected all day. Fast charging gives you 5 minutes of listening in just 5 minutes of charging.", tag: "All Day Power", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/battery-charge-indicator-visualization-sh-1772884352345-a1b2c3d4.png", imageAlt: "Battery life indicator", buttons: [{ text: "See Details", href: "#" }],
|
||||
},
|
||||
{
|
||||
id: "immersive-sound", title: "Immersive Sound Experience", description: "Premium audio drivers deliver crisp, clear highs and deep, controlled bass. Personalized spatial audio with dynamic head tracking creates a theater-like surround sound experience. Adaptive Audio intelligently blends your music with helpful ambient sounds.", tag: "Premium Audio", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png", imageAlt: "Immersive spatial audio visualization", buttons: [{ text: "Experience It", href: "#" }],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<AboutMetric
|
||||
title="Performance Metrics That Matter"
|
||||
metrics={[
|
||||
{ icon: Battery, label: "Maximum Battery", value: "30 Hours" },
|
||||
{ icon: Radio, label: "Bluetooth Range", value: "10+ Meters" },
|
||||
{ icon: Volume2, label: "Noise Reduction", value: "Up to 40dB" },
|
||||
{ icon: Wifi, label: "Seamless Pairing", value: "All Apple Devices" },
|
||||
]}
|
||||
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="Ready to Upgrade Your Audio?"
|
||||
description="Discover which AirPods model is perfect for your lifestyle. Compare features, read expert reviews, and find your ideal match."
|
||||
buttons={[
|
||||
{ text: "Shop Now", href: "/#products" },
|
||||
{ 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: "/#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