Update src/app/page.tsx
This commit is contained in:
317
src/app/page.tsx
317
src/app/page.tsx
@@ -16,233 +16,112 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "The Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
]}
|
||||
brandName="MANY BARBER SHOP"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="MANY BARBER SHOP"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="MANY BARBER SHOP"
|
||||
description="Trusted by loyal clients for over 10 years. Precision cuts, clean fades, and a barber you'll never change. More than a haircut, it's your signature."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:00000000",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-man-hair-salon_23-2150665446.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="MANY BARBER SHOP"
|
||||
description="Trusted by loyal clients for over 10 years. Precision cuts, clean fades, and a barber you'll never change. More than a haircut, it's your signature."
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "#contact" },
|
||||
{ text: "Call Now", href: "tel:00000000" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-man-hair-salon_23-2150665446.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Trusted by Brescia"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "11+",
|
||||
description: "Years of Excellence",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "260+",
|
||||
description: "Satisfied Clients",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "4.7★",
|
||||
description: "Google Rating",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "100%",
|
||||
description: "Precision Focus",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
tag="11 Years of Legacy"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Trusted by Brescia"
|
||||
metrics={[
|
||||
{ id: "m1", value: "11+", description: "Years of Excellence" },
|
||||
{ id: "m2", value: "260+", description: "Satisfied Clients" },
|
||||
{ id: "m3", value: "4.7★", description: "Google Rating" },
|
||||
{ id: "m4", value: "100%", description: "Precision Focus" }
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
tag="11 Years of Legacy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Precision Every Time",
|
||||
description: "Consistent, high-quality cuts that clients trust for years.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-using-shaving-cream-contour-male-customer-s-beard_23-2148985735.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Clean & Professional",
|
||||
description: "A spotless, hygienic environment where you feel welcomed.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Real Connection",
|
||||
description: "Many is known, loved, and remembered for the service.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-razor-near-brush-comb_23-2147711624.jpg",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "Fast & Efficient",
|
||||
description: "Quality without the wait—no wasted time in the chair.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-using-shaving-cream-contour-male-customer-s-beard_23-2148985735.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Many"
|
||||
description="Consistent quality, fast service, and a professional environment that keeps you looking sharp every time."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Precision Every Time", description: "Consistent, high-quality cuts that clients trust for years.", imageSrc: "http://img.b2bpic.net/free-photo/barber-using-shaving-cream-contour-male-customer-s-beard_23-2148985735.jpg" },
|
||||
{ id: "f2", title: "Clean & Professional", description: "A spotless, hygienic environment where you feel welcomed.", imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg" },
|
||||
{ id: "f3", title: "Real Connection", description: "Many is known, loved, and remembered for the service.", imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-razor-near-brush-comb_23-2147711624.jpg" },
|
||||
{ id: "f4", title: "Fast & Efficient", description: "Quality without the wait—no wasted time in the chair.", imageSrc: "http://img.b2bpic.net/free-photo/barber-using-shaving-cream-contour-male-customer-s-beard_23-2148985735.jpg" }
|
||||
]}
|
||||
title="Why Choose Many"
|
||||
description="Consistent quality, fast service, and a professional environment that keeps you looking sharp every time."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alessandro B.",
|
||||
role: "Client",
|
||||
company: "Brescia",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Marco V.",
|
||||
role: "Client",
|
||||
company: "Brescia",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Luca R.",
|
||||
role: "Client",
|
||||
company: "Brescia",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Giovanni P.",
|
||||
role: "Client",
|
||||
company: "Brescia",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg?_wi=4",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Matteo S.",
|
||||
role: "Client",
|
||||
company: "Brescia",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg?_wi=5",
|
||||
},
|
||||
]}
|
||||
title="Words From Loyal Clients"
|
||||
description="The barber you don't replace."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alessandro B.", role: "Client", company: "Brescia", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg" },
|
||||
{ id: "t2", name: "Marco V.", role: "Client", company: "Brescia", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg" },
|
||||
{ id: "t3", name: "Luca R.", role: "Client", company: "Brescia", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg" },
|
||||
{ id: "t4", name: "Giovanni P.", role: "Client", company: "Brescia", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg" },
|
||||
{ id: "t5", name: "Matteo S.", role: "Client", company: "Brescia", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg" }
|
||||
]}
|
||||
title="Words From Loyal Clients"
|
||||
description="The barber you don't replace."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Your next cut is one click away. Don't wait—slots fill fast."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Cut",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "WhatsApp Now",
|
||||
href: "https://wa.me/00000000",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Your next cut is one click away. Don't wait—slots fill fast."
|
||||
buttons={[
|
||||
{ text: "Book Your Cut", href: "#" },
|
||||
{ text: "WhatsApp Now", href: "https://wa.me/00000000" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="MANY BARBER SHOP"
|
||||
columns={[
|
||||
{
|
||||
title: "Menu",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Team",
|
||||
href: "#team",
|
||||
},
|
||||
{
|
||||
label: "Booking",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Many Barber Shop | Serving Brescia for 11+ Years"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="MANY BARBER SHOP"
|
||||
columns={[
|
||||
{ title: "Menu", items: [{ label: "Services", href: "#features" }, { label: "Booking", href: "#contact" }] },
|
||||
{ title: "Support", items: [{ label: "Contact Us", href: "#contact" }, { label: "Privacy Policy", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2025 Many Barber Shop | Serving Brescia for 11+ Years"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user