101 lines
4.8 KiB
TypeScript
101 lines
4.8 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||
|
||
export default function BookingPage() {
|
||
const navItems = [
|
||
{ name: "Home", id: "/" },
|
||
{ name: "Services", id: "/services" },
|
||
{ name: "About", id: "/about" },
|
||
{ name: "Book Now", id: "/booking" },
|
||
{ name: "Contact", id: "/contact" },
|
||
];
|
||
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="icon-arrow"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="rounded"
|
||
contentWidth="medium"
|
||
sizing="medium"
|
||
background="circleGradient"
|
||
cardStyle="glass-depth"
|
||
primaryButtonStyle="flat"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={navItems}
|
||
brandName="Gary Westacott"
|
||
bottomLeftText="Luxury Hair Studio"
|
||
bottomRightText="hello@garywestacott.com"
|
||
/>
|
||
</div>
|
||
|
||
<div id="booking-page-hero" data-section="booking-page-hero">
|
||
<HeroLogoBillboardSplit
|
||
logoText="Book Now"
|
||
description="Secure your appointment with our expert stylists. Choose your service, preferred stylist, and time slot. Available Tuesday–Saturday, 9 AM–6 PM."
|
||
background={{ variant: "circleGradient" }}
|
||
buttons={[
|
||
{ text: "View Calendar", href: "#" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
layoutOrder="default"
|
||
imageSrc="http://img.b2bpic.net/free-photo/side-view-woman-hair-salon_23-2150668447.jpg"
|
||
imageAlt="Salon appointment booking"
|
||
frameStyle="card"
|
||
mediaAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="booking-faq" data-section="booking-faq">
|
||
<FaqSplitText
|
||
faqs={[
|
||
{
|
||
id: "1", title: "How do I book an appointment?", content: "Click 'Book Now' above to access our online booking system. Select your desired service, preferred stylist, date, and time. Appointments are available Tuesday–Saturday, 9 AM–6 PM. You'll receive a confirmation email with all details."
|
||
},
|
||
{
|
||
id: "2", title: "What is your cancellation policy?", content: "We require 24 hours notice for cancellations or rescheduling. Cancellations made with less than 24 hours notice may incur a 50% service fee. We understand emergencies happen—contact us as soon as possible."
|
||
},
|
||
{
|
||
id: "3", title: "Can I request a specific stylist?", content: "Absolutely! Our booking system allows you to select your preferred stylist. Popular stylists may have limited availability, so we recommend booking in advance. First-time clients will be matched with an appropriate stylist."
|
||
},
|
||
{
|
||
id: "4", title: "Do you offer walk-ins?", content: "We prioritize appointments to ensure personalized service. Walk-ins are accommodated based on stylist availability. For guaranteed service, we recommend booking in advance through our online system."
|
||
},
|
||
{
|
||
id: "5", title: "What should I bring to my appointment?", content: "Just yourself! We have all the products and tools needed. If you have specific style inspiration or photos, feel free to bring those. First-time clients should arrive 10 minutes early for a quick consultation."
|
||
},
|
||
{
|
||
id: "6", title: "How long do appointments typically take?", content: "Haircuts usually take 45 minutes, color services 1.5–2 hours, and treatments 30–45 minutes. Our stylists work efficiently to respect your time while ensuring premium results. Exact duration depends on your service and hair complexity."
|
||
},
|
||
]}
|
||
sideTitle="Booking Questions"
|
||
sideDescription="Everything you need to know about scheduling your next salon visit"
|
||
faqsAnimation="slide-up"
|
||
textPosition="left"
|
||
useInvertedBackground={false}
|
||
animationType="smooth"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoReveal
|
||
logoText="Gary Westacott"
|
||
leftLink={{
|
||
text: "Privacy Policy", href: "#"
|
||
}}
|
||
rightLink={{
|
||
text: "Terms of Service", href: "#"
|
||
}}
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
} |