Merge version_1 into main #2
460
src/app/page.tsx
460
src/app/page.tsx
@@ -16,340 +16,154 @@ import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Barbers",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="24 Hour Barber Boyz"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Barbers", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="24 Hour Barber Boyz"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Fresh cuts, anytime you need them"
|
||||
description="Open 24 hours in Atlanta with a crew of skilled barbers ready for walk-ins or bookings. No appointment stress, just quality fades and genuine service."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "https://booksy.com",
|
||||
},
|
||||
{
|
||||
text: "Walk In",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186494.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "plain" }}
|
||||
title="Fresh cuts, anytime you need them"
|
||||
description="Open 24 hours in Atlanta with a crew of skilled barbers ready for walk-ins or bookings. No appointment stress, just quality fades and genuine service."
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "https://booksy.com" },
|
||||
{ text: "Walk In", href: "#contact" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186494.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Quality Service, 24/7 in the Heart of Atlanta"
|
||||
description={[
|
||||
"At 24 Hour Barber Boyz, we understand that your schedule doesn't stop at 5 PM. Our shop is built for the busy professional, the late-shift worker, and everyone in between.",
|
||||
"We pride ourselves on providing a welcoming atmosphere and consistent, high-quality results. Whether you need a midnight fade or a mid-morning trim, our doors are always open for you.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Quality Service, 24/7 in the Heart of Atlanta"
|
||||
description={[
|
||||
"At 24 Hour Barber Boyz, we understand that your schedule doesn't stop at 5 PM. Our shop is built for the busy professional, the late-shift worker, and everyone in between.", "We pride ourselves on providing a welcoming atmosphere and consistent, high-quality results. Whether you need a midnight fade or a mid-morning trim, our doors are always open for you."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "24/7 Accessibility",
|
||||
description: "Always open to fit your schedule, even outside business hours.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-man-posing-studio_176474-38482.jpg",
|
||||
imageAlt: "24/7 availability",
|
||||
},
|
||||
{
|
||||
title: "Master Barbers",
|
||||
description: "Skilled professionals committed to delivering perfect fades every time.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332457.jpg",
|
||||
imageAlt: "Skilled staff",
|
||||
},
|
||||
{
|
||||
title: "Welcoming Atmosphere",
|
||||
description: "A chill, friendly shop environment where you can relax.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg",
|
||||
imageAlt: "Chill shop vibe",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="We set the standard for 24/7 grooming excellence in Atlanta."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "24/7 Accessibility", description: "Always open to fit your schedule, even outside business hours.", imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-man-posing-studio_176474-38482.jpg", imageAlt: "24/7 availability" },
|
||||
{ title: "Master Barbers", description: "Skilled professionals committed to delivering perfect fades every time.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332457.jpg", imageAlt: "Skilled staff" },
|
||||
{ title: "Welcoming Atmosphere", description: "A chill, friendly shop environment where you can relax.", imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg", imageAlt: "Chill shop vibe" },
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="We set the standard for 24/7 grooming excellence in Atlanta."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "barbers",
|
||||
groupTitle: "Core Crew",
|
||||
members: [
|
||||
{
|
||||
id: "1",
|
||||
title: "Marcus",
|
||||
subtitle: "Lead Barber",
|
||||
detail: "Expert in precision fades and beard work.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-slavic-middle-aged-male-barber-uniform-holding-scissors-crossing-hands-isolated-purple-wall_141793-83015.jpg",
|
||||
imageAlt: "Marcus",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Jamal",
|
||||
subtitle: "Style Specialist",
|
||||
detail: "Known for clean lineups and modern styles.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/groomed-bearded-man-with-tattooes-is-posing-dark-photo-studio_613910-3659.jpg",
|
||||
imageAlt: "Jamal",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Chris",
|
||||
subtitle: "Senior Barber",
|
||||
detail: "Dedicated to classic and trend-setting cuts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-hairdresser-salon_52683-111009.jpg",
|
||||
imageAlt: "Chris",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "David",
|
||||
subtitle: "Shop Pro",
|
||||
detail: "Fast and detailed, perfect for any style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286015.jpg",
|
||||
imageAlt: "David",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186494.jpg?_wi=2",
|
||||
imageAlt: "barber portrait professional",
|
||||
},
|
||||
]}
|
||||
title="Meet Your Barbers"
|
||||
description="Our team of skilled professionals is here to get you looking your best."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "barbers", groupTitle: "Core Crew", members: [
|
||||
{ id: "1", title: "Marcus", subtitle: "Lead Barber", detail: "Expert in precision fades and beard work.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-slavic-middle-aged-male-barber-uniform-holding-scissors-crossing-hands-isolated-purple-wall_141793-83015.jpg", imageAlt: "Marcus" },
|
||||
{ id: "2", title: "Jamal", subtitle: "Style Specialist", detail: "Known for clean lineups and modern styles.", imageSrc: "http://img.b2bpic.net/free-photo/groomed-bearded-man-with-tattooes-is-posing-dark-photo-studio_613910-3659.jpg", imageAlt: "Jamal" },
|
||||
{ id: "3", title: "Chris", subtitle: "Senior Barber", detail: "Dedicated to classic and trend-setting cuts.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-hairdresser-salon_52683-111009.jpg", imageAlt: "Chris" },
|
||||
{ id: "4", title: "David", subtitle: "Shop Pro", detail: "Fast and detailed, perfect for any style.", imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286015.jpg", imageAlt: "David" },
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Meet Your Barbers"
|
||||
description="Our team of skilled professionals is here to get you looking your best."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Essential",
|
||||
price: "$35",
|
||||
subtitle: "Standard haircut and trim",
|
||||
features: [
|
||||
"Precision Haircut",
|
||||
"Neck Clean-up",
|
||||
"Hot Towel Finish",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Popular",
|
||||
price: "$45",
|
||||
subtitle: "Full grooming experience",
|
||||
features: [
|
||||
"Precision Haircut",
|
||||
"Beard Sculpting",
|
||||
"Edge-up with Razor",
|
||||
"Hot Towel Finish",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "elite",
|
||||
badge: "Top Tier",
|
||||
price: "$60",
|
||||
subtitle: "Premium care for the ultimate look",
|
||||
features: [
|
||||
"Precision Haircut",
|
||||
"Beard Treatment",
|
||||
"Facial Scrub",
|
||||
"Hot Towel Finish",
|
||||
"Eyebrow Shape-up",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Simple & Transparent Pricing"
|
||||
description="Quality cuts that fit your budget."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{ id: "basic", badge: "Essential", price: "$35", subtitle: "Standard haircut and trim", features: ["Precision Haircut", "Neck Clean-up", "Hot Towel Finish"] },
|
||||
{ id: "pro", badge: "Popular", price: "$45", subtitle: "Full grooming experience", features: ["Precision Haircut", "Beard Sculpting", "Edge-up with Razor", "Hot Towel Finish"] },
|
||||
{ id: "elite", badge: "Top Tier", price: "$60", subtitle: "Premium care for the ultimate look", features: ["Precision Haircut", "Beard Treatment", "Facial Scrub", "Hot Towel Finish", "Eyebrow Shape-up"] },
|
||||
]}
|
||||
title="Simple & Transparent Pricing"
|
||||
description="Quality cuts that fit your budget."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "James L.",
|
||||
role: "Professional",
|
||||
company: "Tech Atlanta",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-handsome-male-barber-uniform-holding-comb-isolated-blue-wall_141793-75034.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Robert B.",
|
||||
role: "Student",
|
||||
company: "Georgia State",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-holding-electric-razor_171337-17295.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Marcus D.",
|
||||
role: "Entrepreneur",
|
||||
company: "Local Business",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-man-with-apron_23-2148366567.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Kevin T.",
|
||||
role: "Designer",
|
||||
company: "Creative Studio",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mirror-reflection-short-haired-woman-tank-top-using-haircutting-machine_657921-1602.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Alex R.",
|
||||
role: "Service Worker",
|
||||
company: "Hospitality",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-drying-old-customers-face-after-shaving_23-2148181958.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Hear from our satisfied customers in Atlanta."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "James L.", role: "Professional", company: "Tech Atlanta", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-handsome-male-barber-uniform-holding-comb-isolated-blue-wall_141793-75034.jpg" },
|
||||
{ id: "2", name: "Robert B.", role: "Student", company: "Georgia State", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-holding-electric-razor_171337-17295.jpg" },
|
||||
{ id: "3", name: "Marcus D.", role: "Entrepreneur", company: "Local Business", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-man-with-apron_23-2148366567.jpg" },
|
||||
{ id: "4", name: "Kevin T.", role: "Designer", company: "Creative Studio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mirror-reflection-short-haired-woman-tank-top-using-haircutting-machine_657921-1602.jpg" },
|
||||
{ id: "5", name: "Alex R.", role: "Service Worker", company: "Hospitality", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/barber-drying-old-customers-face-after-shaving_23-2148181958.jpg" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Hear from our satisfied customers in Atlanta."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Are you really open 24 hours?",
|
||||
content: "Yes, we are open 24 hours a day, 7 days a week, 365 days a year.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do I need an appointment?",
|
||||
content: "We welcome walk-ins at any hour, though appointments are encouraged during peak times to guarantee your spot.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Where are you located?",
|
||||
content: "We are located centrally in Atlanta to serve our community at any hour of the day.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326536.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Got questions? We've got answers about our shop."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "Are you really open 24 hours?", content: "Yes, we are open 24 hours a day, 7 days a week, 365 days a year." },
|
||||
{ id: "2", title: "Do I need an appointment?", content: "We welcome walk-ins at any hour, though appointments are encouraged during peak times to guarantee your spot." },
|
||||
{ id: "3", title: "Where are you located?", content: "We are located centrally in Atlanta to serve our community at any hour of the day." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326536.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Got questions? We've got answers about our shop."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Ready for a fresh cut? Visit us at any time or book through Booksy."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book on Booksy",
|
||||
href: "https://booksy.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Ready for a fresh cut? Visit us at any time or book through Booksy."
|
||||
buttons={[{ text: "Book on Booksy", href: "https://booksy.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Barbers",
|
||||
href: "#team",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Book Now",
|
||||
href: "https://booksy.com",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="24 Hour Barber Boyz"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }, { label: "Barbers", href: "#team" }] },
|
||||
{ items: [{ label: "Book Now", href: "https://booksy.com" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
logoText="24 Hour Barber Boyz"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user