Update src/app/page.tsx
This commit is contained in:
379
src/app/page.tsx
379
src/app/page.tsx
@@ -17,291 +17,116 @@ export default function LandingPage() {
|
|||||||
defaultButtonVariant="hover-magnetic"
|
defaultButtonVariant="hover-magnetic"
|
||||||
defaultTextAnimation="entrance-slide"
|
defaultTextAnimation="entrance-slide"
|
||||||
borderRadius="pill"
|
borderRadius="pill"
|
||||||
|
contentWidth="medium"
|
||||||
|
sizing="medium"
|
||||||
|
background="circleGradient"
|
||||||
|
cardStyle="glass-elevated"
|
||||||
|
primaryButtonStyle="gradient"
|
||||||
|
secondaryButtonStyle="glass"
|
||||||
|
headingFontWeight="normal"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleFullscreen
|
<NavbarStyleFullscreen
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "About", id: "about" },
|
||||||
name: "About",
|
{ name: "Pricing", id: "pricing" },
|
||||||
id: "about",
|
{ name: "Reviews", id: "testimonials" },
|
||||||
},
|
{ name: "Book Now", id: "contact" },
|
||||||
{
|
]}
|
||||||
name: "Services",
|
brandName="Elite Barbers"
|
||||||
id: "pricing",
|
/>
|
||||||
},
|
</div>
|
||||||
{
|
|
||||||
name: "Reviews",
|
|
||||||
id: "testimonials",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Book Now",
|
|
||||||
id: "contact",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
brandName="Elite Barbers"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplitDualMedia
|
<HeroSplitDualMedia
|
||||||
background={{
|
background={{ variant: "gradient-bars" }}
|
||||||
variant: "gradient-bars",
|
title="Elevated Grooming Experience"
|
||||||
}}
|
description="Premium cuts, classic shaves, and modern styling delivered by master barbers in an upscale, comfortable environment."
|
||||||
title="Elevated Grooming Experience"
|
tag="Since 2010"
|
||||||
description="Premium cuts, classic shaves, and modern styling delivered by master barbers in an upscale, comfortable environment."
|
mediaItems={[
|
||||||
tag="Since 2010"
|
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg", imageAlt: "barber shop interior classic" },
|
||||||
mediaItems={[
|
{ imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6322.jpg", imageAlt: "barber shop interior classic" }
|
||||||
{
|
]}
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg?_wi=1",
|
mediaAnimation="slide-up"
|
||||||
imageAlt: "barber shop interior classic",
|
rating={5}
|
||||||
},
|
ratingText="Rated 5/5 by over 500+ satisfied clients."
|
||||||
{
|
tagIcon={Sparkles}
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6322.jpg",
|
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||||
imageAlt: "barber shop interior classic",
|
/>
|
||||||
},
|
</div>
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg",
|
|
||||||
imageAlt: "Hair salon chair with towel on armchair",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-washing-head-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6316.jpg",
|
|
||||||
imageAlt: "Young bearded man washing head by hairdresser while sitting in chair at barbershop Barber soul",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg",
|
|
||||||
imageAlt: "Full body portrait of a stylish male who himself shaving while sitting on a barber chair in a hairdressing salon.",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
rating={5}
|
|
||||||
ratingText="Rated 5/5 by over 500+ satisfied clients."
|
|
||||||
tagIcon={Sparkles}
|
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: "Book Appointment",
|
|
||||||
href: "#contact",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<TextSplitAbout
|
<TextSplitAbout
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
title="Crafting Perfection, One Cut at a Time"
|
title="Crafting Perfection, One Cut at a Time"
|
||||||
description={[
|
description={[
|
||||||
"At Elite Barbers, we believe a great haircut is more than just maintenance; it’s an identity. Our master barbers combine traditional techniques with contemporary trends to provide a service that is as unique as you are.",
|
"At Elite Barbers, we believe a great haircut is more than just maintenance; it’s an identity. Our master barbers combine traditional techniques with contemporary trends to provide a service that is as unique as you are.", "We offer a sanctuary for the modern gentleman, focusing on quality, precision, and complete customer satisfaction. From hot towel shaves to intricate fades, we take our time to get it right."
|
||||||
"We offer a sanctuary for the modern gentleman, focusing on quality, precision, and complete customer satisfaction. From hot towel shaves to intricate fades, we take our time to get it right.",
|
]}
|
||||||
]}
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="pricing" data-section="pricing">
|
<div id="pricing" data-section="pricing">
|
||||||
<PricingCardNine
|
<PricingCardNine
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
plans={[
|
plans={[
|
||||||
{
|
{ id: "1", title: "Classic Cut", price: "$35", period: "Per visit", features: ["Precision cut", "Hot towel", "Neck shave", "Styling"], button: { text: "Book Now", href: "#contact" } },
|
||||||
id: "1",
|
{ id: "2", title: "Signature Shave", price: "$45", period: "Per visit", features: ["Straight razor shave", "Hot towel treatment", "Aftershave balm", "Face massage"], button: { text: "Book Now", href: "#contact" } },
|
||||||
title: "Classic Cut",
|
{ id: "3", title: "The Full Elite", price: "$75", period: "Per visit", features: ["Signature cut & shave", "Facial treatment", "Complimentary drink", "Full grooming"], button: { text: "Book Now", href: "#contact" } }
|
||||||
price: "$35",
|
]}
|
||||||
period: "Per visit",
|
title="Grooming Services"
|
||||||
features: [
|
description="Transparent pricing for our signature services."
|
||||||
"Precision cut",
|
/>
|
||||||
"Hot towel",
|
</div>
|
||||||
"Neck shave",
|
|
||||||
"Styling",
|
|
||||||
],
|
|
||||||
button: {
|
|
||||||
text: "Book Now",
|
|
||||||
href: "#contact",
|
|
||||||
},
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-hair-trimmed-with-trimmer_107420-94786.jpg",
|
|
||||||
imageAlt: "barber styling man hair",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
title: "Signature Shave",
|
|
||||||
price: "$45",
|
|
||||||
period: "Per visit",
|
|
||||||
features: [
|
|
||||||
"Straight razor shave",
|
|
||||||
"Hot towel treatment",
|
|
||||||
"Aftershave balm",
|
|
||||||
"Face massage",
|
|
||||||
],
|
|
||||||
button: {
|
|
||||||
text: "Book Now",
|
|
||||||
href: "#contact",
|
|
||||||
},
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg?_wi=2",
|
|
||||||
imageAlt: "barber styling man hair",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
title: "The Full Elite",
|
|
||||||
price: "$75",
|
|
||||||
period: "Per visit",
|
|
||||||
features: [
|
|
||||||
"Signature cut & shave",
|
|
||||||
"Facial treatment",
|
|
||||||
"Complimentary drink",
|
|
||||||
"Full grooming",
|
|
||||||
],
|
|
||||||
button: {
|
|
||||||
text: "Book Now",
|
|
||||||
href: "#contact",
|
|
||||||
},
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-party_23-2148115738.jpg?_wi=1",
|
|
||||||
imageAlt: "barber styling man hair",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="Grooming Services"
|
|
||||||
description="Transparent pricing for our signature services."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardSixteen
|
<TestimonialCardSixteen
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
testimonials={[
|
testimonials={[
|
||||||
{
|
{ id: "1", name: "James R.", role: "Architect", company: "Design Studio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/couple-party_23-2148115738.jpg" },
|
||||||
id: "1",
|
{ id: "2", name: "Michael S.", role: "Entrepreneur", company: "StartUp Corp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-taking-care-client_23-2150286034.jpg" },
|
||||||
name: "James R.",
|
{ id: "3", name: "David W.", role: "Financial Advisor", company: "Capital Bank", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/barber-senior-male-client-shaking-hands_23-2148181913.jpg" }
|
||||||
role: "Architect",
|
]}
|
||||||
company: "Design Studio",
|
kpiItems={[
|
||||||
rating: 5,
|
{ value: "10k+", label: "Haircuts" },
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-party_23-2148115738.jpg?_wi=2",
|
{ value: "5k+", label: "Shaves" },
|
||||||
},
|
{ value: "4.9", label: "Avg Rating" }
|
||||||
{
|
]}
|
||||||
id: "2",
|
title="What Our Clients Say"
|
||||||
name: "Michael S.",
|
description="Join the community of men who trust us with their look."
|
||||||
role: "Entrepreneur",
|
/>
|
||||||
company: "StartUp Corp",
|
</div>
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-taking-care-client_23-2150286034.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
name: "David W.",
|
|
||||||
role: "Financial Advisor",
|
|
||||||
company: "Capital Bank",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-senior-male-client-shaking-hands_23-2148181913.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
name: "Robert B.",
|
|
||||||
role: "Lawyer",
|
|
||||||
company: "Legal Group",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-handsome-young-man-with-tattoo-his-hand_23-2148175718.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5",
|
|
||||||
name: "Marcus L.",
|
|
||||||
role: "Tech Lead",
|
|
||||||
company: "Cloud Tech",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665403.jpg",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
kpiItems={[
|
|
||||||
{
|
|
||||||
value: "10k+",
|
|
||||||
label: "Haircuts",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "5k+",
|
|
||||||
label: "Shaves",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "4.9",
|
|
||||||
label: "Avg Rating",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="What Our Clients Say"
|
|
||||||
description="Join the community of men who trust us with their look."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplitForm
|
<ContactSplitForm
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
title="Ready for a Fresh Start?"
|
title="Ready for a Fresh Start?"
|
||||||
description="Book your appointment today and experience the difference of elite grooming."
|
description="Book your appointment today and experience the difference of elite grooming."
|
||||||
inputs={[
|
inputs={[
|
||||||
{
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||||
name: "name",
|
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||||
type: "text",
|
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true }
|
||||||
placeholder: "Your Name",
|
]}
|
||||||
required: true,
|
textarea={{ name: "notes", placeholder: "Appointment notes or preferences...", rows: 4 }}
|
||||||
},
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326562.jpg"
|
||||||
{
|
/>
|
||||||
name: "email",
|
</div>
|
||||||
type: "email",
|
|
||||||
placeholder: "Your Email",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "phone",
|
|
||||||
type: "tel",
|
|
||||||
placeholder: "Phone Number",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
textarea={{
|
|
||||||
name: "notes",
|
|
||||||
placeholder: "Appointment notes or preferences...",
|
|
||||||
rows: 4,
|
|
||||||
}}
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326562.jpg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterMedia
|
<FooterMedia
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/comfortable-old-fashioned-chair-rustic-antique-elegance-indoors-generated-by-ai_188544-29043.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/comfortable-old-fashioned-chair-rustic-antique-elegance-indoors-generated-by-ai_188544-29043.jpg"
|
||||||
logoText="Elite Barbers"
|
logoText="Elite Barbers"
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{ title: "Visit Us", items: [{ label: "123 Main St, City", href: "#" }, { label: "Mon-Sun: 9am - 8pm", href: "#" }] },
|
||||||
title: "Visit Us",
|
{ title: "Links", items: [{ label: "About", href: "#about" }, { label: "Pricing", href: "#pricing" }, { label: "Book Now", href: "#contact" }] }
|
||||||
items: [
|
]}
|
||||||
{
|
copyrightText="© 2025 Elite Barbers. All rights reserved."
|
||||||
label: "123 Main St, City",
|
/>
|
||||||
href: "#",
|
</div>
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Mon-Sun: 9am - 8pm",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Links",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "About",
|
|
||||||
href: "#about",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Pricing",
|
|
||||||
href: "#pricing",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Book Now",
|
|
||||||
href: "#contact",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
copyrightText="© 2025 Elite Barbers. All rights reserved."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user