Add src/app/about/page.tsx

This commit is contained in:
2026-03-07 11:55:38 +00:00
parent bb04de33e5
commit 3f5f98eb3e

175
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,175 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import TextAbout from "@/components/sections/about/TextAbout";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Zap, Sparkles, Award, Headphones, Users, Globe, Lightbulb, Heart } 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: "Reviews", id: "/reviews" },
{ name: "About", id: "/about" },
]}
button={{ text: "Shop Now", href: "/" }}
animateOnLoad={true}
/>
</div>
<div id="about-intro" data-section="about-intro">
<TextAbout
tag="About PodsX"
title="Revolutionizing Audio Technology for Everyone"
useInvertedBackground={false}
buttons={[
{ text: "Explore Products", href: "/" },
{ text: "Our Values", href: "#values" },
]}
buttonAnimation="slide-up"
/>
</div>
<div id="story" data-section="story">
<FeatureCardOne
title="Our Story"
description="From vision to reality: How PodsX became the leader in wireless audio innovation."
tag="Our Journey"
tagIcon={Sparkles}
tagAnimation="slide-up"
features={[
{
id: "founded", title: "Founded on Innovation", description: "PodsX was founded with a simple mission: to create the world's most intuitive and powerful wireless audio experience. We believed that great audio should be accessible to everyone.", 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 founding team", button: { text: "Learn More", href: "#" },
},
{
id: "breakthrough", title: "Breakthrough Technology", description: "We pioneered active noise cancellation technology that adapts to your environment. Our R&D team spent years perfecting the science of sound engineering.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png", imageAlt: "Technology innovation", button: { text: "Technology", href: "#" },
},
{
id: "global-impact", title: "Global Impact", description: "Today, millions of people around the world rely on PodsX for their daily audio needs. We've expanded into every continent, serving diverse communities and lifestyles.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png", imageAlt: "Global reach", button: { text: "Impact Report", href: "#" },
},
]}
textboxLayout="default"
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
/>
</div>
<div id="values" data-section="values">
<AboutMetric
title="Our Core Values"
metrics={[
{ icon: Lightbulb, label: "Innovation", value: "Pushing Boundaries" },
{ icon: Users, label: "Community", value: "People First" },
{ icon: Heart, label: "Passion", value: "Quality Obsessed" },
{ icon: Globe, label: "Sustainability", value: "Environmental Care" },
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="mission" data-section="mission">
<FeatureCardOne
title="Our Mission & Vision"
description="What drives us forward every single day."
tag="Mission Statement"
tagIcon={Award}
tagAnimation="slide-up"
features={[
{
id: "mission", title: "Our Mission", description: "To create premium audio experiences that enhance human connection, productivity, and joy. We believe exceptional sound should be effortless, intuitive, and available to everyone, regardless of their technical expertise.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png", imageAlt: "Mission vision", button: { text: "Read Full Mission", href: "#" },
},
{
id: "vision", title: "Our Vision", description: "A future where technology disappears into the background and pure audio excellence is the standard. We envision a world where every person has access to world-class audio that adapts to their life, not the other way around.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png", imageAlt: "Future vision", button: { text: "Explore Vision", href: "#" },
},
]}
textboxLayout="default"
animationType="slide-up"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Join Our Team"
tagIcon={Users}
tagAnimation="slide-up"
title="Help Us Shape the Future of Audio"
description="We're always looking for talented individuals who are passionate about audio technology and innovation. If you share our vision, we'd love to hear from you."
buttons={[
{ text: "View Careers", href: "#" },
{ text: "Contact Us", href: "#" },
]}
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: "#" },
],
},
{
title: "Support", items: [
{ label: "FAQ", href: "/" },
{ label: "Setup Guide", href: "#" },
{ label: "Troubleshooting", href: "#" },
{ label: "Contact Us", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "/about" },
{ label: "Reviews", href: "/reviews" },
{ 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>
);
}