Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="compact"
+        sizing="largeSmall"
+        background="fluid"
+        cardStyle="outline"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+  <div id="nav" data-section="nav">
+      <NavbarLayoutFloatingInline
+      navItems={[
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Services", id: "/#services" },
+        { name: "Shop", id: "/#products" },
+      ]}
+      brandName="GirlTribe.ng HairVogue"
+      button={{ text: "Contact", href: "/#footer" }}
+    />
+  </div>
+
+  <div id="about" data-section="about">
+      <InlineImageSplitTextAbout
+      useInvertedBackground={false}
+      heading={[
+        { type: "text", content: "Our Promise to You" },
+        { type: "image", src: "http://img.b2bpic.net/free-photo/close-up-texture-cream_23-2149409636.jpg", alt: "Luxury hair details" },
+      ]}
+    />
+  </div>
+
+  <div id="footer" data-section="footer">
+      <FooterLogoReveal
+      logoText="GirlTribe.ng"
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Contact Us", href: "#" }}
+    />
+  </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -28,13 +28,13 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        { name: "Home", id: "hero" },
-        { name: "About", id: "about" },
-        { name: "Services", id: "services" },
-        { name: "Shop", id: "products" },
+        { name: "Home", id: "/" },
+        { name: "About", id: "/#about" },
+        { name: "Services", id: "/services" },
+        { name: "Shop", id: "/shop" },
       ]}
       brandName="GirlTribe.ng HairVogue"
-      button={{ text: "Contact", href: "#footer" }}
+      button={{ text: "Contact", href: "/#footer" }}
     />
   </div>
 
@@ -43,7 +43,7 @@ export default function LandingPage() {
       background={{ variant: "gradient-bars" }}
       title="Luxury Wigs for Timeless Elegance"
       description="At GirlTribe.ng HairVogue, we provide premium wigs, professional styling, and wig revamping services to help every woman look and feel her best. Discover confidence in every strand."
-      buttons={[{ text: "Shop Luxury", href: "#products" }]}
+      buttons={[{ text: "Shop Luxury", href: "/shop" }]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C1e3tzpyhUAZK8qmL9Val06w72/uploaded-1775665425549-7gpd91ez.jpg"
       mediaAnimation="blur-reveal"
       avatars={[
@@ -74,56 +74,6 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardTwelve
-      animationType="slide-up"
-      textboxLayout="split-description"
-      useInvertedBackground={true}
-      features={[
-        { id: "f1", label: "Luxury", title: "Premium Wigs", items: ["Carefully selected hair", "High-grade lace", "Ultra-soft texture"] },
-        { id: "f2", label: "Custom", title: "Tailored Styling", items: ["Professional fit", "Custom styling", "Color customization"] },
-        { id: "f3", label: "Care", title: "Revamping Services", items: ["Deep cleansing", "Conditioning treatment", "Precision styling"] },
-      ]}
-      title="Our Expert Services"
-      description="We specialize in more than just hair sales; we provide complete care."
-    />
-  </div>
-
-  <div id="products" data-section="products">
-      <ProductCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        { id: "p1", brand: "GirlTribe", name: "Signature Silk Wig", price: "", rating: 5, reviewCount: "24", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C1e3tzpyhUAZK8qmL9Val06w72/uploaded-1775665222685-dfrxqmlz.jpg" },
-        { id: "p2", brand: "GirlTribe", name: "Elegant Bob Cut", price: "$280", rating: 5, reviewCount: "18", imageSrc: "http://img.b2bpic.net/free-photo/beauty-black-mixed-race-african-american-woman-with-long-curly-hair-perfect-smile_633478-1938.jpg" },
-        { id: "p3", brand: "GirlTribe", name: "Voluminous Wave", price: "$420", rating: 5, reviewCount: "32", imageSrc: "http://img.b2bpic.net/free-photo/profile-shot-funny-carefree-blond-woman-hold-smartphone-raised-open-mouth-wide-yelling-recording-vid_1258-136492.jpg" },
-        { id: "p4", brand: "GirlTribe", name: "Deep Wave Luxe", price: "$390", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/interested-caucasian-girl-purple-sweater-white-skirt-standing-near-wall-adorable-young-woman-pink-periwig-sunglasses-posing-light-wall_197531-8040.jpg" },
-        { id: "p5", brand: "GirlTribe", name: "Natural Straight", price: "$310", rating: 5, reviewCount: "21", imageSrc: "http://img.b2bpic.net/free-photo/hair-with-shampoo-foam_23-2152001455.jpg" },
-        { id: "p6", brand: "GirlTribe", name: "Custom Revamp Kit", price: "$150", rating: 5, reviewCount: "40", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-long-hair-posing_1122-1458.jpg" },
-      ]}
-      title="Shop Our Collection"
-      description="Explore our curated range of luxury wigs, designed for elegance."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        { id: "t1", name: "Sarah O.", date: "Oct 2023", title: "Best Quality Ever", quote: "The texture is unmatched, and the service is incredibly professional.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/blonde-sisters-little-chat_329181-10653.jpg", imageSrc: "http://img.b2bpic.net/free-photo/blonde-sisters-little-chat_329181-10653.jpg" },
-        { id: "t2", name: "Amara K.", date: "Sep 2023", title: "Elegant Transformation", quote: "I feel so confident every time I wear my wig from GirlTribe.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-beauty-mulatto-woman-with-long-lashes_633478-2727.jpg", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-beauty-mulatto-woman-with-long-lashes_633478-2727.jpg" },
-        { id: "t3", name: "Chioma B.", date: "Aug 2023", title: "Amazing Revamp", quote: "Their wig revamping service is life-saving. My wig looks brand new again.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/lesbian-couple-wearing-white-their-wedding_23-2150835701.jpg", imageSrc: "http://img.b2bpic.net/free-photo/lesbian-couple-wearing-white-their-wedding_23-2150835701.jpg" },
-        { id: "t4", name: "Tolu E.", date: "Jul 2023", title: "Luxury Standard", quote: "Truly luxury standard. I recommend to all my friends.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/pretty-woman-white-background_1187-3896.jpg", imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-white-background_1187-3896.jpg" },
-        { id: "t5", name: "Ify M.", date: "Jun 2023", title: "So Beautiful", quote: "Softness and durability are 10/10.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-with-white-dress_1187-3822.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-with-white-dress_1187-3822.jpg" },
-      ]}
-      title="Loved by Our Tribe"
-      description="Hear what our clients say about their experience with GirlTribe."
-    />
-  </div>
-
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="GirlTribe.ng"
@@ -134,4 +84,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/#about" },
+            { name: "Services", id: "/services" },
+            { name: "Shop", id: "/shop" },
+          ]}
+          brandName="GirlTribe.ng HairVogue"
+          button={{ text: "Contact", href: "/#footer" }}
+        />
+        <FeatureCardTwentyEight
+          animationType="slide-up"
+          textboxLayout="split-description"
+          useInvertedBackground={true}
+          features={[
+            { id: "f1", title: "Premium Wigs", subtitle: "Luxury", category: "Quality", value: "High-grade lace" },
+            { id: "f2", title: "Tailored Styling", subtitle: "Custom", category: "Service", value: "Professional fit" },
+            { id: "f3", title: "Revamping Services", subtitle: "Care", category: "Maintenance", value: "Deep cleansing" },
+          ]}
+          title="Our Expert Services"
+          description="We specialize in more than just hair sales; we provide complete care."
+        />
+        <FooterLogoReveal
+          logoText="GirlTribe.ng"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Contact Us", href: "#" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ShopPage() {
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/#about" },
+            { name: "Services", id: "/services" },
+            { name: "Shop", id: "/shop" },
+          ]}
+          brandName="GirlTribe.ng HairVogue"
+          button={{ text: "Contact", href: "/#footer" }}
+        />
+        <ProductCardThree
+          animationType="slide-up"
+          textboxLayout="default"
+          gridVariant="three-columns-all-equal-width"
+          useInvertedBackground={false}
+          products={[
+            { id: "p1", name: "Signature Silk Wig", price: "$450", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C1e3tzpyhUAZK8qmL9Val06w72/uploaded-1775665222685-dfrxqmlz.jpg", brand: "GirlTribe", rating: 5, reviewCount: "128" },
+            { id: "p2", name: "Elegant Bob Cut", price: "$280", imageSrc: "https://images.unsplash.com/photo-1595476108170-65ec423d20a3", brand: "GirlTribe", rating: 4, reviewCount: "85" },
+            { id: "p3", name: "Voluminous Wave", price: "$420", imageSrc: "https://images.unsplash.com/photo-1597354964471-561b99ff815e", brand: "GirlTribe", rating: 5, reviewCount: "210" },
+          ]}
+          title="Shop Our Collection"
+          description="Explore our curated range of luxury wigs, designed for elegance."
+        />
+        <FooterLogoReveal
+          logoText="GirlTribe.ng"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Contact Us", href: "#" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}