Merge version_1 into main #2
343
src/app/page.tsx
343
src/app/page.tsx
@@ -16,259 +16,112 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Idriss Barber"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Idriss Barber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Idriss Barber"
|
||||
description="Where tradition meets modern style. Exceptional haircuts and grooming in a relaxing, professional environment."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-hairdresser-cutting-hair-male-client_23-2147778768.jpg?_wi=1",
|
||||
imageAlt: "Barber chair view",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18295.jpg?_wi=1",
|
||||
imageAlt: "Barber shop tools",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-barber-wearing-uniform-trimming-his-beard-with-hair-clippers-isolated-green-background-with-copy-space_141793-85020.jpg?_wi=1",
|
||||
imageAlt: "Haircut process",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/various-trimmers-dressing-table_107420-94767.jpg",
|
||||
imageAlt: "Salon aesthetic",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326560.jpg",
|
||||
imageAlt: "Barber working",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-new-look-barber-shop_23-2149167460.jpg",
|
||||
imageAlt: "Studio vibe",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Idriss Barber"
|
||||
description="Where tradition meets modern style. Exceptional haircuts and grooming in a relaxing, professional environment."
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blurred-hairdresser-cutting-hair-male-client_23-2147778768.jpg", imageAlt: "Barber chair view" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18295.jpg", imageAlt: "Barber shop tools" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-barber-wearing-uniform-trimming-his-beard-with-hair-clippers-isolated-green-background-with-copy-space_141793-85020.jpg", imageAlt: "Haircut process" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/various-trimmers-dressing-table_107420-94767.jpg", imageAlt: "Salon aesthetic" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326560.jpg", imageAlt: "Barber working" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-getting-new-look-barber-shop_23-2149167460.jpg", imageAlt: "Studio vibe" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Experience the Best"
|
||||
description="Idriss Barber provides more than just a cut. With years of experience and a passion for classic grooming, we ensure every client walks out looking and feeling their absolute best. Whether it's a timeless fade or a precise beard trim, quality is our priority."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/adult-hairdresser-shaving-customers-beard-hair-salon_23-2148181971.jpg"
|
||||
imageAlt="Idriss in his studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Experience the Best"
|
||||
description="Idriss Barber provides more than just a cut. With years of experience and a passion for classic grooming, we ensure every client walks out looking and feeling their absolute best. Whether it's a timeless fade or a precise beard trim, quality is our priority."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/adult-hairdresser-shaving-customers-beard-hair-salon_23-2148181971.jpg"
|
||||
imageAlt="Idriss in his studio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "cut",
|
||||
title: "Classic Cut",
|
||||
price: "$35",
|
||||
period: "per session",
|
||||
features: [
|
||||
"Classic haircut",
|
||||
"Neck shave",
|
||||
"Styling product application",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-hairdresser-cutting-hair-male-client_23-2147778768.jpg?_wi=2",
|
||||
imageAlt: "barber shop interior vintage",
|
||||
},
|
||||
{
|
||||
id: "beard",
|
||||
title: "Beard Grooming",
|
||||
price: "$25",
|
||||
period: "per session",
|
||||
features: [
|
||||
"Beard line-up",
|
||||
"Hot towel treatment",
|
||||
"Oil treatment",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18295.jpg?_wi=2",
|
||||
imageAlt: "barber shop chair leather",
|
||||
},
|
||||
{
|
||||
id: "full",
|
||||
title: "The Full Experience",
|
||||
price: "$55",
|
||||
period: "per session",
|
||||
features: [
|
||||
"Haircut & style",
|
||||
"Beard trim",
|
||||
"Hot towel treatment",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-barber-wearing-uniform-trimming-his-beard-with-hair-clippers-isolated-green-background-with-copy-space_141793-85020.jpg?_wi=2",
|
||||
imageAlt: "hair cut process close up",
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Transparent pricing for premium grooming services."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "cut", title: "Classic Cut", price: "$35", period: "per session", features: ["Classic haircut", "Neck shave", "Styling product application"], button: { text: "Book Now", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/blurred-hairdresser-cutting-hair-male-client_23-2147778768.jpg", imageAlt: "barber shop interior vintage" },
|
||||
{ id: "beard", title: "Beard Grooming", price: "$25", period: "per session", features: ["Beard line-up", "Hot towel treatment", "Oil treatment"], button: { text: "Book Now", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18295.jpg", imageAlt: "barber shop chair leather" },
|
||||
{ id: "full", title: "The Full Experience", price: "$55", period: "per session", features: ["Haircut & style", "Beard trim", "Hot towel treatment"], button: { text: "Book Now", href: "#contact" }, imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-barber-wearing-uniform-trimming-his-beard-with-hair-clippers-isolated-green-background-with-copy-space_141793-85020.jpg", imageAlt: "hair cut process close up" }
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Transparent pricing for premium grooming services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex R.",
|
||||
role: "Client",
|
||||
company: "Local Regular",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark S.",
|
||||
role: "Client",
|
||||
company: "Professional",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-hairdresser-shop_23-2149220544.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "James B.",
|
||||
role: "Client",
|
||||
company: "Student",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-vintage-eyeglasses-dressed-wool-jacket_613910-15932.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Sam L.",
|
||||
role: "Client",
|
||||
company: "Regular",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665444.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Chris M.",
|
||||
role: "Client",
|
||||
company: "Loyal Patron",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Join the many satisfied customers who trust Idriss with their style."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex R.", role: "Client", company: "Local Regular", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg" },
|
||||
{ id: "t2", name: "Mark S.", role: "Client", company: "Professional", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-hairdresser-shop_23-2149220544.jpg" },
|
||||
{ id: "t3", name: "James B.", role: "Client", company: "Student", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-vintage-eyeglasses-dressed-wool-jacket_613910-15932.jpg" },
|
||||
{ id: "t4", name: "Sam L.", role: "Client", company: "Regular", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665444.jpg" },
|
||||
{ id: "t5", name: "Chris M.", role: "Client", company: "Loyal Patron", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg" }
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Join the many satisfied customers who trust Idriss with their style."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Book Your Appointment"
|
||||
description="Secure your spot at Idriss Barber. Fill out the form and we'll confirm your session."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "details",
|
||||
placeholder: "Preferred date and time",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-hairdresser-cutting-hair-male-client_23-2147778768.jpg?_wi=3"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Book Your Appointment"
|
||||
description="Secure your spot at Idriss Barber. Fill out the form and we'll confirm your session."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email" }
|
||||
]}
|
||||
textarea={{ name: "details", placeholder: "Preferred date and time" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-hairdresser-cutting-hair-male-client_23-2147778768.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2150665413.jpg"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Location",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2150665413.jpg"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Contact", items: [{ label: "Book Now", href: "#contact" }, { label: "Location", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user