296 lines
16 KiB
TypeScript
296 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#home"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Services", id: "#services"},
|
|
{
|
|
name: "Team", id: "#team"},
|
|
{
|
|
name: "Pricing", id: "#pricing"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Book Now", id: "#book-now"},
|
|
{
|
|
name: "Admin Dashboard", id: "/admin-dashboard"},
|
|
]}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6pl0yg"
|
|
logoAlt="Disorder Barbershop Logo"
|
|
brandName="Disorder Barbershop"
|
|
bottomLeftText="Your Style, Our Craft"
|
|
bottomRightText="book@disorderbarbershop.com"
|
|
button={{
|
|
text: "Book Now", href: "#book-now"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroBillboardRotatedCarousel
|
|
background={{
|
|
variant: "rotated-rays-animated"}}
|
|
title="Precision Cuts. Timeless Style."
|
|
description="Disorder Barbershop offers expert grooming for the modern gentleman. Experience the perfect blend of traditional craft and contemporary flair."
|
|
tag="Your Style, Our Craft"
|
|
buttons={[
|
|
{
|
|
text: "Book Your Appointment", href: "#book-now"},
|
|
]}
|
|
carouselItems={[
|
|
{
|
|
id: "hero-carousel-1", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg", imageAlt: "Barber giving a sharp fade haircut"},
|
|
{
|
|
id: "hero-carousel-2", imageSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506366.jpg", imageAlt: "Client receiving a professional beard trim"},
|
|
{
|
|
id: "hero-carousel-3", imageSrc: "http://img.b2bpic.net/free-photo/person-creating-online-content-with-their-pets_23-2151420269.jpg", imageAlt: "Interior of a modern barber shop with vintage touches"},
|
|
{
|
|
id: "hero-carousel-4", imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-shop-concept_23-2148506365.jpg", imageAlt: "Satisfied client showcasing a fresh haircut"},
|
|
{
|
|
id: "hero-carousel-5", imageSrc: "http://img.b2bpic.net/free-photo/shaving-process-small-dog-sits-table-dog-shaved-by-professional_1157-48803.jpg", imageAlt: "Barber tools neatly arranged on a counter"},
|
|
{
|
|
id: "hero-carousel-6", imageSrc: "http://img.b2bpic.net/free-photo/small-business-manager-his-workshop_23-2149094577.jpg", imageAlt: "Barber focused on detailed cutting"},
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={true}
|
|
title="More Than Just a Haircut"
|
|
description="At Disorder Barbershop, we believe in the art of grooming. Our experienced barber combines classic techniques with modern trends to give you a look that reflects your unique style. Step into our relaxed atmosphere and leave feeling refreshed and confident."
|
|
tag="Our Philosophy"
|
|
buttons={[
|
|
{
|
|
text: "Our Services", href: "#services"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/working-tools-barber-master_651396-126.jpg"
|
|
imageAlt="Barber working on a client in a stylish barbershop"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentySeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f-haircut", title: "Precision Haircuts", descriptions: [
|
|
"Tailored cuts to match your style, face shape, and hair type. Includes consultation, wash, cut, and style."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-near-blurred-stylist_23-2147778876.jpg", imageAlt: "Barber giving a precision haircut"},
|
|
{
|
|
id: "f-beard", title: "Expert Beard Trims", descriptions: [
|
|
"Shape and refine your beard with precision trimming and styling, ensuring a sharp, well-groomed look."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-bearded-customer-looking-up_23-2148256859.jpg", imageAlt: "Barber trimming a client's beard"},
|
|
{
|
|
id: "f-shave", title: "Classic Hot Lather Shaves", descriptions: [
|
|
"Experience the ultimate relaxation with a traditional hot towel and straight razor shave for a smooth finish."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985718.jpg", imageAlt: "Barber performing a hot lather shave"},
|
|
]}
|
|
title="Our Signature Services"
|
|
description="From precision haircuts to luxurious shaves, we offer a full range of grooming services tailored to your needs."
|
|
tag="Grooming Excellence"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
members={[
|
|
{
|
|
id: "m-main-barber", name: "Elijah 'The Blade' Stone", role: "Master Barber & Founder", imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg", imageAlt: "Portrait of Elijah 'The Blade' Stone"},
|
|
{
|
|
id: "m-style-specialist", name: "Creative Stylist", role: "Hair & Beard Artist", imageSrc: "http://img.b2bpic.net/free-photo/side-view-hairstilyst-giving-haircut_23-2148506300.jpg", imageAlt: "Portrait of a creative barber stylist"},
|
|
{
|
|
id: "m-grooming-expert", name: "Grooming Expert", role: "Specialist in Classic Shaves", imageSrc: "http://img.b2bpic.net/free-photo/clueless-young-barber-wearing-uniform-glasses-holding-shaving-brush-hair-trimmer-looking-camera-isolated-blue-background_141793-138279.jpg", imageAlt: "Portrait of a grooming expert"},
|
|
]}
|
|
title="Meet The Barber"
|
|
description="Our passion for grooming is unmatched. With years of experience and a keen eye for detail, we're dedicated to perfecting your look."
|
|
tag="Our Expert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "p-classic", title: "The Classic Cut", price: "$35", period: "Haircut Only", features: [
|
|
"Precision Haircut", "Wash & Style", "Neckline Shave"],
|
|
button: {
|
|
text: "Book Now", href: "#book-now"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1421.jpg", imageAlt: "Illustration of a classic haircut"},
|
|
{
|
|
id: "p-premium", title: "The Premium Groom", price: "$60", period: "Full Experience", features: [
|
|
"Precision Haircut", "Expert Beard Trim", "Hot Lather Finish", "Wash & Style"],
|
|
button: {
|
|
text: "Book Now", href: "#book-now"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/european-tattooed-bearded-exhausted-strong-tired-man-looks-sweaty-after-doing-workout_343596-1179.jpg", imageAlt: "Illustration of a full grooming experience"},
|
|
{
|
|
id: "p-royal", title: "The Royal Shave", price: "$50", period: "Ultimate Relaxation", features: [
|
|
"Traditional Hot Lather Shave", "Facial Steaming", "Aftershave Treatment", "Face Massage"],
|
|
button: {
|
|
text: "Book Now", href: "#book-now"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-putting-shaving-cream-elderly-client-beauty-salon_23-2148182015.jpg", imageAlt: "Illustration of a royal shave"},
|
|
]}
|
|
title="Grooming Packages"
|
|
description="Choose the perfect package to define your style and elevate your grooming routine."
|
|
tag="Our Value"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t-1", name: "Marcus A.", handle: "@MarcusA_Style", testimonial: "Best haircut I've had in years! The attention to detail is incredible, and the atmosphere is top-notch. Highly recommend Disorder Barbershop.", imageSrc: "http://img.b2bpic.net/free-photo/man-looking-away-barber-shop_23-2148353460.jpg", imageAlt: "Client Marcus A."},
|
|
{
|
|
id: "t-2", name: "Javier L.", handle: "@JavierL_Groom", testimonial: "Came in for a beard trim and left with a masterpiece. The barber truly understands facial hair. I won't go anywhere else.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205927.jpg", imageAlt: "Client Javier L."},
|
|
{
|
|
id: "t-3", name: "David P.", handle: "@DavidP_Fresh", testimonial: "The hot lather shave is pure luxury. It's more than just a shave; it's an experience. Feel like a new man every time!", imageSrc: "http://img.b2bpic.net/free-photo/view-child-hair-salon_23-2150462476.jpg", imageAlt: "Client David P."},
|
|
{
|
|
id: "t-4", name: "Ethan K.", handle: "@EthanK_Cuts", testimonial: "Always a fresh cut and great conversation. The online booking is super convenient. Disorder Barbershop sets the standard.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-yellow-scene_23-2148184814.jpg", imageAlt: "Client Ethan K."},
|
|
{
|
|
id: "t-5", name: "Robert S.", handle: "@RobertS_Classic", testimonial: "Found my new regular spot! The quality of the haircut is consistent, and the staff are always friendly and professional. A true gem.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2149220556.jpg", imageAlt: "Client Robert S."},
|
|
]}
|
|
title="What Our Clients Say"
|
|
description="Hear directly from our satisfied customers about their Disorder Barbershop experience."
|
|
tag="Our Community"
|
|
speed={40}
|
|
topMarqueeDirection="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "How do I book an appointment?", content: "You can easily book your appointment online through our 'Book Now' section on the website. Select your desired service, date, and time. Alternatively, you can call us directly."},
|
|
{
|
|
id: "faq-2", title: "Do you accept walk-ins?", content: "While we primarily operate by appointment to ensure personalized service, we do accept walk-ins if there's availability. We recommend booking in advance to secure your preferred time."},
|
|
{
|
|
id: "faq-3", title: "What are your operating hours?", content: "Our operating hours are Monday to Friday, 10 AM - 7 PM, and Saturday, 9 AM - 5 PM. We are closed on Sundays. Please check our booking calendar for specific availability."},
|
|
{
|
|
id: "faq-4", title: "What payment methods do you accept?", content: "We accept all major credit cards, debit cards, and cash payments. Digital payment options may also be available upon request."},
|
|
{
|
|
id: "faq-5", title: "Can I cancel or reschedule my appointment?", content: "Yes, you can cancel or reschedule your appointment up to 24 hours in advance through your online booking account or by contacting us directly. Cancellations within 24 hours may incur a fee."},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our services, booking, and more."
|
|
tag="Got Questions?"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="book-now" data-section="book-now">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
tag="Ready for a Fresh Look?"
|
|
title="Book Your Next Appointment"
|
|
description="Our online calendar makes it easy to find a time that works for you. Select your service, pick a date, and let us handle the rest. We look forward to seeing you!"
|
|
buttons={[
|
|
{
|
|
text: "Go to Booking Calendar", href: "https://example.com/barber-booking"},
|
|
{
|
|
text: "Find Us on Map", href: "https://maps.app.goo.gl/sqSYQHrD8rSumyvE9?g_st=ic"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6pl0yg"
|
|
logoAlt="Disorder Barbershop Logo"
|
|
logoText="Disorder Barbershop"
|
|
columns={[
|
|
{
|
|
title: "Navigation", items: [
|
|
{
|
|
label: "Home", href: "#home"},
|
|
{
|
|
label: "Services", href: "#services"},
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Pricing", href: "#pricing"},
|
|
{
|
|
label: "Admin Dashboard", href: "/admin-dashboard"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Book Online", href: "https://example.com/barber-booking"},
|
|
{
|
|
label: "Contact Us", href: "#book-now"},
|
|
],
|
|
},
|
|
{
|
|
title: "Location", items: [
|
|
{
|
|
label: "View on Map", href: "https://maps.app.goo.gl/sqSYQHrD8rSumyvE9?g_st=ic"},
|
|
{
|
|
label: "123 Grooming Lane, Cityville", href: "#"},
|
|
{
|
|
label: "Mon-Sat: 9AM - 7PM", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Disorder Barbershop. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |