Merge version_2 into main #2
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>
|
||||
);
|
||||
}
|
||||
@@ -1,59 +1,38 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Source_Sans_3 } from "next/font/google";
|
||||
import localFont from "next/font/local";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
import "./styles/variables.css";
|
||||
import "./styles/base.css";
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const sourceSans3 = Source_Sans_3({
|
||||
variable: "--font-source-sans-3", subsets: ["latin"]
|
||||
});
|
||||
const geistSans = localFont({
|
||||
src: "./fonts/GeistVF.woff", variable: "--font-geist-sans", weight: "100 900"});
|
||||
const geistMono = localFont({
|
||||
src: "./fonts/GeistMonoVF.woff", variable: "--font-geist-mono", weight: "100 900"});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "PantsByBasics - Premium Linen Lowers for Everyday Comfort", description: "Premium linen lowers designed for breathable comfort and refined style. Discover effortless everyday elegance with PantsByBasics.", keywords: "linen pants, linen lowers, breathable trousers, comfortable everyday wear, minimalist fashion, natural fabric", metadataBase: new URL("https://pantsBybasics.com"),
|
||||
alternates: {
|
||||
canonical: "https://pantsBybasics.com"
|
||||
},
|
||||
openGraph: {
|
||||
title: "PantsByBasics - Comfort That Looks Good", description: "Premium linen lowers designed for everyday living — breathable, refined, and made to move with you.", url: "https://pantsBybasics.com", siteName: "PantsByBasics", type: "website", images: [
|
||||
{
|
||||
url: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-with-cloth_23-2149080966.jpg", alt: "Premium linen lowers lifestyle"
|
||||
}
|
||||
]
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "PantsByBasics - Premium Linen Lowers", description: "Comfort that looks good. Style that feels better.", images: ["http://img.b2bpic.net/free-photo/medium-shot-woman-posing-with-cloth_23-2149080966.jpg"]
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true
|
||||
}
|
||||
};
|
||||
title: "Create Next App", description: "Generated by create next app"};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${sourceSans3.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
||||
{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1421,7 +1400,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="PantsByBasics"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Benefits", id: "benefits" },
|
||||
{ name: "Product", id: "product" },
|
||||
{ name: "Testimonials", id: "testimonials" }
|
||||
@@ -81,10 +81,12 @@ export default function LandingPage() {
|
||||
description="Linen isn't just fabric. It's a feeling. Naturally breathable, lightweight, and durable, linen has been trusted for centuries to keep people comfortable in warm climates. Our cotton-linen blend enhances those qualities with added softness, structure, and everyday durability."
|
||||
features={[
|
||||
{
|
||||
id: "breathable", title: "Naturally Breathable", author: "PantsByBasics", description: "Linen's unique fiber structure allows superior airflow, keeping you cool throughout the day without compromising style.", tags: ["Comfort", "Natural"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-hessian-fabric-material-texture_23-2148402327.jpg", imageAlt: "close up linen fabric weave texture natural fiber"
|
||||
id: "breathable", title: "Naturally Breathable", author: "PantsByBasics", description: "Linen's unique fiber structure allows superior airflow, keeping you cool throughout the day without compromising style.", tags: ["Comfort", "Natural"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hessian-fabric-material-texture_23-2148402327.jpg", imageAlt: "close up linen fabric weave texture natural fiber"
|
||||
},
|
||||
{
|
||||
id: "durable", title: "Built to Last", author: "PantsByBasics", description: "Our cotton-linen blend is engineered for durability, maintaining softness and structure even after repeated washes and wear.", tags: ["Quality", "Craftsmanship"], imageSrc: "http://img.b2bpic.net/free-photo/woman-knitting-ornaments-with-red-thread_114579-11671.jpg", imageAlt: "quality linen fabric rolled stacked natural material"
|
||||
id: "durable", title: "Built to Last", author: "PantsByBasics", description: "Our cotton-linen blend is engineered for durability, maintaining softness and structure even after repeated washes and wear.", tags: ["Quality", "Craftsmanship"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-knitting-ornaments-with-red-thread_114579-11671.jpg", imageAlt: "quality linen fabric rolled stacked natural material"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
@@ -142,13 +144,16 @@ export default function LandingPage() {
|
||||
tag="Shop The Collection"
|
||||
products={[
|
||||
{
|
||||
id: "natural", brand: "PantsByBasics", name: "Natural Linen Lowers", price: "₹4,999", rating: 5, reviewCount: "2.3k", imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-outdoors-still-life_23-2150756273.jpg", imageAlt: "natural cream beige linen pants flat lay display"
|
||||
id: "natural", brand: "PantsByBasics", name: "Natural Linen Lowers", price: "₹4,999", rating: 5,
|
||||
reviewCount: "2.3k", imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-outdoors-still-life_23-2150756273.jpg", imageAlt: "natural cream beige linen pants flat lay display"
|
||||
},
|
||||
{
|
||||
id: "olive", brand: "PantsByBasics", name: "Olive Linen Lowers", price: "₹4,999", rating: 5, reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756266.jpg", imageAlt: "olive green linen pants flat lay premium display"
|
||||
id: "olive", brand: "PantsByBasics", name: "Olive Linen Lowers", price: "₹4,999", rating: 5,
|
||||
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-indoors-still-life_23-2150756266.jpg", imageAlt: "olive green linen pants flat lay premium display"
|
||||
},
|
||||
{
|
||||
id: "combo", brand: "PantsByBasics", name: "Comfort Duo Bundle", price: "₹8,499", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/mexican-culture-with-colorful-fabrics_23-2149672967.jpg", imageAlt: "linen pants bundle two colors natural olive display"
|
||||
id: "combo", brand: "PantsByBasics", name: "Comfort Duo Bundle", price: "₹8,499", rating: 5,
|
||||
reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/mexican-culture-with-colorful-fabrics_23-2149672967.jpg", imageAlt: "linen pants bundle two colors natural olive display"
|
||||
}
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
@@ -206,8 +211,8 @@ export default function LandingPage() {
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Our Values", href: "#about" },
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Our Values", href: "/about" },
|
||||
{ label: "Sustainability", href: "#" }
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user