Update src/app/order-confirmation/page.tsx

Merge version_1 into main

src/app/cart/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import TextAbout from '@/components/sections/about/TextAbout'; // Using TextAbout for cart section placeholder
+
+export default function CartPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="none"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "#services" },
+              { name: "Barbers", id: "#barbers" },
+              { name: "Pricing", id: "#pricing" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Cart", id: "/cart" },
+              { name: "Checkout", id: "/checkout" }
+            ]}
+            button={{ text: "Book Now", href: "#contact" }}
+            brandName="The Modern Cut"
+          />
+        </div>
+
+        <div id="cart" data-section="cart">
+          <TextAbout
+            useInvertedBackground={false}
+            tag="Your Order"
+            title="Your Shopping Cart"
+            buttons={[
+              {
+                text: "Proceed to Checkout",                href: "/checkout"
+              }
+            ]}
+          />
+          {/* Placeholder for actual cart items display */}
+          <div className="container mx-auto py-12 px-4">
+            <h3 className="text-2xl font-bold mb-6">Cart Items</h3>
+            <div className="bg-card p-6 rounded-lg shadow-lg">
+                <p className="text-foreground">No items in your cart yet. Start adding some services!</p>
+                {/* In a real scenario, this would dynamically render cart items */}
+            </div>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="The Modern Cut"
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Haircuts", href: "#services" },
+                  { label: "Shaves", href: "#services" },
+                  { label: "Beard Trims", href: "#services" },
+                  { label: "Styling", href: "#services" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#about" },
+                  { label: "Our Team", href: "#barbers" },
+                  { label: "Pricing", href: "#pricing" },
+                  { label: "Contact", href: "#contact" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 The Modern Cut. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/checkout/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import ContactCenter from '@/components/sections/contact/ContactCenter'; // Reusing ContactCenter for checkout form
+
+export default function CheckoutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="none"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "#services" },
+              { name: "Barbers", id: "#barbers" },
+              { name: "Pricing", id: "#pricing" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Cart", id: "/cart" },
+              { name: "Checkout", id: "/checkout" }
+            ]}
+            button={{ text: "Book Now", href: "#contact" }}
+            brandName="The Modern Cut"
+          />
+        </div>
+
+        <div id="checkout" data-section="checkout">
+          <ContactCenter
+            tag="Secure Payment"
+            title="Complete Your Order"
+            description="Enter your shipping and payment details to finalize your grooming appointment."
+            inputPlaceholder="Your Email Address" // Repurpose for general contact info
+            buttonText="Place Order"
+            onSubmit={(email) => { console.log("Order placed for:", email); window.location.href = "/order-confirmation"; }}
+            useInvertedBackground={true}
+            background={{ variant: "plain" }}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="The Modern Cut"
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Haircuts", href: "#services" },
+                  { label: "Shaves", href: "#services" },
+                  { label: "Beard Trims", href: "#services" },
+                  { label: "Styling", href: "#services" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#about" },
+                  { label: "Our Team", href: "#barbers" },
+                  { label: "Pricing", href: "#pricing" },
+                  { label: "Contact", href: "#contact" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 The Modern Cut. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/order-confirmation/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import TextAbout from '@/components/sections/about/TextAbout'; // Reusing TextAbout for confirmation message
+
+export default function OrderConfirmationPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="none"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "#services" },
+              { name: "Barbers", id: "#barbers" },
+              { name: "Pricing", id: "#pricing" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Cart", id: "/cart" },
+              { name: "Checkout", id: "/checkout" }
+            ]}
+            button={{ text: "Book Now", href: "#contact" }}
+            brandName="The Modern Cut"
+          />
+        </div>
+
+        <div id="order-confirmation" data-section="order-confirmation">
+          <TextAbout
+            useInvertedBackground={false}
+            tag="Thank You!"
+            title="Order Confirmed!"
+            buttons={[
+              {
+                text: "Continue Browsing",                href: "/"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="The Modern Cut"
+            columns={[
+              {
+                title: "Services",                items: [
+                  { label: "Haircuts", href: "#services" },
+                  { label: "Shaves", href: "#services" },
+                  { label: "Beard Trims", href: "#services" },
+                  { label: "Styling", href: "#services" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "#about" },
+                  { label: "Our Team", href: "#barbers" },
+                  { label: "Pricing", href: "#pricing" },
+                  { label: "Contact", href: "#contact" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 The Modern Cut. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -13,6 +13,7 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import TextAbout from '@/components/sections/about/TextAbout';
+import FaqBase from '@/components/sections/faq/FaqBase';
 
 export default function LandingPage() {
   return (
@@ -44,6 +45,8 @@ export default function LandingPage() {
           name: "Testimonials",          id: "#testimonials"},
         {
           name: "FAQ",          id: "#faq"},
+        {
+          name: "Shoe Care FAQ",          id: "#shoe-faq"},
       ]}
       button={{
         text: "Book Now",        href: "#contact"}}
@@ -69,8 +72,8 @@ export default function LandingPage() {
   <div id="about" data-section="about">
       <TextAbout
       useInvertedBackground={true}
-      tag="Our Legacy"
-      title="Crafting Sharp Looks Since 2005"
+      tag="Our Company Story"
+      title="The Journey of The Modern Cut"
     />
   </div>
 
@@ -184,9 +187,9 @@ export default function LandingPage() {
         {
           id: "6",          title: "My new favorite spot!",          quote: "I tried The Modern Cut on a recommendation and haven't looked back. The best barbershop experience I've had in years. Always leave feeling fresh.",          name: "Frank S.",          role: "Student",          imageSrc: "http://img.b2bpic.net/free-photo/shaving-concept-with-attractive-young-man_23-2148121910.jpg",          imageAlt: "Frank S."},
       ]}
-      title="Voices of Satisfaction"
-      description="Hear directly from our valued clients who trust The Modern Cut for their grooming needs and exceptional service."
-      tag="What Clients Say"
+      title="What Our Patrons Say"
+      description="Read authentic feedback from individuals who have experienced the premium service at The Modern Cut."
+      tag="Customer Reviews"
     />
   </div>
 
@@ -227,17 +230,40 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="shoe-faq" data-section="shoe-faq">
+      <FaqBase
+      textboxLayout="default"
+      useInvertedBackground={false}
+      faqs={[
+        {
+          id: "shoe-faq-1",          title: "What types of shoes do you clean?",          content: "We specialize in cleaning all types of leather shoes, sneakers, boots, and dress shoes. Please note, we do not clean suede or delicate fabrics."},
+        {
+          id: "shoe-faq-2",          title: "How long does shoe cleaning take?",          content: "Standard shoe cleaning typically takes 2-3 business days. More extensive repairs or specialized treatments may take longer."},
+        {
+          id: "shoe-faq-3",          title: "Do you offer shoe shining services?",          content: "Yes, we offer professional shoe shining services using premium polishes and conditioning treatments for a brilliant, long-lasting shine."},
+        {
+          id: "shoe-faq-4",          title: "Can you repair damaged shoes?",          content: "We offer minor repairs such as sole re-gluing, heel cap replacements, and general conditioning. For major repairs, we recommend a specialized cobbler."},
+        {
+          id: "shoe-faq-5",          title: "What are your shoe care prices?",          content: "Our shoe cleaning services start from $20, with shining from $15. Prices vary based on shoe type and condition. Please inquire for a specific quote."},
+      ]}
+      title="Shoe Care & Maintenance FAQs"
+      description="Got questions about keeping your footwear pristine? We've got answers for all your shoe-related queries."
+      tag="Shoe Care"
+      faqsAnimation="slide-up"
+    />
+  </div>
+
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={false}
       background={{
         variant: "plain"}}
-      tag="Ready for a Fresh Look?"
-      title="Book Your Next Appointment"
-      description="Don't wait! Schedule your visit to The Modern Cut today and experience the difference of expert grooming."
+      tag="Customer Service"
+      title="We're Here to Help"
+      description="Reach out to our dedicated support team for any inquiries, appointment changes, or feedback."
       buttons={[
         {
-          text: "Book Online Now",          href: "#"},
+          text: "Send a Message",          href: "mailto:support@themoderncut.com"},
         {
           text: "Call Us: (123) 456-7890",          href: "tel:+1234567890"},
       ]}