Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-20 17:30:57 +00:00

View File

@@ -20,400 +20,163 @@ export default function LandingPage() {
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Services",
id: "features",
},
{
name: "Pricing",
id: "pricing",
},
{
name: "Testimonials",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Richard Barbershop"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Services", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="Richard Barbershop"
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{
variant: "radial-gradient",
}}
title="Experience Excellence at Richard Barbershop"
description="Professional grooming with precision, style, and care in Union City. 18 years of excellence delivering the sharpest fades in the city."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/urban-portrait-young-ginger-man_23-2149122914.jpg",
alt: "Client 1",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-isolated-portrait-cheerful-happy-young-man-with-afro-hairstyle-casual-white-t-shirt-smiling-brightly-looking-camera-with-excited-joyful-expression_176420-12985.jpg",
alt: "Client 2",
},
{
src: "http://img.b2bpic.net/free-photo/side-view-man-holding-painting-brush_23-2149529894.jpg",
alt: "Client 3",
},
{
src: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-holding-juice-while-getting-haircut_613910-5727.jpg",
alt: "Client 4",
},
{
src: "http://img.b2bpic.net/free-photo/young-man-talking-phone-studio_23-2147717303.jpg",
alt: "Client 5",
},
]}
avatarText="Join our 23+ satisfied clients"
buttons={[
{
text: "Book Now",
href: "#contact",
},
]}
marqueeItems={[
{
type: "text-icon",
text: "Precision Fades",
icon: Scissors,
},
{
type: "text-icon",
text: "Hot Towel Shaves",
icon: Flame,
},
{
type: "text-icon",
text: "Professional Grooming",
icon: Sparkles,
},
{
type: "text-icon",
text: "Classic Style",
icon: Star,
},
{
type: "text-icon",
text: "Modern Cuts",
icon: Zap,
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{ variant: "radial-gradient" }}
title="Experience Excellence at Richard Barbershop"
description="Professional grooming with precision, style, and care in Union City. 18 years of excellence delivering the sharpest fades in the city."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/urban-portrait-young-ginger-man_23-2149122914.jpg", alt: "Client 1" },
{ src: "http://img.b2bpic.net/free-photo/close-up-isolated-portrait-cheerful-happy-young-man-with-afro-hairstyle-casual-white-t-shirt-smiling-brightly-looking-camera-with-excited-joyful-expression_176420-12985.jpg", alt: "Client 2" },
{ src: "http://img.b2bpic.net/free-photo/side-view-man-holding-painting-brush_23-2149529894.jpg", alt: "Client 3" },
{ src: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-holding-juice-while-getting-haircut_613910-5727.jpg", alt: "Client 4" },
{ src: "http://img.b2bpic.net/free-photo/young-man-talking-phone-studio_23-2147717303.jpg", alt: "Client 5" }
]}
avatarText="Join our 23+ satisfied clients"
buttons={[{ text: "Book Now", href: "#contact" }]}
marqueeItems={[
{ type: "text-icon", text: "Precision Fades", icon: Scissors },
{ type: "text-icon", text: "Hot Towel Shaves", icon: Flame },
{ type: "text-icon", text: "Professional Grooming", icon: Sparkles },
{ type: "text-icon", text: "Classic Style", icon: Star },
{ type: "text-icon", text: "Modern Cuts", icon: Zap }
]}
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Your Neighborhood Barber"
description="Richard Barbershop has been a cornerstone of the Union City community for nearly two decades. We pride ourselves on attention to detail, offering sharp lines, clean fades, and a professional, welcoming atmosphere. Your comfort and satisfaction are our top priorities."
imageSrc="http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94762.jpg?_wi=1"
imageAlt="Barbershop interior"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
useInvertedBackground={false}
title="Your Neighborhood Barber"
description="Richard Barbershop has been a cornerstone of the Union City community for nearly two decades. We pride ourselves on attention to detail, offering sharp lines, clean fades, and a professional, welcoming atmosphere. Your comfort and satisfaction are our top priorities."
imageSrc="http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94762.jpg"
imageAlt="Barbershop interior"
/>
</div>
<div id="features" data-section="features">
<FeatureCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
features={[
{
title: "Precision Fades",
description: "Crisp lines and perfectly blended fades tailored to your head shape.",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-barber-shop_23-2149141768.jpg",
imageAlt: "Precision Fade",
},
{
title: "Professional Grooming",
description: "High-quality products and techniques for a polished, modern look.",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg",
imageAlt: "Grooming",
},
{
title: "Hot Towel Shaves",
description: "A relaxing, classic experience to keep you refreshed and sharp.",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-senior-man-laughing_23-2151203948.jpg",
imageAlt: "Hot Towel Shave",
},
]}
title="Our Signature Services"
description="Expert services tailored to your specific style."
/>
</div>
<div id="features" data-section="features">
<FeatureCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
features={[
{ title: "Precision Fades", description: "Crisp lines and perfectly blended fades tailored to your head shape.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-barber-shop_23-2149141768.jpg", imageAlt: "Precision Fade" },
{ title: "Professional Grooming", description: "High-quality products and techniques for a polished, modern look.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg", imageAlt: "Grooming" },
{ title: "Hot Towel Shaves", description: "A relaxing, classic experience to keep you refreshed and sharp.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-senior-man-laughing_23-2151203948.jpg", imageAlt: "Hot Towel Shave" }
]}
title="Our Signature Services"
description="Expert services tailored to your specific style."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "p1",
tag: "Essentials",
price: "$25",
period: "service",
description: "Standard haircut experience.",
button: {
text: "Select",
href: "#contact",
},
featuresTitle: "Includes:",
features: [
"Precision Fade",
"Clean Lines",
],
},
{
id: "p2",
tag: "Signature",
price: "$40",
period: "service",
description: "Haircut plus facial grooming.",
button: {
text: "Select",
href: "#contact",
},
featuresTitle: "Includes:",
features: [
"Precision Fade",
"Hot Towel",
"Beard Trim",
],
},
{
id: "p3",
tag: "Complete",
price: "$55",
period: "service",
description: "Full grooming package.",
button: {
text: "Select",
href: "#contact",
},
featuresTitle: "Includes:",
features: [
"Signature Service",
"Luxury Mask",
"Deep Shave",
],
},
]}
title="Fair Pricing"
description="Great service doesn't have to be expensive. View our transparent pricing."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "p1", tag: "Essentials", price: "$25", period: "service", description: "Standard haircut experience.", button: { text: "Select", href: "#contact" }, featuresTitle: "Includes:", features: ["Precision Fade", "Clean Lines"] },
{ id: "p2", tag: "Signature", price: "$40", period: "service", description: "Haircut plus facial grooming.", button: { text: "Select", href: "#contact" }, featuresTitle: "Includes:", features: ["Precision Fade", "Hot Towel", "Beard Trim"] },
{ id: "p3", tag: "Complete", price: "$55", period: "service", description: "Full grooming package.", button: { text: "Select", href: "#contact" }, featuresTitle: "Includes:", features: ["Signature Service", "Luxury Mask", "Deep Shave"] }
]}
title="Fair Pricing"
description="Great service doesn't have to be expensive. View our transparent pricing."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "18+",
description: "Years of experience",
},
{
id: "m2",
value: "5.0",
description: "Customer rating",
},
{
id: "m3",
value: "23+",
description: "Verified reviews",
},
]}
title="By The Numbers"
description="Experience that speaks for itself."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
metrics={[
{ id: "m1", value: "18+", description: "Years of experience" },
{ id: "m2", value: "5.0", description: "Customer rating" },
{ id: "m3", value: "23+", description: "Verified reviews" }
]}
title="By The Numbers"
description="Experience that speaks for itself."
/>
</div>
<div id="team" data-section="team">
<TeamCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
members={[
{
id: "r1",
name: "Richard",
role: "Master Barber",
description: "18 years of professional experience.",
imageSrc: "http://img.b2bpic.net/free-photo/young-joyful-blonde-male-barber-uniform-holds-hair-clipper-raises-fist-up-isolated-olive-green-space-with-copy-space_141793-60317.jpg",
},
{
id: "r2",
name: "Alex",
role: "Senior Barber",
description: "Expert in modern fades and styles.",
imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-holding-mousse-client_23-2147778804.jpg",
},
{
id: "r3",
name: "Marcus",
role: "Barber",
description: "Passionate about precision grooming.",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg",
},
]}
title="Meet Our Team"
description="Skilled barbers dedicated to your perfect look."
/>
</div>
<div id="team" data-section="team">
<TeamCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
members={[
{ id: "r1", name: "Richard", role: "Master Barber", description: "18 years of professional experience.", imageSrc: "http://img.b2bpic.net/free-photo/young-joyful-blonde-male-barber-uniform-holds-hair-clipper-raises-fist-up-isolated-olive-green-space-with-copy-space_141793-60317.jpg" },
{ id: "r2", name: "Alex", role: "Senior Barber", description: "Expert in modern fades and styles.", imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-holding-mousse-client_23-2147778804.jpg" },
{ id: "r3", name: "Marcus", role: "Barber", description: "Passionate about precision grooming.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg" }
]}
title="Meet Our Team"
description="Skilled barbers dedicated to your perfect look."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Adam Boyd",
date: "3 months ago",
title: "Highly Professional",
quote: "Ive been to a lot of barbers, but this place truly stands out. From the moment you walk in, youre treated with professionalism and respect.",
tag: "Regular",
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506285.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg",
imageAlt: "happy client with haircut",
},
{
id: "2",
name: "Prince Amankwah",
date: "3 months ago",
title: "Best Barber in Town",
quote: "The best barber shop in the entire city! They are super friendly and attentive. And very affordable.",
tag: "Regular",
avatarSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3635.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94762.jpg?_wi=2",
imageAlt: "happy client with haircut",
},
{
id: "3",
name: "Frankys Gonzalez",
date: "3 months ago",
title: "18 Years of Excellence",
quote: "Richard is a great barber. Ive been getting my haircuts with him for 18 years and he has not failed me.",
tag: "Longtime",
avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/urban-portrait-young-ginger-man_23-2149122914.jpg",
imageAlt: "happy client with haircut",
},
{
id: "4",
name: "Client Four",
date: "4 months ago",
title: "Outstanding",
quote: "The atmosphere is always welcoming and clean. Top notch work.",
tag: "Regular",
avatarSrc: "http://img.b2bpic.net/free-photo/young-man-applying-his-anti-aging-treatment_23-2149296516.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-isolated-portrait-cheerful-happy-young-man-with-afro-hairstyle-casual-white-t-shirt-smiling-brightly-looking-camera-with-excited-joyful-expression_176420-12985.jpg",
imageAlt: "happy client with haircut",
},
{
id: "5",
name: "Client Five",
date: "5 months ago",
title: "Precision Cuts",
quote: "Never disappointed. Every cut is sharp and clean. Great team.",
tag: "Regular",
avatarSrc: "http://img.b2bpic.net/free-photo/hairdresser-putting-shaving-cream-elderly-client-beauty-salon_23-2148182015.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-painting-brush_23-2149529894.jpg",
imageAlt: "happy client with haircut",
},
]}
title="What Our Clients Say"
description="Join our community of happy clients."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{ id: "1", name: "Adam Boyd", date: "3 months ago", title: "Highly Professional", quote: "Ive been to a lot of barbers, but this place truly stands out. From the moment you walk in, youre treated with professionalism and respect.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506285.jpg" },
{ id: "2", name: "Prince Amankwah", date: "3 months ago", title: "Best Barber in Town", quote: "The best barber shop in the entire city! They are super friendly and attentive. And very affordable.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3635.jpg" },
{ id: "3", name: "Frankys Gonzalez", date: "3 months ago", title: "18 Years of Excellence", quote: "Richard is a great barber. Ive been getting my haircuts with him for 18 years and he has not failed me.", tag: "Longtime", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg" },
{ id: "4", name: "Client Four", date: "4 months ago", title: "Outstanding", quote: "The atmosphere is always welcoming and clean. Top notch work.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/young-man-applying-his-anti-aging-treatment_23-2149296516.jpg" },
{ id: "5", name: "Client Five", date: "5 months ago", title: "Precision Cuts", quote: "Never disappointed. Every cut is sharp and clean. Great team.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/hairdresser-putting-shaving-cream-elderly-client-beauty-salon_23-2148182015.jpg" }
]}
title="What Our Clients Say"
description="Join our community of happy clients."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Visit Us"
title="Book Your Appointment"
description="Stop by today at 309 48th St, Union City, NJ 07087 or call (201) 606-1122. Open daily until 8 PM."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Visit Us"
title="Book Your Appointment"
description="Stop by today at 309 48th St, Union City, NJ 07087 or call (201) 606-1122. Open daily until 8 PM."
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Info",
items: [
{
label: "About",
href: "#about",
},
{
label: "Pricing",
href: "#pricing",
},
{
label: "Services",
href: "#features",
},
],
},
{
title: "Contact",
items: [
{
label: "(201) 606-1122",
href: "tel:2016061122",
},
{
label: "309 48th St, Union City, NJ",
href: "#",
},
],
},
{
title: "Social",
items: [
{
label: "Instagram",
href: "#",
},
{
label: "Facebook",
href: "#",
},
],
},
]}
logoText="Richard Barbershop"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Info", items: [{ label: "About", href: "#about" }, { label: "Pricing", href: "#pricing" }, { label: "Services", href: "#features" }] },
{ title: "Contact", items: [{ label: "(201) 606-1122", href: "tel:2016061122" }, { label: "309 48th St, Union City, NJ", href: "#" }] },
{ title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] }
]}
logoText="Richard Barbershop"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}