361 lines
11 KiB
TypeScript
361 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import { Leaf, Sparkles, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Services",
|
|
id: "services",
|
|
},
|
|
{
|
|
name: "Experience",
|
|
id: "experience",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Woodhouse Spa"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Escape Into Pure Relaxation"
|
|
description="Woodhouse Spa delivers deeply restorative treatments in a calming, luxurious environment designed for your complete well-being."
|
|
tag="Luxury Spa & Wellness"
|
|
buttons={[
|
|
{
|
|
text: "Book Now",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
text: "View Services",
|
|
href: "#services",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/natural-elements-spa-with-candles_23-2148199493.jpg"
|
|
imageAlt="Luxury spa environment"
|
|
mediaAnimation="blur-reveal"
|
|
tagIcon={Sparkles}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-14657.jpg",
|
|
alt: "Studio portrait of blond female",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-business-woman-looking-up-copy-space_1262-3088.jpg",
|
|
alt: "Smiling Business Woman",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-professional-business-woman-smiling-outdoor_1391-4.jpg",
|
|
alt: "Professional business woman",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/man-smiling-with-crossed-arms_1149-1138.jpg",
|
|
alt: "Man smiling with crossed arms",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/middle-aged-man-with-beard-wearing-casual-white-shirt-looking-confident-with-smile-face-pointing-oneself-with-fingers-proud-happy_839833-12902.jpg",
|
|
alt: "Confident middle aged man",
|
|
},
|
|
]}
|
|
avatarText="Join 5,000+ relaxed guests"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Holistic Healing",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Signature Facials",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Deep Tissue Therapy",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Personalized Care",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Pure Tranquility",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={true}
|
|
title="A Sanctuary Designed For You"
|
|
tag="Our Philosophy"
|
|
tagIcon={Leaf}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyEight
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "s1",
|
|
title: "Massage Therapy",
|
|
subtitle: "Deep Tissue & Relaxation",
|
|
category: "Recovery",
|
|
value: "From $90",
|
|
},
|
|
{
|
|
id: "s2",
|
|
title: "Luxury Pedicures",
|
|
subtitle: "Meticulous & Refined",
|
|
category: "Beauty",
|
|
value: "From $65",
|
|
},
|
|
{
|
|
id: "s3",
|
|
title: "Facial Care",
|
|
subtitle: "Personalized Results",
|
|
category: "Skincare",
|
|
value: "From $85",
|
|
},
|
|
]}
|
|
title="Signature Services"
|
|
description="Expertly tailored treatments focused on tension relief, beauty, and complete rejuvenation."
|
|
tag="Wellness Menu"
|
|
tagIcon={Star}
|
|
/>
|
|
</div>
|
|
|
|
<div id="experience" data-section="experience">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "The Wellness Escape",
|
|
price: "$199",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/male-patient-performing-physiotherapy-exercises-with-female-medic_23-2149143805.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Signature Glow Package",
|
|
price: "$175",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-laying-bed_23-2149246761.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Total Recovery",
|
|
price: "$220",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/client-lies-salon-cosmetology-table-with-white-mask-her-face_343596-4297.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Luxury Afternoon",
|
|
price: "$150",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-enjoying-back-massage_1098-2214.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Deep Tissue Full Day",
|
|
price: "$280",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/professional-esthetician-using-electric-nail-file-drill-remove-acrylic-gel-from-nails_181624-58253.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Rejuvenation Ritual",
|
|
price: "$185",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-lies-beautician-s-table-receives-procedures-light-facial-massage-using-oil_343596-4189.jpg",
|
|
},
|
|
]}
|
|
title="Explore Our Spa Packages"
|
|
description="Curated experiences that combine multiple treatments for a full day of indulgence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
title: "Excellent Service",
|
|
quote: "Every part of the experience felt luxurious and thoughtfully done.",
|
|
name: "Sarah Johnson",
|
|
role: "Executive",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
title: "So Relaxing",
|
|
quote: "The atmosphere immediately makes you feel calm. Highly recommended.",
|
|
name: "Michael Chen",
|
|
role: "Architect",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-beach_23-2149293687.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
title: "Great Quality",
|
|
quote: "The attention to detail was incredible. Definitely worth it.",
|
|
name: "Emily Rodriguez",
|
|
role: "Designer",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-charming-smiling-tanned-brunette-woman-white-t-shirt-sitting-rattand-armchair_197531-22786.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
title: "Perfect Day",
|
|
quote: "Such a peaceful environment. I will be returning soon.",
|
|
name: "David Kim",
|
|
role: "Product Manager",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-enjoying-coffee_23-2148597001.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
title: "Truly Blissful",
|
|
quote: "Best facial I've ever had. Truly exceptional staff.",
|
|
name: "Jessica Lee",
|
|
role: "Marketing",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/positive-young-businesswoman-pointing-camera_1262-5406.jpg",
|
|
},
|
|
]}
|
|
title="Loved By Our Guests"
|
|
description="See why Woodhouse Spa is the premier destination for self-care."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1",
|
|
title: "What should I wear?",
|
|
content: "We provide robes and slippers for your comfort.",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "How early should I arrive?",
|
|
content: "Please arrive 15 minutes before your treatment begins.",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Can I request a therapist?",
|
|
content: "Yes, please mention your preference when booking.",
|
|
},
|
|
]}
|
|
title="Spa Questions"
|
|
description="Common inquiries to prepare for your wellness experience."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Reserve Your Experience"
|
|
description="Contact us to secure your appointment or for any inquiries."
|
|
inputs={[
|
|
{
|
|
name: "fullName",
|
|
type: "text",
|
|
placeholder: "Full Name",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Email Address",
|
|
required: true,
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-japanese-bamboo-fountain_1137-39.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Woodhouse Spa"
|
|
columns={[
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{
|
|
label: "Massage Therapy",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Pedicures",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Facials",
|
|
href: "#services",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Contact",
|
|
items: [
|
|
{
|
|
label: "(555) 123-4567",
|
|
href: "tel:5551234567",
|
|
},
|
|
{
|
|
label: "hello@woodhousespa.com",
|
|
href: "mailto:hello@woodhousespa.com",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2026 Woodhouse Spa. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|