Update src/app/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -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?_wi=2"
+          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?_wi=2"
+          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?_wi=3", imageAlt: "Natural linen fiber close-up" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/light-brown-beige-pants-outdoors-still-life_23-2150756273.jpg?_wi=2", 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?_wi=2", imageAlt: "Quality linen material" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/mexican-culture-with-colorful-fabrics_23-2149672967.jpg?_wi=2", 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?_wi=2", imageAlt: "Sustainable linen production" },
+                { imageSrc: "http://img.b2bpic.net/free-photo/close-up-hessian-fabric-material-texture_23-2148402327.jpg?_wi=4", 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?_wi=2"
+          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?_wi=2"
+          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>
+  );
+}

src/app/layout.tsx

@@ -1,59 +1,41 @@
 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 geistSans = localFont({
+  src: "./fonts/GeistVF.woff",  variable: "--font-geist-sans",  weight: "100 900"
 });
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const sourceSans3 = Source_Sans_3({
-  variable: "--font-source-sans-3",  subsets: ["latin"]
+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 +1403,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -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" }
@@ -58,7 +58,7 @@ export default function LandingPage() {
           ]}
           mediaAnimation="slide-up"
           background={{ variant: "plain" }}
-          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-posing-with-cloth_23-2149080966.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-posing-with-cloth_23-2149080966.jpg?_wi=1"
           imageAlt="person wearing comfortable linen pants standing relaxed"
           imagePosition="right"
         />
@@ -68,7 +68,7 @@ export default function LandingPage() {
         <TextSplitAbout
           title="Everyday Comfort, Done Properly"
           description={[
-            "Most clothing forces you to choose: comfort or style, ease or structure, relaxed or refined. At PantsByBasics, we believe the best clothing should offer both — effortlessly.",            "Our linen lowers are designed to deliver breathable comfort while maintaining a clean, polished look that works anywhere your day takes you.",            "From slow mornings to busy evenings, these are the pants you'll keep reaching for."
+            "Most clothing forces you to choose: comfort or style, ease or structure, relaxed or refined. At PantsByBasics, we believe the best clothing should offer both — effortlessly.",            "Our linen lowers are designed to deliver breathable comfort while maintaining a clean, polished look that works anywhere your day takes you.",            "From slow mornings to busy evenings, these are the pants you'll keep reaching for.",            "True to size with an adjustable elastic waistband and drawstring for your perfect fit."
           ]}
           useInvertedBackground={false}
           showBorder={false}
@@ -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?_wi=1",              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?_wi=1",              imageAlt: "quality linen fabric rolled stacked natural material"
             }
           ]}
           textboxLayout="default"
@@ -123,7 +125,7 @@ export default function LandingPage() {
               id: "1",              title: "Comfort When You Need It",              quote: "These pants feel like wearing nothing at all. I can work from home all day and still feel put-together.",              name: "Maya Chen",              role: "Creative Director",              imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-asian-female-working-home-hand-use-laptop-checking-search-schedule-working-process-planning-report-with-leisure-relax-sofa-living-room-with-morning-light-peaceful-moment_609648-2810.jpg",              imageAlt: "woman working from home comfortable linen pants lifestyle"
             },
             {
-              id: "2",              title: "Style Without Effort",              quote: "They're refined enough for dinner out, but comfortable enough I forget I'm wearing pants. That's the dream.",              name: "Jordan Riley",              role: "Business Owner",              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: "stylish person dinner restaurant linen outfit elegant"
+              id: "2",              title: "Style Without Effort",              quote: "They're refined enough for dinner out, but comfortable enough I forget I'm wearing pants. That's the dream.",              name: "Jordan Riley",              role: "Business Owner",              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?_wi=1",              imageAlt: "stylish person dinner restaurant linen outfit elegant"
             },
             {
               id: "3",              title: "Travel-Ready Comfort",              quote: "Perfect for city trips. Minimal wrinkles, maximum comfort, and they pair with everything in my carry-on.",              name: "Priya Sharma",              role: "Content Strategist",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-plaid-blanket-beach_23-2150561495.jpg",              imageAlt: "traveler airport linen pants comfortable minimal luggage"
@@ -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?_wi=1",              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?_wi=1",              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?_wi=1",              imageAlt: "linen pants bundle two colors natural olive display"
             }
           ]}
           gridVariant="uniform-all-items-equal"
@@ -183,7 +188,7 @@ export default function LandingPage() {
           description="Linen lowers designed for everyday wear, everyday comfort, and everyday confidence. Subscribe for new drops, care tips, and exclusive early access."
           background={{ variant: "plain" }}
           useInvertedBackground={false}
-          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"
+          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?_wi=1"
           imageAlt="person relaxed comfortable confident everyday style portrait"
           mediaAnimation="opacity"
           mediaPosition="right"
@@ -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: "#" }
               ]
             },
@@ -231,4 +236,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}