Update src/app/shop/page.tsx

Merge version_1 into main

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,178 +23,32 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Services",          id: "products"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "/" },
+        { name: "Shop", id: "/shop" },
+        { name: "Book", id: "/booking" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="GG Goldhair"
-      button={{ text: "Book Now", href: "#contact" }}
+      button={{ text: "Book Now", href: "/booking" }}
     />
   </div>
-
   <div id="hero" data-section="hero">
       <HeroSplitDualMedia
-      background={{
-        variant: "radial-gradient"}}
+      background={{ 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={[
-        {
-          text: "Book Now",          href: "#contact"},
-      ]}
+      buttons={[{ text: "Book Now", href: "/booking" }]}
       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-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-stylist-doing-haircut-salon_23-2147769831.jpg", 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" }
       ]}
       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>
+  );
+}