Update src/app/page.tsx

src/app/about/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import TextAbout from '@/components/sections/about/TextAbout';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="small"
+        sizing="largeSmallSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/#services" },
+            { name: "About", id: "/about" },
+            { name: "Gallery", id: "/#gallery" },
+            { name: "Book Now", id: "/#contact" },
+          ]}
+          brandName="POSH"
+        />
+        
+        <div id="about" data-section="about" className="pt-32 pb-20">
+            <TextAbout
+              useInvertedBackground={false}
+              title="At Posh Hair Studio, we believe your hair is a statement. Our team blends artistry with technique to create looks that feel unmistakably you."
+            />
+        </div>
+
+        <FooterBase
+          columns={[
+            { title: "Services", items: [{ label: "Cut & Style", href: "/#services" }, { label: "Color & Highlights", href: "/#services" }, { label: "Bridal Packages", href: "/#services" }] },
+            { title: "About", items: [{ label: "Our Story", href: "/about" }, { label: "Meet the Team", href: "/#team" }, { label: "Contact", href: "/#contact" }] },
+            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
+          ]}
+          logoText="POSH"
+          copyrightText="© 2025 Posh Hair Studio | All Rights Reserved"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -28,26 +28,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "home",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Gallery",
-          id: "gallery",
-        },
-        {
-          name: "Book Now",
-          id: "contact",
-        },
+        { name: "Home", id: "home" },
+        { name: "Services", id: "services" },
+        { name: "About", id: "/about" },
+        { name: "Gallery", id: "gallery" },
+        { name: "Book Now", id: "contact" },
       ]}
       brandName="POSH"
     />
@@ -55,92 +40,33 @@ export default function LandingPage() {
 
   <div id="home" data-section="home">
       <HeroSplitKpi
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       title="Experience the Art of Hair"
       description="Precision cuts. Luxurious color. Your signature look. At Posh Hair Studio, we craft styles that feel unmistakably yours."
       kpis={[
-        {
-          value: "5.0",
-          label: "Google Rating",
-        },
-        {
-          value: "10+",
-          label: "Years Serving",
-        },
-        {
-          value: "100%",
-          label: "Client Satisfaction",
-        },
+        { value: "5.0", label: "Google Rating" },
+        { value: "10+", label: "Years Serving" },
+        { value: "100%", label: "Client Satisfaction" },
       ]}
       enableKpiAnimation={true}
-      buttons={[
-        {
-          text: "Book Your Appointment",
-          href: "#contact",
-        },
-      ]}
+      buttons={[{ text: "Book Your Appointment", href: "#contact" }]}
       imageSrc="http://img.b2bpic.net/free-photo/professional-hairdresser-styling-hair-client_23-2147769815.jpg"
       imageAlt="Posh Hair Studio signature style"
       mediaAnimation="blur-reveal"
       avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/side-view-beautiful-woman-with-folded-arms-looking-camera_23-2147876783.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/smiling-woman-talking-phone-with-her-friend_1153-11.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/closeup-happy-young-caucasian-girl-with-wide-smile-looks-camera-blurred-background-brunette-with-long-hair-wears-green-shirt-emotions-people-concept_197531-32280.jpg",
-          alt: "Client 5",
-        },
+        { src: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg", alt: "Client 1" },
+        { src: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg", alt: "Client 2" },
+        { src: "http://img.b2bpic.net/free-photo/side-view-beautiful-woman-with-folded-arms-looking-camera_23-2147876783.jpg", alt: "Client 3" },
+        { src: "http://img.b2bpic.net/free-photo/smiling-woman-talking-phone-with-her-friend_1153-11.jpg", alt: "Client 4" },
+        { src: "http://img.b2bpic.net/free-photo/closeup-happy-young-caucasian-girl-with-wide-smile-looks-camera-blurred-background-brunette-with-long-hair-wears-green-shirt-emotions-people-concept_197531-32280.jpg", alt: "Client 5" },
       ]}
       avatarText="Join 500+ happy clients"
       marqueeItems={[
-        {
-          type: "text",
-          text: "Luxury Styling",
-        },
-        {
-          type: "text",
-          text: "Bespoke Color",
-        },
-        {
-          type: "text",
-          text: "Precision Cuts",
-        },
-        {
-          type: "text",
-          text: "Bridal Packages",
-        },
-        {
-          type: "text",
-          text: "Modern Studio",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={false}
-      title="At Posh Hair Studio, we believe your hair is a statement. Our team blends artistry with technique to create looks that feel unmistakably you."
-      buttons={[
-        {
-          text: "Meet the Team",
-          href: "#team",
-        },
+        { type: "text", text: "Luxury Styling" },
+        { type: "text", text: "Bespoke Color" },
+        { type: "text", text: "Precision Cuts" },
+        { type: "text", text: "Bridal Packages" },
+        { type: "text", text: "Modern Studio" },
       ]}
     />
   </div>
@@ -150,24 +76,8 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "Consultation Required",
-          "Hair Correction",
-          "Advanced Treatments",
-          "Extension Maintenance",
-          "Root Touch-ups",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Precision Cuts & Styling",
-          "Bespoke Balayage & Color",
-          "Bridal & Formal Styling",
-          "Deep Conditioning Treatments",
-          "Custom Glossing",
-        ],
-      }}
+      negativeCard={{ items: ["Consultation Required", "Hair Correction", "Advanced Treatments", "Extension Maintenance", "Root Touch-ups"] }}
+      positiveCard={{ items: ["Precision Cuts & Styling", "Bespoke Balayage & Color", "Bridal & Formal Styling", "Deep Conditioning Treatments", "Custom Glossing"] }}
       title="Elevated Services"
       description="From precision cuts to bespoke color transformations, discover your next look."
     />
@@ -179,41 +89,11 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Sarah M.",
-          handle: "@sarah_m",
-          testimonial: "Absolutely the best experience I've ever had at a salon. My color is exactly what I wanted.",
-          imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg",
-        },
-        {
-          id: "2",
-          name: "Jordan L.",
-          handle: "@jordan_l",
-          testimonial: "I've been coming here for two years and I'll never go anywhere else. They're incredibly talented.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg",
-        },
-        {
-          id: "3",
-          name: "Priya K.",
-          handle: "@priya_k",
-          testimonial: "Walked out feeling like a new person. Worth every penny.",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-beautiful-woman-with-folded-arms-looking-camera_23-2147876783.jpg",
-        },
-        {
-          id: "4",
-          name: "Alex R.",
-          handle: "@alex_r",
-          testimonial: "The atmosphere is so relaxing and the stylists really listen to you.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-talking-phone-with-her-friend_1153-11.jpg",
-        },
-        {
-          id: "5",
-          name: "Elena D.",
-          handle: "@elena_d",
-          testimonial: "My hair has never looked healthier. Truly skilled professionals.",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-young-caucasian-girl-with-wide-smile-looks-camera-blurred-background-brunette-with-long-hair-wears-green-shirt-emotions-people-concept_197531-32280.jpg",
-        },
+        { id: "1", name: "Sarah M.", handle: "@sarah_m", testimonial: "Absolutely the best experience I've ever had at a salon. My color is exactly what I wanted.", imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg" },
+        { id: "2", name: "Jordan L.", handle: "@jordan_l", testimonial: "I've been coming here for two years and I'll never go anywhere else. They're incredibly talented.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg" },
+        { id: "3", name: "Priya K.", handle: "@priya_k", testimonial: "Walked out feeling like a new person. Worth every penny.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-beautiful-woman-with-folded-arms-looking-camera_23-2147876783.jpg" },
+        { id: "4", name: "Alex R.", handle: "@alex_r", testimonial: "The atmosphere is so relaxing and the stylists really listen to you.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-talking-phone-with-her-friend_1153-11.jpg" },
+        { id: "5", name: "Elena D.", handle: "@elena_d", testimonial: "My hair has never looked healthier. Truly skilled professionals.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-young-caucasian-girl-with-wide-smile-looks-camera-blurred-background-brunette-with-long-hair-wears-green-shirt-emotions-people-concept_197531-32280.jpg" },
       ]}
       title="What Our Clients Say"
       description="Join our community of happy, confident clients."
@@ -223,71 +103,20 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       tag="Booking"
       title="Ready for Your Transformation?"
       description="Reserve your chair today. Select your service, choose your stylist, and pick a time that works for you."
-      buttons={[
-        {
-          text: "Book Now",
-          href: "#",
-        },
-      ]}
+      buttons={[{ text: "Book Now", href: "#" }]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Cut & Style",
-              href: "#services",
-            },
-            {
-              label: "Color & Highlights",
-              href: "#services",
-            },
-            {
-              label: "Bridal Packages",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "About",
-          items: [
-            {
-              label: "Our Story",
-              href: "#about",
-            },
-            {
-              label: "Meet the Team",
-              href: "#team",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Services", items: [{ label: "Cut & Style", href: "#services" }, { label: "Color & Highlights", href: "#services" }, { label: "Bridal Packages", href: "#services" }] },
+        { title: "About", items: [{ label: "Our Story", href: "/about" }, { label: "Meet the Team", href: "#team" }, { label: "Contact", href: "#contact" }] },
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
       ]}
       logoText="POSH"
       copyrightText="© 2025 Posh Hair Studio | All Rights Reserved"
@@ -296,4 +125,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}