165 lines
6.8 KiB
TypeScript
165 lines
6.8 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import Link from "next/link";
|
|
import { CheckCircle, HelpCircle, MessageCircle } from "lucide-react";
|
|
|
|
export default function BookingPage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Gallery", id: "gallery" },
|
|
{ name: "Booking", id: "booking" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
items: [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "About", href: "/about" },
|
|
{ label: "Services", href: "/services" },
|
|
{ label: "Gallery", href: "/gallery" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Booking", href: "/booking" },
|
|
{ label: "Contact", href: "/contact" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms & Conditions", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Email", href: "mailto:hello@ropewalk-tattoo.com" },
|
|
{ label: "Phone", href: "tel:+441797000000" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Follow Us", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="grid"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="Rope Walk Tattoo Lounge"
|
|
bottomLeftText="Rye, East Sussex"
|
|
bottomRightText="hello@ropewalk-tattoo.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero-booking" data-section="hero-booking">
|
|
<HeroSplitDoubleCarousel
|
|
title="Book Your Appointment"
|
|
description="Ready to get your next tattoo or piercing? Follow our booking process to secure your appointment with one of our expert artists."
|
|
background={{ variant: "plain" }}
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/reflection-bearded-man-barbershop-mirror_1304-2779.jpg?_wi=3",
|
|
imageAlt: "Tattoo booking",
|
|
},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-close-view-young-girl-happily-smiling-light-pink_179666-1671.jpg?_wi=2",
|
|
imageAlt: "Piercing booking",
|
|
},
|
|
]}
|
|
tag="Booking Process"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
carouselPosition="right"
|
|
ariaLabel="Booking page hero"
|
|
/>
|
|
</div>
|
|
|
|
<div id="booking-faq" data-section="booking-faq">
|
|
<FaqBase
|
|
title="How to Book"
|
|
description="Everything you need to know about booking your tattoo or piercing appointment at Rope Walk Tattoo Lounge."
|
|
tag="Booking Guide"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "faq-1",
|
|
title: "What information should I provide when booking?",
|
|
content: "When messaging us to book, please include: your tattoo idea or piercing preference, desired size and placement, reference images if available, and your preferred appointment date. This helps our artists prepare and ensure they're the right fit for your vision.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
title: "How do I submit a consultation request?",
|
|
content: "Send us a direct message on Instagram or email hello@ropewalk-tattoo.com with your design concept, placement, and any reference images. Our artists will respond within 48 hours to discuss your project and schedule a consultation if needed.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
title: "What's the deposit policy?",
|
|
content: "We require a non-refundable deposit of 50% at the time of booking to secure your appointment. The remaining balance is due on the day of your session. This ensures commitment from both parties.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
title: "Can I bring reference images?",
|
|
content: "Absolutely! We encourage you to bring reference images. Our artists use these as inspiration to create something unique for you. The more references you provide, the better we can understand your vision.",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
title: "How long does a typical session take?",
|
|
content: "Session length varies depending on design complexity and size. Small tattoos typically take 30 minutes to 2 hours, medium pieces 2-4 hours, and larger designs may require multiple sessions. Piercings usually take 10-30 minutes depending on type.",
|
|
},
|
|
{
|
|
id: "faq-6",
|
|
title: "What's your aftercare policy?",
|
|
content: "We provide detailed written aftercare instructions with every tattoo and piercing. Proper aftercare is crucial for healing and longevity. We're always available to answer questions during the healing process.",
|
|
},
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-form-booking" data-section="contact-form-booking">
|
|
<ContactCenter
|
|
tag="Get in Touch"
|
|
title="Send Us Your Ideas"
|
|
description="Message us with your tattoo concept, piercing preference, or any questions. Our team will respond quickly to get you booked."
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Send Message"
|
|
termsText="By clicking Send Message you're confirming that you agree with our Terms and Conditions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer-booking" data-section="footer-booking">
|
|
<FooterLogoEmphasis
|
|
logoText="Rope Walk Tattoo Lounge"
|
|
columns={footerColumns}
|
|
ariaLabel="Booking page footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |