373 lines
19 KiB
TypeScript
373 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { Scissors, Users, MessageSquareText, HelpCircle, Sparkles, ShoppingBag, Phone, Mail, MapPin, Clock, Brush, GripVertical } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "/"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Services", id: "/services"},
|
|
{
|
|
name: "Our Craft", id: "#features"},
|
|
{
|
|
name: "Products", id: "#products"},
|
|
{
|
|
name: "Pricing", id: "#pricing"},
|
|
{
|
|
name: "Team", id: "#team"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-photo/barber-shop-logo_1048-22009.jpg"
|
|
logoAlt="The Sharp Cut Barbershop Logo"
|
|
brandName="The Sharp Cut Barbershop"
|
|
button={{
|
|
text: "Book Now", href: "/booking"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Precision Cuts & Classic Shaves for the Modern Gentleman"
|
|
description="Experience the finest grooming services in a relaxed, classic barbershop setting. Our skilled barbers are dedicated to crafting your perfect look."
|
|
tag="The Sharp Cut Barbershop"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "View Services", href: "/services"},
|
|
{
|
|
text: "Book an Appointment", href: "/booking"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-shaving-beard-client_1048-22006.jpg?_wi=1", imageAlt: "Barber expertly shaving a client's beard"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/client-gets-haircut-barber-shop_1048-22007.jpg?_wi=1", imageAlt: "Client receiving a fresh haircut at a barbershop"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/vintage-barber-tools_1048-22008.jpg", imageAlt: "Vintage barber tools laid out on a wooden counter"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-barber-shop_1048-22010.jpg", imageAlt: "Stylish man relaxing in a barbershop chair"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-cutting-hair-clipper-close-up_1048-22021.jpg", imageAlt: "Close-up of a barber cutting hair with clippers"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-scissors-and-comb-on-hair_1048-22022.jpg", imageAlt: "Barber's scissors and comb during a haircut"}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Crafting Confidence, One Cut at a Time"
|
|
description="At The Sharp Cut, we believe a great haircut is more than just a trim—it's an experience. With decades of combined expertise, our barbers are dedicated to precision, style, and making every client feel their best. We blend traditional techniques with modern trends to deliver unparalleled grooming."
|
|
metrics={[
|
|
{
|
|
value: "20+", title: "Years Experience"},
|
|
{
|
|
value: "10k+", title: "Happy Clients"},
|
|
{
|
|
value: "5-Star", title: "Ratings"},
|
|
]}
|
|
tag="Our Legacy"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/barber-shaving-beard-client_1048-22006.jpg?_wi=2"
|
|
imageAlt="Barber carefully grooming a client's beard"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
carouselMode="buttons"
|
|
features={[
|
|
{
|
|
title: "Masterful Haircuts", description: "From classic fades to modern styles, our barbers are experts in the art of hair cutting, ensuring a sharp, personalized look tailored to you.", imageSrc: "http://img.b2bpic.net/free-photo/client-gets-haircut-barber-shop_1048-22007.jpg?_wi=2", imageAlt: "Barber giving a precise haircut to a client", button: {
|
|
text: "See Our Styles", href: "/services"}},
|
|
{
|
|
title: "Luxurious Hot Lather Shaves", description: "Indulge in our signature hot lather shave, a timeless tradition for ultimate relaxation and an incredibly smooth finish.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shaving-beard-client_1048-22006.jpg?_wi=3", imageAlt: "Close-up of a hot lather shave in progress", button: {
|
|
text: "Book a Shave", href: "/booking"}},
|
|
{
|
|
title: "Expert Beard Trimming & Styling", description: "Keep your beard looking its best with our professional trimming, shaping, and conditioning services.", imageSrc: "http://img.b2bpic.net/free-photo/barber-grooming-beard_1048-22006.jpg", imageAlt: "Barber meticulously trimming a client's beard", button: {
|
|
text: "Explore Beard Care", href: "/services"}},
|
|
]}
|
|
title="Our Signature Grooming Services"
|
|
description="Discover the full range of services designed to refine your style and elevate your grooming routine. We combine skill with a passion for perfection."
|
|
tag="What We Offer"
|
|
tagIcon={Brush}
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "p-pomade", brand: "The Sharp Cut", name: "Classic Hold Pomade", price: "$22.00", rating: 5,
|
|
reviewCount: "180", imageSrc: "http://img.b2bpic.net/free-photo/hair-pomade_1048-22015.jpg", imageAlt: "Jar of classic hold pomade for men's hair"},
|
|
{
|
|
id: "p-beard-oil", brand: "The Sharp Cut", name: "Premium Beard Oil", price: "$28.00", rating: 4.9,
|
|
reviewCount: "150", imageSrc: "http://img.b2bpic.net/free-photo/beard-oil_1048-22016.jpg", imageAlt: "Bottle of premium beard oil with natural ingredients"},
|
|
{
|
|
id: "p-aftershave", brand: "The Sharp Cut", name: "Soothing Aftershave Balm", price: "$20.00", rating: 4.8,
|
|
reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/aftershave-balm_1048-22017.jpg", imageAlt: "Soothing aftershave balm in a glass bottle"},
|
|
{
|
|
id: "p-shampoo", brand: "The Sharp Cut", name: "Daily Revitalizing Shampoo", price: "$18.00", rating: 4.7,
|
|
reviewCount: "95", imageSrc: "http://img.b2bpic.net/free-photo/mens-shampoo_1048-22018.jpg", imageAlt: "Men's shampoo bottle for daily use"},
|
|
{
|
|
id: "p-conditioner", brand: "The Sharp Cut", name: "Hydrating Conditioner", price: "$18.00", rating: 4.7,
|
|
reviewCount: "90", imageSrc: "http://img.b2bpic.net/free-photo/mens-conditioner_1048-22019.jpg", imageAlt: "Men's hair conditioner bottle"},
|
|
{
|
|
id: "p-shave-brush", brand: "The Sharp Cut", name: " badger Hair Shave Brush", price: "$35.00", rating: 5,
|
|
reviewCount: "110", imageSrc: "http://img.b2bpic.net/free-photo/shave-brush_1048-22020.jpg", imageAlt: "Classic badger hair shaving brush"}
|
|
]}
|
|
title="Premium Grooming Products"
|
|
description="Maintain your refined look at home with our exclusive line of barber-approved grooming products. Crafted for quality, designed for the modern gentleman."
|
|
tag="Shop Essentials"
|
|
tagIcon={ShoppingBag}
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "p-basic-cut", tag: "The Standard", tagIcon: Scissors,
|
|
price: "$35", period: "per service", description: "A precise haircut tailored to your style, finished with a clean lineup. Perfect for regular maintenance.", button: {
|
|
text: "Book Now", href: "/booking"},
|
|
featuresTitle: "Includes:", features: [
|
|
"Consultation", "Haircut & Style", "Neck Shave", "Hot Towel Finish"],
|
|
},
|
|
{
|
|
id: "p-full-groom", tag: "The Executive", tagIcon: GripVertical,
|
|
price: "$60", period: "per service", description: "The ultimate grooming experience: a premium haircut combined with a luxurious hot lather shave.", button: {
|
|
text: "Book Signature", href: "/booking"},
|
|
featuresTitle: "Includes:", features: [
|
|
"Full Consultation", "Signature Haircut & Style", "Hot Lather Full Face Shave", "Beard Trim & Shape (if applicable)", "Facial Steamer Treatment", "Premium Aftershave Application"],
|
|
},
|
|
]}
|
|
title="Our Services & Pricing"
|
|
description="Explore our range of grooming services, from quick trims to full pampering experiences. Find the perfect package to suit your needs."
|
|
tag="Transparent Pricing"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
groups={[
|
|
{
|
|
id: "g-barbers", groupTitle: "Our Skilled Barbers", members: [
|
|
{
|
|
id: "m-john", title: "John 'The Cutter' Doe", subtitle: "Master Barber & Stylist", detail: "With over 15 years in the industry, John is renowned for his precision fades and classic straight razor shaves. He's passionate about delivering a flawless look every time.", imageSrc: "http://img.b2bpic.net/free-photo/barber-man_1048-22011.jpg", imageAlt: "Portrait of Master Barber John Doe"},
|
|
{
|
|
id: "m-mike", title: "Mike 'The Blade' Smith", subtitle: "Senior Barber", detail: "Mike specializes in modern styles and intricate beard designs. His keen eye for detail ensures every client leaves feeling sharp and confident.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-team_1048-22011.jpg", imageAlt: "Portrait of Senior Barber Mike Smith"}
|
|
]
|
|
},
|
|
]}
|
|
title="Meet Our Expert Barbers"
|
|
description="Our team of experienced and passionate barbers are dedicated to providing you with the highest quality grooming services. Get to know the professionals behind The Sharp Cut."
|
|
tag="The Professionals"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t-1", name: "Ethan R.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-customer-testimonial_1048-22012.jpg", imageAlt: "Happy client smiling after a haircut"},
|
|
{
|
|
id: "t-2", name: "Liam P.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-customer-testimonial-2_1048-22012.jpg", imageAlt: "Satisfied customer showing off his new style"},
|
|
{
|
|
id: "t-3", name: "Noah S.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-customer-testimonial-3_1048-22012.jpg", imageAlt: "Client giving a thumbs up after a hot shave"},
|
|
{
|
|
id: "t-4", name: "Caleb M.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-customer-testimonial-4_1048-22012.jpg", imageAlt: "Young man looking pleased with his beard trim"},
|
|
{
|
|
id: "t-5", name: "Mason T.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-customer-testimonial-5_1048-22012.jpg", imageAlt: "Client leaving the barbershop with a fresh cut"},
|
|
{
|
|
id: "t-6", name: "Jacob W.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-customer-testimonial-6_1048-22012.jpg", imageAlt: "Gentleman enjoying the barbershop experience"}
|
|
]}
|
|
cardTitle="Our Clients Speak for Themselves!"
|
|
cardTag="Raving Reviews"
|
|
cardTagIcon={MessageSquareText}
|
|
buttons={[
|
|
{
|
|
text: "Read All Testimonials", href: "#"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "Do I need an appointment?", content: "While walk-ins are welcome, we highly recommend booking an appointment to ensure you get your preferred barber and avoid wait times. You can book online through our website or give us a call."},
|
|
{
|
|
id: "q2", title: "What brands of products do you use/sell?", content: "We proudly use and sell a curated selection of premium grooming products from industry-leading brands known for their quality and effectiveness. Ask your barber for recommendations tailored to your hair and skin type."},
|
|
{
|
|
id: "q3", title: "How long does a typical haircut take?", content: "A standard haircut usually takes around 30-45 minutes, while a classic hot lather shave might take about 25-30 minutes. Full grooming packages may take longer. We value precision over speed."},
|
|
{
|
|
id: "q4", title: "Can I request a specific barber?", content: "Absolutely! When booking online or over the phone, you can select your preferred barber based on their availability. We encourage building a relationship with your barber for consistent, personalized service."}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-faq_1048-22013.jpg"
|
|
imageAlt="Barber answering questions from a client"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="left"
|
|
title="Frequently Asked Questions"
|
|
description="Have questions about our services, booking, or products? Find quick answers here. Your grooming journey starts with clarity."
|
|
tag="Got Questions?"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Contact Us Directly", href: "#contact"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain"}}
|
|
text="Ready for your next sharp look? Visit The Sharp Cut Barbershop or book your appointment online today. We look forward to welcoming you!"
|
|
buttons={[
|
|
{
|
|
text: "Book Your Appointment", href: "/booking"},
|
|
{
|
|
text: "Get Directions", href: "https://maps.app.goo.gl/YourBarbershopLocation"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-interior-design_1048-22003.jpg?_wi=2"
|
|
imageAlt="Modern barbershop interior at night"
|
|
logoSrc="http://img.b2bpic.net/free-photo/barber-shop-logo_1048-22009.jpg"
|
|
logoAlt="The Sharp Cut Barbershop Logo"
|
|
logoText="The Sharp Cut Barbershop"
|
|
columns={[
|
|
{
|
|
title: "Quick Links", items: [
|
|
{
|
|
label: "Home", href: "/"},
|
|
{
|
|
label: "Services", href: "/services"},
|
|
{
|
|
label: "Book Now", href: "/booking"},
|
|
{
|
|
label: "Our Team", href: "#team"},
|
|
],
|
|
},
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Haircuts", href: "/services"},
|
|
{
|
|
label: "Shaves", href: "/services"},
|
|
{
|
|
label: "Beard Trims", href: "/services"},
|
|
{
|
|
label: "Products", href: "#products"},
|
|
],
|
|
},
|
|
{
|
|
title: "Visit Us", items: [
|
|
{
|
|
label: "123 Grooming Ave, Style City, SC 12345", href: "https://maps.app.goo.gl/YourBarbershopLocation"},
|
|
{
|
|
label: "(123) 456-7890", href: "tel:+11234567890"},
|
|
{
|
|
label: "info@sharpcut.com", href: "mailto:info@sharpcut.com"}
|
|
],
|
|
},
|
|
{
|
|
title: "Hours & Socials", items: [
|
|
{
|
|
label: "Mon-Fri: 9 AM - 7 PM", href: "#"},
|
|
{
|
|
label: "Sat: 10 AM - 5 PM", href: "#"},
|
|
{
|
|
label: "Sun: Closed", href: "#"},
|
|
{
|
|
label: "Facebook", href: "https://facebook.com/TheSharpCut"},
|
|
{
|
|
label: "Instagram", href: "https://instagram.com/TheSharpCut"}
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 The Sharp Cut Barbershop. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |