219 lines
10 KiB
TypeScript
219 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { AlertCircle, Award, Check, Clock, Scissors, Sparkles, Star, Users } from "lucide-react";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Hunnid Stylz"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{ text: "Book Now", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardDashboard
|
|
tag="Premium Grooming"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
title="Experience the Art of Precision Barbering"
|
|
description="Hunnid Stylz is where tradition meets modern style. Our expert barbers deliver flawless cuts, crisp fades, and premium grooming services for the discerning gentleman."
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "#contact" },
|
|
{ text: "View Services", href: "#services" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
background={{ variant: "radial-gradient" }}
|
|
dashboard={{
|
|
title: "Barbershop Excellence", logoIcon: Scissors,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7279.jpg", imageAlt: "Modern barbershop interior with professional styling chairs", sidebarItems: [
|
|
{ icon: Scissors },
|
|
{ icon: Sparkles },
|
|
{ icon: Users },
|
|
],
|
|
buttons: [
|
|
{ text: "Book Now", href: "#contact" },
|
|
{ text: "Services", href: "#services" },
|
|
],
|
|
stats: [
|
|
{
|
|
title: "Years Experience", values: [10, 15, 20],
|
|
description: "Mastery in barbering."},
|
|
{
|
|
title: "Satisfied Clients", values: [2500, 5000, 10000],
|
|
valueSuffix: "+", description: "Trusted by hundreds."},
|
|
{
|
|
title: "Expert Barbers", values: [5, 8, 12],
|
|
description: "Certified professionals."},
|
|
],
|
|
listTitle: "Today's Bookings", listItems: [
|
|
{
|
|
icon: Clock,
|
|
title: "10:00 AM - Premium Fade", status: "Confirmed"},
|
|
{
|
|
icon: Check,
|
|
title: "11:30 AM - Beard Trim", status: "Completed"},
|
|
{
|
|
icon: AlertCircle,
|
|
title: "2:00 PM - Full Groom", status: "In Progress"},
|
|
],
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About Hunnid Stylz"
|
|
tagIcon={Award}
|
|
tagAnimation="opacity"
|
|
title="Crafting Confidence Through Expert Barbering Since Day One"
|
|
buttons={[{ text: "Meet Our Barbers", href: "#services" }]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTen
|
|
title="Premium Services"
|
|
description="From classic fades to modern styles, we offer a complete range of professional grooming services tailored to your needs."
|
|
tag="Services"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "1", title: "Premium Haircuts", description: "Expert precision cuts including fades, tapers, and modern styles. Our barbers stay current with the latest trends while respecting classic techniques.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-comb_613910-5069.jpg"},
|
|
items: [
|
|
{ icon: Check, text: "Professional consultation included" },
|
|
{ icon: Check, text: "Fade, taper, and styling expertise" },
|
|
],
|
|
reverse: false,
|
|
},
|
|
{
|
|
id: "2", title: "Beard Grooming", description: "Full beard care services including professional shaping, trimming, and styling. We use premium products for optimal results and comfort.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg"},
|
|
items: [
|
|
{ icon: Check, text: "Expert beard shaping and design" },
|
|
{ icon: Check, text: "Premium grooming products" },
|
|
],
|
|
reverse: true,
|
|
},
|
|
{
|
|
id: "3", title: "Hair & Scalp Treatment", description: "Revitalize your hair with our specialized treatments. We use top-quality products to ensure healthy scalp and hair vitality.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-getting-hair-washed-by-hairdresser-salon_633478-691.jpg"},
|
|
items: [
|
|
{ icon: Check, text: "Deep conditioning treatments" },
|
|
{ icon: Check, text: "Scalp health optimization" },
|
|
],
|
|
reverse: false,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Clients Say"
|
|
description="Don't just take our word for it—hear from our satisfied customers about their experience at Hunnid Stylz."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Marcus Johnson", role: "CEO", company: "Tech Solutions Inc", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg?_wi=1", imageAlt: "Marcus Johnson"},
|
|
{
|
|
id: "2", name: "DeShawn Williams", role: "Professional Athlete", company: "Sports Elite", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg?_wi=2", imageAlt: "DeShawn Williams"},
|
|
{
|
|
id: "3", name: "Brandon Davis", role: "Creative Director", company: "Design Studios", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg?_wi=3", imageAlt: "Brandon Davis"},
|
|
{
|
|
id: "4", name: "Ahmed Hassan", role: "Business Owner", company: "Fashion Boutique", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg?_wi=4", imageAlt: "Ahmed Hassan"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to experience the Hunnid Stylz difference? Book your appointment today and step into confidence."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Book Now", href: "https://booking.example.com" },
|
|
{ text: "Call Us", href: "tel:+1234567890" },
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg"
|
|
imageAlt="Hunnid Stylz barbershop interior"
|
|
logoText="Hunnid Stylz"
|
|
copyrightText="© 2025 | Hunnid Stylz Barbershop. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Haircuts", href: "#services" },
|
|
{ label: "Beard Grooming", href: "#services" },
|
|
{ label: "Hair Treatment", href: "#services" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|