Merge version_2 into main

Merge version_2 into main

src/app/beard/page.tsx

@@ -2,12 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 
-export default function LandingPage() {
+export default function BeardPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -22,130 +21,22 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Haircuts",
-          id: "/haircuts",
-        },
-        {
-          name: "Beard & Shave",
-          id: "/beard",
-        },
-        {
-          name: "Booking",
-          id: "/booking",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="FOXY'S"
-    />
-  </div>
-
-  <div id="beard-menu" data-section="beard-menu">
-      <PricingCardThree
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "trim",
-          name: "Beard Trim",
-          price: "$20",
-          features: [
-            "Shape-up",
-          ],
-          buttons: [
-            {
-              text: "Add to Cart",
-            },
-          ],
-        },
-        {
-          id: "sculpt",
-          name: "Full Sculpt",
-          price: "$30",
-          features: [
-            "Detailed grooming",
-          ],
-          buttons: [
-            {
-              text: "Add to Cart",
-            },
-          ],
-        },
-        {
-          id: "razor",
-          name: "Straight Razor",
-          price: "$35",
-          features: [
-            "Hot towel finish",
-          ],
-          buttons: [
-            {
-              text: "Add to Cart",
-            },
-          ],
-        },
-      ]}
-      title="Beard & Shave"
-      description="Refined facial care."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Keep your beard looking its absolute best with our professional maintenance rituals."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Studio",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Team",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Booking",
-          items: [
-            {
-              label: "Appointments",
-              href: "/booking",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 Foxy's Studio"
-      bottomRightText="Built with Precision"
-    />
-  </div>
+        <NavbarStyleApple
+          navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Haircuts", id: "/haircuts" }, { name: "Beard & Shave", id: "/beard" }, { name: "Booking", id: "/booking" }, { name: "Contact", id: "/contact" }]}
+          brandName="FOXY'S"
+        />
+        <HeroLogo
+          logoText="The Classic Straight Razor Shave"
+          description="Experience the ultimate grooming ritual. Hot towel treatment, precision straight razor shave, and soothing aftercare for the smoothest finish."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CKv9SEX7n5KVrleep6fgCt8hsh/uploaded-1776147796442-ccxvrei9.jpg"
+          buttons={[{ text: "Book Now", href: "/booking" }]}
+        />
+        <FooterSimple
+          columns={[{ title: "Studio", items: [{ label: "About", href: "#" }, { label: "Team", href: "#" }] }, { title: "Booking", items: [{ label: "Appointments", href: "/booking" }] }]}
+          bottomLeftText="© 2024 Foxy's Studio"
+          bottomRightText="Built with Precision"
+        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/booking/page.tsx

@@ -1,145 +1,29 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 
-export default function LandingPage() {
+export default function BookingPage() {
   return (
-    <ThemeProvider
-        defaultButtonVariant="expand-hover"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
-        contentWidth="mediumSmall"
-        sizing="mediumLarge"
-        background="floatingGradient"
-        cardStyle="soft-shadow"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="solid"
-        headingFontWeight="bold"
-    >
-      <ReactLenis root>
-  <div id="nav" data-section="nav">
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Haircuts",
-          id: "/haircuts",
-        },
-        {
-          name: "Beard & Shave",
-          id: "/beard",
-        },
-        {
-          name: "Booking",
-          id: "/booking",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="FOXY'S"
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Book Your Spot"
-      description="Secure your time with our master barbers."
-      plans={[
-        {
-          id: "express",
-          badge: "Popular",
-          price: "$40",
-          subtitle: "Standard Appointment",
-          features: [
-            "Haircut",
-            "Consultation",
-            "Styling",
-          ],
-          buttons: [
-            {
-              text: "Book Now",
-            },
-          ],
-        },
-        {
-          id: "deluxe",
-          badge: "Full Service",
-          price: "$75",
-          subtitle: "The Full Foxy Experience",
-          features: [
-            "Haircut & Beard",
-            "Straight Razor",
-            "Hot Towel Treatment",
-            "Face Massage",
-          ],
-          buttons: [
-            {
-              text: "Book Now",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Please arrive 5 minutes early to your appointment."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Studio",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Team",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Booking",
-          items: [
-            {
-              label: "Appointments",
-              href: "/booking",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 Foxy's Studio"
-      bottomRightText="Built with Precision"
-    />
-  </div>
-      </ReactLenis>
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Services", id: "/services" },
+          { name: "Cart", id: "/cart" },
+          { name: "Booking", id: "/booking" },
+          { name: "Contact", id: "/contact" },
+        ]}
+        brandName="FOXY'S"
+      />
+      <main className="min-h-screen pt-32 px-6 max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold mb-8">Complete Booking</h1>
+        <div className="space-y-6">
+          <div className="bg-white p-6 rounded-xl shadow-sm border border-neutral-100">
+            <p>Select Date & Time and confirm your grooming session.</p>
+          </div>
+        </div>
+      </main>
     </ThemeProvider>
   );
-}
+}

src/app/cart/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+
+export default function CartPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleApple
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Services", id: "/services" },
+          { name: "Cart", id: "/cart" },
+          { name: "Booking", id: "/booking" },
+          { name: "Contact", id: "/contact" },
+        ]}
+        brandName="FOXY'S"
+      />
+      <main className="min-h-screen pt-32 px-6 max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold mb-8">Your Selection</h1>
+        <div className="bg-white p-6 rounded-xl shadow-sm border border-neutral-100">
+          <p className="text-neutral-500">Cart functionality connected to global state.</p>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -2,12 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactForm from '@/components/form/ContactForm';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ContactText from '@/components/sections/contact/ContactText';
 
-export default function LandingPage() {
+export default function ContactPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -22,96 +22,27 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Haircuts",
-          id: "/haircuts",
-        },
-        {
-          name: "Beard & Shave",
-          id: "/beard",
-        },
-        {
-          name: "Booking",
-          id: "/booking",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="FOXY'S"
-    />
-  </div>
-
-  <div id="contact-info" data-section="contact-info">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Visit Us"
-      title="Foxy's Studio"
-      description="123 Grooming Lane, City. Walk-ins welcome. Hours: 9am-7pm."
-      buttons={[
-        {
-          text: "Get Directions",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Have a specific question? Send us a message and we'll get back to you shortly."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Studio",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Team",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Booking",
-          items: [
-            {
-              label: "Appointments",
-              href: "/booking",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 Foxy's Studio"
-      bottomRightText="Built with Precision"
-    />
-  </div>
+        <NavbarStyleApple
+          navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Haircuts", id: "/haircuts" }, { name: "Booking", id: "/booking" }, { name: "Contact", id: "/contact" }]}
+          brandName="FOXY'S"
+        />
+        <ContactText
+          text="Get in Touch"
+          background={{ variant: "animated-grid" }}
+          useInvertedBackground={false}
+        />
+        <ContactForm
+          title="Send us a Message"
+          description="Have questions about our studio or services? Drop us a note."
+          tag="Support"
+          useInvertedBackground={false}
+        />
+        <FooterSimple
+          columns={[{ title: "Studio", items: [{ label: "About", href: "#" }, { label: "Team", href: "#" }] }, { title: "Booking", items: [{ label: "Appointments", href: "/booking" }] }]}
+          bottomLeftText="© 2024 Foxy's Studio"
+          bottomRightText="Built with Precision"
+        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/haircuts/page.tsx

@@ -2,153 +2,38 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 
-export default function LandingPage() {
+export default function HaircutsPage() {
   return (
-    <ThemeProvider
-        defaultButtonVariant="expand-hover"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
-        contentWidth="mediumSmall"
-        sizing="mediumLarge"
-        background="floatingGradient"
-        cardStyle="soft-shadow"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="solid"
-        headingFontWeight="bold"
-    >
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Haircuts",
-          id: "/haircuts",
-        },
-        {
-          name: "Beard & Shave",
-          id: "/beard",
-        },
-        {
-          name: "Booking",
-          id: "/booking",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="FOXY'S"
-    />
-  </div>
-
-  <div id="haircuts-menu" data-section="haircuts-menu">
-      <PricingCardThree
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "classic",
-          name: "Classic Cut",
-          price: "$35",
-          features: [
-            "Wash",
-            "Cut",
-            "Style",
-          ],
-          buttons: [
-            {
-              text: "Add to Cart",
-            },
-          ],
-        },
-        {
-          id: "fade",
-          name: "Skin Fade",
-          price: "$40",
-          features: [
-            "Zero fade",
-            "Style",
-          ],
-          buttons: [
-            {
-              text: "Add to Cart",
-            },
-          ],
-        },
-        {
-          id: "scissor",
-          name: "Scissor Cut",
-          price: "$45",
-          features: [
-            "Detailed scissor work",
-          ],
-          buttons: [
-            {
-              text: "Add to Cart",
-            },
-          ],
-        },
-      ]}
-      title="Haircuts"
-      description="Master craftsmanship."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Find the perfect style for your face shape and lifestyle."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Studio",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Team",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Booking",
-          items: [
-            {
-              label: "Appointments",
-              href: "/booking",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 Foxy's Studio"
-      bottomRightText="Built with Precision"
-    />
-  </div>
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "Haircuts", id: "/haircuts" },
+            { name: "Booking", id: "/booking" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="FOXY'S"
+        />
+        <div className="pt-32 pb-20">
+          <PricingCardNine
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Our Haircut Collection"
+            description="From classic styles to modern trends, find your perfect look."
+            plans={[
+              { id: "p1", title: "Classic Cut", price: "$45", period: "per session", features: ["Wash", "Cut", "Style"], button: { text: "Book Now", href: "/booking" } },
+              { id: "p2", title: "Fade Specialty", price: "$55", period: "per session", features: ["Fade", "Wash", "Finish"], button: { text: "Book Now", href: "/booking" } },
+              { id: "p3", title: "Premium Treatment", price: "$85", period: "per session", features: ["Full Cut", "Shave", "Treatment"], button: { text: "Book Now", href: "/booking" } },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -27,18 +27,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",          id: "/"},
-        {
-          name: "Services",          id: "/services"},
-        {
-          name: "Haircuts",          id: "/haircuts"},
-        {
-          name: "Beard & Shave",          id: "/beard"},
-        {
-          name: "Booking",          id: "/booking"},
-        {
-          name: "Contact",          id: "/contact"},
+        { name: "Home", id: "/" },
+        { name: "Services", id: "/services" },
+        { name: "Cart", id: "/cart" },
+        { name: "Booking", id: "/booking" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="FOXY'S"
     />
@@ -48,10 +41,7 @@ export default function LandingPage() {
       <HeroLogo
       logoText="Precision Cuts. Timeless Style."
       description="Premium grooming for the modern gentleman."
-      buttons={[
-        {
-          text: "Book Now",          href: "/booking"},
-      ]}
+      buttons={[{ text: "Book Now", href: "/booking" }]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CKv9SEX7n5KVrleep6fgCt8hsh/uploaded-1776147499714-ob5q5mqk.jpg"
       showDimOverlay={true}
     />
@@ -63,18 +53,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          id: "1",          title: "Haircuts",          tags: [
-            "Classic",            "Fade",            "Style"],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CKv9SEX7n5KVrleep6fgCt8hsh/uploaded-1776147499714-ob5q5mqk.jpg"},
-        {
-          id: "2",          title: "Beard & Shave",          tags: [
-            "Straight Razor",            "Sculpt"],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CKv9SEX7n5KVrleep6fgCt8hsh/uploaded-1776147796442-ccxvrei9.jpg"},
-        {
-          id: "3",          title: "Consultation",          tags: [
-            "Personalized",            "Advice"],
-          imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg"},
+        { id: "1", title: "Haircuts", tags: ["Classic", "Fade", "Style"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CKv9SEX7n5KVrleep6fgCt8hsh/uploaded-1776147499714-ob5q5mqk.jpg" },
+        { id: "2", title: "Beard & Shave", tags: ["Straight Razor", "Sculpt"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CKv9SEX7n5KVrleep6fgCt8hsh/uploaded-1776147796442-ccxvrei9.jpg" },
+        { id: "3", title: "Consultation", tags: ["Personalized", "Advice"], imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg" },
       ]}
       title="Our Craft"
       description="Excellence in every detail."
@@ -86,16 +67,11 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "1",          title: "Excellent Service",          quote: "Best cut in the city.",          name: "James R.",          role: "Finance",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-confident-man-cafeteria_23-2147689260.jpg"},
-        {
-          id: "2",          title: "The Detail",          quote: "I never felt better.",          name: "Mark D.",          role: "Creative",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-kitchen-holding-cute-white-maltese-dog_1153-9862.jpg"},
-        {
-          id: "3",          title: "Classy",          quote: "Real professionalism here.",          name: "Thomas L.",          role: "Lawyer",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hair-salon_23-2150665451.jpg"},
-        {
-          id: "4",          title: "Perfect fade",          quote: "Sharpest fade I've had.",          name: "Ben S.",          role: "Tech",          imageSrc: "http://img.b2bpic.net/free-photo/pretty-short-haired-blond-woman-s-portrait_633478-2499.jpg"},
-        {
-          id: "5",          title: "Highly Recommend",          quote: "The absolute standard.",          name: "John M.",          role: "Architect",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-her-boyfriend-are-posing-camera-indoors_1153-3712.jpg"},
+        { id: "1", title: "Excellent Service", quote: "Best cut in the city.", name: "James R.", role: "Finance", imageSrc: "http://img.b2bpic.net/free-photo/stylish-confident-man-cafeteria_23-2147689260.jpg" },
+        { id: "2", title: "The Detail", quote: "I never felt better.", name: "Mark D.", role: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-kitchen-holding-cute-white-maltese-dog_1153-9862.jpg" },
+        { id: "3", title: "Classy", quote: "Real professionalism here.", name: "Thomas L.", role: "Lawyer", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-hair-salon_23-2150665451.jpg" },
+        { id: "4", title: "Perfect fade", quote: "Sharpest fade I've had.", name: "Ben S.", role: "Tech", imageSrc: "http://img.b2bpic.net/free-photo/pretty-short-haired-blond-woman-s-portrait_633478-2499.jpg" },
+        { id: "5", title: "Highly Recommend", quote: "The absolute standard.", name: "John M.", role: "Architect", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-her-boyfriend-are-posing-camera-indoors_1153-3712.jpg" },
       ]}
       title="Gentlemen's Approval"
       description="Trusted by men who value precision."
@@ -110,16 +86,11 @@ export default function LandingPage() {
       description="Everything you need to know about our services."
       faqsAnimation="slide-up"
       faqs={[
-        {
-          id: "1",          title: "Do you accept walk-ins?",          content: "Yes, we welcome walk-ins, but appointments are recommended to ensure availability."},
-        {
-          id: "2",          title: "How long does a cut take?",          content: "Typically, a standard cut takes between 30 to 45 minutes."},
-        {
-          id: "3",          title: "What products do you use?",          content: "We use premium, industry-leading grooming products curated for the modern man."},
-        {
-          id: "4",          title: "Can I request a barber?",          content: "Absolutely, mention your preferred barber when booking your appointment."},
-        {
-          id: "5",          title: "Are gift cards available?",          content: "Yes, we offer digital and physical gift cards at our studio."},
+        { id: "1", title: "Do you accept walk-ins?", content: "Yes, we welcome walk-ins, but appointments are recommended to ensure availability." },
+        { id: "2", title: "How long does a cut take?", content: "Typically, a standard cut takes between 30 to 45 minutes." },
+        { id: "3", title: "What products do you use?", content: "We use premium, industry-leading grooming products curated for the modern man." },
+        { id: "4", title: "Can I request a barber?", content: "Absolutely, mention your preferred barber when booking your appointment." },
+        { id: "5", title: "Are gift cards available?", content: "Yes, we offer digital and physical gift cards at our studio." },
       ]}
     />
   </div>
@@ -127,20 +98,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
-          title: "Studio",          items: [
-            {
-              label: "About",              href: "#"},
-            {
-              label: "Team",              href: "#"},
-          ],
-        },
-        {
-          title: "Booking",          items: [
-            {
-              label: "Appointments",              href: "/booking"},
-          ],
-        },
+        { title: "Studio", items: [{ label: "About", href: "#" }, { label: "Team", href: "#" }] },
+        { title: "Booking", items: [{ label: "Appointments", href: "/booking" }, { label: "Cart", href: "/cart" }] },
       ]}
       bottomLeftText="© 2024 Foxy's Studio"
       bottomRightText="Built with Precision"

src/app/services/page.tsx

@@ -2,142 +2,38 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
 
-export default function LandingPage() {
+export default function ServicesPage() {
   return (
-    <ThemeProvider
-        defaultButtonVariant="expand-hover"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="pill"
-        contentWidth="mediumSmall"
-        sizing="mediumLarge"
-        background="floatingGradient"
-        cardStyle="soft-shadow"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="solid"
-        headingFontWeight="bold"
-    >
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Haircuts",
-          id: "/haircuts",
-        },
-        {
-          name: "Beard & Shave",
-          id: "/beard",
-        },
-        {
-          name: "Booking",
-          id: "/booking",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      brandName="FOXY'S"
-    />
-  </div>
-
-  <div id="services-menu" data-section="services-menu">
-      <PricingCardThree
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "hair",
-          name: "Haircuts",
-          price: "From $35",
-          features: [
-            "Classic Cut",
-            "Skin Fade",
-            "Scissor Cut",
-          ],
-          buttons: [
-            {
-              text: "View Details",
-              href: "/haircuts",
-            },
-          ],
-        },
-        {
-          id: "shave",
-          name: "Beard & Shave",
-          price: "From $20",
-          features: [
-            "Beard Trim",
-            "Straight Razor Shave",
-          ],
-          buttons: [
-            {
-              text: "View Details",
-              href: "/beard",
-            },
-          ],
-        },
-      ]}
-      title="Our Services"
-      description="Classic and modern techniques."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Need professional advice on your next look? Our experts are here to help."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Studio",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Team",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Booking",
-          items: [
-            {
-              label: "Appointments",
-              href: "/booking",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 Foxy's Studio"
-      bottomRightText="Built with Precision"
-    />
-  </div>
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "Haircuts", id: "/haircuts" },
+            { name: "Booking", id: "/booking" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="FOXY'S"
+        />
+        <div className="pt-32 pb-20">
+          <FeatureCardTwentyThree
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            title="Our Services"
+            description="Discover our range of premium grooming services tailored for you."
+            features={[
+              { id: "s1", title: "Precision Haircuts", tags: ["Styling", "Fade"] },
+              { id: "s2", title: "Beard Grooming", tags: ["Razor", "Beard Oil"] },
+              { id: "s3", title: "Facial Treatments", tags: ["Skincare", "Relax"] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #0a0a0a;
-  --card: #121212;
-  --foreground: #ffffff;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
   --primary-cta: #d4af37;
   --primary-cta-text: #000000;
   --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
-  --accent: #333333;
-  --background-accent: #d4af37;
+  --accent: #b8860b;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);