231 lines
12 KiB
TypeScript
231 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Scissors, Award, Zap, Users, Star, Phone } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="OTT"
|
|
bottomLeftText="Premium Barbershop"
|
|
bottomRightText="hello@ottbarbershop.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
title="Premium Barbering Excellence"
|
|
description="Experience the art of traditional barbering combined with modern grooming techniques at OTT Barbershop. We deliver precision cuts, expert styling, and unmatched customer service."
|
|
tag="Established 2015"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/side-view-male-artist-playing-electric-guitar_23-2148680322.jpg"
|
|
imageAlt="OTT Barbershop professional barber at work"
|
|
mediaAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "James Mitchell", handle: "Regular Customer", testimonial: "The best barber experience I've had. Attention to detail is incredible.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1602.jpg?_wi=1"
|
|
},
|
|
{
|
|
name: "David Chen", handle: "Client Since 2018", testimonial: "Professional, friendly, and always delivers perfect results. Highly recommend!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-young-woman-pointing-camera_74855-4351.jpg?_wi=1"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "#contact" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Crafted With Care"
|
|
description="OTT Barbershop is dedicated to delivering exceptional grooming services with a focus on precision, professionalism, and customer satisfaction. Our team of master barbers brings years of experience and passion to every cut, shave, and style."
|
|
tag="About Us"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-deals-foam_613910-4275.jpg"
|
|
imageAlt="OTT Barbershop interior and team"
|
|
buttons={[
|
|
{ text: "View Our Team", href: "#team" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardSix
|
|
title="Our Services"
|
|
description="From classic cuts to modern styles, we offer a complete range of professional grooming services tailored to your needs."
|
|
tag="Services"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Classic Haircut", description: "Professional precision cuts with attention to detail. Our barbers use traditional techniques combined with modern styling to deliver the perfect cut every time.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-using-comb_23-2149220591.jpg", buttons: [
|
|
{ text: "Learn More", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Straight Razor Shave", description: "Experience the ultimate shaving ritual. Our master barbers use premium products and traditional straight razor techniques for a close, comfortable shave.", imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-wiping-clients-face-with-hot-towel_107420-94798.jpg", buttons: [
|
|
{ text: "Learn More", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Hair Styling & Grooming", description: "Custom styling with premium products. Whether it's a special event or everyday look, we'll help you achieve your ideal style with expert consultation.", imageSrc: "http://img.b2bpic.net/free-photo/process-making-afro-curly-hair_8353-11424.jpg", buttons: [
|
|
{ text: "Learn More", href: "#contact" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardOne
|
|
title="Meet Our Barbers"
|
|
description="Our experienced team of master barbers are passionate about delivering exceptional grooming services."
|
|
tag="Team"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
members={[
|
|
{
|
|
id: "1", name: "Marcus T.", role: "Head Barber", imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-showing-pointing-up-with-fingers-number-three_141793-37278.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "Antonio R.", role: "Master Stylist", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-rolling-pin-white-maltese-dog_1153-9900.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Carlos M.", role: "Senior Barber", imageSrc: "http://img.b2bpic.net/free-photo/people-lifestyle-concept-isolated-handsome-fashionable-tattooed-man-with-fuzzy-beard-shaved-head-posing-indoors-with-arms-folded-having-confident-facial-expression_343059-1711.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "Derek P.", role: "Barber", imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-holding-beard-trimmer-looking-with-confident-expression-standing-pink-wall_141793-61347.jpg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="What Our Clients Say"
|
|
description="Join hundreds of satisfied customers who trust OTT Barbershop for their grooming needs."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Outstanding Service Quality", quote: "I've been coming to OTT for five years now. The barbers always deliver exactly what I ask for with incredible precision. Worth every penny!", name: "Robert Johnson", role: "Business Owner", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1602.jpg?_wi=2"
|
|
},
|
|
{
|
|
id: "2", title: "Best Barber Shop in Town", quote: "The atmosphere is welcoming, the barbers are friendly and skilled. My son even looks forward to getting his hair cut here!", name: "Michael Santos", role: "Family Man", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-young-woman-pointing-camera_74855-4351.jpg?_wi=2"
|
|
},
|
|
{
|
|
id: "3", title: "Professional Excellence", quote: "From the moment I walk in to the moment I leave, I feel like I'm getting premium service. Highly recommend OTT Barbershop!", name: "Christopher Lee", role: "Executive", imageSrc: "http://img.b2bpic.net/free-photo/middle-age-latin-businesswoman-smiling-happy-standing-with-arms-crossed-gesture-city_839833-17431.jpg"
|
|
},
|
|
{
|
|
id: "4", title: "Consistent Quality", quote: "Every visit is the same excellent experience. The barbers take pride in their work and it shows in the results.", name: "Anthony Davis", role: "Regular Customer", imageSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-man-with-beard-looking-thoughtful-upper-left-corner-imaging-smiling-white_1258-111693.jpg"
|
|
},
|
|
{
|
|
id: "5", title: "Attention to Detail", quote: "These guys are true professionals. They listen to what you want and deliver exactly that. No compromises on quality.", name: "Vincent Martinez", role: "Customer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-ginger-peson-stylish-navy-t-shirt-looking-camera-winking-showing-thumb-up-while-posing-blue-studio-background-human-facial-expressions_639032-2118.jpg"
|
|
},
|
|
{
|
|
id: "6", title: "Worth the Visit", quote: "Finally found a barbershop where I don't have to worry. They know their craft and genuinely care about customer satisfaction.", name: "Joseph Thompson", role: "Loyal Client", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-making-call-me-gesture-looking-camera_1262-18690.jpg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Book?"
|
|
tagIcon={Phone}
|
|
tagAnimation="slide-up"
|
|
title="Get Your Perfect Cut Today"
|
|
description="Visit OTT Barbershop and experience the difference professional grooming can make. Our team is ready to serve you with excellence."
|
|
buttons={[
|
|
{ text: "Call Now", href: "tel:+1-555-0123" },
|
|
{ text: "Book Online", href: "https://calendly.com" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="OTT Barbershop"
|
|
copyrightText="© 2025 OTT Barbershop. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Haircut", href: "#services" },
|
|
{ label: "Shaving", href: "#services" },
|
|
{ label: "Styling", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Team", href: "#team" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Phone", href: "tel:+1-555-0123" },
|
|
{ label: "Email", href: "mailto:hello@ottbarbershop.com" },
|
|
{ label: "Location", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|