408 lines
13 KiB
TypeScript
408 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-bubble"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="pill"
|
||
contentWidth="smallMedium"
|
||
sizing="largeSmallSizeLargeTitles"
|
||
background="fluid"
|
||
cardStyle="inset"
|
||
primaryButtonStyle="radial-glow"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
navItems={[
|
||
{
|
||
name: "Home",
|
||
id: "hero",
|
||
},
|
||
{
|
||
name: "Services",
|
||
id: "services",
|
||
},
|
||
{
|
||
name: "Gallery",
|
||
id: "gallery",
|
||
},
|
||
{
|
||
name: "Contact",
|
||
id: "contact",
|
||
},
|
||
]}
|
||
brandName="Blackbeard Gents Salon"
|
||
button={{
|
||
text: "Book Now",
|
||
href: "#contact",
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardTestimonial
|
||
background={{
|
||
variant: "radial-gradient",
|
||
}}
|
||
title="Dubai’s Most Trusted Barbershop Experience"
|
||
description="Precision cuts. Clean fades. Book in seconds. Consistent results you can trust every single time."
|
||
testimonials={[
|
||
{
|
||
name: "Ahmed K.",
|
||
handle: "@ahmedk",
|
||
testimonial: "Mahdi is the best in Dubai. Always consistent and very detailed. Highly recommended.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/shaving-process-small-dog-sits-table-dog-shaved-by-professional_1157-48806.jpg?_wi=1",
|
||
imageAlt: "luxury barber shop dark interior",
|
||
},
|
||
{
|
||
name: "David S.",
|
||
handle: "@davids",
|
||
testimonial: "Finally found a place that listens. The fade was exactly what I wanted. Professional atmosphere.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/male-hipster-hairdresser-working-with-beard-senior-client_23-2148181893.jpg?_wi=1",
|
||
imageAlt: "luxury barber shop dark interior",
|
||
},
|
||
{
|
||
name: "Omar F.",
|
||
handle: "@omarf",
|
||
testimonial: "Consistently great cuts. Mahdi knows his craft well. The shop is clean and modern.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/silver-machine-haircut_140725-8078.jpg?_wi=1",
|
||
imageAlt: "luxury barber shop dark interior",
|
||
},
|
||
{
|
||
name: "Jean-Marc L.",
|
||
handle: "@jmarc",
|
||
testimonial: "Best beard trim in town. Luxury service, great environment.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-4252.jpg?_wi=1",
|
||
imageAlt: "luxury barber shop dark interior",
|
||
},
|
||
{
|
||
name: "Khalid M.",
|
||
handle: "@khalidm",
|
||
testimonial: "Premium experience from start to finish. Definitely coming back.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg?_wi=1",
|
||
imageAlt: "luxury barber shop dark interior",
|
||
},
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "Book Appointment",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
text: "Call Now",
|
||
href: "tel:+971500000000",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/shaving-process-small-dog-sits-table-dog-shaved-by-professional_1157-48806.jpg?_wi=2"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/beautiful-dog-women-house_23-2148777179.jpg",
|
||
alt: "Client 1",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/shaving-process-small-dog-sits-table-dog-shaved-by-professional_1157-48802.jpg",
|
||
alt: "Client 2",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/close-up-female-vet-hand-examining-dog-flea-with-comb-clinic_23-2147928587.jpg",
|
||
alt: "Client 3",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2900.jpg",
|
||
alt: "Client 4",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/man-with-foam-face-barbershop_23-2147737009.jpg",
|
||
alt: "Client 5",
|
||
},
|
||
]}
|
||
marqueeItems={[
|
||
{
|
||
type: "text",
|
||
text: "Premium Grooming",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Expert Barbers",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Luxury Experience",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Dubai Best Rated",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Precision Cuts",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="social-proof" data-section="social-proof">
|
||
<SocialProofOne
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
names={[
|
||
"Google Maps",
|
||
"TripAdvisor",
|
||
"Yelp",
|
||
"Facebook",
|
||
"Instagram",
|
||
"Dubai Business",
|
||
"Men's Health",
|
||
]}
|
||
title="Trusted by 199+ Satisfied Clients"
|
||
description="Join our community of men who value precision and style."
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardMedia
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "s1",
|
||
title: "Precision Haircut",
|
||
description: "Classic or modern styles. Sharp fades to perfection.",
|
||
tag: "Popular",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/male-hipster-hairdresser-working-with-beard-senior-client_23-2148181893.jpg?_wi=2",
|
||
},
|
||
{
|
||
id: "s2",
|
||
title: "Beard Trim",
|
||
description: "Expert shape-up and contouring for the perfect finish.",
|
||
tag: "Premium",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/silver-machine-haircut_140725-8078.jpg?_wi=2",
|
||
},
|
||
{
|
||
id: "s3",
|
||
title: "Full Grooming",
|
||
description: "Complete service including hair, beard, and styling.",
|
||
tag: "Must-Try",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-4252.jpg?_wi=2",
|
||
},
|
||
]}
|
||
title="Our Professional Services"
|
||
description="Expert grooming tailored to your style preferences."
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-choose-us" data-section="why-choose-us">
|
||
<MetricSplitMediaAbout
|
||
useInvertedBackground={false}
|
||
title="Why Choose Blackbeard?"
|
||
description="We blend professional skill with a premium environment. Our focus is on consistency, attention to detail, and a relaxed, welcoming atmosphere for every gentleman."
|
||
metrics={[
|
||
{
|
||
value: "10+ Years",
|
||
title: "Experience",
|
||
},
|
||
{
|
||
value: "4.5★",
|
||
title: "Avg. Rating",
|
||
},
|
||
{
|
||
value: "199+",
|
||
title: "Reviews",
|
||
},
|
||
]}
|
||
mediaAnimation="slide-up"
|
||
metricsAnimation="slide-up"
|
||
imageSrc="http://img.b2bpic.net/free-photo/male-barber-giving-his-client-nice-haircut_23-2149186479.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div id="gallery" data-section="gallery">
|
||
<ProductCardFour
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="four-items-2x2-equal-grid"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "g1",
|
||
name: "Interior View",
|
||
price: "",
|
||
variant: "Gallery",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg?_wi=2",
|
||
},
|
||
{
|
||
id: "g2",
|
||
name: "Style Result",
|
||
price: "",
|
||
variant: "Haircut",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-child-hair-salon_23-2150462476.jpg",
|
||
},
|
||
{
|
||
id: "g3",
|
||
name: "Details",
|
||
price: "",
|
||
variant: "Tools",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313027.jpg",
|
||
},
|
||
{
|
||
id: "g4",
|
||
name: "Client Result",
|
||
price: "",
|
||
variant: "Styling",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/pensive-thoughtful-concentrated-two-men-hold-chins-try-find-right-solution-make-plans_273609-16966.jpg",
|
||
},
|
||
]}
|
||
title="Our Work & Environment"
|
||
description="Take a look at the precision and quality we deliver daily."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardFifteen
|
||
useInvertedBackground={false}
|
||
testimonial="Mahdi transformed my look completely. Never had a fade this precise before. High-end service and friendly staff, unlike other places where you wait for hours."
|
||
rating={5}
|
||
author="Mahmoud S."
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/muscular-man-arrives-ski-complex_482257-76574.jpg",
|
||
alt: "Client",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4243.jpg",
|
||
alt: "Client",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/tools-from-barbershop-wooden-background_1303-10377.jpg",
|
||
alt: "Client",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/hairclips-scissors-bag_23-2147778856.jpg",
|
||
alt: "Client",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/worldface-italian-guy-white-background_53876-148047.jpg",
|
||
alt: "Client",
|
||
},
|
||
]}
|
||
ratingAnimation="slide-up"
|
||
avatarsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqBase
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "f1",
|
||
title: "Do I need to book an appointment?",
|
||
content: "While walk-ins are welcome, we recommend booking online to ensure your preferred barber is available.",
|
||
},
|
||
{
|
||
id: "f2",
|
||
title: "Can I request a specific barber?",
|
||
content: "Absolutely. You can request Mahdi or any other available barber during the booking process.",
|
||
},
|
||
{
|
||
id: "f3",
|
||
title: "What are your opening hours?",
|
||
content: "We are open daily from 10:00 AM to 10:00 PM to accommodate your busy schedule.",
|
||
},
|
||
]}
|
||
title="Common Questions"
|
||
description="Everything you need to know about our grooming services."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplit
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "plain",
|
||
}}
|
||
tag="Booking"
|
||
title="Ready for your next clean cut?"
|
||
description="Book your appointment or get in touch with us through WhatsApp for faster responses."
|
||
imageSrc="http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg"
|
||
mediaAnimation="slide-up"
|
||
buttonText="Book Now"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseCard
|
||
logoText="Blackbeard Gents Salon"
|
||
columns={[
|
||
{
|
||
title: "Company",
|
||
items: [
|
||
{
|
||
label: "About Us",
|
||
href: "#why-choose-us",
|
||
},
|
||
{
|
||
label: "Contact",
|
||
href: "#contact",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Services",
|
||
items: [
|
||
{
|
||
label: "Haircut",
|
||
href: "#services",
|
||
},
|
||
{
|
||
label: "Beard Trim",
|
||
href: "#services",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Follow",
|
||
items: [
|
||
{
|
||
label: "Instagram",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "WhatsApp",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|