Merge version_1 into main #1
459
src/app/page.tsx
459
src/app/page.tsx
@@ -19,335 +19,158 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="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: "Booking",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Relax Massage"
|
||||
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: "Pricing", id: "pricing" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Relax Massage"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
logoText="Relax Massage Therapy"
|
||||
description="Professional therapeutic massage services designed to restore your balance and well-being. Experience total relaxation in our tranquil studio."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Services",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-cozy-home-interior-details-living-room_169016-3537.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
logoText="Relax Massage Therapy"
|
||||
description="Professional therapeutic massage services designed to restore your balance and well-being. Experience total relaxation in our tranquil studio."
|
||||
buttons={[
|
||||
{ text: "Book Appointment", href: "#contact" },
|
||||
{ text: "View Services", href: "#services" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-cozy-home-interior-details-living-room_169016-3537.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Your Wellness Haven"
|
||||
description="At Relax Massage, we believe in the power of touch. Our experienced therapists tailor each session to your unique needs, helping you reduce stress, ease muscle tension, and rejuvenate your spirit. Our peaceful environment is crafted to offer you a sanctuary from the busy world."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/olive-oil-plant-restaurant_1162-72.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Your Wellness Haven"
|
||||
description="At Relax Massage, we believe in the power of touch. Our experienced therapists tailor each session to your unique needs, helping you reduce stress, ease muscle tension, and rejuvenate your spirit. Our peaceful environment is crafted to offer you a sanctuary from the busy world."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/olive-oil-plant-restaurant_1162-72.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Deep tissue release",
|
||||
"Sports recovery",
|
||||
"Trigger point therapy",
|
||||
"Myofascial release",
|
||||
"Craniosacral work",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Swedish relaxation",
|
||||
"Prenatal comfort",
|
||||
"Aromatherapy bliss",
|
||||
"Hot stone therapy",
|
||||
"Reflexology sessions",
|
||||
],
|
||||
}}
|
||||
title="Our Specialized Services"
|
||||
description="We offer a range of modalities to support your health journey."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
negativeCard={{ items: ["Deep tissue release", "Sports recovery", "Trigger point therapy", "Myofascial release", "Craniosacral work"] }}
|
||||
positiveCard={{ items: ["Swedish relaxation", "Prenatal comfort", "Aromatherapy bliss", "Hot stone therapy", "Reflexology sessions"] }}
|
||||
title="Our Specialized Services"
|
||||
description="We offer a range of modalities to support your health journey."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "standard",
|
||||
badge: "Popular",
|
||||
price: "$75",
|
||||
subtitle: "60 Minute Session",
|
||||
buttons: [
|
||||
{
|
||||
text: "Choose Plan",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Consultation",
|
||||
"Hot towel treatment",
|
||||
"Aromatherapy",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "deep",
|
||||
badge: "Best Value",
|
||||
price: "$110",
|
||||
subtitle: "90 Minute Session",
|
||||
buttons: [
|
||||
{
|
||||
text: "Choose Plan",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Extended focus",
|
||||
"Deep tissue work",
|
||||
"Hot towel treatment",
|
||||
"Aromatherapy",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "deluxe",
|
||||
badge: "Premium",
|
||||
price: "$145",
|
||||
subtitle: "120 Minute Session",
|
||||
buttons: [
|
||||
{
|
||||
text: "Choose Plan",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Full body restoration",
|
||||
"Custom oil blend",
|
||||
"Hot stone therapy",
|
||||
"Extended consultation",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
description="Simple, straightforward options for your wellness investment."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "standard", badge: "Popular", price: "$75", subtitle: "60 Minute Session", buttons: [{ text: "Choose Plan", href: "#contact" }], features: ["Consultation", "Hot towel treatment", "Aromatherapy"] },
|
||||
{ id: "deep", badge: "Best Value", price: "$110", subtitle: "90 Minute Session", buttons: [{ text: "Choose Plan", href: "#contact" }], features: ["Extended focus", "Deep tissue work", "Hot towel treatment", "Aromatherapy"] },
|
||||
{ id: "deluxe", badge: "Premium", price: "$145", subtitle: "120 Minute Session", buttons: [{ text: "Choose Plan", href: "#contact" }], features: ["Full body restoration", "Custom oil blend", "Hot stone therapy", "Extended consultation"] }
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
description="Simple, straightforward options for your wellness investment."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1500+",
|
||||
description: "Successful Sessions",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "98%",
|
||||
description: "Client Satisfaction",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "5yrs",
|
||||
description: "Years of Excellence",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "400+",
|
||||
description: "Regular Clients",
|
||||
},
|
||||
]}
|
||||
title="Client Impact"
|
||||
description="Healing results measured by our clients."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "1500+", description: "Successful Sessions" },
|
||||
{ id: "m2", value: "98%", description: "Client Satisfaction" },
|
||||
{ id: "m3", value: "5yrs", description: "Years of Excellence" },
|
||||
{ id: "m4", value: "400+", description: "Regular Clients" }
|
||||
]}
|
||||
title="Client Impact"
|
||||
description="Healing results measured by our clients."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice M.",
|
||||
role: "Office Professional",
|
||||
company: "Local Agency",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-getting-spa-treatment_1098-1230.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "James L.",
|
||||
role: "Runner",
|
||||
company: "Runners Club",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-standing-by-bathtub-before-taking-bath_23-2149239347.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sarah P.",
|
||||
role: "Designer",
|
||||
company: "Creative Lab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-home-enjoying-life_23-2149167740.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mark D.",
|
||||
role: "Accountant",
|
||||
company: "Finance Inc",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-beige-turtleneck-smiling-cheerfully-showing-teeth_141793-54841.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Emily J.",
|
||||
role: "Teacher",
|
||||
company: "Public School",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-smiling-young-woman-coat-sitting-sofa_171337-16904.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Hear from those who have experienced our care."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alice M.", role: "Office Professional", company: "Local Agency", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-getting-spa-treatment_1098-1230.jpg" },
|
||||
{ id: "t2", name: "James L.", role: "Runner", company: "Runners Club", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-standing-by-bathtub-before-taking-bath_23-2149239347.jpg" },
|
||||
{ id: "t3", name: "Sarah P.", role: "Designer", company: "Creative Lab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/couple-home-enjoying-life_23-2149167740.jpg" },
|
||||
{ id: "t4", name: "Mark D.", role: "Accountant", company: "Finance Inc", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-beige-turtleneck-smiling-cheerfully-showing-teeth_141793-54841.jpg" },
|
||||
{ id: "t5", name: "Emily J.", role: "Teacher", company: "Public School", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cute-smiling-young-woman-coat-sitting-sofa_171337-16904.jpg" }
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Hear from those who have experienced our care."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you offer direct billing?",
|
||||
content: "Yes, we work with most major insurance providers.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What should I wear?",
|
||||
content: "Dress comfortably; our therapists are trained in proper draping.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I request a specific therapist?",
|
||||
content: "Certainly, you can select your preferred provider when booking.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "What is the cancellation policy?",
|
||||
content: "Please notify us 24 hours in advance to avoid a cancellation fee.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Common questions about our therapy."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer direct billing?", content: "Yes, we work with most major insurance providers." },
|
||||
{ id: "f2", title: "What should I wear?", content: "Dress comfortably; our therapists are trained in proper draping." },
|
||||
{ id: "f3", title: "Can I request a specific therapist?", content: "Certainly, you can select your preferred provider when booking." },
|
||||
{ id: "f4", title: "What is the cancellation policy?", content: "Please notify us 24 hours in advance to avoid a cancellation fee." }
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Common questions about our therapy."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Booking"
|
||||
title="Ready to relax?"
|
||||
description="Book your appointment online or call us at (555) 123-4567. We are open daily from 9am to 7pm."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:5551234567",
|
||||
},
|
||||
{
|
||||
text: "Book via WhatsApp",
|
||||
href: "https://wa.me/15551234567",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Booking"
|
||||
title="Ready to relax?"
|
||||
description="Book your appointment online or call us at (555) 123-4567. We are open daily from 9am to 7pm."
|
||||
buttons={[
|
||||
{ text: "Call Now", href: "tel:5551234567" },
|
||||
{ text: "Book via WhatsApp", href: "https://wa.me/15551234567" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/towel-candles-flower-with-copy-space_23-2148366061.jpg"
|
||||
logoText="Relax Massage"
|
||||
columns={[
|
||||
{
|
||||
title: "Visit",
|
||||
items: [
|
||||
{
|
||||
label: "123 Serenity Way",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Suite 400",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/towel-candles-flower-with-copy-space_23-2148366061.jpg"
|
||||
logoText="Relax Massage"
|
||||
columns={[
|
||||
{ title: "Visit", items: [{ label: "123 Serenity Way", href: "#" }, { label: "Suite 400", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Privacy Policy", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user