333 lines
16 KiB
TypeScript
333 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||
import { Award, CalendarCheck, Coffee, Droplet, MapPin, Scissors, Sparkles, Star } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="icon-arrow"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="soft"
|
||
contentWidth="compact"
|
||
sizing="large"
|
||
background="circleGradient"
|
||
cardStyle="soft-shadow"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "#home"},
|
||
{
|
||
name: "About", id: "#about"},
|
||
{
|
||
name: "Services", id: "#services"},
|
||
{
|
||
name: "Why Us", id: "#why-us"},
|
||
{
|
||
name: "Reviews", id: "#reviews"},
|
||
{
|
||
name: "Booking", id: "#booking"},
|
||
{
|
||
name: "Contact", id: "#contact-info"},
|
||
]}
|
||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=76qqiw"
|
||
logoAlt="Deluxe Barbers Logo"
|
||
brandName="Deluxe Barbers"
|
||
bottomLeftText="Precision Cuts"
|
||
bottomRightText="Premium Service"
|
||
button={{
|
||
text: "Book Now", href: "#booking"}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroBillboardRotatedCarousel
|
||
background={{
|
||
variant: "rotated-rays-static-grid"}}
|
||
title="Deluxe Barbers – Precision Cuts, Premium Service"
|
||
description="Experience expert barbering, modern styles, and traditional craftsmanship."
|
||
buttons={[
|
||
{
|
||
text: "Book an Appointment", href: "https://booksy.com/en-gb/28915_delux-barbers_barber_234686_st-albans?rwg_token=AFd1xnHel83pCOdvAdFoI4kMOlCsiE8KU1-ut_hk2uFUgopHb_1TUsaUa62gF8bJwMBhL3rFR-iZBfMADSXffQu3DePlrTVMig%3D%3DLOCKED_SELECTION"},
|
||
{
|
||
text: "Call Now", href: "tel:+441727569459"},
|
||
]}
|
||
carouselItems={[
|
||
{
|
||
id: "hero-item-1", imageSrc: "http://img.b2bpic.net/free-photo/barber-corrects-guy-s-beard_140725-7665.jpg", imageAlt: "Barber giving a precision haircut to a client"},
|
||
{
|
||
id: "hero-item-2", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-getting-groomed_23-2150668469.jpg", imageAlt: "Client enjoying a relaxing hot towel shave"},
|
||
{
|
||
id: "hero-item-3", imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-shaving-neck-customer_23-2147778915.jpg", imageAlt: "Barber meticulously trimming a client's beard"},
|
||
{
|
||
id: "hero-item-4", imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-chair-vintage-barber-shop_23-2148298304.jpg", imageAlt: "Modern and luxurious interior of Deluxe Barbers"},
|
||
{
|
||
id: "hero-item-5", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-getting-haircut_23-2150668459.jpg", imageAlt: "Barber performing a sharp skin fade with clippers"},
|
||
{
|
||
id: "hero-item-6", imageSrc: "http://img.b2bpic.net/free-photo/view-child-hair-salon_23-2150462476.jpg", imageAlt: "Satisfied client admiring his fresh haircut in the mirror"},
|
||
]}
|
||
autoPlay={true}
|
||
autoPlayInterval={4000}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<MediaAbout
|
||
useInvertedBackground={true}
|
||
title="Our Legacy of Excellence in Grooming"
|
||
description="Deluxe Barbers is a premium barbershop dedicated to providing exceptional grooming services in a welcoming and professional environment. Our skilled barbers specialize in modern haircuts, classic styles, skin fades, beard grooming, and hot towel shaves. We focus on precision, quality, and customer satisfaction, ensuring every client leaves looking and feeling their best."
|
||
imageSrc="http://img.b2bpic.net/free-photo/hairstylist-giving-haircut-customer_23-2148506233.jpg"
|
||
imageAlt="Barber giving a classic haircut in a professional setting"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardTwentyOne
|
||
useInvertedBackground={false}
|
||
title="Crafting Your Perfect Look"
|
||
description="Explore our curated range of services, from timeless cuts to modern grooming, all delivered with meticulous attention to detail."
|
||
accordionItems={[
|
||
{
|
||
id: "service-1", title: "Classic Haircut", content: "A timeless cut tailored to your personal style, ensuring a sharp and polished finish."},
|
||
{
|
||
id: "service-2", title: "Skin Fade", content: "Achieve a sleek, modern look with our precision skin fades, perfectly blended for a clean transition."},
|
||
{
|
||
id: "service-3", title: "Beard Trim & Shape Up", content: "Expert grooming to sculpt and refine your beard, enhancing your facial features with a sharp outline."},
|
||
{
|
||
id: "service-4", title: "Hot Towel Shave", content: "Indulge in the ultimate traditional shaving experience for incredibly smooth and refreshed skin."},
|
||
{
|
||
id: "service-5", title: "Hair Styling", content: "Professional styling services to complement your fresh cut, ensuring you leave with the perfect finish."},
|
||
{
|
||
id: "service-6", title: "Kids Haircuts", content: "Stylish and comfortable haircuts for our younger gentlemen, ensuring they look sharp and feel confident."},
|
||
{
|
||
id: "service-7", title: "Premium Grooming Packages", content: "Discover our exclusive packages that combine multiple services for a complete deluxe grooming experience."},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/composition-shaving-objects_23-2148122054.jpg"
|
||
imageAlt="Close up of barber shaving a client with a straight razor"
|
||
mediaAnimation="slide-up"
|
||
mediaPosition="left"
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-us" data-section="why-us">
|
||
<MetricCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={true}
|
||
metrics={[
|
||
{
|
||
id: "metric-1", value: "10+", title: "Experienced Barbers", description: "Our team consists of highly skilled and seasoned professionals dedicated to their craft.", icon: Scissors,
|
||
},
|
||
{
|
||
id: "metric-2", value: "Top-tier", title: "Premium Products", description: "We use only the finest grooming products to ensure superior results and hair health.", icon: Droplet,
|
||
},
|
||
{
|
||
id: "metric-3", value: "5-Star", title: "Relaxing Atmosphere", description: "Enjoy a comfortable and welcoming environment designed for your ultimate relaxation.", icon: Coffee,
|
||
},
|
||
{
|
||
id: "metric-4", value: "Central", title: "Convenient Location", description: "Easily accessible in St Albans, making your visit hassle-free.", icon: MapPin,
|
||
},
|
||
{
|
||
id: "metric-5", value: "100%", title: "Customer Satisfaction", description: "Our commitment to quality ensures every client leaves looking and feeling their best.", icon: Star,
|
||
},
|
||
{
|
||
id: "metric-6", value: "Flexible", title: "Booking Options", description: "Walk-ins are welcome, and online booking is available for your convenience.", icon: CalendarCheck,
|
||
},
|
||
]}
|
||
title="Why Deluxe Barbers Stands Apart"
|
||
description="We don't just cut hair; we craft experiences. Discover the difference of true professional grooming at Deluxe Barbers."
|
||
/>
|
||
</div>
|
||
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
carouselMode="buttons"
|
||
testimonials={[
|
||
{
|
||
id: "test-1", name: "James R.", role: "Regular Client", company: "St Albans", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg"},
|
||
{
|
||
id: "test-2", name: "Michael T.", role: "Local Resident", company: "St Albans", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-bearded-man-with-white-smile-standing-casual-clothes-white-background_176420-50111.jpg"},
|
||
{
|
||
id: "test-3", name: "David S.", role: "Business Professional", company: "Hertfordshire", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-wearing-suit-bow-tie_613910-2006.jpg"},
|
||
{
|
||
id: "test-4", name: "Chris W.", role: "New Customer", company: "St Albans", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-indian-male-dressed-winter-jacket-grey-background_613910-1698.jpg"},
|
||
{
|
||
id: "test-5", name: "Robert L.", role: "Loyal Patron", company: "Hertfordshire", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portait-handsome-european-elderly-man-smiles-positively-enjoys-retirement-wears-shirt-spectacles-has-perfect-white-teeth-isolated-beige-studio-wall_273609-44196.jpg"},
|
||
]}
|
||
title="Our Valued Clients Speak"
|
||
description="See why Deluxe Barbers is the preferred choice for discerning gentlemen seeking exceptional grooming."
|
||
/>
|
||
</div>
|
||
|
||
<div id="booking" data-section="booking">
|
||
<PricingCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
carouselMode="buttons"
|
||
plans={[
|
||
{
|
||
id: "plan-1", badge: "Popular", badgeIcon: Sparkles,
|
||
price: "£35", subtitle: "The Classic Gentleman", buttons: [
|
||
{
|
||
text: "Book Now", href: "#contact-info"},
|
||
],
|
||
features: [
|
||
"Classic Haircut", "Precision Styling", "Complimentary Drink"],
|
||
},
|
||
{
|
||
id: "plan-2", badge: "Signature", badgeIcon: Star,
|
||
price: "£50", subtitle: "The Modern Edge", buttons: [
|
||
{
|
||
text: "Book Now", href: "#contact-info"},
|
||
],
|
||
features: [
|
||
"Skin Fade or Modern Cut", "Beard Trim & Shape Up", "Premium Hair Product"],
|
||
},
|
||
{
|
||
id: "plan-3", badge: "Ultimate", badgeIcon: Award,
|
||
price: "£75", subtitle: "The Full Deluxe", buttons: [
|
||
{
|
||
text: "Book Now", href: "#contact-info"},
|
||
],
|
||
features: [
|
||
"Signature Haircut", "Hot Towel Shave", "Beard Grooming", "Facial Treatment"],
|
||
},
|
||
]}
|
||
title="Booksy Link for Prices"
|
||
description="Select your preferred service package, pick your barber, and choose a convenient date and time. Instant confirmation awaits!"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact-info" data-section="contact-info">
|
||
<FaqSplitMedia
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "hour-1", title: "Monday", content: "9:00 AM – 7:00 PM"},
|
||
{
|
||
id: "hour-2", title: "Tuesday", content: "9:00 AM – 7:00 PM"},
|
||
{
|
||
id: "hour-3", title: "Wednesday", content: "9:00 AM – 7:00 PM"},
|
||
{
|
||
id: "hour-4", title: "Thursday", content: "9:00 AM – 7:00 PM"},
|
||
{
|
||
id: "hour-5", title: "Friday", content: "9:00 AM – 7:00 PM"},
|
||
{
|
||
id: "hour-6", title: "Saturday", content: "8:00 AM – 6:00 PM"},
|
||
{
|
||
id: "hour-7", title: "Sunday", content: "Closed"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/finding-out-shortest-way-back_329181-13761.jpg"
|
||
imageAlt="Google Map showing Deluxe Barbers location at 114 London Rd, St Albans"
|
||
mediaAnimation="slide-up"
|
||
mediaPosition="right"
|
||
title="Visit Us or Get in Touch"
|
||
description="We're conveniently located in the heart of St Albans. Drop by, call us, or use our online booking for any inquiries."
|
||
buttons={[
|
||
{
|
||
text: "Call Us: +44 1727 569459", href: "tel:+441727569459"},
|
||
{
|
||
text: "Get Directions", href: "https://www.google.com/maps/search/114+London+Rd,+St+Albans+AL1+1NX,+United+Kingdom"},
|
||
]}
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCenter
|
||
useInvertedBackground={true}
|
||
background={{
|
||
variant: "rotated-rays-static-grid"}}
|
||
tag="Stay Connected"
|
||
title="Join the Deluxe Barbers Community"
|
||
description="Sign up for exclusive offers, grooming tips, and updates from Deluxe Barbers. We respect your privacy and will never spam you."
|
||
inputPlaceholder="Enter your email"
|
||
buttonText="Subscribe Now"
|
||
termsText="By clicking Subscribe Now you're confirming that you agree with our Privacy Policy."
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoEmphasis
|
||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=76qqiw"
|
||
logoAlt="Deluxe Barbers Logo"
|
||
columns={[
|
||
{
|
||
items: [
|
||
{
|
||
label: "Home", href: "#home"},
|
||
{
|
||
label: "About Us", href: "#about"},
|
||
{
|
||
label: "Services", href: "#services"},
|
||
{
|
||
label: "Book Now", href: "#booking"},
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{
|
||
label: "Phone: +44 1727 569459", href: "tel:+441727569459"},
|
||
{
|
||
label: "Address: 114 London Rd, St Albans AL1 1NX", href: "https://www.google.com/maps/search/114+London+Rd,+St+Albans+AL1+1NX,+United+Kingdom"},
|
||
{
|
||
label: "Email: info@deluxebarbers.co.uk", href: "mailto:info@deluxebarbers.co.uk"},
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{
|
||
label: "Mon-Fri: 9 AM - 7 PM", href: "#contact-info"},
|
||
{
|
||
label: "Sat: 8 AM - 6 PM", href: "#contact-info"},
|
||
{
|
||
label: "Sun: Closed", href: "#contact-info"},
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{
|
||
label: "Instagram", href: "https://instagram.com/deluxebarbers"},
|
||
{
|
||
label: "Facebook", href: "https://facebook.com/deluxebarbers"},
|
||
{
|
||
label: "TikTok", href: "https://tiktok.com/@deluxebarbers"},
|
||
],
|
||
},
|
||
]}
|
||
logoText="Deluxe Barbers"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
} |