Update src/app/page.tsx

This commit is contained in:
2026-04-08 02:06:42 +00:00
parent 4d27bd4bcf
commit 88acda7b31

View File

@@ -25,241 +25,109 @@ export default function LandingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Services",
id: "services",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="The Health Boutique"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
brandName="The Health Boutique"
button={{ text: "Book Now", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{
variant: "radial-gradient",
}}
title="The Health Boutique"
description="Luxury wellness, personalised care, and a space designed for your calm."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/woman-relaxing-bath-with-bubbles_1303-24667.jpg",
alt: "Luxury interior",
},
{
src: "http://img.b2bpic.net/free-photo/relaxing-massage-with-essential-oils-modern-spa-massage-hands-closeup_169016-69029.jpg",
alt: "Spa treatment",
},
{
src: "http://img.b2bpic.net/free-photo/side-view-smiley-women-yoga-mats_23-2149832810.jpg",
alt: "Yoga practice",
},
{
src: "http://img.b2bpic.net/free-photo/young-woman-receiving-head-massage-spa-center_1139-1134.jpg",
alt: "Rejuvenation",
},
{
src: "http://img.b2bpic.net/free-photo/spa-still-life-with-face-body-skin-care-products-tea_169016-10914.jpg",
alt: "Calm space",
},
]}
buttons={[
{
text: "Book Your Experience",
href: "#contact",
},
]}
marqueeItems={[
{
type: "text",
text: "Holistic Therapy",
},
{
type: "text",
text: "Personalised Care",
},
{
type: "text",
text: "Restorative Balance",
},
{
type: "text",
text: "Calm Atmosphere",
},
{
type: "text",
text: "Expert Rejuvenation",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{ variant: "radial-gradient" }}
title="The Health Boutique"
description="Luxury wellness, personalised care, and a space designed for your calm."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/woman-relaxing-bath-with-bubbles_1303-24667.jpg", alt: "Luxury interior" },
{ src: "http://img.b2bpic.net/free-photo/relaxing-massage-with-essential-oils-modern-spa-massage-hands-closeup_169016-69029.jpg", alt: "Spa treatment" },
{ src: "http://img.b2bpic.net/free-photo/side-view-smiley-women-yoga-mats_23-2149832810.jpg", alt: "Yoga practice" },
{ src: "http://img.b2bpic.net/free-photo/young-woman-receiving-head-massage-spa-center_1139-1134.jpg", alt: "Rejuvenation" },
{ src: "http://img.b2bpic.net/free-photo/spa-still-life-with-face-body-skin-care-products-tea_169016-10914.jpg", alt: "Calm space" },
]}
buttons={[{ text: "Book Your Experience", href: "#contact" }]}
marqueeItems={[
{ type: "text", text: "Holistic Therapy" },
{ type: "text", text: "Personalised Care" },
{ type: "text", text: "Restorative Balance" },
{ type: "text", text: "Calm Atmosphere" },
{ type: "text", text: "Expert Rejuvenation" },
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="A Sanctuary in Hastings"
description={[
"Step into a space where your wellbeing comes first. At The Health Boutique, every treatment is designed to restore balance, calm your mind, and leave you feeling completely revitalised.",
"Led by Sharon, known for her peaceful and grounding energy, this is more than a clinic — its an experience.",
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="A Sanctuary in Hastings"
description={[
"Step into a space where your wellbeing comes first. At The Health Boutique, every treatment is designed to restore balance, calm your mind, and leave you feeling completely revitalised.", "Led by Sharon, known for her peaceful and grounding energy, this is more than a clinic — its an experience."]}
/>
</div>
<div id="services" data-section="services">
<FeatureCardThree
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
features={[
{
title: "Pain Relief Treatments",
description: "Focused therapy to alleviate discomfort and restore physical function.",
imageSrc: "http://img.b2bpic.net/free-photo/relaxing-massage-with-essential-oils-modern-spa-massage-hands-closeup_169016-69029.jpg?_wi=1",
},
{
title: "Holistic Wellness",
description: "A comprehensive approach to mental and physical rejuvenation.",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-women-yoga-mats_23-2149832810.jpg?_wi=1",
},
{
title: "Rejuvenation Therapy",
description: "Signature treatments to leave you feeling completely revitalised.",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-receiving-head-massage-spa-center_1139-1134.jpg?_wi=1",
},
]}
title="Our Treatments"
description="Tailored treatments focused on restoring balance and enhancing your wellbeing."
/>
</div>
<div id="services" data-section="services">
<FeatureCardThree
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
features={[
{ title: "Pain Relief Treatments", description: "Focused therapy to alleviate discomfort and restore physical function.", imageSrc: "http://img.b2bpic.net/free-photo/relaxing-massage-with-essential-oils-modern-spa-massage-hands-closeup_169016-69029.jpg" },
{ title: "Holistic Wellness", description: "A comprehensive approach to mental and physical rejuvenation.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-women-yoga-mats_23-2149832810.jpg" },
{ title: "Rejuvenation Therapy", description: "Signature treatments to leave you feeling completely revitalised.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-receiving-head-massage-spa-center_1139-1134.jpg" },
]}
title="Our Treatments"
description="Tailored treatments focused on restoring balance and enhancing your wellbeing."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
textboxLayout="default"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah",
role: "Client",
company: "Hastings",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/relaxing-massage-with-essential-oils-modern-spa-massage-hands-closeup_169016-69029.jpg?_wi=2",
},
{
id: "2",
name: "Michael",
role: "Client",
company: "Hastings",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-women-yoga-mats_23-2149832810.jpg?_wi=2",
},
{
id: "3",
name: "Emily",
role: "Client",
company: "Hastings",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-receiving-head-massage-spa-center_1139-1134.jpg?_wi=2",
},
{
id: "4",
name: "David",
role: "Client",
company: "Hastings",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/relaxing-massage-with-essential-oils-modern-spa-massage-hands-closeup_169016-69029.jpg?_wi=3",
},
{
id: "5",
name: "Jessica",
role: "Client",
company: "Hastings",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-women-yoga-mats_23-2149832810.jpg?_wi=3",
},
]}
title="What Clients Say"
description="Hear about the transformative experiences at our boutique."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Sarah", role: "Client", company: "Hastings", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/relaxing-massage-with-essential-oils-modern-spa-massage-hands-closeup_169016-69029.jpg" },
{ id: "2", name: "Michael", role: "Client", company: "Hastings", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-women-yoga-mats_23-2149832810.jpg" },
{ id: "3", name: "Emily", role: "Client", company: "Hastings", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-receiving-head-massage-spa-center_1139-1134.jpg" },
{ id: "4", name: "David", role: "Client", company: "Hastings", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/relaxing-massage-with-essential-oils-modern-spa-massage-hands-closeup_169016-69029.jpg" },
{ id: "5", name: "Jessica", role: "Client", company: "Hastings", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-women-yoga-mats_23-2149832810.jpg" },
]}
title="What Clients Say"
description="Hear about the transformative experiences at our boutique."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Ready to Feel Your Best?"
description="Book your experience and step into a space of calm."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "What are you looking to achieve?",
rows: 4,
}}
imageSrc="http://img.b2bpic.net/free-photo/spa-still-life-with-face-body-skin-care-products-tea_169016-10914.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Ready to Feel Your Best?"
description="Book your experience and step into a space of calm."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true },
]}
textarea={{ name: "message", placeholder: "What are you looking to achieve?", rows: 4 }}
imageSrc="http://img.b2bpic.net/free-photo/spa-still-life-with-face-body-skin-care-products-tea_169016-10914.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "About",
href: "#about",
},
{
label: "Services",
href: "#services",
},
],
},
{
items: [
{
label: "Contact",
href: "#contact",
},
{
label: "Privacy",
href: "#",
},
],
},
]}
logoText="The Health Boutique"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
{ items: [{ label: "Contact", href: "#contact" }, { label: "Privacy", href: "#" }] },
]}
logoText="The Health Boutique"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}