Merge version_1 into main #1
462
src/app/page.tsx
462
src/app/page.tsx
@@ -28,348 +28,142 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Barbers",
|
||||
id: "barber-profile",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="ONE4ONE"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Barbers", id: "barber-profile" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="ONE4ONE"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="ONE4ONE Barbershop"
|
||||
description="Precision. Style. Identity. Experience the peak of grooming craftsmanship in Garden City."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313037.jpg",
|
||||
alt: "Barber work",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746589.jpg",
|
||||
alt: "Still life of seat for gamers",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149141753.jpg",
|
||||
alt: "Full shot man getting a haircut",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg",
|
||||
alt: "Brown vintage leather chair at stylish barber shop",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313075.jpg",
|
||||
alt: "Close up on man selfcare products",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="ONE4ONE Barbershop"
|
||||
description="Precision. Style. Identity. Experience the peak of grooming craftsmanship in Garden City."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313037.jpg", alt: "Barber work" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746589.jpg", alt: "Still life of seat for gamers" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149141753.jpg", alt: "Full shot man getting a haircut" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg", alt: "Brown vintage leather chair at stylish barber shop" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313075.jpg", alt: "Close up on man selfcare products" },
|
||||
]}
|
||||
buttons={[{ text: "Book Now", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="barber-profile" data-section="barber-profile">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Lead Master Barber"
|
||||
title="Meet The Master"
|
||||
description="With over 10 years of mastery, our lead barber blends classic techniques with modern edge."
|
||||
subdescription="Dedicated to the perfect line-up and superior style."
|
||||
icon={Scissors}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-playing-with-his-toy-poodle_23-2147840145.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="barber-profile" data-section="barber-profile">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Lead Master Barber"
|
||||
title="Meet The Master"
|
||||
description="With over 10 years of mastery, our lead barber blends classic techniques with modern edge."
|
||||
subdescription="Dedicated to the perfect line-up and superior style."
|
||||
icon={Scissors}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-playing-with-his-toy-poodle_23-2147840145.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="haircuts-gallery" data-section="haircuts-gallery">
|
||||
<ProductCardThree
|
||||
textboxLayout="split-description"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Precision Fade",
|
||||
price: "$35",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/non-binary-person-green-jacket-posing-dark-alley_23-2148760557.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Beard Sculpt",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man_158595-719.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Classic Cut",
|
||||
price: "$30",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-barbershop_23-2148506245.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Full Service",
|
||||
price: "$50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Hair Color",
|
||||
price: "$45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man_158595-752.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Hot Towel",
|
||||
price: "$20",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing_23-2149028731.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Signature Styles"
|
||||
description="Excellence in every cut. View our latest transformations."
|
||||
/>
|
||||
</div>
|
||||
<div id="haircuts-gallery" data-section="haircuts-gallery">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Precision Fade", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/non-binary-person-green-jacket-posing-dark-alley_23-2148760557.jpg" },
|
||||
{ id: "2", name: "Beard Sculpt", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man_158595-719.jpg" },
|
||||
{ id: "3", name: "Classic Cut", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-barbershop_23-2148506245.jpg" },
|
||||
{ id: "4", name: "Full Service", price: "$50", imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg" },
|
||||
{ id: "5", name: "Hair Color", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/hipster-style-bearded-man_158595-752.jpg" },
|
||||
{ id: "6", name: "Hot Towel", price: "$20", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-posing_23-2149028731.jpg" },
|
||||
]}
|
||||
title="Our Signature Styles"
|
||||
description="Excellence in every cut. View our latest transformations."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Essential",
|
||||
price: "$35",
|
||||
subtitle: "Clean cut & line-up",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Consultation",
|
||||
"Haircut",
|
||||
"Hot towel edge",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
badge: "Featured",
|
||||
price: "$50",
|
||||
subtitle: "Total grooming package",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Haircut & Beard",
|
||||
"Facial Treatment",
|
||||
"Massage",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
badge: "Elite",
|
||||
price: "$75",
|
||||
subtitle: "Premium luxury service",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Total Grooming",
|
||||
"Color treatment",
|
||||
"Priority slot",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Services & Pricing"
|
||||
description="Tailored grooming solutions for the modern gentleman."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "p1", badge: "Essential", price: "$35", subtitle: "Clean cut & line-up", buttons: [{ text: "Book", href: "#contact" }], features: ["Consultation", "Haircut", "Hot towel edge"] },
|
||||
{ id: "p2", badge: "Featured", price: "$50", subtitle: "Total grooming package", buttons: [{ text: "Book", href: "#contact" }], features: ["Haircut & Beard", "Facial Treatment", "Massage"] },
|
||||
{ id: "p3", badge: "Elite", price: "$75", subtitle: "Premium luxury service", buttons: [{ text: "Book", href: "#contact" }], features: ["Total Grooming", "Color treatment", "Priority slot"] },
|
||||
]}
|
||||
title="Services & Pricing"
|
||||
description="Tailored grooming solutions for the modern gentleman."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "4.9",
|
||||
title: "Customer Rating",
|
||||
description: "Based on 84 reviews",
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "12k+",
|
||||
title: "Cuts Performed",
|
||||
description: "Since our founding",
|
||||
icon: Scissors,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99%",
|
||||
title: "Client Retention",
|
||||
description: "Returning gentlemen",
|
||||
icon: Heart,
|
||||
},
|
||||
]}
|
||||
title="Shop Stats"
|
||||
description="Consistently providing top-tier results."
|
||||
/>
|
||||
</div>
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "4.9", title: "Customer Rating", description: "Based on 84 reviews", icon: Star },
|
||||
{ id: "m2", value: "12k+", title: "Cuts Performed", description: "Since our founding", icon: Scissors },
|
||||
{ id: "m3", value: "99%", title: "Client Retention", description: "Returning gentlemen", icon: Heart },
|
||||
]}
|
||||
title="Shop Stats"
|
||||
description="Consistently providing top-tier results."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "David M.",
|
||||
role: "Local Professional",
|
||||
company: "Garden City",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-having-drink-barbershop_23-2147736963.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Alex R.",
|
||||
role: "Frequent Client",
|
||||
company: "Detroit",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-blond-guy-sits-cafe-pets-his-dog-touches-golden-retriever_1258-314883.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "James K.",
|
||||
role: "First-timer",
|
||||
company: "Livonia",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-getting-display-window-japanese-hairdressers-ready_23-2149395751.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Mike D.",
|
||||
role: "Regular",
|
||||
company: "Dearborn",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18649.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Sarah B.",
|
||||
role: "Visitor",
|
||||
company: "Canton",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2900.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "84",
|
||||
label: "Verified Reviews",
|
||||
},
|
||||
{
|
||||
value: "4.9",
|
||||
label: "Avg Rating",
|
||||
},
|
||||
{
|
||||
value: "10+",
|
||||
label: "Years Experience",
|
||||
},
|
||||
]}
|
||||
title="What Clients Say"
|
||||
description="Don't just take our word for it."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "David M.", role: "Local Professional", company: "Garden City", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-having-drink-barbershop_23-2147736963.jpg" },
|
||||
{ id: "2", name: "Alex R.", role: "Frequent Client", company: "Detroit", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-blond-guy-sits-cafe-pets-his-dog-touches-golden-retriever_1258-314883.jpg" },
|
||||
{ id: "3", name: "James K.", role: "First-timer", company: "Livonia", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/women-getting-display-window-japanese-hairdressers-ready_23-2149395751.jpg" },
|
||||
{ id: "4", name: "Mike D.", role: "Regular", company: "Dearborn", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18649.jpg" },
|
||||
{ id: "5", name: "Sarah B.", role: "Visitor", company: "Canton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2900.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "84", label: "Verified Reviews" },
|
||||
{ value: "4.9", label: "Avg Rating" },
|
||||
{ value: "10+", label: "Years Experience" },
|
||||
]}
|
||||
title="What Clients Say"
|
||||
description="Don't just take our word for it."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
tag="Get In Touch"
|
||||
title="Book Your Seat"
|
||||
description="Located at 28245 Ford Rd, Garden City, MI. Call us at (313) 501-7944 to confirm your appointment."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-barber-cutting-client-s-beard-close-up_23-2148242864.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Get In Touch"
|
||||
title="Book Your Seat"
|
||||
description="Located at 28245 Ford Rd, Garden City, MI. Call us at (313) 501-7944 to confirm your appointment."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-barber-cutting-client-s-beard-close-up_23-2148242864.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="ONE4ONE"
|
||||
columns={[
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Location",
|
||||
items: [
|
||||
{
|
||||
label: "28245 Ford Rd, Garden City, MI",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Call Us",
|
||||
href: "tel:3135017944",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="ONE4ONE"
|
||||
columns={[
|
||||
{ title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] },
|
||||
{ title: "Location", items: [{ label: "28245 Ford Rd, Garden City, MI", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Call Us", href: "tel:3135017944" }, { label: "Privacy Policy", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user