210 lines
10 KiB
TypeScript
210 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { Award, CheckCircle, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="SerenaSpa"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
title="Rejuvenate Your Soul"
|
|
description="Discover a sanctuary of peace and healing in the heart of the city. Expert massage therapy for deep relaxation."
|
|
leftCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-spa-salon_176420-7549.jpg", imageAlt: "Massage room" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/wellness-concept-with-woman-massage-salon_23-2147816967.jpg", imageAlt: "Massage room" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-relaxing-spa_329181-13165.jpg", imageAlt: "Massage room" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-luxury-bedroom-design-illuminated-with-electric-lamps-generated-by-ai_188544-27310.jpg", imageAlt: "Massage room" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-bathing-brush-with-essential-oils-candles-spa-concept_127675-2567.jpg", imageAlt: "Massage room" }
|
|
]}
|
|
rightCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/massage-woman-spa-salon_1385-266.jpg", imageAlt: "Treatment detail" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-massaging-girl-table_23-2147648483.jpg", imageAlt: "Treatment detail" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/massage-therapy-with-stones_23-2148531203.jpg", imageAlt: "Treatment detail" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/pile-stones-white-vase_23-2147677834.jpg", imageAlt: "Treatment detail" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/pile-black-stones-with-orchid-top_23-2147684453.jpg", imageAlt: "Treatment detail" }
|
|
]}
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/young-naked-woman-relaxing-spa-salon_176420-7536.jpg", alt: "Client 1" },
|
|
{ src: "http://img.b2bpic.net/free-photo/luxury-bedroom-with-modern-design-elegance-generated-by-ai_188544-26912.jpg", alt: "Client 2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/room-with-massage-tables-wall-with-lights-it_188544-36461.jpg", alt: "Client 3" },
|
|
{ src: "http://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817020.jpg", alt: "Client 4" },
|
|
{ src: "http://img.b2bpic.net/free-photo/woman-relaxing-bath-with-bubbles_1303-24667.jpg", alt: "Client 5" }
|
|
]}
|
|
avatarText="Trusted by 10,000+ satisfied clients"
|
|
marqueeItems={[
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/bed-luxury-beautiful-holiday-oil_1122-1911.jpg", alt: "Logo 1" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/young-naked-woman-relaxing-spa-salon_176420-7535.jpg", alt: "Logo 2" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817012.jpg", alt: "Logo 3" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817023.jpg", alt: "Logo 4" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817016.jpg", alt: "Logo 5" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="Excellence in Wellness"
|
|
metrics={[
|
|
{ icon: Award, label: "Years Experience", value: "15+" },
|
|
{ icon: Users, label: "Happy Clients", value: "10K+" },
|
|
{ icon: CheckCircle, label: "Certified Pros", value: "20+" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyEight
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: "s1", title: "Deep Tissue", subtitle: "Deep muscle relief", category: "Massage", value: "$90" },
|
|
{ id: "s2", title: "Aromatherapy", subtitle: "Essential oil blend", category: "Massage", value: "$80" },
|
|
{ id: "s3", title: "Hot Stone", subtitle: "Heated volcanic rocks", category: "Massage", value: "$110" }
|
|
]}
|
|
title="Our Signature Services"
|
|
description="Tailored treatments for mind, body, and spirit."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "basic", badge: "Core", price: "$75", subtitle: "Basic Massage", features: ["30 min massage", "Essential oils"],
|
|
buttons: [{ text: "Book Now", href: "#contact" }]
|
|
},
|
|
{
|
|
id: "gold", badge: "Popular", price: "$150", subtitle: "Deep Wellness", features: ["60 min massage", "Hot stone", "Scalp therapy"],
|
|
buttons: [{ text: "Book Now", href: "#contact" }]
|
|
},
|
|
{
|
|
id: "platinum", badge: "Premium", price: "$250", subtitle: "Total Escape", features: ["90 min massage", "Aromatherapy", "Facial treatment", "Gift included"],
|
|
buttons: [{ text: "Book Now", href: "#contact" }]
|
|
}
|
|
]}
|
|
title="Wellness Packages"
|
|
description="Choose the perfect journey for your body."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="inline-image"
|
|
useInvertedBackground={false}
|
|
title="Meet Our Spa Experts"
|
|
description="Our dedicated therapists combine ancient wisdom with modern techniques to rejuvenate your spirit."
|
|
team={[
|
|
{ id: "m1", name: "Elena Ross", role: "Head Therapist", videoSrc: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&_wi=1" },
|
|
{ id: "m2", name: "Mark Chen", role: "Sports Specialist", videoSrc: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&_wi=2" },
|
|
{ id: "m3", name: "Sarah Lee", role: "Aromatherapist", videoSrc: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&_wi=3" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "t1", name: "Alice D.", imageSrc: "http://img.b2bpic.net/free-photo/man-woman-lying-white-coats_1262-423.jpg" },
|
|
{ id: "t2", name: "Bob K.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-senior-woman-posing_23-2149095418.jpg" },
|
|
{ id: "t3", name: "Claire W.", imageSrc: "http://img.b2bpic.net/free-photo/senior-man-talking-phone_23-2148404354.jpg" },
|
|
{ id: "t4", name: "David M.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-sitting-home-bed_1157-31051.jpg" },
|
|
{ id: "t5", name: "Eve J.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-adult-woman-leaning-wall_1262-1759.jpg" }
|
|
]}
|
|
cardTitle="Client Journey"
|
|
cardTag="Stories"
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "q1", title: "How often should I get a massage?", content: "Depending on your stress levels, once or twice a month." },
|
|
{ id: "q2", title: "Can I request a specific therapist?", content: "Yes, bookings can be managed through our website." },
|
|
{ id: "q3", title: "What should I bring?", content: "Just bring yourself, we provide all essentials." }
|
|
]}
|
|
sideTitle="Common Queries"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{ variant: "radial-gradient" }}
|
|
tag="Ready to relax?"
|
|
title="Book Your Session"
|
|
description="Secure your time with our specialists today."
|
|
buttons={[{ text: "Book Appointment", href: "#" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "SerenaSpa", items: [{ label: "About", href: "#" }, { label: "Services", href: "#services" }]
|
|
},
|
|
{
|
|
title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2024 SerenaSpa. All rights reserved."
|
|
bottomRightText="Built with care."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |