Update src/app/services/page.tsx

Merge version_1 into main

src/app/about/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="mediumLarge"
+        background="noise"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "About", id: "/about" },
+                { name: "Services", id: "/services" },
+                { name: "Contact", id: "/contact" },
+              ]}
+              brandName="CottonAura"
+              button={{ text: "Contact" }}
+            />
+        </div>
+
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
+            title="Our Story"
+            description="CottonAura was founded on a simple premise: performance doesn't have to compromise style. We are dedicated to creating gear that feels like a second skin while pushing the boundaries of athletic innovation."
+            metrics={[
+              { value: "50+", title: "Countries Reached" },
+              { value: "1M+", title: "Athletes Empowered" }
+            ]}
+            useInvertedBackground={false}
+            mediaAnimation="slide-up"
+            imageSrc="http://img.b2bpic.net/free-photo/blue-abstract-texture-background_1373-172.jpg"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="CottonAura"
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/about" }] }
+            ]}
+            copyrightText="© 2025 CottonAura."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,15 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import SplitAbout from '@/components/sections/about/SplitAbout';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import { Facebook, Instagram, Twitter } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -28,7 +26,7 @@ export default function LandingPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-            <NavbarStyleFullscreen
+            <NavbarLayoutFloatingInline
             navItems={[
               { name: "Home", id: "hero" },
               { name: "About", id: "about" },
@@ -36,118 +34,93 @@ export default function LandingPage() {
               { name: "Contact", id: "contact" },
             ]}
             brandName="CottonAura"
+            button={{ text: "Contact" }}
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroBillboardScroll
+          <HeroCarouselLogo
-            background={{ variant: "sparkles-gradient" }}
+            logoText="CottonAura"
-            title="Elevate Your Game with CottonAura"
+            description="Premium sportswear designed for high performance, comfort, and style."
-            description="Premium sportswear designed for high performance, comfort, and style. Join the movement today."
+            buttons={[{ text: "Shop Now", href: "#products" }]}
-            buttons={[
+            slides={[
-              { text: "Shop Now", href: "#products" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/front-view-boxer-trainer-posing-gym_23-2148426233.jpg", imageAlt: "Gym performance" },
-              { text: "Subscribe", href: "#contact" },
             ]}
-            imageSrc="http://img.b2bpic.net/free-photo/front-view-boxer-trainer-posing-gym_23-2148426233.jpg"
-            imageAlt="Modern high-end sportswear store display with neon blue accents"
           />
         </div>
 
         <div id="about" data-section="about">
-          <SplitAbout
+          <MetricSplitMediaAbout
-            textboxLayout="split"
-            useInvertedBackground={false}
             title="Built for the Driven"
-            description="At CottonAura, we believe that high-quality apparel should empower your movement. We blend innovative fabric technology with minimalist design to bring you gear that performs as hard as you do."
+            description="At CottonAura, we blend innovative fabric technology with minimalist design to bring you gear that performs as hard as you do."
-            bulletPoints={[
+            metrics={[
-              { title: "Precision Engineering", description: "Fabrics that adapt to your body and intensity." },
+                { value: "10k+", title: "Active Users" },
-              { title: "Minimalist Aesthetic", description: "Timeless designs that look as good on the street as in the gym." },
+                { value: "50+", title: "Countries" }
-              { title: "Athlete-Tested", description: "Rigorous testing to ensure durability and comfort." },
             ]}
+            useInvertedBackground={false}
+            mediaAnimation="slide-up"
             imageSrc="http://img.b2bpic.net/free-photo/blue-abstract-texture-background_1373-172.jpg"
-            imageAlt="High-quality breathable sportswear fabric texture close up"
           />
         </div>
 
         <div id="features" data-section="features">
-          <FeatureCardTwentyFour
+          <FeatureCardSixteen
+            negativeCard={{ items: ["High cost", "Heavy fabrics"] }}
+            positiveCard={{ items: ["Low cost", "Lightweight tech"] }}
             animationType="slide-up"
             textboxLayout="default"
             useInvertedBackground={false}
-            features={[
+            title="Performance Focused"
-              { id: "feat1", title: "Lightweight Performance", author: "Pro Athlete Choice", description: "Engineered for maximum speed and minimal restriction.", tags: ["Performance", "Lightweight"], imageSrc: "http://img.b2bpic.net/free-photo/black-leather-sports-shoe-with-elegant-shoelace-generated-by-ai_188544-19647.jpg" },
-              { id: "feat2", title: "Advanced Wicking", author: "Tech Team", description: "Stay dry and cool with our moisture-wicking technology.", tags: ["Wicking", "Dry"], imageSrc: "http://img.b2bpic.net/free-photo/man-athletic-wear-outdoors_23-2148773855.jpg" },
-              { id: "feat3", title: "Durable Accessories", author: "Quality Assurance", description: "Rugged gear built to withstand your daily grind.", tags: ["Durable", "Accessories"], imageSrc: "http://img.b2bpic.net/free-photo/still-life-composition-sport-elements_23-2149006303.jpg" },
-            ]}
-            title="Performance Focused Features"
             description="Everything we design is geared towards your personal best."
           />
         </div>
 
         <div id="products" data-section="products">
-          <ProductCardOne
+            <TestimonialCardTwo
-            textboxLayout="default"
+              animationType="slide-up"
-            gridVariant="three-columns-all-equal-width"
+              textboxLayout="split"
-            animationType="slide-up"
+              useInvertedBackground={false}
-            useInvertedBackground={false}
+              title="Featured Products"
-            products={[
+              description="Our best selling items."
-              { id: "p1", name: "Elite Performance Hoodie", price: "$85.00", imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-younsgter-dressed-hoody-leggings-looks-pensively-aside_273609-18391.jpg" },
+              testimonials={[]}
-              { id: "p2", name: "Technical Compression Leggings", price: "$65.00", imageSrc: "http://img.b2bpic.net/free-photo/young-male-performer-dancing-escalators_23-2149344075.jpg" },
+            />
-              { id: "p3", name: "Performance Running Cap", price: "$25.00", imageSrc: "http://img.b2bpic.net/free-photo/view-composition-with-neatly-arranged-organized-sport-items_23-2150275217.jpg" },
-              { id: "p4", name: "Seamless Training Shorts", price: "$45.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-resting-sportswear_140725-16439.jpg" },
-              { id: "p5", name: "Ergo Grip Water Bottle", price: "$15.00", imageSrc: "http://img.b2bpic.net/free-photo/athletic-woman-using-her-mobile-phone-relaxing-after-work-out-outdoors-sport-healthy-lifestyle_58466-14699.jpg" },
-              { id: "p6", name: "Athletic Comfort Socks", price: "$12.00", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-woman-fitness-clothes_23-2148197739.jpg" },
-            ]}
-            title="Featured Collection"
-            description="Explore our latest arrivals designed for excellence."
-          />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-          <TestimonialCardOne
+          <TestimonialCardTwo
-            animationType="depth-3d"
+            animationType="slide-up"
             textboxLayout="default"
-            gridVariant="uniform-all-items-equal"
             useInvertedBackground={false}
-            testimonials={[
-              { id: "1", name: "Sarah J.", role: "Marathon Runner", company: "Global Runner", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-muscular-young-man-race-track_23-2148162181.jpg" },
-              { id: "2", name: "Mike Chen", role: "Crossfit Athlete", company: "IronBox", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/urban-sports-concept-with-young-woman_23-2147988229.jpg" },
-              { id: "3", name: "Ali Amaan", role: "Pro Soccer", company: "City Stars", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/toned-young-beautiful-dark-haired-woman-athlete-wearing-sportswear-standing-holding-blue-fitness-mat_176532-9758.jpg" },
-              { id: "4", name: "Emily R.", role: "Yoga Instructor", company: "Zen Flow", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-powerful-sportsman-white-clothing-black-wall_176420-542.jpg" },
-              { id: "5", name: "David K.", role: "Weightlifter", company: "Strength Pro", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-young-woman-with-tattoo-practicing-morning-yoga-home-sitting-floor-bedroom-doing-ardha-matsyendrasana_343059-940.jpg" },
-            ]}
             title="Loved by Athletes"
             description="See why top competitors choose CottonAura."
+            testimonials={[
+              { id: "1", name: "Sarah J.", role: "Marathon Runner", testimonial: "Best gear I've ever used." },
+            ]}
           />
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactSplitForm
+          <ContactSplit
-            useInvertedBackground={false}
+            tag="Join Us"
             title="Get In Touch"
-            description="Have questions about our collection or store? We're here to help."
+            description="Have questions about our collection? We're here to help."
-            inputs={[
+            useInvertedBackground={false}
-              { name: "name", type: "text", placeholder: "Your Name", required: true },
+            background={{ variant: "plain" }}
-              { name: "email", type: "email", placeholder: "Your Email", required: true },
+            mediaAnimation="slide-up"
-            ]}
-            textarea={{ name: "message", placeholder: "Your Message", rows: 4, required: true }}
-            imageSrc="http://img.b2bpic.net/free-photo/fashionable-woman-look-with-black-white-striped-suit-jacket-leather-pants-posing-street-against-large-windows-building-concept-fashion-girl_627829-11650.jpg"
-            buttonText="Send Message"
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterCard
+          <FooterBaseReveal
             logoText="CottonAura"
-            copyrightText="© 2025 CottonAura. All rights reserved."
+            columns={[
-            socialLinks={[
+              { title: "Shop", items: [{ label: "New Arrivals", href: "#" }] },
-              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+              { title: "Company", items: [{ label: "About Us", href: "#" }] }
-              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-              { icon: Facebook, href: "#", ariaLabel: "Facebook" },
             ]}
+            copyrightText="© 2025 CottonAura."
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="mediumLarge"
+        background="noise"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "About", id: "/about" },
+                { name: "Services", id: "/services" },
+                { name: "Contact", id: "/contact" },
+              ]}
+              brandName="CottonAura"
+              button={{ text: "Contact" }}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="CottonAura"
+            columns={[
+              { title: "Services", items: [{ label: "Consulting", href: "/services" }] }
+            ]}
+            copyrightText="© 2025 CottonAura."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }

src/app/styles/variables.css

@@ -13,7 +13,7 @@
   --background: #0a0a0a;
   --card: #1a1a1a;
   --foreground: #ffffff;
-  --primary-cta: #106efb;
+  --primary-cta: #cee7ff;
   --primary-cta-text: #ffffff;
   --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;