Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-21 19:26:54 +00:00

View File

@@ -16,384 +16,193 @@ import { Award, Clock, Scissors, Sparkles } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="large"
background="circleGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="large"
background="circleGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "services",
},
{
name: "Gallery",
id: "gallery",
},
{
name: "About",
id: "about",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Carlos Barber Shop"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "Gallery", id: "gallery" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
]}
brandName="Carlos Barber Shop"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "rotated-rays-static",
}}
title="Classic Cuts. Modern Style. Serving the Community Since 1985."
description="Quality haircuts, fades, and beauty services in a trusted neighborhood shop."
buttons={[
{
text: "Call Now",
href: "tel:6463222306",
},
{
text: "Get Directions",
href: "#contact",
},
]}
carouselItems={[
{
id: "h1",
imageSrc: "http://img.b2bpic.net/free-photo/vintage-salon-tools-jobs-career-concept_53876-127080.jpg?_wi=1",
imageAlt: "Barbershop interior",
},
{
id: "h2",
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186516.jpg?_wi=1",
imageAlt: "Fade haircut",
},
{
id: "h3",
imageSrc: "http://img.b2bpic.net/free-photo/barber-makes-haircut-with-cutting-machine_140725-7666.jpg?_wi=1",
imageAlt: "Barber shop service",
},
{
id: "h4",
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-taking-care-client-s-hair_23-2148940865.jpg?_wi=1",
imageAlt: "Modern haircut",
},
{
id: "h5",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg",
imageAlt: "Salon service",
},
{
id: "h6",
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-with-hairdryer-working-with-senior-client_23-2148181898.jpg",
imageAlt: "Barber tools",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{ variant: "rotated-rays-static" }}
title="Classic Cuts. Modern Style. Serving the Community Since 1985."
description="Quality haircuts, fades, and beauty services in a trusted neighborhood shop."
buttons={[
{ text: "Call Now", href: "tel:6463222306" },
{ text: "Get Directions", href: "#contact" },
]}
carouselItems={[
{ id: "h1", imageSrc: "http://img.b2bpic.net/free-photo/vintage-salon-tools-jobs-career-concept_53876-127080.jpg", imageAlt: "Barbershop interior" },
{ id: "h2", imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186516.jpg", imageAlt: "Fade haircut" },
{ id: "h3", imageSrc: "http://img.b2bpic.net/free-photo/barber-makes-haircut-with-cutting-machine_140725-7666.jpg", imageAlt: "Barber shop service" },
{ id: "h4", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-taking-care-client-s-hair_23-2148940865.jpg", imageAlt: "Modern haircut" },
{ id: "h5", imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg", imageAlt: "Salon service" },
{ id: "h6", imageSrc: "http://img.b2bpic.net/free-photo/male-barber-with-hairdryer-working-with-senior-client_23-2148181898.jpg", imageAlt: "Barber tools" },
]}
/>
</div>
<div id="services" data-section="services">
<PricingCardNine
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
plans={[
{
id: "barber",
title: "Barber Services",
price: "From $10",
period: "Prices vary by style",
features: [
"Haircut: $25+",
"Skin Fade: $30+",
"Beard Trim: $15+",
"Haircut + Beard: $40+",
"Kids Haircut: $20+",
"Shape Up: $10+",
],
button: {
text: "Call to Book",
},
imageSrc: "http://img.b2bpic.net/free-photo/from-scissors-rake_23-2147778741.jpg",
imageAlt: "From above scissors and rake",
},
{
id: "beauty",
title: "Beauty Services",
price: "Custom",
period: "Call for pricing",
features: [
"Professional Hair Styling",
"Coloring Treatments",
"Blowouts",
"Salon Maintenance",
"Full Service Salon",
],
button: {
text: "Call to Book",
},
imageSrc: "http://img.b2bpic.net/free-photo/vintage-salon-tools-jobs-career-concept_53876-127080.jpg?_wi=2",
imageAlt: "From above scissors and rake",
},
]}
title="Our Services"
description="Premium barber and beauty services for the whole family."
/>
</div>
<div id="services" data-section="services">
<PricingCardNine
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
plans={[
{
id: "barber", title: "Barber Services", price: "From $10", period: "Prices vary by style", features: ["Haircut: $25+", "Skin Fade: $30+", "Beard Trim: $15+", "Haircut + Beard: $40+", "Kids Haircut: $20+", "Shape Up: $10+"],
button: { text: "Call to Book" },
imageSrc: "http://img.b2bpic.net/free-photo/from-scissors-rake_23-2147778741.jpg", imageAlt: "From above scissors and rake"},
{
id: "beauty", title: "Beauty Services", price: "Custom", period: "Call for pricing", features: ["Professional Hair Styling", "Coloring Treatments", "Blowouts", "Salon Maintenance", "Full Service Salon"],
button: { text: "Call to Book" },
imageSrc: "http://img.b2bpic.net/free-photo/vintage-salon-tools-jobs-career-concept_53876-127080.jpg", imageAlt: "From above scissors and rake"},
]}
title="Our Services"
description="Premium barber and beauty services for the whole family."
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardFour
textboxLayout="split"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Fresh Fade",
price: "Classic",
variant: "Haircut",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-customer-getting-his-beard-trimmed_23-2148256866.jpg",
},
{
id: "p2",
name: "Beard Trim",
price: "Precision",
variant: "Barber",
imageSrc: "http://img.b2bpic.net/free-photo/makeup-artist-female-customer-looking-mobile-phone_329181-1952.jpg",
},
{
id: "p3",
name: "Salon Styling",
price: "Modern",
variant: "Beauty",
imageSrc: "http://img.b2bpic.net/free-photo/customer-getting-haircut-from_23-2148256910.jpg",
},
{
id: "p4",
name: "Shop Interior",
price: "Trusted",
variant: "Environment",
imageSrc: "http://img.b2bpic.net/free-photo/hair-dryer-brushes-top-view_23-2148352864.jpg",
},
{
id: "p5",
name: "Line Up",
price: "Sharp",
variant: "Barber",
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-armchair-has-rest-after-work-with-beer-bottle-his-hand_613910-18605.jpg",
},
{
id: "p6",
name: "Full Service",
price: "Professional",
variant: "Salon",
imageSrc: "http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg",
},
]}
title="Our Work"
description="Fresh looks and professional service every day."
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardFour
textboxLayout="split"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
animationType="slide-up"
products={[
{ id: "p1", name: "Fresh Fade", price: "Classic", variant: "Haircut", imageSrc: "http://img.b2bpic.net/free-photo/close-up-customer-getting-his-beard-trimmed_23-2148256866.jpg" },
{ id: "p2", name: "Beard Trim", price: "Precision", variant: "Barber", imageSrc: "http://img.b2bpic.net/free-photo/makeup-artist-female-customer-looking-mobile-phone_329181-1952.jpg" },
{ id: "p3", name: "Salon Styling", price: "Modern", variant: "Beauty", imageSrc: "http://img.b2bpic.net/free-photo/customer-getting-haircut-from_23-2148256910.jpg" },
{ id: "p4", name: "Shop Interior", price: "Trusted", variant: "Environment", imageSrc: "http://img.b2bpic.net/free-photo/hair-dryer-brushes-top-view_23-2148352864.jpg" },
{ id: "p5", name: "Line Up", price: "Sharp", variant: "Barber", imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-armchair-has-rest-after-work-with-beer-bottle-his-hand_613910-18605.jpg" },
{ id: "p6", name: "Full Service", price: "Professional", variant: "Salon", imageSrc: "http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg" },
]}
title="Our Work"
description="Fresh looks and professional service every day."
/>
</div>
<div id="why-us" data-section="why-us">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "Serving Since 1985",
description: "A trusted local institution in the heart of the neighborhood.",
icon: Award,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985718.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/vintage-salon-tools-jobs-career-concept_53876-127080.jpg?_wi=3",
imageAlt: "close up skin fade haircut",
},
{
title: "Expert Team",
description: "Experienced professionals dedicated to your perfect look.",
icon: Scissors,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6346.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-drying-woman39s-hair_657883-589.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186516.jpg?_wi=2",
imageAlt: "close up skin fade haircut",
},
{
title: "Walk-Ins Welcome",
description: "No appointment needed—just stop by for a fresh cut.",
icon: Clock,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/view-scissors-hair-salon_23-2150462460.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186473.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/barber-makes-haircut-with-cutting-machine_140725-7666.jpg?_wi=2",
imageAlt: "close up skin fade haircut",
},
{
title: "Full-Service Shop",
description: "Haircuts, fades, and beauty services under one roof.",
icon: Sparkles,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/photo-black-plastic-bottle-with-dispenser-including-hair-care-product_651396-969.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2149220592.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-taking-care-client-s-hair_23-2148940865.jpg?_wi=2",
imageAlt: "close up skin fade haircut",
},
]}
title="Why Choose Us"
description="Experience local expertise rooted in community values since 1985."
/>
</div>
<div id="why-us" data-section="why-us">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "Serving Since 1985", description: "A trusted local institution in the heart of the neighborhood.", icon: Award,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985718.jpg" },
],
},
{
title: "Expert Team", description: "Experienced professionals dedicated to your perfect look.", icon: Scissors,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6346.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-drying-woman39s-hair_657883-589.jpg" },
],
},
{
title: "Walk-Ins Welcome", description: "No appointment needed—just stop by for a fresh cut.", icon: Clock,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/view-scissors-hair-salon_23-2150462460.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186473.jpg" },
],
},
{
title: "Full-Service Shop", description: "Haircuts, fades, and beauty services under one roof.", icon: Sparkles,
mediaItems: [
{ imageSrc: "http://img.b2bpic.net/free-photo/photo-black-plastic-bottle-with-dispenser-including-hair-care-product_651396-969.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2149220592.jpg" },
],
},
]}
title="Why Choose Us"
description="Experience local expertise rooted in community values since 1985."
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="About Our Shop"
description="Carlos Barber Shop & Beauty Salon has been a neighborhood staple since 1985. We pride ourselves on authentic, quality service for men, women, and children. When you walk through our doors, you're not just a client—you're part of our family tradition."
imageSrc="http://img.b2bpic.net/free-photo/lateral-view-man-with-vintage-haircut_23-2148328597.jpg"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="About Our Shop"
description="Carlos Barber Shop & Beauty Salon has been a neighborhood staple since 1985. We pride ourselves on authentic, quality service for men, women, and children. When you walk through our doors, you're not just a client—you're part of our family tradition."
imageSrc="http://img.b2bpic.net/free-photo/lateral-view-man-with-vintage-haircut_23-2148328597.jpg"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{
id: "1",
title: "Do you take walk-ins?",
content: "Yes, we accept walk-ins throughout the day.",
},
{
id: "2",
title: "Do I need an appointment?",
content: "Appointments are optional, walk-ins are always welcomed.",
},
{
id: "3",
title: "What services do you offer?",
content: "We offer full-service haircuts, skin fades, beard trims, and salon beauty services.",
},
{
id: "4",
title: "How long have you been established?",
content: "We have been serving our community with pride since 1985.",
},
]}
title="Frequently Asked Questions"
description="Common questions about our services and shop policy."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{ id: "1", title: "Do you take walk-ins?", content: "Yes, we accept walk-ins throughout the day." },
{ id: "2", title: "Do I need an appointment?", content: "Appointments are optional, walk-ins are always welcomed." },
{ id: "3", title: "What services do you offer?", content: "We offer full-service haircuts, skin fades, beard trims, and salon beauty services." },
{ id: "4", title: "How long have you been established?", content: "We have been serving our community with pride since 1985." },
]}
title="Frequently Asked Questions"
description="Common questions about our services and shop policy."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "rotated-rays-static",
}}
text="Visit Carlos Barber Shop & Beauty Salon Today. Phone: 646-322-2306"
buttons={[
{
text: "Call Now",
href: "tel:6463222306",
},
{
text: "Get Directions",
href: "#",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{ variant: "rotated-rays-static" }}
text="Visit Carlos Barber Shop & Beauty Salon Today. Phone: 646-322-2306"
buttons={[
{ text: "Call Now", href: "tel:6463222306" },
{ text: "Get Directions", href: "#" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Services",
items: [
{
label: "Haircuts",
href: "#services",
},
{
label: "Skin Fades",
href: "#services",
},
{
label: "Beauty Salon",
href: "#services",
},
],
},
{
title: "Contact",
items: [
{
label: "646-322-2306",
href: "tel:6463222306",
},
{
label: "Visit Us",
href: "#",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "FAQ",
href: "#faq",
},
],
},
]}
logoText="Carlos Barber Shop & Beauty Salon"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Services", items: [
{ label: "Haircuts", href: "#services" },
{ label: "Skin Fades", href: "#services" },
{ label: "Beauty Salon", href: "#services" },
],
},
{
title: "Contact", items: [
{ label: "646-322-2306", href: "tel:6463222306" },
{ label: "Visit Us", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "FAQ", href: "#faq" },
],
},
]}
logoText="Carlos Barber Shop & Beauty Salon"
/>
</div>
</ReactLenis>
</ThemeProvider>
);