361 lines
18 KiB
TypeScript
361 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
|
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
|
import { Calendar, Clock, HelpCircle, Home, Instagram, MessageSquare, Phone, Scissors, Sparkles, Star, Users, Zap } from "lucide-react";
|
|
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Bahaa"
|
|
navItems={navItems}
|
|
button={{
|
|
text: "Book Now", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardDashboard
|
|
title="Premium Barbering Excellence"
|
|
description="Experience the art of classic grooming with Bahaa's expert barbers. From precision haircuts to luxurious shaves, we deliver excellence every time."
|
|
tag="Est. Premium Service"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "#contact" },
|
|
{ text: "View Services", href: "#services" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "gradient-bars" }}
|
|
dashboard={{
|
|
title: "Bahaa's Grooming Hub", logoIcon: Scissors,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg", searchPlaceholder: "Find your perfect look", buttons: [
|
|
{ text: "Schedule", href: "#contact" },
|
|
{ text: "Services", href: "#services" },
|
|
],
|
|
sidebarItems: [
|
|
{ icon: Home },
|
|
{ icon: Scissors, active: true },
|
|
{ icon: Users },
|
|
{ icon: MessageSquare },
|
|
],
|
|
stats: [
|
|
{
|
|
title: "Satisfied Clients", values: [1200, 1450, 1680],
|
|
description: "Happy customers"},
|
|
{
|
|
title: "Years Experience", values: [8, 12, 15],
|
|
valueSuffix: "+", description: "In barbering craft"},
|
|
{
|
|
title: "Services Offered", values: [5, 7, 9],
|
|
description: "Expert grooming options"},
|
|
],
|
|
chartTitle: "Monthly Appointments", chartData: [
|
|
{ value: 45 },
|
|
{ value: 62 },
|
|
{ value: 58 },
|
|
{ value: 71 },
|
|
{ value: 85 },
|
|
],
|
|
listTitle: "Latest Bookings", listItems: [
|
|
{
|
|
icon: Calendar,
|
|
title: "Tomorrow at 2:00 PM", status: "Confirmed"},
|
|
{ icon: Clock, title: "Friday 3:30 PM", status: "Pending" },
|
|
{ icon: Home, title: "Walk-in Ready", status: "Available" },
|
|
],
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Crafted Excellence in " },
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg", alt: "Barbershop pride"},
|
|
{ type: "text", content: " Classic Grooming" },
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Meet the Team", href: "#team" },
|
|
{ text: "Our Story", href: "#about" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNine
|
|
title="Our Expert Services"
|
|
description="Each service is performed with precision and care, combining traditional techniques with modern styling expertise."
|
|
tag="Services"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Precision Haircuts", description:
|
|
"Expert haircuts tailored to your style and face shape. Using professional-grade tools and techniques for the perfect finish.", phoneOne: {
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-with-scissors-comb-barbershop-close-up-photo_613910-18538.jpg"},
|
|
phoneTwo: {
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-with-scissors-comb-barbershop-close-up-photo_613910-18538.jpg"},
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Beard Grooming", description:
|
|
"Professional beard trimming, shaping, and conditioning. Keep your facial hair looking sharp and healthy with our expert care.", phoneOne: {
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg"},
|
|
phoneTwo: {
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg"},
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Classic Hot Shaves", description:
|
|
"Luxurious straight razor shaving experience. Enjoy the timeless ritual of a professional hot shave with premium products.", phoneOne: {
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg"},
|
|
phoneTwo: {
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg"},
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
buttons={[{ text: "Book Your Service", href: "#contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
title="Meet Our Master Barbers"
|
|
description="Skilled professionals dedicated to delivering exceptional grooming experiences with passion and expertise."
|
|
tag="Our Team"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
members={[
|
|
{
|
|
id: "1", name: "Ahmed Bahaa", role: "Master Barber & Founder", description:
|
|
"With 15+ years of barbering excellence, Ahmed has perfected the art of classic grooming and modern styling.", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg", socialLinks: [
|
|
{
|
|
icon: Instagram,
|
|
url: "https://instagram.com"},
|
|
{
|
|
icon: Phone,
|
|
url: "tel:+1234567890"},
|
|
],
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Johnson", role: "Senior Barber", description:
|
|
"Expert in fade techniques and contemporary cuts. Marcus specializes in creating signature looks for every client.", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon_613910-5075.jpg", socialLinks: [
|
|
{
|
|
icon: Instagram,
|
|
url: "https://instagram.com"},
|
|
{
|
|
icon: Phone,
|
|
url: "tel:+1234567890"},
|
|
],
|
|
},
|
|
{
|
|
id: "3", name: "David Chen", role: "Barber Specialist", description:
|
|
"Specialist in precision haircuts and beard design. David brings creativity and attention to detail to every service.", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon_613910-5075.jpg", socialLinks: [
|
|
{
|
|
icon: Instagram,
|
|
url: "https://instagram.com"},
|
|
{
|
|
icon: Phone,
|
|
url: "tel:+1234567890"},
|
|
],
|
|
},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Book with Our Team", href: "#contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Trusted by Our Clients"
|
|
description="Read what our satisfied customers have to say about their experiences at Bahaa."
|
|
tag="Reviews"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Best Haircut Experience", quote:
|
|
"Ahmed's precision and attention to detail are unmatched. Every time I leave, I feel like a new person. The atmosphere is welcoming and professional.", name: "Robert Williams", role: "Regular Client", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg"},
|
|
{
|
|
id: "2", title: "Outstanding Service Quality", quote:
|
|
"I've been coming here for 3 years. The consistency of quality, the friendly staff, and the amazing results keep me coming back.", name: "James Mitchell", role: "Loyal Customer", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg"},
|
|
{
|
|
id: "3", title: "Perfect Hot Shave", quote:
|
|
"The hot shave experience at Bahaa is pure luxury. Professional, relaxing, and the results are fantastic. Highly recommended!", name: "Christopher Lee", role: "First-Time Client", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/smiling-businessman-face-portrait-wearing-suit_53876-148135.jpg"},
|
|
{
|
|
id: "4", title: "Transform Your Look", quote:
|
|
"Marcus gave me the best fade I've ever had. He listened to what I wanted and delivered beyond expectations. Worth every penny!", name: "Michael Thompson", role: "Satisfied Customer", imageSrc:
|
|
"http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg"},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Schedule Your Visit", href: "#contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Common Questions"
|
|
description="Everything you need to know about booking and our services."
|
|
tag="FAQ"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I book an appointment?", content:
|
|
"You can book directly through our contact form, call us during business hours, or use our online booking system. We offer flexible scheduling to accommodate your needs."},
|
|
{
|
|
id: "2", title: "What is your cancellation policy?", content:
|
|
"We require 24 hours notice for cancellations to avoid a cancellation fee. Rescheduling can be done free of charge with adequate notice."},
|
|
{
|
|
id: "3", title: "Do you accept walk-ins?", content:
|
|
"Yes, we welcome walk-ins based on availability. However, we recommend booking in advance to guarantee your preferred time slot."},
|
|
{
|
|
id: "4", title: "What payment methods do you accept?", content:
|
|
"We accept cash, credit cards, and digital payments. All payment methods are processed securely for your convenience."},
|
|
{
|
|
id: "5", title: "Are your products hypoallergenic?", content:
|
|
"We use high-quality, professional-grade products that are safe for most skin types. Please inform us of any allergies during your visit."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg"
|
|
imageAlt="Bahaa Barbershop Interior"
|
|
mediaPosition="right"
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Contact Us", href: "#contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Book Your Appointment Today"
|
|
description="Schedule your next grooming experience at Bahaa. Fill out the form below or call us directly. We look forward to serving you!"
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Full Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Email Address", required: true,
|
|
},
|
|
{
|
|
name: "phone", type: "tel", placeholder: "Phone Number", required: true,
|
|
},
|
|
{
|
|
name: "service", type: "text", placeholder: "Preferred Service", required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Additional notes or preferences...", rows: 4,
|
|
required: false,
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg"
|
|
imageAlt="Bahaa Barbershop"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Book Now"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigation", items: [
|
|
{ label: "Home", href: "#home" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "Team", href: "#team" },
|
|
],
|
|
},
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Haircuts", href: "#services" },
|
|
{ label: "Beard Grooming", href: "#services" },
|
|
{ label: "Hot Shaves", href: "#services" },
|
|
{ label: "Styling", href: "#services" },
|
|
],
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Book Now", href: "#contact" },
|
|
{ label: "Reviews", href: "#testimonials" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2025 Bahaa Barber Shop. All rights reserved."
|
|
bottomRightText="Crafted with precision and care"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|