src/app/about/page.tsx

@@ -2,10 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import FooterCard from '@/components/sections/footer/FooterCard';
-import { Facebook, Instagram, Twitter } from "lucide-react";
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function AboutPage() {
   return (
@@ -22,34 +21,42 @@ export default function AboutPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-            navItems={[
-              { name: "Home", id: "/" },
-              { name: "About", id: "/about" },
-              { name: "Services", id: "/services" },
-              { name: "Contact", id: "/contact" },
+        <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" }
             ]}
-            brandName="CottonAura"
-        />
-        <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" },
-            { value: "100%", title: "Sustainability Focus" }
-          ]}
-          imageSrc="http://img.b2bpic.net/free-photo/blue-abstract-texture-background_1373-172.jpg"
-        />
-        <FooterCard
+            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"
-            copyrightText="© 2025 CottonAura. All rights reserved."
-            socialLinks={[
-              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
-              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-              { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/about" }] }
             ]}
-        />
+            copyrightText="© 2025 CottonAura."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/page.tsx

@@ -7,10 +7,8 @@ import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardFour from '@/components/sections/ecommerce/productCatalog/ProductCatalogItem';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import { Facebook, Instagram, Twitter } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -36,6 +34,7 @@ export default function LandingPage() {
               { name: "Contact", id: "contact" },
             ]}
             brandName="CottonAura"
+            button={{ text: "Contact" }}
           />
         </div>
 
@@ -77,7 +76,14 @@ export default function LandingPage() {
         </div>
 
         <div id="products" data-section="products">
-             {/* Placeholder for Product section refactor using requested grid */}
+            <TestimonialCardTwo
+              animationType="slide-up"
+              textboxLayout="split"
+              useInvertedBackground={false}
+              title="Featured Products"
+              description="Our best selling items."
+              testimonials={[]}
+            />
         </div>
 
         <div id="testimonials" data-section="testimonials">
@@ -99,6 +105,7 @@ export default function LandingPage() {
             title="Get In Touch"
             description="Have questions about our collection? We're here to help."
             useInvertedBackground={false}
+            background={{ variant: "plain" }}
             mediaAnimation="slide-up"
           />
         </div>