Merge version_1 into main #2
405
src/app/page.tsx
405
src/app/page.tsx
@@ -27,302 +27,129 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Stylists",
|
||||
id: "stylists",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "reviews",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Boulevard"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Stylists", id: "stylists" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Boulevard"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Timeless Style, Warmed by Community"
|
||||
description="For 27 years, Boulevard Hairstyling has been the home of beautiful transformations. Join us for a cut above the rest."
|
||||
tag="4.8★ Rated Salon"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Visit",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glamorous-model-make-up-studio_23-2148328753.jpg?_wi=1"
|
||||
tagIcon={Star}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-ferromagnetic-metal-with-blurred-background_23-2148253621.jpg",
|
||||
alt: "Close-up ferromagnetic metal with blurred background",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205894.jpg",
|
||||
alt: "Hairdresser grooming their client",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/skiing-snowboarding-equipment_482257-76571.jpg",
|
||||
alt: "Skiing and snowboarding equipment",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-having-hair-treatment-latino-hair-salon_23-2150555187.jpg",
|
||||
alt: "Woman having hair treatment of latino hair salon",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-hairdresser-styling-clients-hair_107420-94690.jpg",
|
||||
alt: "Female hairdresser styling clients hair",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 50,000+ satisfied clients"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Timeless Style, Warmed by Community"
|
||||
description="For 27 years, Boulevard Hairstyling has been the home of beautiful transformations. Join us for a cut above the rest."
|
||||
tag="4.8★ Rated Salon"
|
||||
buttons={[{ text: "Book Your Visit", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glamorous-model-make-up-studio_23-2148328753.jpg"
|
||||
tagIcon={Star}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-ferromagnetic-metal-with-blurred-background_23-2148253621.jpg", alt: "Close-up ferromagnetic metal with blurred background" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205894.jpg", alt: "Hairdresser grooming their client" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/skiing-snowboarding-equipment_482257-76571.jpg", alt: "Skiing and snowboarding equipment" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-having-hair-treatment-latino-hair-salon_23-2150555187.jpg", alt: "Woman having hair treatment of latino hair salon" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/female-hairdresser-styling-clients-hair_107420-94690.jpg", alt: "Female hairdresser styling clients hair" }
|
||||
]}
|
||||
avatarText="Join 50,000+ satisfied clients"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="A Legacy of Warmth"
|
||||
description="Established 27 years ago, Boulevard isn't just a salon—it's a staple of the neighborhood. We pride ourselves on the relationships built in our chairs and the beautiful stories that leave our doors every day."
|
||||
metrics={[
|
||||
{
|
||||
value: "27+",
|
||||
title: "Years Styling",
|
||||
},
|
||||
{
|
||||
value: "50k+",
|
||||
title: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "4.8★",
|
||||
title: "Avg. Rating",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smartphone-skincare-supplies_23-2147710697.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="A Legacy of Warmth"
|
||||
description="Established 27 years ago, Boulevard isn't just a salon—it's a staple of the neighborhood. We pride ourselves on the relationships built in our chairs and the beautiful stories that leave our doors every day."
|
||||
metrics={[
|
||||
{ value: "27+", title: "Years Styling" },
|
||||
{ value: "50k+", title: "Happy Clients" },
|
||||
{ value: "4.8★", title: "Avg. Rating" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smartphone-skincare-supplies_23-2147710697.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Precision Cut",
|
||||
price: "$35",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/haircare-product-near-scissors-combs_23-2147711608.jpg",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Color Treatment",
|
||||
price: "$40",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-beauty-salon_23-2149167366.jpg",
|
||||
rating: 5,
|
||||
reviewCount: "85",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Blowout Style",
|
||||
price: "$30",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-hairdresser-washing-woman-s-hair_23-2150668438.jpg",
|
||||
rating: 5,
|
||||
reviewCount: "92",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Root Touch-up",
|
||||
price: "$38",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668424.jpg",
|
||||
rating: 5,
|
||||
reviewCount: "67",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Deep Conditioning",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-washing-woman-s-hair_23-2148940879.jpg",
|
||||
rating: 5,
|
||||
reviewCount: "44",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Trim & Refresh",
|
||||
price: "$20",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-using-styling-tools_23-2149141730.jpg",
|
||||
rating: 5,
|
||||
reviewCount: "110",
|
||||
},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Expert care, approachable pricing, and exceptional results."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "Boulevard", name: "Precision Cut", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/haircare-product-near-scissors-combs_23-2147711608.jpg", rating: 5, reviewCount: "120" },
|
||||
{ id: "p2", brand: "Boulevard", name: "Color Treatment", price: "$40", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-beauty-salon_23-2149167366.jpg", rating: 5, reviewCount: "85" },
|
||||
{ id: "p3", brand: "Boulevard", name: "Blowout Style", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/side-view-hairdresser-washing-woman-s-hair_23-2150668438.jpg", rating: 5, reviewCount: "92" },
|
||||
{ id: "p4", brand: "Boulevard", name: "Root Touch-up", price: "$38", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668424.jpg", rating: 5, reviewCount: "67" },
|
||||
{ id: "p5", brand: "Boulevard", name: "Deep Conditioning", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-washing-woman-s-hair_23-2148940879.jpg", rating: 5, reviewCount: "44" },
|
||||
{ id: "p6", brand: "Boulevard", name: "Trim & Refresh", price: "$20", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-using-styling-tools_23-2149141730.jpg", rating: 5, reviewCount: "110" }
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Expert care, approachable pricing, and exceptional results."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stylists" data-section="stylists">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "g1",
|
||||
groupTitle: "The Boulevard Experts",
|
||||
members: [
|
||||
{
|
||||
id: "m1",
|
||||
title: "Rosie",
|
||||
subtitle: "Senior Stylist",
|
||||
detail: "The anchor of our salon with 20+ years of expertise in classic cuts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/impressed-young-afro-american-male-barber-wearing-uniform-holding-scissors-comb_141793-117056.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Elvia",
|
||||
subtitle: "Color Specialist",
|
||||
detail: "Master of balayage and subtle, sun-kissed highlights.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-woman-looking-camera-while-standing-counter-movie-house_613910-21690.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Vicky",
|
||||
subtitle: "Creative Director",
|
||||
detail: "Loves edgy textures and bold, modern transformations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-looking-young-beautiful-female-barber-uniform-showing-timeout-gesture-isolated-pink-wall_141793-106045.jpg",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
title: "Sylvia",
|
||||
subtitle: "Stylist",
|
||||
detail: "Expert in elegant updos and refined daily styles.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-tilting-head-young-beautiful-female-barber-uniform-holding-comb-isolated-green-wall_141793-105666.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glamorous-model-make-up-studio_23-2148328753.jpg?_wi=2",
|
||||
imageAlt: "professional female hair stylist portrait",
|
||||
},
|
||||
]}
|
||||
title="Meet Your Stylists"
|
||||
description="Our team brings decades of combined experience to ensure you leave feeling like your best self."
|
||||
/>
|
||||
</div>
|
||||
<div id="stylists" data-section="stylists">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "g1", groupTitle: "The Boulevard Experts", members: [
|
||||
{ id: "m1", title: "Rosie", subtitle: "Senior Stylist", detail: "The anchor of our salon with 20+ years of expertise in classic cuts.", imageSrc: "http://img.b2bpic.net/free-photo/impressed-young-afro-american-male-barber-wearing-uniform-holding-scissors-comb_141793-117056.jpg" },
|
||||
{ id: "m2", title: "Elvia", subtitle: "Color Specialist", detail: "Master of balayage and subtle, sun-kissed highlights.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-woman-looking-camera-while-standing-counter-movie-house_613910-21690.jpg" },
|
||||
{ id: "m3", title: "Vicky", subtitle: "Creative Director", detail: "Loves edgy textures and bold, modern transformations.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-looking-young-beautiful-female-barber-uniform-showing-timeout-gesture-isolated-pink-wall_141793-106045.jpg" },
|
||||
{ id: "m4", title: "Sylvia", subtitle: "Stylist", detail: "Expert in elegant updos and refined daily styles.", imageSrc: "http://img.b2bpic.net/free-photo/confident-tilting-head-young-beautiful-female-barber-uniform-holding-comb-isolated-green-wall_141793-105666.jpg" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Meet Your Stylists"
|
||||
description="Our team brings decades of combined experience to ensure you leave feeling like your best self."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/best-friends-smiling-each-other_23-2148238236.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael D.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575437.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-getting-married_23-2150753670.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-young-women-working-together-laptop_23-2148431371.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Lisa M.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229813.jpg",
|
||||
},
|
||||
]}
|
||||
cardTitle="Beloved by Our Neighborhood"
|
||||
cardTag="Real Experiences"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/best-friends-smiling-each-other_23-2148238236.jpg" },
|
||||
{ id: "2", name: "Michael D.", imageSrc: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575437.jpg" },
|
||||
{ id: "3", name: "Emily R.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-getting-married_23-2150753670.jpg" },
|
||||
{ id: "4", name: "David K.", imageSrc: "http://img.b2bpic.net/free-photo/positive-young-women-working-together-laptop_23-2148431371.jpg" },
|
||||
{ id: "5", name: "Lisa M.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229813.jpg" }
|
||||
]}
|
||||
cardTitle="Beloved by Our Neighborhood"
|
||||
cardTag="Real Experiences"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
text="Visit us at 123 Main St. We’re open Tues–Sat, 9am–6pm. Walk-ins always welcome, but appointments are encouraged for color services. Call (555) 123-4567."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call to Book",
|
||||
href: "tel:5551234567",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
text="Visit us at 123 Main St. We’re open Tues–Sat, 9am–6pm. Walk-ins always welcome, but appointments are encouraged for color services. Call (555) 123-4567."
|
||||
buttons={[{ text: "Call to Book", href: "tel:5551234567" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Menu",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Stylists",
|
||||
href: "#stylists",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Boulevard Hairstyling"
|
||||
bottomRightText="Built with love for 27 years."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Menu", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Stylists", href: "#stylists" }] },
|
||||
{ title: "Connect", items: [{ label: "Contact", href: "#contact" }, { label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 Boulevard Hairstyling"
|
||||
bottomRightText="Built with love for 27 years."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user