Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #4.
This commit is contained in:
97
src/app/cart/page.tsx
Normal file
97
src/app/cart/page.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
"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"
|
||||
description="Review the items in your cart before proceeding to checkout. Your ultimate grooming experience awaits!"
|
||||
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>
|
||||
);
|
||||
}
|
||||
88
src/app/checkout/page.tsx
Normal file
88
src/app/checkout/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
89
src/app/order-confirmation/page.tsx
Normal file
89
src/app/order-confirmation/page.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
"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!"
|
||||
description="Your appointment has been successfully booked. A confirmation email with all the details has been sent to your inbox. We look forward to seeing you!"
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -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"},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user