Merge version_1 into main #2
396
src/app/page.tsx
396
src/app/page.tsx
@@ -19,306 +19,122 @@ export default function LandingPage() {
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Location",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
button={{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
}}
|
||||
brandName="Kasa de Belleza"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
button={{ text: "Book Appointment", href: "#contact" }}
|
||||
brandName="Kasa de Belleza"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Expert Care. Personal Touch. Beautiful Results."
|
||||
description="Orlando’s premier destination for expert hair color, precision nails, and the dedicated attention you deserve."
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule Your Transformation",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205859.jpg"
|
||||
imageAlt="Salon transformation"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-woman-taking-care-boy-s-afro-hair_52683-90511.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-businesswoman-black-suit-playing-with-her-hair-while-talking-phone_114579-14175.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/people-talking-about-work-project_23-2148778032.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-urban-woman_23-2148012819.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision Cuts",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Master Color",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Luxe Manicures",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Styling Expertise",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sanctuary Spa",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Expert Care. Personal Touch. Beautiful Results."
|
||||
description="Orlando’s premier destination for expert hair color, precision nails, and the dedicated attention you deserve."
|
||||
buttons={[{ text: "Schedule Your Transformation", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205859.jpg"
|
||||
imageAlt="Salon transformation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "K. Lynn R-S",
|
||||
role: "Client",
|
||||
company: "Orlando",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-taking-care-boy-s-afro-hair_52683-90511.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sonya Alvarez",
|
||||
role: "Client",
|
||||
company: "Orlando",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Maria Gonzalez",
|
||||
role: "Client",
|
||||
company: "Orlando",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-black-suit-playing-with-her-hair-while-talking-phone_114579-14175.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sarah Miller",
|
||||
role: "Client",
|
||||
company: "Orlando",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-talking-about-work-project_23-2148778032.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Elena Rossi",
|
||||
role: "Client",
|
||||
company: "Orlando",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-taking-care-boy-s-afro-hair_52683-90511.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "500+",
|
||||
label: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Satisfaction",
|
||||
},
|
||||
{
|
||||
value: "5.0",
|
||||
label: "Google Rating",
|
||||
},
|
||||
]}
|
||||
title="Wall of Love"
|
||||
description="What our wonderful community says about their Kasa de Belleza experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "K. Lynn R-S", role: "Client", company: "Orlando", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-taking-care-boy-s-afro-hair_52683-90511.jpg" },
|
||||
{ id: "2", name: "Sonya Alvarez", role: "Client", company: "Orlando", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg" },
|
||||
{ id: "3", name: "Maria Gonzalez", role: "Client", company: "Orlando", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-black-suit-playing-with-her-hair-while-talking-phone_114579-14175.jpg" }
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "500+", label: "Happy Clients" },
|
||||
{ value: "100%", label: "Satisfaction" },
|
||||
{ value: "5.0", label: "Google Rating" }
|
||||
]}
|
||||
title="Wall of Love"
|
||||
description="What our wonderful community says about their Kasa de Belleza experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Expert Hair Color",
|
||||
description: "Specialize in color corrections and transformations that leave you feeling awesome.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-urban-woman_23-2148012819.jpg",
|
||||
imageAlt: "Hair color service",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Designer Nails",
|
||||
description: "Precision work that is beautiful and long-lasting.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nail-hygiene-care-feminine-hands_23-2148766574.jpg",
|
||||
imageAlt: "Nail service",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Professional Styling",
|
||||
description: "High-end finishes by master stylists like Negra and Lilliam.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-beauty-salon_23-2149167364.jpg",
|
||||
imageAlt: "Hair styling",
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="High-end finishes and precision care tailored to your unique beauty."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: 1, title: "Expert Hair Color", description: "Specialize in color corrections and transformations.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-urban-woman_23-2148012819.jpg" },
|
||||
{ id: 2, title: "Designer Nails", description: "Precision work that is beautiful and long-lasting.", imageSrc: "http://img.b2bpic.net/free-photo/nail-hygiene-care-feminine-hands_23-2148766574.jpg" },
|
||||
{ id: 3, title: "Professional Styling", description: "High-end finishes by master stylists.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-beauty-salon_23-2149167364.jpg" }
|
||||
]}
|
||||
title="Our Services"
|
||||
description="High-end finishes and precision care tailored to your unique beauty."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="The Kasa Difference"
|
||||
metrics={[
|
||||
{
|
||||
icon: User,
|
||||
label: "Owner-Led Care",
|
||||
value: "Amara Tomey",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Master Technicians",
|
||||
value: "Expert Staff",
|
||||
},
|
||||
{
|
||||
icon: DollarSign,
|
||||
label: "Fair Luxury",
|
||||
value: "Reasonable Prices",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="The Kasa Difference"
|
||||
metrics={[
|
||||
{ icon: User, label: "Owner-Led Care", value: "Amara Tomey" },
|
||||
{ icon: Award, label: "Master Technicians", value: "Expert Staff" },
|
||||
{ icon: DollarSign, label: "Fair Luxury", value: "Reasonable Prices" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-narrative" data-section="about-narrative">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Our Studio Philosophy",
|
||||
content: "Kindness, quality, and community are the pillars of our work.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Our Commitment",
|
||||
content: "Every client deserves expert care and a personal touch.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Our Mission"
|
||||
sideDescription="We don't just do hair and nails; we care for the person in the chair. Under the leadership of Amara Tomey, our studio has become a sanctuary where quality meets community."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about-narrative" data-section="about-narrative">
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{ id: "1", title: "Our Studio Philosophy", content: "Kindness, quality, and community are the pillars of our work." },
|
||||
{ id: "2", title: "Our Commitment", content: "Every client deserves expert care and a personal touch." }
|
||||
]}
|
||||
sideTitle="Our Mission"
|
||||
sideDescription="We don't just do hair and nails; we care for the person in the chair."
|
||||
faqsAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Where are you located?",
|
||||
content: "1794 N Chickasaw Trail, Orlando, FL.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "How to book?",
|
||||
content: "Click the 'Book Appointment' button in the header!",
|
||||
},
|
||||
]}
|
||||
ctaTitle="Ready to look and feel your best?"
|
||||
ctaDescription="Visit us at 1794 N Chickasaw Trail, Orlando, FL."
|
||||
ctaButton={{
|
||||
text: "Book Your Visit",
|
||||
href: "#",
|
||||
}}
|
||||
ctaIcon={Calendar}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Where are you located?", content: "1794 N Chickasaw Trail, Orlando, FL." },
|
||||
{ id: "2", title: "How to book?", content: "Click the 'Book Appointment' button in the header!" }
|
||||
]}
|
||||
ctaTitle="Ready to look and feel your best?"
|
||||
ctaDescription="Visit us at 1794 N Chickasaw Trail, Orlando, FL."
|
||||
ctaButton={{ text: "Book Your Visit", href: "#" }}
|
||||
ctaIcon={Calendar}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Kasa de Belleza"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#" }, { label: "Services", href: "#services" }] },
|
||||
{ items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
logoText="Kasa de Belleza"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user