443 lines
15 KiB
TypeScript
443 lines
15 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||
import TextAbout from '@/components/sections/about/TextAbout';
|
||
import { Droplet, Scissors, Sparkles, Star } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-magnetic"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="mediumLarge"
|
||
sizing="largeSmallSizeMediumTitles"
|
||
background="circleGradient"
|
||
cardStyle="subtle-shadow"
|
||
primaryButtonStyle="diagonal-gradient"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="light"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingInline
|
||
navItems={[
|
||
{
|
||
name: "Home",
|
||
id: "#home",
|
||
},
|
||
{
|
||
name: "About Us",
|
||
id: "#about",
|
||
},
|
||
{
|
||
name: "Services",
|
||
id: "#services",
|
||
},
|
||
{
|
||
name: "Our Team",
|
||
id: "#team",
|
||
},
|
||
{
|
||
name: "Pricing",
|
||
id: "#pricing",
|
||
},
|
||
{
|
||
name: "Testimonials",
|
||
id: "#testimonials",
|
||
},
|
||
{
|
||
name: "FAQ",
|
||
id: "#faq",
|
||
},
|
||
{
|
||
name: "Contact",
|
||
id: "#contact",
|
||
},
|
||
]}
|
||
brandName="T&H Barbershop"
|
||
button={{
|
||
text: "Book Your Appointment",
|
||
href: "#contact",
|
||
}}
|
||
animateOnLoad={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroCentered
|
||
background={{
|
||
variant: "radial-gradient",
|
||
}}
|
||
title="Precision Cuts. Premium Experience."
|
||
description="T&H Barbershop in Alexandria, VA offers expert haircuts, sharp fades, and classic shaves. Book your next appointment for a fresh look and an unparalleled grooming experience."
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/happy-african-man-looking_171337-9799.jpg",
|
||
alt: "Client 1",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/outdoor-photo-smiling-african-young-man-big-hat-posing-close-up-portrait-chilling-guy-black-headphones-spending-time-park_197531-21896.jpg",
|
||
alt: "Client 2",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/senior-man-wearing-blue-shirt-glasses_273609-42031.jpg",
|
||
alt: "Client 3",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924142.jpg",
|
||
alt: "Client 4",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/serious-african-man-looking_171337-9848.jpg",
|
||
alt: "Serious african man looking",
|
||
},
|
||
]}
|
||
avatarText="200+ Satisfied Clients"
|
||
buttons={[
|
||
{
|
||
text: "Book Your Appointment",
|
||
href: "#contact",
|
||
},
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
marqueeItems={[
|
||
{
|
||
type: "text-icon",
|
||
text: "Expert Barbers",
|
||
icon: Scissors,
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Walk-ins Welcome",
|
||
},
|
||
{
|
||
type: "text-icon",
|
||
text: "Quality Products",
|
||
icon: Droplet,
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Relaxing Atmosphere",
|
||
},
|
||
{
|
||
type: "text-icon",
|
||
text: "Customer Satisfaction",
|
||
icon: Star,
|
||
},
|
||
]}
|
||
marqueeSpeed={30}
|
||
showMarqueeCard={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TextAbout
|
||
useInvertedBackground={false}
|
||
tag="Our Story"
|
||
title="Crafting Confidence, One Cut at a Time."
|
||
description="At T&H Barbershop, we blend timeless barbering traditions with modern techniques. Our skilled team is dedicated to providing meticulous grooming services in a welcoming, inclusive environment. We believe a great haircut isn't just about style, it's about confidence."
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardMedia
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "haircut",
|
||
title: "Precision Haircuts",
|
||
description: "Get a sharp, personalized haircut tailored to your style, including fades, tapers, and classic cuts.",
|
||
tag: "Hair",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-business-man_53876-14991.jpg",
|
||
imageAlt: "Man getting a fade haircut",
|
||
},
|
||
{
|
||
id: "beard",
|
||
title: "Expert Beard Trims",
|
||
description: "Define your look with a meticulously sculpted beard trim, complete with lining and conditioning.",
|
||
tag: "Beard",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-trimming-beard-man_23-2147778822.jpg",
|
||
imageAlt: "Man getting a beard trim",
|
||
},
|
||
{
|
||
id: "shave",
|
||
title: "Luxurious Hot Towel Shaves",
|
||
description: "Experience the ultimate relaxation with our classic hot towel shave, leaving your skin smooth and refreshed.",
|
||
tag: "Shave",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94801.jpg",
|
||
imageAlt: "Man receiving a hot towel shave",
|
||
},
|
||
]}
|
||
title="Masterful Grooming for the Modern Man"
|
||
description="From classic cuts to modern styles, our barbers are masters of their craft. Explore our range of services designed to keep you looking sharp."
|
||
tag="Our Services"
|
||
/>
|
||
</div>
|
||
|
||
<div id="team" data-section="team">
|
||
<TeamCardSix
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
members={[
|
||
{
|
||
id: "lisa",
|
||
name: "Lisa K.",
|
||
role: "Master Barber",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-woman-looking-camera-while-standing-counter-movie-house_613910-21690.jpg",
|
||
imageAlt: "Lisa, Master Barber",
|
||
},
|
||
{
|
||
id: "tommy",
|
||
name: "Tommy T.",
|
||
role: "Senior Stylist",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-barber-wearing-uniform-glasses-looking-camera-showing-credit-card-scissors-isolated-blue-background_141793-138556.jpg",
|
||
imageAlt: "Tommy, Senior Stylist",
|
||
},
|
||
{
|
||
id: "stacy",
|
||
name: "Stacy M.",
|
||
role: "Grooming Specialist",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/barber-putting-cape-clients-neck_107420-94792.jpg",
|
||
imageAlt: "Stacy, Grooming Specialist",
|
||
},
|
||
]}
|
||
title="Meet the Maestros of the Cut"
|
||
description="Our team of experienced barbers are passionate about their craft and dedicated to delivering personalized service with every visit. Get to know the faces behind the fades."
|
||
tag="Our Barbers"
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "standard-cut",
|
||
name: "Standard Haircut",
|
||
price: "$30",
|
||
features: [
|
||
"Precision Haircut",
|
||
"Hot Lather Neck Shave",
|
||
"Classic Finish",
|
||
],
|
||
buttons: [
|
||
{
|
||
text: "Book Now",
|
||
href: "#contact",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "cut-beard",
|
||
name: "Haircut + Beard Trim",
|
||
badge: "Popular",
|
||
badgeIcon: Sparkles,
|
||
price: "$45",
|
||
features: [
|
||
"Precision Haircut",
|
||
"Expert Beard Trim",
|
||
"Hot Lather Neck Shave",
|
||
"Classic Finish",
|
||
],
|
||
buttons: [
|
||
{
|
||
text: "Book Now",
|
||
href: "#contact",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: "full-experience",
|
||
name: "The T&H Experience",
|
||
price: "$65",
|
||
features: [
|
||
"Precision Haircut",
|
||
"Expert Beard Trim",
|
||
"Hot Towel Shave",
|
||
"Facial Steaming",
|
||
"Relaxing Scalp Massage",
|
||
],
|
||
buttons: [
|
||
{
|
||
text: "Book Now",
|
||
href: "#contact",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
title="Your Style, Your Price"
|
||
description="Transparent pricing for exceptional service. Find the perfect grooming package that fits your needs."
|
||
tag="Pricing"
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardFifteen
|
||
useInvertedBackground={false}
|
||
testimonial="I’ve been coming here almost two years and have gotten my hair cut by Lisa and Tommy. They have both been amazing and I’ve always been happy with my cut. They are very thorough and even provide a hot towel and massage at the end. Definitely recommend coming here!"
|
||
rating={5}
|
||
author="Johnny Parker Lee"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrat-young-man-laughing_23-2148560405.jpg",
|
||
alt: "Johnny Parker Lee",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-woman-wearing-casual-sweater-standing-red-background-pointing-fingers-camera-with-happy-funny-face-good-energy-vibes_839833-6469.jpg",
|
||
alt: "Sarah Johnson",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg",
|
||
alt: "Michael Chen",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/angry-bearded-man-navy-t-shirt-looking-annoyed-while-talking-mobile-clenching-fist-phone-standing-pink-wall_141793-81732.jpg",
|
||
alt: "Emily Rodriguez",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-caucasian-woman-holding-shopping-bags-make-selfie-by-camera-clothing-store_839833-1916.jpg",
|
||
alt: "David Kim",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/encouraged-cheerful-middle-eastern-guy-chanting-raise-hands-rejoice_176420-20446.jpg",
|
||
alt: "male customer with beard happy",
|
||
},
|
||
]}
|
||
ratingAnimation="blur-reveal"
|
||
avatarsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitText
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "faq1",
|
||
title: "Do I need an appointment?",
|
||
content: "Yes, we highly recommend booking an appointment in advance to ensure your preferred barber and time slot. Walk-ins are subject to availability.",
|
||
},
|
||
{
|
||
id: "faq2",
|
||
title: "What payment methods do you accept?",
|
||
content: "We accept major credit cards (Visa, Mastercard, Amex), debit cards, and cash. Contactless payments are also available.",
|
||
},
|
||
{
|
||
id: "faq3",
|
||
title: "Do you offer military discounts?",
|
||
content: "Yes, we are proud to offer a military discount to active service members and veterans. Please present your valid military ID at checkout.",
|
||
},
|
||
{
|
||
id: "faq4",
|
||
title: "What if I need to cancel or reschedule?",
|
||
content: "We kindly ask for at least 24 hours notice for cancellations or rescheduling. This allows us to offer the slot to other clients.",
|
||
},
|
||
{
|
||
id: "faq5",
|
||
title: "Are you LGBTQ+ friendly?",
|
||
content: "Absolutely! T&H Barbershop is an inclusive space that welcomes everyone. We are committed to providing a comfortable and respectful environment for all clients.",
|
||
},
|
||
]}
|
||
sideTitle="Questions? We've Got Answers."
|
||
sideDescription="Find quick answers to common questions about our services, appointments, and policies. If you can't find what you're looking for, feel free to contact us directly."
|
||
faqsAnimation="slide-up"
|
||
textPosition="left"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCenter
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "sparkles-gradient",
|
||
}}
|
||
tag="Visit Us"
|
||
title="Book Your Next Transformation"
|
||
description="Ready for a fresh cut or a relaxing shave? Schedule your appointment with T&H Barbershop in Alexandria, VA today. We look forward to seeing you!"
|
||
inputPlaceholder="Enter your email for updates"
|
||
buttonText="Book Now"
|
||
termsText="By clicking Book Now, you agree to receive appointment confirmations and reminders."
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBase
|
||
columns={[
|
||
{
|
||
title: "Quick Links",
|
||
items: [
|
||
{
|
||
label: "Home",
|
||
href: "#home",
|
||
},
|
||
{
|
||
label: "Services",
|
||
href: "#services",
|
||
},
|
||
{
|
||
label: "About Us",
|
||
href: "#about",
|
||
},
|
||
{
|
||
label: "Our Team",
|
||
href: "#team",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Contact Us",
|
||
items: [
|
||
{
|
||
label: "4656B King St, Alexandria, VA 22302",
|
||
href: "https://www.google.com/maps/search/4656B+King+St,+Alexandria,+VA+22302",
|
||
},
|
||
{
|
||
label: "(571) 312-5582",
|
||
href: "tel:+15713125582",
|
||
},
|
||
{
|
||
label: "info@thbarbershop.com",
|
||
href: "mailto:info@thbarbershop.com",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Our Hours",
|
||
items: [
|
||
{
|
||
label: "Mon - Sat: 8 AM - 7 PM",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Sunday: Closed",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
logoText="T&H Barbershop"
|
||
copyrightText="© 2024 T&H Barbershop. All rights reserved."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|