365 lines
19 KiB
TypeScript
365 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import { CheckCircle, DollarSign, Heart, Scissors, Star, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLarge"
|
|
background="noise"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "/"},
|
|
{
|
|
name: "Why Choose Us", id: "#why-choose-us"},
|
|
{
|
|
name: "Services", id: "#services"},
|
|
{
|
|
name: "Gallery", id: "#gallery"},
|
|
{
|
|
name: "Process", id: "#process"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
]}
|
|
brandName="UNCLE ALI BARBERSHOP"
|
|
button={{
|
|
text: "Book Your Cut", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
background={{
|
|
variant: "downward-rays-animated"}}
|
|
title="Look Sharp. Feel Confident."
|
|
description="Precision haircuts, expert fades, and professional styling from barbers who listen.\nTrusted by hundreds of customers for quality cuts, friendly service, and unbeatable value."
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/successful-smiling-blond-bearded-man-happily-posing-camera-white-background-happy-expression_574295-5469.jpg", alt: "Customer 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/closeup-confident-businessman-turn-face-camera-smiling-selfassured-standing-white-backgro_1258-113227.jpg", alt: "Customer 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/business-people-working-office-with-digital-tablet_1301-6633.jpg", alt: "Customer 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/successful-happy-business-team_53876-15206.jpg", alt: "Customer 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-smiling-senior-caucasian-businessman_1262-2300.jpg", alt: "Portrait of smiling senior Caucasian businessman"},
|
|
]}
|
|
avatarText="Loved by local customers"
|
|
buttons={[
|
|
{
|
|
text: "Book Your Cut", href: "#contact"},
|
|
{
|
|
text: "See Our Work", href: "#gallery"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "Top-Rated Service", icon: Star,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Customer Favorite", icon: Heart,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Quick & Efficient", icon: Zap,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Expert Barbers", icon: Scissors,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Community Focused", icon: Users,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-choose-us" data-section="why-choose-us">
|
|
<FeatureCardTen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Skilled Barbers", description: "Experienced professionals who consistently deliver clean, stylish cuts.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-new-look-barber-shop_23-2149167460.jpg", imageAlt: "Skilled barber focusing on a haircut"},
|
|
items: [
|
|
{
|
|
icon: CheckCircle,
|
|
text: "Expertise"},
|
|
],
|
|
reverse: false,
|
|
},
|
|
{
|
|
title: "Affordable Excellence", description: "Premium results without premium pricing, ensuring great value for every client.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/unpleased-slavic-middle-aged-male-barber-uniform-holding-looking-clipboard-isolated-orange-wall_141793-87120.jpg", imageAlt: "Hand holding money for payment"},
|
|
items: [
|
|
{
|
|
icon: DollarSign,
|
|
text: "Great Value"},
|
|
],
|
|
reverse: true,
|
|
},
|
|
{
|
|
title: "Family Friendly", description: "Kids, students, professionals, and families are always welcome, ensuring comfort for everyone.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-putting-shaving-foam-face-satisfied-client-orange-wall_141793-61620.jpg", imageAlt: "Father and son getting haircuts"},
|
|
items: [
|
|
{
|
|
icon: Users,
|
|
text: "Welcoming Atmosphere"},
|
|
],
|
|
reverse: false,
|
|
},
|
|
{
|
|
title: "Consistent Quality", description: "Customers return because they know they'll leave looking their absolute best, every single time.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-eyeglasses-giving-thumbs-up_114579-81482.jpg", imageAlt: "Satisfied customer after haircut"},
|
|
items: [
|
|
{
|
|
icon: Star,
|
|
text: "Reliable Results"},
|
|
],
|
|
reverse: true,
|
|
},
|
|
]}
|
|
title="A Cut Designed Around You"
|
|
description="At Uncle Ali Barbershop, every haircut starts with understanding what you want. Our barbers take time to listen, advise, and deliver a style that suits your face shape, lifestyle, and personality."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="\"Very talented and always asks or advises customers on haircuts with a reasonable price. I'm a regular customer.\""
|
|
rating={5}
|
|
author="Regular Customer"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Customer 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/people-technology-close-up-shot-happy-face-attractive-bearded-man-sitting-front-laptop-screen-smiling-joyfully-while-messaging-friends-online-via-social-networks_273609-6655.jpg", alt: "Customer 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg", alt: "Customer 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-woman-showing-thumbs-up_176474-95524.jpg", alt: "Customer 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-smiling-redhead-bearded-man-white-shirt-tolking-mobile-phone_171337-10024.jpg", alt: "Close-up portrait of handsome smiling redhead bearded man in white shirt tolking on mobile phone"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "classic-haircut", name: "Classic Haircut", price: "Affordable", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4215.jpg", imageAlt: "Classic men's haircut"},
|
|
{
|
|
id: "skin-fade", name: "Skin Fade", price: "Affordable", imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects_23-2148122054.jpg", imageAlt: "Modern skin fade haircut"},
|
|
{
|
|
id: "student-haircuts", name: "Student Haircuts", price: "Affordable", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-getting-her-hair-brushed-salon_23-2148817181.jpg", imageAlt: "Student getting a neat haircut"},
|
|
{
|
|
id: "kids-haircuts", name: "Kids Haircuts", price: "Affordable", imageSrc: "http://img.b2bpic.net/free-photo/children-hairdresser-with-trimmer-is-cutting-little-boy-against-dark-background-cute-preschooler-boy-getting-haircut_613910-5796.jpg", imageAlt: "Child getting a comfortable haircut"},
|
|
{
|
|
id: "beard-grooming", name: "Beard Grooming", price: "Affordable", imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-shaving-neck-customer_23-2147778915.jpg", imageAlt: "Professional beard grooming"},
|
|
{
|
|
id: "hair-styling", name: "Hair Styling", price: "Affordable", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665448.jpg", imageAlt: "Barber giving hair styling advice"},
|
|
]}
|
|
title="Professional Grooming Services"
|
|
description="Explore our range of expert barbering services, crafted to keep you looking sharp and feeling your best, all at honest prices."
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<BlogCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Real Customers. Real Transformations."
|
|
description="Browse our gallery of precision cuts, modern fades, and classic styles showcasing our skill and attention to detail."
|
|
blogs={[
|
|
{
|
|
id: "fade-transformation", category: "Modern Cuts", title: "Modern Fades", excerpt: "Precision fades executed with sharp lines and smooth transitions.", imageSrc: "http://img.b2bpic.net/free-photo/indian-stylish-man-black-traditional-clothes-with-white-scarf-posed-outdoor-sitting-bench_627829-12682.jpg", imageAlt: "Before and after modern fade haircut", authorName: "Uncle Ali Team", date: "2023-10-26"},
|
|
{
|
|
id: "crop-transformation", category: "Textured Styles", title: "Textured Crops", excerpt: "Contemporary textured crops for a stylish and effortless look.", imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-shaving-hair-unrecognizable-man_23-2147778749.jpg", imageAlt: "Before and after textured crop haircut", authorName: "Uncle Ali Team", date: "2023-11-01"},
|
|
{
|
|
id: "side-comb-transformation", category: "Classic Styles", title: "Side Comb Styles", excerpt: "Elegant side comb styles, perfect for a professional and polished appearance.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-hipster-male-purple-suit-isolated-grey-vignette-background_613910-2989.jpg", imageAlt: "Before and after side comb haircut", authorName: "Uncle Ali Team", date: "2023-11-08"},
|
|
{
|
|
id: "professional-transformation", category: "Executive Cuts", title: "Professional Cuts", excerpt: "Sharp and clean cuts tailored for the modern professional.", imageSrc: "http://img.b2bpic.net/free-photo/man-crosswalk_1098-14105.jpg", imageAlt: "Before and after professional haircut", authorName: "Uncle Ali Team", date: "2023-11-15"},
|
|
{
|
|
id: "kids-style-transformation", category: "Kids Styles", title: "Kids Styles", excerpt: "Fun and neat haircuts designed for our younger customers.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-blond-teenage-boy-dressed-plaid-shirt_613910-9193.jpg", imageAlt: "Before and after kids haircut", authorName: "Uncle Ali Team", date: "2023-11-22"},
|
|
{
|
|
id: "beard-transformation", category: "Beard Grooming", title: "Beard Transformations", excerpt: "Expert beard shaping and styling for a well-groomed look.", imageSrc: "http://img.b2bpic.net/free-photo/two-businessmen-talking-phone-city_1153-8203.jpg", imageAlt: "Before and after beard trim", authorName: "Uncle Ali Team", date: "2023-11-29"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "step-1", value: "1.", title: "Consultation", items: [
|
|
"We listen to your preferences and goals, ensuring we understand your desired look."],
|
|
},
|
|
{
|
|
id: "step-2", value: "2.", title: "Precision Cut", items: [
|
|
"Our barbers use professional techniques tailored precisely to your style."],
|
|
},
|
|
{
|
|
id: "step-3", value: "3.", title: "Styling", items: [
|
|
"Finishing touches and expert recommendations to maintain your new look."],
|
|
},
|
|
{
|
|
id: "step-4", value: "4.", title: "Confidence", items: [
|
|
"Walk out looking sharp and feeling your best, ready to impress."],
|
|
},
|
|
]}
|
|
title="Looking Great Is Simple"
|
|
description="Our straightforward process ensures you get the perfect haircut every time, tailored to your individual style and preferences."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="More Than Just A Haircut: Dedicated to Professional Service, Great Results, and Honest Pricing."
|
|
metrics={[
|
|
{
|
|
icon: Users,
|
|
label: "Happy Customers", value: "500+"},
|
|
{
|
|
icon: Star,
|
|
label: "Local Rating", value: "4.8★"},
|
|
{
|
|
icon: DollarSign,
|
|
label: "Pricing", value: "Affordable"},
|
|
{
|
|
icon: Users,
|
|
label: "Service", value: "Family Friendly"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "Do I need an appointment?", content: "Walk-ins are always welcome at Uncle Ali Barbershop, but we highly recommend booking an appointment during peak hours to guarantee your preferred time slot and minimize wait times."},
|
|
{
|
|
id: "faq-2", title: "How much does a haircut cost?", content: "We are committed to offering professional barbering services at affordable local prices. Our pricing reflects our dedication to unbeatable value without compromising on quality."},
|
|
{
|
|
id: "faq-3", title: "Do you cut children's hair?", content: "Absolutely! Our barbers are experienced and patient with children and families. We ensure a comfortable and friendly service for younger customers, making their haircut experience enjoyable."},
|
|
{
|
|
id: "faq-4", title: "Can I request a specific style?", content: "Yes, of course! We encourage you to bring a reference photo or clearly explain your preferred look during the consultation. Our barbers take the time to listen and advise to deliver the exact style you desire."},
|
|
]}
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Find answers to common questions about our services, appointments, and what makes Uncle Ali Barbershop the local favourite."
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Ready For Your Best Haircut Yet?"
|
|
description="Join the growing community of customers who trust Uncle Ali Barbershop for quality cuts, friendly service, and great value. Book your appointment with us today!"
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Your Message (e.g., preferred date/time, special requests)", rows: 4,
|
|
required: false,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg"
|
|
imageAlt="Modern barber station with tools"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Book Appointment"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167454.jpg"
|
|
imageAlt="Barbershop exterior at night"
|
|
logoText="UNCLE ALI BARBERSHOP"
|
|
columns={[
|
|
{
|
|
title: "Contact Us", items: [
|
|
{
|
|
label: "Phone Number", href: "tel:+1234567890"},
|
|
{
|
|
label: "WhatsApp", href: "https://wa.me/1234567890"},
|
|
{
|
|
label: "Google Maps", href: "https://maps.app.goo.gl/YourLocationLink"},
|
|
],
|
|
},
|
|
{
|
|
title: "Business Info", items: [
|
|
{
|
|
label: "Business Hours", href: "#"},
|
|
{
|
|
label: "Location", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Follow Us", items: [
|
|
{
|
|
label: "Instagram", href: "https://instagram.com/unclealibarbershop"},
|
|
{
|
|
label: "Facebook", href: "https://facebook.com/unclealibarbershop"},
|
|
{
|
|
label: "TikTok", href: "https://tiktok.com/@unclealibarbershop"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Uncle Ali Barbershop. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|