Update src/app/page.tsx
This commit is contained in:
476
src/app/page.tsx
476
src/app/page.tsx
@@ -16,349 +16,161 @@ import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCar
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="medium"
|
||||
background="grid"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="medium"
|
||||
background="grid"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Blushing Bloom Salon"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Blushing Bloom Salon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Radiate Beauty at Blushing Bloom"
|
||||
description="Experience premium hair, skincare, and beauty treatments in our serene, professional salon environment."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/luxury-modern-living-room-with-elegant-decoration-generated-by-ai_188544-21535.jpg?_wi=1"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/luxury-modern-living-room-illuminated-by-lantern-generated-by-ai_188544-21373.jpg",
|
||||
alt: "Luxury modern living room illuminated by lantern",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/large-room-with-large-window-couch-with-pillows-it_188544-27425.jpg",
|
||||
alt: "A large room with a large window and a couch with pillows",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-hotel-insights-details_23-2149160777.jpg",
|
||||
alt: "Beautiful hotel insights details",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/city-background-panoramic-view_23-2148892970.jpg",
|
||||
alt: "City background panoramic view",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg",
|
||||
alt: "Barber doing haircut bearded aged client",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ happy clients"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Radiate Beauty at Blushing Bloom"
|
||||
description="Experience premium hair, skincare, and beauty treatments in our serene, professional salon environment."
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/luxury-modern-living-room-with-elegant-decoration-generated-by-ai_188544-21535.jpg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/luxury-modern-living-room-illuminated-by-lantern-generated-by-ai_188544-21373.jpg", alt: "Luxury modern living room illuminated by lantern" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/large-room-with-large-window-couch-with-pillows-it_188544-27425.jpg", alt: "A large room with a large window and a couch with pillows" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-hotel-insights-details_23-2149160777.jpg", alt: "Beautiful hotel insights details" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/city-background-panoramic-view_23-2148892970.jpg", alt: "City background panoramic view" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg", alt: "Barber doing haircut bearded aged client" }
|
||||
]}
|
||||
avatarText="Trusted by 500+ happy clients"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Where Art Meets Beauty"
|
||||
description="Blushing Bloom Salon is dedicated to elevating your natural beauty through personalized care and expert techniques."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Expert Stylists",
|
||||
description: "Highly trained professionals dedicated to your style.",
|
||||
},
|
||||
{
|
||||
title: "Organic Products",
|
||||
description: "Premium, eco-friendly beauty products used exclusively.",
|
||||
},
|
||||
{
|
||||
title: "Relaxing Ambiance",
|
||||
description: "Designed for your total comfort and rejuvenation.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-preparing-equipment-work-barber-shop_23-2148182010.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Where Art Meets Beauty"
|
||||
description="Blushing Bloom Salon is dedicated to elevating your natural beauty through personalized care and expert techniques."
|
||||
bulletPoints={[
|
||||
{ title: "Expert Stylists", description: "Highly trained professionals dedicated to your style." },
|
||||
{ title: "Organic Products", description: "Premium, eco-friendly beauty products used exclusively." },
|
||||
{ title: "Relaxing Ambiance", description: "Designed for your total comfort and rejuvenation." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-preparing-equipment-work-barber-shop_23-2148182010.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Hair Design",
|
||||
author: "Salon Expertise",
|
||||
description: "Precision cutting and personalized coloring techniques.",
|
||||
tags: [
|
||||
"Hair",
|
||||
"Style",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-bride-getting-hair-done_23-2149860769.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Nail Care",
|
||||
author: "Salon Expertise",
|
||||
description: "Luxury manicures and bespoke nail art artistry.",
|
||||
tags: [
|
||||
"Nails",
|
||||
"Care",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/massage-concept-with-happy-woman_23-2147816945.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Skin Rejuvenation",
|
||||
author: "Salon Expertise",
|
||||
description: "Customized facial treatments for glowing skin.",
|
||||
tags: [
|
||||
"Skin",
|
||||
"Spa",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-with-detox-mas-her-face-bathroom_637285-10373.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="From precision cuts to revitalizing facials, we offer a full suite of luxury beauty services."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "1", title: "Hair Design", author: "Salon Expertise", description: "Precision cutting and personalized coloring techniques.", tags: ["Hair", "Style"], imageSrc: "http://img.b2bpic.net/free-photo/front-view-bride-getting-hair-done_23-2149860769.jpg" },
|
||||
{ id: "2", title: "Nail Care", author: "Salon Expertise", description: "Luxury manicures and bespoke nail art artistry.", tags: ["Nails", "Care"], imageSrc: "http://img.b2bpic.net/free-photo/massage-concept-with-happy-woman_23-2147816945.jpg" },
|
||||
{ id: "3", title: "Skin Rejuvenation", author: "Salon Expertise", description: "Customized facial treatments for glowing skin.", tags: ["Skin", "Spa"], imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-with-detox-mas-her-face-bathroom_637285-10373.jpg" }
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="From precision cuts to revitalizing facials, we offer a full suite of luxury beauty services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "1",
|
||||
badge: "Essential",
|
||||
price: "$65+",
|
||||
subtitle: "Hair & Style",
|
||||
features: [
|
||||
"Precision Cut",
|
||||
"Blowout",
|
||||
"Consultation",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
badge: "Premium",
|
||||
price: "$120+",
|
||||
subtitle: "Color & Care",
|
||||
features: [
|
||||
"Full Color",
|
||||
"Glaze",
|
||||
"Deep Conditioning",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
badge: "Luxury",
|
||||
price: "$200+",
|
||||
subtitle: "Total Rejuvenation",
|
||||
features: [
|
||||
"Facial & Cut",
|
||||
"Head Spa",
|
||||
"Full Package",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Service Investment"
|
||||
description="Transparent pricing for exceptional salon services."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "1", badge: "Essential", price: "$65+", subtitle: "Hair & Style", features: ["Precision Cut", "Blowout", "Consultation"], buttons: [{ text: "Select", href: "#contact" }] },
|
||||
{ id: "2", badge: "Premium", price: "$120+", subtitle: "Color & Care", features: ["Full Color", "Glaze", "Deep Conditioning"], buttons: [{ text: "Select", href: "#contact" }] },
|
||||
{ id: "3", badge: "Luxury", price: "$200+", subtitle: "Total Rejuvenation", features: ["Facial & Cut", "Head Spa", "Full Package"], buttons: [{ text: "Select", href: "#contact" }] }
|
||||
]}
|
||||
title="Service Investment"
|
||||
description="Transparent pricing for exceptional salon services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "1",
|
||||
groupTitle: "Stylists & Specialists",
|
||||
members: [
|
||||
{
|
||||
id: "1",
|
||||
title: "Elena Rose",
|
||||
subtitle: "Senior Stylist",
|
||||
detail: "10+ years of creative coloring experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-hairdressershowing-how-use-hair-straighntener_259150-60106.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Sarah Chen",
|
||||
subtitle: "Lead Aesthetician",
|
||||
detail: "Expert in revitalizing skin care rituals.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-visiting-cosmetologist-making-rejuvenation-procedures_1303-26059.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Mark J.",
|
||||
subtitle: "Master Colorist",
|
||||
detail: "Precision techniques for modern styles.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-shopping-mall_23-2150585900.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-modern-living-room-with-elegant-decoration-generated-by-ai_188544-21535.jpg?_wi=2",
|
||||
imageAlt: "professional hair stylist portrait",
|
||||
},
|
||||
]}
|
||||
title="Meet Our Experts"
|
||||
description="Our team of skilled professionals brings creativity and excellence to every client."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "1", groupTitle: "Stylists & Specialists", members: [
|
||||
{ id: "1", title: "Elena Rose", subtitle: "Senior Stylist", detail: "10+ years of creative coloring experience.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-hairdressershowing-how-use-hair-straighntener_259150-60106.jpg" },
|
||||
{ id: "2", title: "Sarah Chen", subtitle: "Lead Aesthetician", detail: "Expert in revitalizing skin care rituals.", imageSrc: "http://img.b2bpic.net/free-photo/woman-visiting-cosmetologist-making-rejuvenation-procedures_1303-26059.jpg" },
|
||||
{ id: "3", title: "Mark J.", subtitle: "Master Colorist", detail: "Precision techniques for modern styles.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-shopping-mall_23-2150585900.jpg" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Meet Our Experts"
|
||||
description="Our team of skilled professionals brings creativity and excellence to every client."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alice T.",
|
||||
role: "Regular Client",
|
||||
testimonial: "Best salon experience ever. My hair feels amazing!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/make-up-artist-making-client-laugh_23-2148398584.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Beth R.",
|
||||
role: "Bride-to-be",
|
||||
testimonial: "Professional, kind, and truly gifted stylists.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-women-using-mascara-home_23-2148817246.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Chloe M.",
|
||||
role: "Frequent Visitor",
|
||||
testimonial: "Lovely ambiance and top-tier services.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-lovely-brunette-sits-white-big-chair_1304-3522.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Diane P.",
|
||||
role: "Client",
|
||||
testimonial: "Incredible facials that leave me glowing.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-singing_1187-3682.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Eva G.",
|
||||
role: "Client",
|
||||
testimonial: "Such a relaxing and professional experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-charming-blond-girl-lovely-white-dress-with-beaming-smile-looking-camera-feeling-happy-cheerful-enjoying-sunny-romantic-spring-days-pink-background_1258-93949.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Love Stories"
|
||||
description="See why our clients choose Blushing Bloom."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alice T.", role: "Regular Client", testimonial: "Best salon experience ever. My hair feels amazing!", imageSrc: "http://img.b2bpic.net/free-photo/make-up-artist-making-client-laugh_23-2148398584.jpg" },
|
||||
{ id: "2", name: "Beth R.", role: "Bride-to-be", testimonial: "Professional, kind, and truly gifted stylists.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-women-using-mascara-home_23-2148817246.jpg" },
|
||||
{ id: "3", name: "Chloe M.", role: "Frequent Visitor", testimonial: "Lovely ambiance and top-tier services.", imageSrc: "http://img.b2bpic.net/free-photo/young-lovely-brunette-sits-white-big-chair_1304-3522.jpg" },
|
||||
{ id: "4", name: "Diane P.", role: "Client", testimonial: "Incredible facials that leave me glowing.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-singing_1187-3682.jpg" },
|
||||
{ id: "5", name: "Eva G.", role: "Client", testimonial: "Such a relaxing and professional experience.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-charming-blond-girl-lovely-white-dress-with-beaming-smile-looking-camera-feeling-happy-cheerful-enjoying-sunny-romantic-spring-days-pink-background_1258-93949.jpg" }
|
||||
]}
|
||||
title="Client Love Stories"
|
||||
description="See why our clients choose Blushing Bloom."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I book?",
|
||||
content: "You can book directly via our contact form or call us.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "What products do you use?",
|
||||
content: "We use premium organic lines suited for all skin and hair types.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you offer consultations?",
|
||||
content: "Yes, we offer complimentary 15-minute style consultations.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Your Questions, Answered"
|
||||
sideDescription="Everything you need to know before your visit."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "How do I book?", content: "You can book directly via our contact form or call us." },
|
||||
{ id: "2", title: "What products do you use?", content: "We use premium organic lines suited for all skin and hair types." },
|
||||
{ id: "3", title: "Do you offer consultations?", content: "Yes, we offer complimentary 15-minute style consultations." }
|
||||
]}
|
||||
sideTitle="Your Questions, Answered"
|
||||
sideDescription="Everything you need to know before your visit."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Booking"
|
||||
title="Ready to Bloom?"
|
||||
description="Schedule your appointment today and start your journey."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Booking"
|
||||
title="Ready to Bloom?"
|
||||
description="Schedule your appointment today and start your journey."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Blushing Bloom Salon"
|
||||
copyrightText="© 2025 Blushing Bloom Salon. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Blushing Bloom Salon"
|
||||
copyrightText="© 2025 Blushing Bloom Salon. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user