202 lines
11 KiB
TypeScript
202 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Calendar, Scissors, Star } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Fade Away Vazquez"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Book Now", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
title="Premium Barbershop Excellence"
|
|
description="Experience the art of professional grooming at Fade Away Vazquez. Where precision meets hospitality in every cut."
|
|
tag="Est. 2020"
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186469.jpg"
|
|
imageAlt="Professional barber shop interior"
|
|
mediaAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "Marcus Johnson", handle: "Regular Customer", testimonial: "Best fade in the city. Vazquez knows exactly what you need.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/person-expressing-appreciation-their-workmates_23-2149430613.jpg"
|
|
},
|
|
{
|
|
name: "David Chen", handle: "Corporate Professional", testimonial: "Impeccable service. Every visit is a premium experience.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-handsome-man-looking-into-distance_1262-3510.jpg"
|
|
},
|
|
{
|
|
name: "James Rodriguez", handle: "Weekly Client", testimonial: "The attention to detail is unmatched. Highly recommend.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2881.jpg"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "#contact" },
|
|
{ text: "View Services", href: "#services" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="Our Story"
|
|
title="Master Barber Craftsmanship Since 2020"
|
|
description="Fade Away Vazquez is more than a barbershop—it's a sanctuary for style-conscious men seeking precision cuts and exceptional service. Founded with a passion for the art of barbering, we blend traditional techniques with modern trends to deliver results that exceed expectations."
|
|
metrics={[
|
|
{ value: "5,000+", title: "Satisfied Clients" },
|
|
{ value: "15+", title: "Years Combined Experience" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg"
|
|
imageAlt="Barber shop founder with tools"
|
|
useInvertedBackground={true}
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="blur-reveal"
|
|
tagAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBento
|
|
title="Premium Services"
|
|
description="Expert barber services tailored to your style and preferences"
|
|
tag="Our Specialties"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
title: "Classic Fade", description: "Precision fade cuts with clean lines and expert blending for a timeless look", bentoComponent: "globe"
|
|
},
|
|
{
|
|
title: "Straight Razor Shave", description: "Traditional hot towel shave with premium products for ultimate relaxation", bentoComponent: "animated-bar-chart"
|
|
},
|
|
{
|
|
title: "Beard Grooming", description: "Professional beard trim, shape, and styling with expert technique", bentoComponent: "line-chart"
|
|
},
|
|
{
|
|
title: "Hair Design", description: "Custom hair designs and patterns created with precision and artistry", bentoComponent: "map"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
title="Our Pricing"
|
|
description="Transparent pricing for premium barber services"
|
|
tag="Services & Rates"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
plans={[
|
|
{
|
|
id: "haircut", title: "Classic Haircut", price: "$35", period: "per cut", imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg", imageAlt: "Classic haircut service", button: { text: "Book Now", href: "#contact" },
|
|
features: ["Professional fade or shape", "Clean neckline and edges", "Expert consultation", "Quality hair products"]
|
|
},
|
|
{
|
|
id: "shave", title: "Straight Razor Shave", price: "$30", period: "per service", imageSrc: "http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-7913.jpg", imageAlt: "Straight razor shave service", button: { text: "Book Now", href: "#contact" },
|
|
features: ["Hot towel treatment", "Premium shaving cream", "Straight razor precision", "Aftershave cologne"]
|
|
},
|
|
{
|
|
id: "beard", title: "Beard Grooming", price: "$25", period: "per session", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-standing-outside-shop-talking-mobile-phone_23-2148175727.jpg", imageAlt: "Beard grooming service", button: { text: "Book Now", href: "#contact" },
|
|
features: ["Professional beard trim", "Shape and styling", "Beard oil treatment", "Expert consultation"]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="Client Reviews"
|
|
description="Hear from our satisfied clients about their experience at Fade Away Vazquez"
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Marcus Johnson", role: "Regular Client", testimonial: "The precision and attention to detail is incredible. Vazquez delivers the best fades in the city every single time.", imageSrc: "http://img.b2bpic.net/free-photo/person-expressing-appreciation-their-workmates_23-2149430613.jpg", icon: Scissors
|
|
},
|
|
{
|
|
id: "2", name: "David Chen", role: "Corporate Professional", testimonial: "Professional service, clean shop, and friendly atmosphere. I've been coming for over a year and never disappointed.", imageSrc: "http://img.b2bpic.net/free-photo/confident-handsome-man-looking-into-distance_1262-3510.jpg", icon: Scissors
|
|
},
|
|
{
|
|
id: "3", name: "James Rodriguez", role: "Weekly Client", testimonial: "Vazquez understands what you want and executes flawlessly. Worth every penny. Highly recommend to anyone.", imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2881.jpg", icon: Scissors
|
|
},
|
|
{
|
|
id: "4", name: "Anthony Williams", role: "New Customer", testimonial: "First visit was amazing. The barber really listens and takes time to get it right. Already booked my next appointment.", imageSrc: "http://img.b2bpic.net/free-photo/man-with-raised-thumb_1187-3101.jpg", icon: Scissors
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get In Touch"
|
|
tagIcon={Calendar}
|
|
tagAnimation="slide-up"
|
|
title="Book Your Appointment"
|
|
description="Reserve your spot at Fade Away Vazquez and experience premium barbershop service. Our booking system makes it easy to schedule."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/back-view-smiley-barber-using-hairdryer_23-2148298282.jpg"
|
|
imageAlt="Fade Away Vazquez barbershop interior"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Reserve Spot"
|
|
termsText="We'll send you booking details and special offers. You can unsubscribe anytime."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Fade Away Vazquez"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Contact", href: "mailto:info@fadeawayvazquez.com" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|