Add src/app/about/page.tsx

This commit is contained in:
2026-03-07 12:00:10 +00:00
parent c8a6e0064c
commit a132a5a352

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

@@ -0,0 +1,200 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import AboutMetric from "@/components/sections/about/AboutMetric";
import TeamCardTen from "@/components/sections/team/TeamCardTen";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Zap, Users, Globe, Zap as Rocket, Heart, Target, Headphones, TrendingUp, Award } 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: "/" },
{ name: "Features", id: "/" },
{ name: "Why AirPods", id: "/" },
{ name: "Support", id: "/" },
{ name: "Reviews", id: "/reviews" },
{ name: "About", id: "/about" },
]}
button={{ text: "Shop Now", href: "/" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="About PodsX - Redefining Wireless Audio"
description="We're passionate about creating the future of audio. At PodsX, we combine cutting-edge technology with exceptional design to deliver premium wireless earbuds that seamlessly integrate into your life."
background={{ variant: "noise" }}
tag="Our Story"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{ text: "Join Our Community", href: "#" },
{ text: "Explore Products", href: "/" },
]}
buttonAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/modern-tech-company-office-with-innovati-1772884352920-b1c2d3e4.png"
imageAlt="PodsX innovation and design studio"
mediaAnimation="blur-reveal"
imagePosition="right"
/>
</div>
<div id="mission" data-section="mission">
<TextSplitAbout
title="Our Mission"
description={[
"At PodsX, our mission is to democratize premium audio technology. We believe everyone deserves access to exceptional sound quality, innovative features, and seamless connectivity.", "We're committed to pushing the boundaries of what's possible in wireless audio. Through relentless innovation, meticulous engineering, and a deep understanding of user needs, we create products that elevate everyday moments.", "Our vision extends beyond products. We're building a community of audio enthusiasts who appreciate quality, innovation, and the power of great sound to enhance life."]}
buttons={[
{ text: "Learn More", href: "#" },
{ text: "Join Community", href: "#" },
]}
buttonAnimation="slide-up"
showBorder={true}
useInvertedBackground={false}
/>
</div>
<div id="values" data-section="values">
<AboutMetric
title="Our Core Values Guiding Innovation"
metrics={[
{ icon: Zap, label: "Innovation First", value: "Cutting-Edge" },
{ icon: Heart, label: "User-Centric Design", value: "Premium" },
{ icon: Globe, label: "Global Reach", value: "Worldwide" },
{ icon: Award, label: "Quality Excellence", value: "Best-in-Class" },
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="team" data-section="team">
<TeamCardTen
title="Meet the Team Behind the Innovation - Passionate Creators Dedicated to Audio Excellence"
tag="Our Team"
tagAnimation="slide-up"
members={[
{
id: "1", name: "Alexander Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-of-tech-executive-1772884352456-c1d2e3f4.png", imageAlt: "Alexander Johnson, CEO"},
{
id: "2", name: "Maria Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-woman-tech-leader-1772884352567-d2e3f4g5.png", imageAlt: "Maria Rodriguez, Chief Product Officer"},
{
id: "3", name: "David Liu", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-asian-tech-engineer-1772884352678-e3f4g5h6.png", imageAlt: "David Liu, Chief Technology Officer"},
{
id: "4", name: "Sophie Martin", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/professional-headshot-european-designer-1772884352789-f4g5h6i7.png", imageAlt: "Sophie Martin, Head of Design"},
]}
memberVariant="default"
membersAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="why-podsx" data-section="why-podsx">
<FeatureBento
title="Why Choose PodsX"
description="Discover what sets us apart in the competitive audio market."
tag="Our Advantage"
tagIcon={Rocket}
tagAnimation="slide-up"
features={[
{
id: "1", title: "Innovation at Heart", description: "We invest heavily in R&D to bring you the latest audio technology and features.", bentoComponent: "reveal-icon", icon: Zap,
},
{
id: "2", title: "Global Impact", description: "Trusted by millions of users worldwide, delivering premium audio experiences.", bentoComponent: "globe"},
{
id: "3", title: "Sustainable Practices", description: "We're committed to eco-friendly manufacturing and packaging.", bentoComponent: "reveal-icon", icon: Globe,
},
{
id: "4", title: "Customer First", description: "Exceptional support and warranty programs backed by our commitment to satisfaction.", bentoComponent: "reveal-icon", icon: Heart,
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Let's Connect"
tagIcon={Headphones}
tagAnimation="slide-up"
title="Experience the PodsX Difference"
description="Join our community of audio enthusiasts and discover why PodsX is the choice for premium wireless audio. Shop now or get in touch with our team."
buttons={[
{ text: "Shop Now", 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 Innovation"
/>
</div>
</ThemeProvider>
);
}