Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #2.
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"
|
||||
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">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Book Now",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Elite Barbers"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Book Now", id: "contact" },
|
||||
]}
|
||||
brandName="Elite Barbers"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Elevated Grooming Experience"
|
||||
description="Premium cuts, classic shaves, and modern styling delivered by master barbers in an upscale, comfortable environment."
|
||||
tag="Since 2010"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg?_wi=1",
|
||||
imageAlt: "barber shop interior classic",
|
||||
},
|
||||
{
|
||||
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/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="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Elevated Grooming Experience"
|
||||
description="Premium cuts, classic shaves, and modern styling delivered by master barbers in an upscale, comfortable environment."
|
||||
tag="Since 2010"
|
||||
mediaItems={[
|
||||
{ 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" },
|
||||
{ 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" }
|
||||
]}
|
||||
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">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Crafting Perfection, One Cut at a Time"
|
||||
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.",
|
||||
"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 id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Crafting Perfection, One Cut at a Time"
|
||||
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.", "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 id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
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",
|
||||
},
|
||||
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="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
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: "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" } },
|
||||
{ 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" } }
|
||||
]}
|
||||
title="Grooming Services"
|
||||
description="Transparent pricing for our signature services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
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?_wi=2",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
{
|
||||
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="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
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: "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" },
|
||||
{ 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" }
|
||||
]}
|
||||
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">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Ready for a Fresh Start?"
|
||||
description="Book your appointment today and experience the difference of elite grooming."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
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="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Ready for a Fresh Start?"
|
||||
description="Book your appointment today and experience the difference of elite grooming."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", 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">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/comfortable-old-fashioned-chair-rustic-antique-elegance-indoors-generated-by-ai_188544-29043.jpg"
|
||||
logoText="Elite Barbers"
|
||||
columns={[
|
||||
{
|
||||
title: "Visit Us",
|
||||
items: [
|
||||
{
|
||||
label: "123 Main St, City",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
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>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/comfortable-old-fashioned-chair-rustic-antique-elegance-indoors-generated-by-ai_188544-29043.jpg"
|
||||
logoText="Elite Barbers"
|
||||
columns={[
|
||||
{ title: "Visit Us", items: [{ label: "123 Main St, City", href: "#" }, { 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>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user