Update src/app/shop/page.tsx

src/app/booking/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function BookingPage() {
+  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: "Shop", id: "/shop" },
+            { name: "Book", id: "/booking" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="GG Goldhair"
+          button={{ text: "Contact", href: "/contact" }}
+        />
+        <div className="pt-32 pb-20">
+            <ContactSplitForm
+                title="Book Your Haircut"
+                description="Select your preferred service, date, and time below to schedule your visit."
+                inputs={[{ name: "name", type: "text", placeholder: "Full Name" }, { name: "email", type: "email", placeholder: "Email Address" }]}
+                multiSelect={{ name: "service", label: "Select Service", options: ["Cut & Style", "Coloring", "Deep Conditioning Treatment"] }}
+                textarea={{ name: "notes", placeholder: "Any special requests?" }}
+                buttonText="Confirm Booking"
+                useInvertedBackground={false}
+            />
+        </div>
+        <FooterCard logoText="GG Goldhair" />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function ContactPage() {
+  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: "Shop", id: "/shop" },
+            { name: "Book", id: "/booking" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="GG Goldhair"
+          button={{ text: "Book", href: "/booking" }}
+        />
+        <div className="pt-32 pb-20">
+            <FaqSplitMedia
+              title="Frequently Asked Questions"
+              description="Common questions about our location, hours, and policies."
+              faqs={[
+                { id: "f1", title: "Where is the salon?", content: "We are located in the heart of downtown at 123 Stylist Lane." },
+                { id: "f2", title: "What are your hours?", content: "Tue-Sat: 10AM - 7PM, Sun-Mon: Closed." },
+              ]}
+              faqsAnimation="slide-up"
+              textboxLayout="split"
+              useInvertedBackground={false}
+            />
+            <ContactText
+                text="Visit us for a consultation or give us a call to learn more."
+                background={{ variant: "radial-gradient" }}
+                useInvertedBackground={false}
+            />
+        </div>
+        <FooterCard logoText="GG Goldhair" />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,16 +2,8 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
-import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TeamCardSix from '@/components/sections/team/TeamCardSix';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 
 export default function LandingPage() {
   return (
@@ -31,273 +23,32 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",
+        { name: "Shop", id: "/shop" },
-          id: "hero",
+        { name: "Book", id: "/booking" },
-        },
+        { name: "Contact", id: "/contact" },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="GG Goldhair"
+      button={{ text: "Book Now", href: "/booking" }}
     />
   </div>
-
   <div id="hero" data-section="hero">
       <HeroSplitDualMedia
-      background={{
+      background={{ variant: "radial-gradient" }}
-        variant: "radial-gradient",
-      }}
       title="GG Goldhair: Define Your Glow"
       description="Experience premium hair care tailored to you in our elegant studio environment."
       tag="Luxury Hair Care"
-      buttons={[
+      buttons={[{ text: "Book Now", href: "/booking" }]}
-        {
-          text: "Book Now",
-          href: "#contact",
-        },
-      ]}
       mediaItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/professional-stylist-doing-haircut-salon_23-2147769831.jpg", imageAlt: "Luxury hair salon interior" },
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-stylist-doing-haircut-salon_23-2147769831.jpg",
+        { imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4446.jpg", imageAlt: "Professional hair styling service" }
-          imageAlt: "Luxury hair salon interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4446.jpg",
-          imageAlt: "Professional hair styling service",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-styling-hair-client_23-2147769815.jpg",
-          imageAlt: "Professional hairdresser styling hair of client",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-making-hairstyle-blonde-woman-beauty-salon_176420-4450.jpg",
-          imageAlt: "Female hairdresser making hairstyle to blonde woman in beauty salon",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-stylist-preparing-girl-coloration_23-2147769752.jpg",
-          imageAlt: "Confident stylist preparing girl for coloration",
-        },
       ]}
       mediaAnimation="slide-up"
       rating={5}
       ratingText="Rated 5/5 by our lovely clients"
     />
   </div>
-
-  <div id="about" data-section="about">
-      <TextSplitAbout
-      useInvertedBackground={false}
-      title="Artistry Meets Elegance"
-      description={[
-        "At GG Goldhair, we believe that your hair is your finest accessory. Our stylists combine technical precision with creative flair to bring out your natural beauty.",
-        "Located in the heart of the city, our salon is a retreat from the everyday where you can relax while we transform your look into something truly golden.",
-      ]}
-    />
-  </div>
-
-  <div id="features" data-section="features">
-      <FeatureCardThree
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Expert Stylists",
-          description: "Highly trained professionals dedicated to the latest hair trends.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-with-curly-hair_23-2151317376.jpg",
-        },
-        {
-          title: "Premium Products",
-          description: "We only use top-tier, salon-grade products for your hair health.",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-salon_23-2150668429.jpg",
-        },
-        {
-          title: "Custom Experience",
-          description: "Every service is tailored to your hair type and style goals.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hair-trimmer-supplies_23-2148352856.jpg",
-        },
-      ]}
-      title="Why Choose GG Goldhair"
-      description="Experience hair care beyond expectations with our curated list of services and professional care."
-    />
-  </div>
-
-  <div id="products" data-section="products">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Gold Hydrate Serum",
-          price: "$45",
-          imageSrc: "http://img.b2bpic.net/free-photo/natural-jojoba-oil-composition_23-2149047769.jpg",
-        },
-        {
-          id: "p2",
-          name: "Revive Mask",
-          price: "$60",
-          imageSrc: "http://img.b2bpic.net/free-photo/shiny-brown-hair-with-hair-care-product_23-2152020257.jpg",
-        },
-        {
-          id: "p3",
-          name: "Style Guard Spray",
-          price: "$30",
-          imageSrc: "http://img.b2bpic.net/free-photo/artist-props-table_23-2148929902.jpg",
-        },
-        {
-          id: "p4",
-          name: "Lustre Hair Oil",
-          price: "$55",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-hair-slugging-night-routine_23-2150396651.jpg",
-        },
-        {
-          id: "p5",
-          name: "Deep Cleanser",
-          price: "$35",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-washed-beauty-salon_23-2149167389.jpg",
-        },
-        {
-          id: "p6",
-          name: "Volume Conditioner",
-          price: "$40",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-hair-washing-with-soap_140725-8948.jpg",
-        },
-      ]}
-      title="Professional Hair Care"
-      description="Bring the salon experience home with our premium selection of hair products."
-    />
-  </div>
-
-  <div id="team" data-section="team">
-      <TeamCardSix
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      members={[
-        {
-          id: "m1",
-          name: "Elena Gold",
-          role: "Creative Director",
-          imageSrc: "http://img.b2bpic.net/free-photo/brown-eyed-curly-brunette-short-haired-woman-floral-trendy-dress-smiles-looks-camera-hoods-pencil-designs-new-clothes_197531-24076.jpg",
-        },
-        {
-          id: "m2",
-          name: "Marcus Styles",
-          role: "Senior Stylist",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-holding-bottle-shampoo_107420-12149.jpg",
-        },
-        {
-          id: "m3",
-          name: "Sofia Luxe",
-          role: "Colorist Expert",
-          imageSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg",
-        },
-      ]}
-      title="Meet The Stylists"
-      description="Our team of dedicated professionals is ready to help you shine."
-    />
-  </div>
-
-  <div id="testimonial" data-section="testimonial">
-      <TestimonialCardFifteen
-      useInvertedBackground={false}
-      testimonial="GG Goldhair is absolutely wonderful. I have never felt more confident about my hair than after my visit today. Truly top-tier service!"
-      rating={5}
-      author="Sarah M."
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153828.jpg",
-          alt: "Sarah M",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575433.jpg",
-          alt: "James P",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/smiling-brunette-girl-posing-with-coat_23-2148135986.jpg",
-          alt: "Linda D",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg",
-          alt: "Michael B",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12313.jpg",
-          alt: "Karen W",
-        },
-      ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "How do I book an appointment?",
-          content: "You can book directly through our contact form or by calling the salon.",
-        },
-        {
-          id: "f2",
-          title: "Do you offer consultations?",
-          content: "Yes, we offer complimentary consultations for all major color and style transformations.",
-        },
-        {
-          id: "f3",
-          title: "What products do you use?",
-          content: "We use professional, high-end brands known for their efficacy and gentle treatment of your hair.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205859.jpg"
-      mediaAnimation="slide-up"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about our salon services."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "radial-gradient",
-      }}
-      text="Ready to transform your look? We're located in the heart of the city and waiting for you."
-      buttons={[
-        {
-          text: "Contact Us",
-          href: "mailto:hello@goldhair.com",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="GG Goldhair"
-      copyrightText="© 2025 GG Goldhair. All rights reserved."
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/shop/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+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: "Shop", id: "/shop" },
+            { name: "Book", id: "/booking" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="GG Goldhair"
+          button={{ text: "Book", href: "/booking" }}
+        />
+        <div className="pt-32 pb-20">
+            <ProductCardOne
+              title="Our Premium Shop"
+              description="Browse our professional line of hair care essentials."
+              products={[
+                { id: "p1", name: "Gold Hydrate Serum", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/natural-jojoba-oil-composition_23-2149047769.jpg" },
+                { id: "p2", name: "Revive Mask", price: "$60", imageSrc: "http://img.b2bpic.net/free-photo/shiny-brown-hair-with-hair-care-product_23-2152020257.jpg" },
+                { id: "p3", name: "Style Guard Spray", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/artist-props-table_23-2148929902.jpg" },
+              ]}
+              gridVariant="three-columns-all-equal-width"
+              animationType="slide-up"
+              textboxLayout="split"
+              useInvertedBackground={false}
+            />
+        </div>
+        <FooterCard logoText="GG Goldhair" />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}