256 lines
14 KiB
TypeScript
256 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Award, Scissors, Sparkles, Zap, Package, Star, Users, Heart, Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Experience", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
{ name: "Visit Us", id: "footer" },
|
|
]}
|
|
button={{ text: "Book Your Experience", href: "contact" }}
|
|
brandName="XCLUSIVE"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Miami's #1 Luxury Barbershop Experience"
|
|
description="More than a haircut—it's an exclusive grooming ritual. Premium service, impeccable craftsmanship, and a sophisticated atmosphere await. Step into luxury."
|
|
tag="Exclusive Grooming"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "canvas-reveal" }}
|
|
buttons={[
|
|
{ text: "Book Your Experience", href: "contact" },
|
|
{ text: "Learn More", href: "about" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18629.jpg"
|
|
imageAlt="XCLUSIVE Barbershop - Luxury Miami grooming destination"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About XCLUSIVE"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
title="We deliver more than grooming—we deliver an experience. Every cut, every service, every moment at XCLUSIVE reflects our commitment to excellence, exclusivity, and your satisfaction. Our expert barbers combine traditional craftsmanship with modern techniques to ensure you leave feeling confident and refined."
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Discover Our Story", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyFive
|
|
title="Our Premium Services"
|
|
description="Experience the full spectrum of luxury grooming at XCLUSIVE"
|
|
tag="Services"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
title: "Executive Haircuts", description: "Precision cuts tailored to your style. Classic fades, modern disconnects, and signature XCLUSIVE shapes. Every cut is a masterpiece.", icon: Scissors,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-female-hairdresser-washing-bearded-men-s-hair-before-haircut-saloon_613910-5446.jpg?_wi=1", imageAlt: "Executive haircut styling"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-female-hairdresser-washing-bearded-men-s-hair-before-haircut-saloon_613910-5446.jpg?_wi=2", imageAlt: "Professional barber technique"},
|
|
],
|
|
},
|
|
{
|
|
title: "Luxury Beard Services", description: "Full beard sculpting, precise trims, and conditioning treatments. Our barbers shape beards with artistry and attention to detail.", icon: Sparkles,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18507.jpg?_wi=1", imageAlt: "Beard styling and grooming"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18507.jpg?_wi=2", imageAlt: "Premium beard trim"},
|
|
],
|
|
},
|
|
{
|
|
title: "Hot Towel Shave", description: "The ultimate traditional experience. Straight razor shave with premium products, hot towel treatments, and skin care—pure indulgence.", icon: Zap,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-female-hairdresser-washing-bearded-men-s-hair-before-haircut-saloon_613910-5446.jpg?_wi=3", imageAlt: "Hot towel shave experience"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-female-hairdresser-washing-bearded-men-s-hair-before-haircut-saloon_613910-5446.jpg?_wi=4", imageAlt: "Premium shaving service"},
|
|
],
|
|
},
|
|
{
|
|
title: "Grooming Packages", description: "Bundle services for maximum value. Haircut + beard sculpt + hot towel shave. Designed for the discerning gentleman.", icon: Package,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18507.jpg?_wi=3", imageAlt: "Complete grooming package"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18507.jpg?_wi=4", imageAlt: "Full grooming experience"},
|
|
],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="Why Customers Choose XCLUSIVE"
|
|
description="Our numbers speak to our commitment to excellence and customer satisfaction"
|
|
tag="Social Proof"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{ id: "1", icon: Star, title: "Rating", value: "5.0★" },
|
|
{ id: "2", icon: Users, title: "Satisfied Clients", value: "2,500+" },
|
|
{ id: "3", icon: Award, title: "Experience", value: "15+ Years" },
|
|
{ id: "4", icon: Zap, title: "Quality", value: "100%" },
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Clients Say"
|
|
description="Real experiences from Miami's most discerning professionals and entrepreneurs"
|
|
tag="Testimonials"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Marcus Thompson", role: "CEO", company: "Tech Innovations Miami", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Marcus Thompson testimonial"},
|
|
{
|
|
id: "2", name: "David Chen", role: "Executive VP", company: "Premium Ventures", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "David Chen testimonial"},
|
|
{
|
|
id: "3", name: "James Rodriguez", role: "Entrepreneur", company: "Coastal Hospitality Group", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "James Rodriguez testimonial"},
|
|
{
|
|
id: "4", name: "Alexander King", role: "Entertainment Manager", company: "Prestige Events", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4", imageAlt: "Alexander King testimonial"},
|
|
{
|
|
id: "5", name: "Christopher Lee", role: "Financial Advisor", company: "Wealth Management Partners", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=5", imageAlt: "Christopher Lee testimonial"},
|
|
{
|
|
id: "6", name: "Michael Santos", role: "Business Owner", company: "Santos Luxury Goods", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=6", imageAlt: "Michael Santos testimonial"},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Featured In & Trusted By"
|
|
description="Recognized by Miami's leading lifestyle and business publications"
|
|
tag="Media Recognition"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
names={[
|
|
"Miami Luxury Magazine", "South Beach Style", "Elite Miami", "The Miami Herald", "Robb Report", "Forbes Miami", "Luxury Grooming Co.", "Men's Journal Miami"]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Newsletter"
|
|
title="Stay Updated on Exclusive Offers"
|
|
description="Join Miami's elite grooming community and receive insider tips, exclusive booking windows, and special promotions directly to your inbox."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "canvas-reveal" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg"
|
|
imageAlt="XCLUSIVE Barbershop interior"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get Exclusive Access"
|
|
termsText="We respect your privacy. Unsubscribe anytime. Expect curated grooming tips and exclusive offers."
|
|
onSubmit={(email: string) => console.log("Newsletter signup:", email)}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="XCLUSIVE"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Executive Haircuts", href: "#services" },
|
|
{ label: "Beard Services", href: "#services" },
|
|
{ label: "Hot Towel Shave", href: "#services" },
|
|
{ label: "Grooming Packages", href: "#services" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Story", href: "#about" },
|
|
{ label: "Experience", href: "#metrics" },
|
|
{ label: "Careers", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Book Now", href: "#contact" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Reviews", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cancellation Policy", href: "#" },
|
|
{ label: "Accessibility", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 XCLUSIVE Barbershop | Miami's Premier Luxury Grooming Destination"
|
|
onPrivacyClick={() => console.log("Privacy clicked")}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|