311 lines
18 KiB
TypeScript
311 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import { Sparkles, Leaf, Wand2, Camera, Heart, Crown } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="large"
|
|
background="aurora"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Philosophie", id: "philosophy" },
|
|
{ name: "Rituels", id: "rituals" },
|
|
{ name: "Galerie", id: "gallery" },
|
|
{ name: "Témoignages", id: "testimonials" },
|
|
{ name: "Forfaits", id: "pricing" },
|
|
{ name: "Réserver", id: "contact" }
|
|
]}
|
|
brandName="ÉLYSÉE SPA & WELLNESS"
|
|
bottomLeftText="Paris · Marrakech · Santorini"
|
|
bottomRightText="hello@elysee-spa.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
title="L'Art du Bien-Être"
|
|
description="Rituels ancestraux. Luxe contemporain. Sérénité absolue."
|
|
tag="PARIS · MARRAKECH · SANTORINI"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "RÉSERVER UNE EXPÉRIENCE", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "Isabelle M.", handle: "Paris", testimonial: "Une parenthèse hors du temps. J'ai eu l'impression de renaître.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-man-wearing-bathrobe-talking-his-wife-while-enjoying-spa_637285-7456.jpg", imageAlt: "Isabelle M., Paris"
|
|
},
|
|
{
|
|
name: "Laurent D.", handle: "Marseille", testimonial: "L'excellence incarnée. Chaque détail respire la perfection.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/shaving-concept-with-attractive-young-man_23-2148121943.jpg", imageAlt: "Laurent D., Marseille"
|
|
},
|
|
{
|
|
name: "Sophie B.", handle: "Lyon", testimonial: "Un véritable sanctuaire du bien-être. À jamais transformée.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-girl-beige-top-black-pants-showing-double-thumbs-up-looking-cheery-front-view_176474-42293.jpg", imageAlt: "Sophie B., Lyon"
|
|
}
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-fitness-woman-earphones_171337-13340.jpg", alt: "Isabelle M." },
|
|
{ src: "http://img.b2bpic.net/free-photo/people-lifestyle-concept-serious-young-bearded-man-with-voluminous-hairdo-having-offended-facial-expression-posing-indoors-with-disappointed-look_343059-1818.jpg", alt: "Laurent D." },
|
|
{ src: "http://img.b2bpic.net/free-photo/expressive-woman-posing-indoor_344912-2002.jpg", alt: "Sophie B." },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-young-person-barbeque_23-2149271990.jpg", alt: "Marie C." }
|
|
]}
|
|
avatarText="Rejoignez nos clients privilégiés"
|
|
videoSrc="http://img.b2bpic.net/free-photo/sideviews-spa-stones-towels_23-2148223690.jpg"
|
|
videoAriaLabel="Expérience spa cinématique - mains versant de l'huile, vapeur, galets chauds"
|
|
mediaAnimation="opacity"
|
|
useInvertedBackground={false}
|
|
imagePosition="right"
|
|
fixedMediaHeight={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="philosophy" data-section="philosophy">
|
|
<MetricSplitMediaAbout
|
|
title="Là où le temps s'arrête"
|
|
description="Depuis 2012, Élysée réinvente l'art du spa en fusionnant les rituels millénaires d'Orient avec l'élégance contemporaine européenne. Chaque expérience est une quête de sérénité absolue."
|
|
tag="NOTRE PHILOSOPHIE"
|
|
tagIcon={Leaf}
|
|
tagAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-bamboo-with-ornaments_1137-251.jpg"
|
|
imageAlt="Couloir de spa avec lumière naturelle filtrant à travers des moucharabiehs"
|
|
videoAriaLabel="Corridor spa luxe avec moucharabiehs"
|
|
mediaAnimation="slide-up"
|
|
metrics={[
|
|
{ value: "12", title: "Ans d'Excellence" },
|
|
{ value: "5000+", title: "Clients Transformés" },
|
|
{ value: "100%", title: "Satisfaction Garantie" }
|
|
]}
|
|
metricsAnimation="entrance-slide"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="rituals" data-section="rituals">
|
|
<ProductCardOne
|
|
title="Rituels Sur Mesure"
|
|
description="Découvrez nos expériences signature, chacune une invitation au voyage sensoriel."
|
|
tag="EXPÉRIENCES"
|
|
tagIcon={Wand2}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explorer Tous les Rituels", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="scale-rotate"
|
|
products={[
|
|
{
|
|
id: "ritual-ottoman", name: "Rituel Ottoman", price: "À partir de 180 €", imageSrc: "http://img.b2bpic.net/free-photo/spa-composition-with-thai-orchid-flowers-bath-accessories_169016-17364.jpg", imageAlt: "Rituel Ottoman"
|
|
},
|
|
{
|
|
id: "ritual-sakura", name: "Soin Sakura", price: "À partir de 140 €", imageSrc: "http://img.b2bpic.net/free-photo/spa-composition-with-thai-orchid-flowers-bath-accessories_169016-17217.jpg", imageAlt: "Soin Sakura"
|
|
},
|
|
{
|
|
id: "ritual-hotstone", name: "Hot Stone Signature", price: "À partir de 160 €", imageSrc: "http://img.b2bpic.net/free-photo/spa-accessories-dark-wet-background_1220-3730.jpg", imageAlt: "Hot Stone Signature"
|
|
},
|
|
{
|
|
id: "ritual-hammam", name: "Hammam Royal", price: "À partir de 220 €", imageSrc: "http://img.b2bpic.net/free-photo/close-up-couple-relaxing-sauna_23-2149283597.jpg", imageAlt: "Hammam Royal"
|
|
},
|
|
{
|
|
id: "ritual-diamond", name: "Soin Diamant Visage", price: "À partir de 200 €", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-bathrobe-cosmetic-eye-patches-posing_114579-28083.jpg", imageAlt: "Soin Diamant Visage"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<FeatureCardSix
|
|
title="Notre Sanctuaire"
|
|
description="Explorez les espaces d'exception qui composent votre havre de paix."
|
|
tag="GALERIE"
|
|
tagIcon={Camera}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Piscine Intérieure", description: "Vapeur dorée et lumière tamisée pour une immersion totale.", imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-natural-beautiful-woman-swimming-pool-smiling-happy_1391-523.jpg", imageAlt: "Piscine Intérieure"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Salle de Massage", description: "Bougies infinies et silence absolu pour la tranquillité totale.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-bath-concept-accessories-with-copy-space_23-2148419390.jpg", imageAlt: "Salle de Massage"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Sauna Scandinave", description: "Bois noble et chaleur apaisante dans un décor minimaliste.", imageSrc: "http://img.b2bpic.net/free-photo/old-vase-with-stone-angels_53876-18208.jpg", imageAlt: "Sauna Scandinave"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Jardin Zen Intérieur", description: "Bassin calme et végétation luxuriante pour la méditation.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-luxury-swimming-pool-with-palm-trees-thai-style-decoration_1258-111445.jpg", imageAlt: "Jardin Zen Intérieur"
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Suite Privée Couple", description: "Pétales de roses et intimité absolue pour deux âmes.", imageSrc: "http://img.b2bpic.net/free-photo/food-flower-breakfast-table-near-woman-man-with-glasses-bed_23-2148007308.jpg", imageAlt: "Suite Privée Couple"
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "Espace Tisanerie", description: "Thés rares et élixirs exotiques pour l'ultime détente.", imageSrc: "http://img.b2bpic.net/free-photo/cup-herbal-tea-christmas-ball-cookies-wooden-plate-high-quality-photo_114579-35961.jpg", imageAlt: "Espace Tisanerie"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="Récits de Transformation"
|
|
description="Les voix authentiques de ceux qui ont expérimenté l'exception Élysée."
|
|
tag="TÉMOIGNAGES"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Isabelle M.", date: "Juillet 2024", title: "Une Parenthèse Hors du Temps", quote: "Une parenthèse hors du temps. J'ai eu l'impression de renaître. Chaque détail a été pensé pour l'âme.", tag: "Transformation", avatarSrc: "http://img.b2bpic.net/free-photo/medium-close-up-shot-woman-staring_23-2148248518.jpg", avatarAlt: "Isabelle M."
|
|
},
|
|
{
|
|
id: "2", name: "Laurent D.", date: "Juin 2024", title: "L'Excellence Incarnée", quote: "L'excellence incarnée. Chaque geste des praticiens respire la perfection. Un vrai rituel d'amour.", tag: "Recommande", avatarSrc: "http://img.b2bpic.net/free-photo/clueless-handsome-blonde-man-looks-up-isolated-purple-wall_141793-66184.jpg", avatarAlt: "Laurent D."
|
|
},
|
|
{
|
|
id: "3", name: "Sophie B.", date: "Août 2024", title: "Un Véritable Sanctuaire", quote: "Un véritable sanctuaire du bien-être. À jamais transformée. Je reviens tous les mois maintenant.", tag: "Fidèle", avatarSrc: "http://img.b2bpic.net/free-photo/woman-swimsuit-with-towel_181624-55628.jpg", avatarAlt: "Sophie B."
|
|
},
|
|
{
|
|
id: "4", name: "Marie C.", date: "Septembre 2024", title: "Au-Delà de Mes Attentes", quote: "Au-delà de mes attentes. Le niveau de service et de conscience est incomparable. C'est du luxe authentique.", tag: "Wow", avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-relaxing-spa-salon_176420-14869.jpg", avatarAlt: "Marie C."
|
|
},
|
|
{
|
|
id: "5", name: "François L.", date: "Octobre 2024", title: "Une Oasis de Paix", quote: "Une oasis de paix en plein cœur de la ville. Les rituels orientaux associés au savoir-faire occidental.", tag: "Conseille", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-senior-man-with-towel-copy-space_23-2148621250.jpg", avatarAlt: "François L."
|
|
},
|
|
{
|
|
id: "6", name: "Véronique T.", date: "Novembre 2024", title: "Ma Deuxième Maison", quote: "Ma deuxième maison. L'atmosphère, les soins, l'accueil—tout est pensé avec une rare délicatesse.", tag: "Amoureuse", avatarSrc: "http://img.b2bpic.net/free-photo/young-lady-white-bathrobe-towel-standing-with-crossed-arms-looking-self-confident-front-view_176474-50990.jpg", avatarAlt: "Véronique T."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
title="Forfaits d'Exception"
|
|
description="Choisissez l'expérience qui résonne avec votre âme."
|
|
tag="PACKAGES"
|
|
tagIcon={Crown}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="scale-rotate"
|
|
plans={[
|
|
{
|
|
id: "evasion", title: "Évasion", price: "150 €", period: "1h30", features: [
|
|
"Accès au Hammam", "Un soin signature", "Tisane exclusive", "Peignoir premium"
|
|
],
|
|
button: { text: "RÉSERVER", href: "#contact" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817026.jpg", imageAlt: "Évasion"
|
|
},
|
|
{
|
|
id: "harmonie", title: "Harmonie", price: "280 €", period: "2h30", features: [
|
|
"Accès complet aux installations", "Deux soins personnalisés", "Déjeuner léger raffiné", "Peignoir & accessoires", "Consultation rituel privée"
|
|
],
|
|
button: { text: "RÉSERVER", href: "#contact" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-relaxing-spa_329181-13154.jpg", imageAlt: "Harmonie"
|
|
},
|
|
{
|
|
id: "ultime", title: "Élysée Ultime", price: "490 €", period: "Journée Complète", features: [
|
|
"Expérience VIP complète", "Tous les rituels à la carte", "Suite privée exclusive", "Repas gastronomique", "Coaching bien-être personnel", "Service concierge 24/24"
|
|
],
|
|
button: { text: "RÉSERVER", href: "#contact" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-having-rest-sauna-alone_169016-22241.jpg", imageAlt: "Élysée Ultime"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Prêt à vous échapper ? Réservez dès maintenant votre expérience Élysée."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "RÉSERVER MAINTENANT", href: "#" },
|
|
{ text: "COMMANDER UNE CARTE CADEAU", href: "#" }
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="ÉLYSÉE SPA & WELLNESS"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Accueil", href: "#hero" },
|
|
{ label: "Philosophie", href: "#philosophy" },
|
|
{ label: "Rituels", href: "#rituals" },
|
|
{ label: "Galerie", href: "#gallery" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Témoignages", href: "#testimonials" },
|
|
{ label: "Forfaits", href: "#pricing" },
|
|
{ label: "Réserver", href: "#contact" },
|
|
{ label: "Carte Cadeau", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "TikTok", href: "https://tiktok.com" },
|
|
{ label: "Pinterest", href: "https://pinterest.com" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Confidentialité", href: "#" },
|
|
{ label: "Conditions", href: "#" },
|
|
{ label: "CGV", href: "#" },
|
|
{ label: "Mentions Légales", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Paris · Marrakech · Santorini", href: "#" },
|
|
{ label: "hello@elysee-spa.com", href: "mailto:hello@elysee-spa.com" },
|
|
{ label: "+33 (0) 1 xx xx xx xx", href: "tel:+33" },
|
|
{ label: "© 2025 Élysée. Tous droits réservés.", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |