Merge version_1 into main #1
446
src/app/page.tsx
446
src/app/page.tsx
@@ -16,323 +16,157 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Bella Salon"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Bella Salon"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
title="Three Decades of Austin Beauty Excellence"
|
||||
description="Bella Salon has been Austin's trusted destination for transformative hair and beauty since 1989. Discover why thousands of clients return year after year."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-with-makeup-brush_23-2147804603.jpg",
|
||||
imageAlt: "luxurious salon interior aesthetic",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-using-dryer-beard-man_23-2147737033.jpg",
|
||||
imageAlt: "hair stylist professional at work",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94682.jpg",
|
||||
imageAlt: "hair color treatment process salon",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-making-hairstyle-brunette-woman-beauty-salon_176420-4462.jpg",
|
||||
imageAlt: "hair styling blow dry salon",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg",
|
||||
imageAlt: "professional hair salon tools mirror",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-shop-chairs-close-up_23-2148353478.jpg",
|
||||
imageAlt: "hair salon hair salon lifestyle",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
title="Three Decades of Austin Beauty Excellence"
|
||||
description="Bella Salon has been Austin's trusted destination for transformative hair and beauty since 1989. Discover why thousands of clients return year after year."
|
||||
buttons={[{ text: "Book Your Appointment", href: "#contact" }]}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-with-makeup-brush_23-2147804603.jpg", imageAlt: "luxurious salon interior aesthetic" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-dryer-beard-man_23-2147737033.jpg", imageAlt: "hair stylist professional at work" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94682.jpg", imageAlt: "hair color treatment process salon" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-making-hairstyle-brunette-woman-beauty-salon_176420-4462.jpg", imageAlt: "hair styling blow dry salon" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg", imageAlt: "professional hair salon tools mirror" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-shop-chairs-close-up_23-2148353478.jpg", imageAlt: "hair salon hair salon lifestyle" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Austin Legacy"
|
||||
description="Since 1989, Bella Salon has set the standard for professional hair care in Austin. We blend timeless techniques with modern artistry to ensure every client leaves feeling their absolute best, backed by a team that truly understands your vision."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-beautiful-woman-hairdresser-apron-holding-hair-comb-spray-bottle-looking-front-with-serious-face-standing-green-wall_141793-71788.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Austin Legacy"
|
||||
description="Since 1989, Bella Salon has set the standard for professional hair care in Austin. We blend timeless techniques with modern artistry to ensure every client leaves feeling their absolute best, backed by a team that truly understands your vision."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-beautiful-woman-hairdresser-apron-holding-hair-comb-spray-bottle-looking-front-with-serious-face-standing-green-wall_141793-71788.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySeven
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Precision Cuts",
|
||||
descriptions: [
|
||||
"Customized cuts for every hair texture and personal style.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-friends-posing-together_23-2149742014.jpg",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Expert Coloring",
|
||||
descriptions: [
|
||||
"From natural highlights to vibrant custom colors.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-shopping-mall_23-2150585938.jpg",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Style & Blowouts",
|
||||
descriptions: [
|
||||
"Volume, shine, and style that lasts from morning to night.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-drying-hair-young-girl_23-2147769807.jpg",
|
||||
},
|
||||
]}
|
||||
title="Premium Services"
|
||||
description="Expertly crafted beauty treatments designed to revitalize your hair and boost your confidence."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentySeven
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "s1", title: "Precision Cuts", descriptions: ["Customized cuts for every hair texture and personal style."], imageSrc: "http://img.b2bpic.net/free-photo/high-angle-friends-posing-together_23-2149742014.jpg" },
|
||||
{ id: "s2", title: "Expert Coloring", descriptions: ["From natural highlights to vibrant custom colors."], imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-shopping-mall_23-2150585938.jpg" },
|
||||
{ id: "s3", title: "Style & Blowouts", descriptions: ["Volume, shine, and style that lasts from morning to night."], imageSrc: "http://img.b2bpic.net/free-photo/woman-drying-hair-young-girl_23-2147769807.jpg" }
|
||||
]}
|
||||
title="Premium Services"
|
||||
description="Expertly crafted beauty treatments designed to revitalize your hair and boost your confidence."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
members={[
|
||||
{
|
||||
id: "m1",
|
||||
name: "Sarah Miller",
|
||||
role: "Master Stylist",
|
||||
description: "Expert in precision cuts with 20 years of experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-pink-sweater-looking-camera-posing-high-quality-photo_114579-31514.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
name: "James Chen",
|
||||
role: "Color Director",
|
||||
description: "Specializing in balayage and multi-dimensional coloring.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-gardener-woman-with-short-hair-apron-hat-holding-hedge-clippers-with-serious-face_141793-102431.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Stylist",
|
||||
description: "Creative stylist focused on modern trends and styling.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-bride-getting-hair-done_23-2149860769.jpg",
|
||||
},
|
||||
]}
|
||||
title="Meet Your Stylists"
|
||||
description="Our team of seasoned professionals brings decades of collective experience to your appointment."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
members={[
|
||||
{ id: "m1", name: "Sarah Miller", role: "Master Stylist", description: "Expert in precision cuts with 20 years of experience.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-pink-sweater-looking-camera-posing-high-quality-photo_114579-31514.jpg" },
|
||||
{ id: "m2", name: "James Chen", role: "Color Director", description: "Specializing in balayage and multi-dimensional coloring.", imageSrc: "http://img.b2bpic.net/free-photo/young-gardener-woman-with-short-hair-apron-hat-holding-hedge-clippers-with-serious-face_141793-102431.jpg" },
|
||||
{ id: "m3", name: "Elena Rodriguez", role: "Stylist", description: "Creative stylist focused on modern trends and styling.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-bride-getting-hair-done_23-2149860769.jpg" }
|
||||
]}
|
||||
title="Meet Your Stylists"
|
||||
description="Our team of seasoned professionals brings decades of collective experience to your appointment."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Bella Salon has consistently provided the best hair experience in Austin for over 10 years. Their attention to detail and personalized service is unmatched."
|
||||
rating={5}
|
||||
author="Jordan W."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg",
|
||||
alt: "customer portrait salon interior",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-corrects-her-hairstyle-looks-aside_8353-10717.jpg",
|
||||
alt: "client hair salon beauty studio",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-smiley-bride-indoors_23-2149721993.jpg",
|
||||
alt: "customer portrait beauty salon",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg",
|
||||
alt: "woman salon beauty experience",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg",
|
||||
alt: "Male make-up look holding a brush",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Bella Salon has consistently provided the best hair experience in Austin for over 10 years. Their attention to detail and personalized service is unmatched."
|
||||
rating={5}
|
||||
author="Jordan W."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg", alt: "customer portrait salon interior" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-corrects-her-hairstyle-looks-aside_8353-10717.jpg", alt: "client hair salon beauty studio" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/high-angle-smiley-bride-indoors_23-2149721993.jpg", alt: "customer portrait beauty salon" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg", alt: "woman salon beauty experience" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg", alt: "Male make-up look holding a brush" }
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "n1",
|
||||
value: "35+",
|
||||
title: "Years Established",
|
||||
items: [
|
||||
"Serving Austin since 1989.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "n2",
|
||||
value: "15k+",
|
||||
title: "Happy Clients",
|
||||
items: [
|
||||
"Transformative beauty experiences.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "n3",
|
||||
value: "100%",
|
||||
title: "Satisfaction",
|
||||
items: [
|
||||
"Committed to your absolute best.",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Decades of Excellence"
|
||||
description="Proven results that speak to our longevity in the community."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "n1", value: "35+", title: "Years Established", items: ["Serving Austin since 1989."] },
|
||||
{ id: "n2", value: "15k+", title: "Happy Clients", items: ["Transformative beauty experiences."] },
|
||||
{ id: "n3", value: "100%", title: "Satisfaction", items: ["Committed to your absolute best."] }
|
||||
]}
|
||||
title="Decades of Excellence"
|
||||
description="Proven results that speak to our longevity in the community."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How do I book?",
|
||||
content: "You can book directly via our online system or call us.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you offer consultations?",
|
||||
content: "Yes, we offer complimentary consultations.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Where are you located?",
|
||||
content: "We are located centrally in Austin.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-women-working-laptop-home_23-2148298065.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked"
|
||||
description="Answers to common questions about our services and booking process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do I book?", content: "You can book directly via our online system or call us." },
|
||||
{ id: "q2", title: "Do you offer consultations?", content: "Yes, we offer complimentary consultations." },
|
||||
{ id: "q3", title: "Where are you located?", content: "We are located centrally in Austin." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-women-working-laptop-home_23-2148298065.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked"
|
||||
description="Answers to common questions about our services and booking process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
text="Ready to transform your style? Book your appointment at Bella Salon today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Online Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
text="Ready to transform your style? Book your appointment at Bella Salon today."
|
||||
buttons={[{ text: "Book Online Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Bella Salon"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
logoText="Bella Salon"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user