Add src/app/about/page.tsx
This commit is contained in:
220
src/app/about/page.tsx
Normal file
220
src/app/about/page.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Leaf, Droplets, Award, Zap } from 'lucide-react';
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="PantsByBasics"
|
||||
navItems={[
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Benefits", id: "benefits" },
|
||||
{ name: "Product", id: "#product" },
|
||||
{ name: "Testimonials", id: "#testimonials" }
|
||||
]}
|
||||
button={{
|
||||
text: "Shop Now", href: "/#product"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="About PantsByBasics"
|
||||
description="We believe exceptional clothing starts with honest materials, thoughtful design, and a commitment to quality. Every pair of linen lowers is crafted with care."
|
||||
tag="Our Story"
|
||||
kpis={[
|
||||
{ value: "2019", label: "Founded" },
|
||||
{ value: "100K+", label: "Happy Customers" },
|
||||
{ value: "4.9★", label: "Average Rating" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{ text: "Shop Collection", href: "/#product" },
|
||||
{ text: "Join Community", href: "/#contact" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-posing-with-cloth_23-2149080966.jpg"
|
||||
imageAlt="PantsByBasics brand founder with premium linen collection"
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="philosophy" data-section="philosophy">
|
||||
<SplitAbout
|
||||
title="Our Philosophy"
|
||||
description="At PantsByBasics, we believe that clothing should never force you to compromise. Great design is invisible—it works with your life, not against it."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Simplicity", description: "We strip away the unnecessary to focus on what truly matters—comfort, quality, and timeless design.", icon: Leaf
|
||||
},
|
||||
{
|
||||
title: "Honesty", description: "No greenwashing, no hidden markups. We're transparent about our materials, our process, and our pricing.", icon: Award
|
||||
},
|
||||
{
|
||||
title: "Sustainability", description: "Linen is nature's gift—biodegradable, durable, and grown with minimal water. Quality that lasts means less waste.", icon: Droplets
|
||||
}
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-hessian-fabric-material-texture_23-2148402327.jpg"
|
||||
imageAlt="Close-up of natural linen fabric texture showing quality weave"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-linen" data-section="why-linen">
|
||||
<FeatureCardTwentyFive
|
||||
title="Why We Chose Linen"
|
||||
description="Linen isn't a trend—it's a tradition. Trusted for centuries, this natural fiber delivers everything modern wardrobes need: breathability, durability, and effortless style."
|
||||
features={[
|
||||
{
|
||||
title: "Naturally Cool", description: "Linen's unique structure allows air to circulate freely, keeping you comfortable in any season.", icon: Droplets,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-hessian-fabric-material-texture_23-2148402327.jpg", imageAlt: "Natural linen fiber close-up" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-outdoors-still-life_23-2150756273.jpg", imageAlt: "Linen pants in natural light" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Built to Last", description: "Quality linen becomes softer and more beautiful with every wash. It's an investment in longevity.", icon: Award,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-knitting-ornaments-with-red-thread_114579-11671.jpg", imageAlt: "Quality linen material" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/mexican-culture-with-colorful-fabrics_23-2149672967.jpg", imageAlt: "Premium fabric colors" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Environmentally Responsible", description: "Linen requires less water, fewer pesticides, and is fully biodegradable—a gentle choice for the planet.", icon: Leaf,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756266.jpg", imageAlt: "Sustainable linen production" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-hessian-fabric-material-texture_23-2148402327.jpg", imageAlt: "Natural fiber texture" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="difference" data-section="difference">
|
||||
<SplitAbout
|
||||
title="What Sets Us Apart"
|
||||
description="In a market flooded with fast fashion and empty promises, PantsByBasics stands different. Here's why customers keep coming back."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Premium Blend", description: "Our cotton-linen blend is carefully sourced and tested. We balance natural softness with everyday durability.", icon: Zap
|
||||
},
|
||||
{
|
||||
title: "Thoughtful Fit", description: "Every cut, every seam, every detail is intentional. Designed for real bodies and real lives, not trends.", icon: Award
|
||||
},
|
||||
{
|
||||
title: "Fair Pricing", description: "No middlemen, no unnecessary markups. You pay for quality, not brand prestige or excessive overhead.", icon: Leaf
|
||||
},
|
||||
{
|
||||
title: "Lifetime Support", description: "Our care guides help your linen last longer. We're here to answer questions and support your wardrobe.", icon: Droplets
|
||||
}
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/happy-young-caucasian-woman-smiles-strongly-with-her-teeth-while-sitting-wide-plinth-sunny-room-brunette-girl-having-fun-home-alone-entertainment-lifestyle-concept_197531-32218.jpg"
|
||||
imageAlt="Happy customer wearing PantsByBasics linen pants"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="benefits" data-section="benefits">
|
||||
<MetricCardThree
|
||||
title="Our Commitment to Quality"
|
||||
description="Every number tells a story of our dedication to craftsmanship and customer satisfaction."
|
||||
metrics={[
|
||||
{ id: "1", icon: Award, title: "Durability", value: "5+ Years" },
|
||||
{ id: "2", icon: Leaf, title: "Sustainability", value: "100% Biodegradable" },
|
||||
{ id: "3", icon: Droplets, title: "Comfort", value: "Tested & Proven" },
|
||||
{ id: "4", icon: Zap, title: "Care", value: "Easy Maintenance" }
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Join Us"
|
||||
title="Stay Connected With Our Journey"
|
||||
description="Subscribe for behind-the-scenes updates, care tips, and first access to new collections. We share only what matters."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/stylish-young-caucasian-brunette-woman-with-red-lipstick-wears-black-dressy-suit-glasses-shoes-indoor-party_197531-32095.jpg"
|
||||
imageAlt="Community of PantsByBasics customers"
|
||||
mediaAnimation="opacity"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Subscribe"
|
||||
termsText="We respect your privacy. Unsubscribe at any time."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="PantsByBasics"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Linen Lowers", href: "/#product" },
|
||||
{ label: "Collections", href: "/#product" },
|
||||
{ label: "Care Guide", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Values", href: "/about" },
|
||||
{ label: "Sustainability", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Shipping & Returns", href: "#" },
|
||||
{ label: "Size Guide", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Email", href: "mailto:hello@pantsBybasics.com" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 PantsByBasics. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user