289 lines
12 KiB
TypeScript
289 lines
12 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 FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
|
|
export default function LandingPage() {
|
|
const bookingUrl = "https://tinyurl.com/2kr8jy37";
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "/"},
|
|
{
|
|
name: "Services", id: "/services"},
|
|
{
|
|
name: "Products", id: "/products"},
|
|
{
|
|
name: "Prices", id: "/#pricing"},
|
|
{
|
|
name: "Franchise", id: "/franchise"},
|
|
{
|
|
name: "Blog", id: "/blog" },
|
|
{
|
|
name: "Contact", id: "/#contact"}
|
|
]}
|
|
brandName="Doc Barnet Grooming Salon"
|
|
button={{
|
|
text: "BOOK NOW", href: bookingUrl}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Experience Our Full Range of Premium Grooming Services"
|
|
description="From precision gentlemen's haircuts and elegant ladies' styling to expert beard grooming and rejuvenating facial treatments, discover unparalleled quality and care at Doc Barnet Grooming Salon."
|
|
buttons={[
|
|
{
|
|
text: "BOOK NOW", href: bookingUrl},
|
|
{
|
|
text: "VIEW SERVICES", href: "#services"},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1778093237434-05qgab2c.jpg"
|
|
imageAlt="Doc Barnet Luxury Salon"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{
|
|
type: "text", content: "THE DOC BARNET EXPERIENCE"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg", alt: "Barber at work"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "DISCOVER MORE", href: "#services"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Gents Haircuts", description: "Precision styling tailored to your unique look.", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-fashionable-modern-male-grey-t-shirt_613910-532.jpg", imageAlt: "Gents Haircut"},
|
|
{
|
|
title: "Ladies Styling", description: "Wash, cut, and blow dry services for sophisticated style.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/tmp/hairstyle-holding-hair-drayer-1779125588683-ef4b646b.png", imageAlt: "Ladies Styling"},
|
|
{
|
|
title: "Beard & Facial", description: "Expert beard shaping, hot towel shaves, and facial treatments.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1779125338765-fdbqo198.jpg", imageAlt: "Facial treatment"},
|
|
]}
|
|
title="PREMIUM SERVICES"
|
|
description="Comprehensive grooming and hair solutions for gentlemen and ladies."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "p1", badge: "Most Popular", price: "£19.99", subtitle: "Premium Haircut & Styling", buttons: [
|
|
{
|
|
text: "Book Now", href: bookingUrl},
|
|
],
|
|
features: [
|
|
"Consultation", "Precision Cut", "Style Advice", "Finish"],
|
|
},
|
|
{
|
|
id: "p2", badge: "Essential", price: "£45", subtitle: "Cut, Wash & Blow Dry", buttons: [
|
|
{
|
|
text: "Book Now", href: bookingUrl},
|
|
],
|
|
features: [
|
|
"Head Massage", "Professional Cut", "Styling"],
|
|
},
|
|
{
|
|
id: "p3", badge: "Luxury", price: "£85", subtitle: "Balayage & Treatment", buttons: [
|
|
{
|
|
text: "Book Now", href: bookingUrl},
|
|
],
|
|
features: [
|
|
"Consultation", "Expert Colour", "Treatment", "Finish"],
|
|
},
|
|
]}
|
|
title="PRICE LIST"
|
|
description="Transparent pricing for world-class grooming."
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "g1", name: "Classic Fade", brand: "Styling", price: "Transformation", rating: 5,
|
|
reviewCount: "2024", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18649.jpg"},
|
|
{
|
|
id: "g2", name: "Balayage", brand: "Colour", price: "Transformation", rating: 5,
|
|
reviewCount: "2024", imageSrc: "http://img.b2bpic.net/free-photo/woman-wears-grey-hair-wig_633478-1316.jpg"},
|
|
{
|
|
id: "g3", name: "Salon Interior", brand: "Style", price: "Luxury Space", rating: 5,
|
|
reviewCount: "2024", imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg"},
|
|
{
|
|
id: "g4", name: "Lighting Design", brand: "Design", price: "Atmosphere", rating: 5,
|
|
reviewCount: "2024", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-barber-s-instruments-shop_23-2149186524.jpg"},
|
|
{
|
|
id: "g5", name: "Tools", brand: "Precision", price: "Detail", rating: 5,
|
|
reviewCount: "2024", imageSrc: "http://img.b2bpic.net/free-photo/model-career-kit-still-life-top-view_23-2150217977.jpg"},
|
|
{
|
|
id: "g6", name: "Blow Dry", brand: "Styling", price: "Treatment", rating: 5,
|
|
reviewCount: "2024", imageSrc: "http://img.b2bpic.net/free-photo/woman-drying-hair-hairsalon_1157-27184.jpg"},
|
|
]}
|
|
title="OUR WORK"
|
|
description="Visual highlights from our salon floor."
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah H.", role: "Client", company: "Local Resident", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-male-model-man-dressed-elegant-suit-black-studio-lights-background_158538-9659.jpg"},
|
|
{
|
|
id: "2", name: "David L.", role: "Client", company: "Businessman", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021828.jpg"},
|
|
{
|
|
id: "3", name: "Emily B.", role: "Client", company: "Frequent Visitor", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18291.jpg"},
|
|
{
|
|
id: "4", name: "John D.", role: "Client", company: "Styling Enthusiast", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-barbershop-with-classic-styling_618663-34.jpg"},
|
|
{
|
|
id: "5", name: "Clara R.", role: "Client", company: "New Guest", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/two-businessman-discussing-their-chart-coffee-shop_1150-6422.jpg"},
|
|
]}
|
|
kpiItems={[
|
|
{
|
|
value: "17+", label: "Years Experience"},
|
|
{
|
|
value: "5000+", label: "Happy Clients"},
|
|
{
|
|
value: "100%", label: "Satisfaction Rate"},
|
|
]}
|
|
title="WHAT OUR CLIENTS SAY"
|
|
description="We pride ourselves on the highest standards of service and style."
|
|
/>
|
|
</div>
|
|
|
|
<div id="offer" data-section="offer">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
tag="LIMITED OFFER"
|
|
title="20% OFF YOUR FIRST VISIT"
|
|
description="TUSDAY ONLY CODE: DOCBARNET20 "
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "Opening Hours", content: "Mon-Sat: 9am - 7pm | Sun: 10am - 4pm"},
|
|
{
|
|
id: "f2", title: "Appointments", content: "01452 224220 / 07495 044457"},
|
|
{
|
|
id: "f3", title: "Location", content: "Gloucester Quays Designer Outlet"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/hairdressing-equipment-white-background_23-2147711627.jpg"
|
|
mediaAnimation="slide-up"
|
|
title="VISIT US"
|
|
description="Unit 67, Gloucester Quays Designer Outlet, Gloucester GL1 5SH"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DMGxfgFdRWLXzYqe2HfYt6JE4x/uploaded-1778094604107-kwe3q62f.jpg?_wi=1"
|
|
logoText="DOC BARNET"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Gents Hair", href: "/services"},
|
|
{
|
|
label: "Ladies Cut", href: "/services"},
|
|
{
|
|
label: "Beard Grooming", href: "/services"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "/#about"},
|
|
{
|
|
label: "Contact", href: "/#contact"},
|
|
{
|
|
label: "Book Now", href: bookingUrl},
|
|
{
|
|
label: "Products", href: "/products"},
|
|
{
|
|
label: "Blog", href: "/blog"},
|
|
{
|
|
label: "Franchise", href: "/franchise"},
|
|
],
|
|
},
|
|
{
|
|
title: "Social", items: [
|
|
{
|
|
label: "Instagram", href: "https://www.instagram.com/docbarnet?igsh=MWMwdHBnamFibXc3Yw%3D%3D&utm_source=qr"},
|
|
{
|
|
label: "Facebook", href: "#"},
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |