253 lines
14 KiB
TypeScript
253 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Norm's Barber Shop"
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Book Now", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboardSplit
|
|
logoText="Norm's Barber Shop"
|
|
description="Premium Haircuts & Grooming Excellence. Experience Traditional Craftsmanship and Modern Style. Walk-ins Welcome"
|
|
layoutOrder="default"
|
|
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-barber-shop_23-2148506309.jpg"
|
|
imageAlt="Professional barber providing premium haircut service"
|
|
mediaAnimation="blur-reveal"
|
|
buttonAnimation="opacity"
|
|
background={{ variant: "aurora" }}
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "#contact" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "About Norm's Barber Shop" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-vector/barber-sign-template-design_742173-15390.jpg", alt: "Classic barbershop storefront" },
|
|
{ type: "text", content: "For over 25 years, Norm's Barber Shop has been your trusted destination for quality haircuts and professional grooming services. We pride ourselves on attention to detail, exceptional customer service, and maintaining the timeless traditions of classic barbering. Our experienced barbers are dedicated to helping you look and feel your best with every visit." }
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "View Our Services", href: "#services" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyOne
|
|
title="Our Services"
|
|
description="We offer a comprehensive range of professional grooming services tailored to meet your needs and style preferences."
|
|
tag="Premium Services"
|
|
tagAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-barber-shop_23-2148506309.jpg"
|
|
imageAlt="Professional barber services"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
accordionItems={[
|
|
{
|
|
id: "haircut", title: "Classic Haircuts", content: "Traditional and contemporary haircut styles executed with precision. Our barbers specialize in fade cuts, crew cuts, and classic styles tailored to your face shape and preferences."
|
|
},
|
|
{
|
|
id: "shave", title: "Straight Razor Shaves", content: "Experience the luxury of a traditional straight razor shave. Using premium shaving creams and techniques passed down through generations for the ultimate grooming experience."
|
|
},
|
|
{
|
|
id: "beard", title: "Beard Trimming & Styling", content: "Keep your beard looking sharp and well-maintained. We trim, shape, and style beards using professional-grade tools and grooming products to enhance your appearance."
|
|
},
|
|
{
|
|
id: "lineup", title: "Beard Lineups & Detailing", content: "Precision work on beard edges and facial hair detailing. Clean lines and sharp definition to frame your face perfectly and maintain a polished look."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
title="Simple & Fair Pricing"
|
|
description="Transparent pricing for all our services. No hidden fees, just quality grooming at competitive rates."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
plans={[
|
|
{
|
|
id: "classic-cut", title: "Classic Haircut", price: "$25", period: "per service", button: { text: "Book Now", href: "#contact" },
|
|
features: [
|
|
"Professional haircut", "Hair wash included", "Expert styling advice", "Complimentary beard trim"
|
|
]
|
|
},
|
|
{
|
|
id: "premium-package", title: "Premium Package", price: "$45", period: "per service", button: { text: "Book Now", href: "#contact" },
|
|
features: [
|
|
"Haircut & styling", "Straight razor shave", "Beard trimming", "Hot towel treatment", "Premium product included"
|
|
]
|
|
},
|
|
{
|
|
id: "complete-grooming", title: "Complete Grooming", price: "$60", period: "per service", button: { text: "Book Now", href: "#contact" },
|
|
features: [
|
|
"Full haircut & style", "Straight razor shave", "Detailed beard work", "Face & neck massage", "Premium grooming products", "Complimentary beverage"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
title="Meet Our Master Barbers"
|
|
description="Our team of experienced and skilled barbers are passionate about delivering the best haircuts and grooming services in town."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="blur-reveal"
|
|
members={[
|
|
{
|
|
id: "norm", name: "Norm", role: "Head Barber & Owner", description: "With 28 years of experience, Norm founded this shop on principles of quality and tradition. Master of classic cuts and straight razor work.", imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg", imageAlt: "Norm - Head Barber", socialLinks: []
|
|
},
|
|
{
|
|
id: "mike", name: "Mike", role: "Master Barber", description: "Specializing in modern fades and contemporary styles. Mike brings creativity and precision to every haircut with 15 years of expertise.", imageSrc: "http://img.b2bpic.net/free-photo/with-closed-eyes-unpleased-young-handsome-male-barber-uniform-holding-crossing-hair-clippers-with-comb-isolated-orange-background_141793-83876.jpg", imageAlt: "Mike - Master Barber", socialLinks: []
|
|
},
|
|
{
|
|
id: "joe", name: "Joe", role: "Senior Barber", description: "Expert in traditional grooming and beard styling. Joe's attention to detail and welcoming personality make every visit memorable.", imageSrc: "http://img.b2bpic.net/free-photo/man-waiting-new-haircut_23-2148353450.jpg", imageAlt: "Joe - Senior Barber", socialLinks: []
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Best barbershop in town! Norm and his team really know their craft. I've been coming here for years and every haircut is perfect. Highly recommended!"
|
|
rating={5}
|
|
author="John Martinez"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-confident-man-home-office_329181-20664.jpg", alt: "John Martinez" },
|
|
{ src: "http://img.b2bpic.net/free-vector/pack-call-center-avatars_23-2147946043.jpg", alt: "Client testimonial" },
|
|
{ src: "http://img.b2bpic.net/free-photo/aged-middle-expression-calling-business_1262-2838.jpg", alt: "Happy customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/brunette-woman-standing-bricks-wall-smiling-with-happy-face-looking-pointing-side-with-thumb-up_839833-15096.jpg", alt: "Satisfied customer" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our services, booking, and policies."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="blur-reveal"
|
|
animationType="smooth"
|
|
showCard={true}
|
|
faqs={[
|
|
{
|
|
id: "walk-ins", title: "Do you accept walk-ins?", content: "Yes! We welcome walk-ins during our regular business hours. However, we recommend calling ahead or booking an appointment online to minimize wait times and ensure your preferred barber is available."
|
|
},
|
|
{
|
|
id: "appointment-booking", title: "How do I book an appointment?", content: "You can book online through our website, call us directly at (555) 123-4567, or visit us in person. We typically have availability within 1-2 days for most services."
|
|
},
|
|
{
|
|
id: "first-time", title: "Is there anything I should know for my first visit?", content: "Come ready to discuss your desired style with your barber. Bring reference photos if you have a specific look in mind. Our barbers are excellent at recommendations and will work with you to achieve your ideal look."
|
|
},
|
|
{
|
|
id: "payment", title: "What payment methods do you accept?", content: "We accept cash, all major credit cards, and digital payments including Apple Pay and Google Pay. No appointment fees - you only pay for the services you receive."
|
|
},
|
|
{
|
|
id: "gift-cards", title: "Do you offer gift cards?", content: "Yes! Gift cards are available in various denominations and make perfect presents for the grooming enthusiast in your life. They can be purchased in-store or by phone."
|
|
},
|
|
{
|
|
id: "hours", title: "What are your operating hours?", content: "We're open Monday-Friday 9am-7pm, Saturday 8am-6pm, and Sunday 10am-5pm. Please call ahead on holidays as hours may vary."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready for your next perfect haircut? Contact Norm's Barber Shop today to schedule an appointment or learn more about our services."
|
|
animationType="entrance-slide"
|
|
useInvertedBackground={false}
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Call (555) 123-4567", href: "tel:+15551234567" },
|
|
{ text: "Visit Us", href: "#" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Norm's Barber Shop"
|
|
copyrightText="© 2025 Norm's Barber Shop. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Haircuts", href: "#services" },
|
|
{ label: "Straight Razor Shaves", href: "#services" },
|
|
{ label: "Beard Trimming", href: "#services" },
|
|
{ label: "Beard Lineups", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Team", href: "#team" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Call Us", href: "tel:+15551234567" },
|
|
{ label: "Email", href: "mailto:info@normsbarber.com" },
|
|
{ label: "Location", href: "#" },
|
|
{ label: "Book Appointment", href: "#contact" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|