245 lines
14 KiB
TypeScript
245 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
|
|
import MediaAbout from "@/components/sections/about/MediaAbout";
|
|
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
|
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
import { Heart, Users, Star, Smile, Phone, HelpCircle } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Plein-Soleil"
|
|
navItems={[
|
|
{ name: "Accueil", id: "hero" },
|
|
{ name: "Services", id: "benefits" },
|
|
{ name: "À propos", id: "about" },
|
|
{ name: "Témoignages", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="Plein-Soleil"
|
|
description="Retrouvez l'équilibre de votre corps. Massothérapie professionnelle adaptée à vos besoins. Prenez un moment pour vous reconnecter avec votre bien-être."
|
|
buttons={[
|
|
{ text: "Prendre rendez-vous", href: "contact" },
|
|
{ text: "Nous contacter", href: "contact" }
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-blurry-woman-massage_23-2148815337.jpg", imageAlt: "Massage thérapeutique relaxant et apaisant"
|
|
}
|
|
]}
|
|
autoplayDelay={5000}
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-choose" data-section="why-choose">
|
|
<MediaAbout
|
|
title="Pourquoi choisir Plein-Soleil"
|
|
description="Chez Massothérapie Plein-Soleil, chaque massage est adapté aux besoins spécifiques du client. L'objectif est simple : soulager les tensions, favoriser la récupération et améliorer le bien-être global. Nous offrons une approche humaine et professionnelle basée sur l'écoute et le respect."
|
|
tag="À propos de nous"
|
|
buttons={[
|
|
{ text: "Découvrir nos services", href: "benefits" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-blurry-woman-massage_23-2148815337.jpg"
|
|
imageAlt="Ambiance zen et relaxante de notre clinique"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="benefits" data-section="benefits">
|
|
<FeatureCardOne
|
|
title="Les bienfaits de la massothérapie"
|
|
description="Découvrez comment la massothérapie peut transformer votre qualité de vie et améliorer votre bien-être global."
|
|
tag="Votre santé"
|
|
tagIcon={Heart}
|
|
features={[
|
|
{
|
|
title: "Soulage les tensions musculaires", description: "Réduisez les douleurs et les raideurs musculaires pour retrouver mobilité et confort.", imageSrc: "http://img.b2bpic.net/free-photo/deep-fist-back-massage-modern-spa-strength-relax_169016-69502.jpg", imageAlt: "Soulagement des tensions musculaires"
|
|
},
|
|
{
|
|
title: "Améliore la circulation", description: "Favorisez une meilleure circulation sanguine et lymphatique pour une santé optimale.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-applies-cream-her-face-looks-mirror_169016-19492.jpg", imageAlt: "Amélioration de la circulation"
|
|
},
|
|
{
|
|
title: "Réduit le stress", description: "Trouvez la paix intérieure et diminuez significativement votre niveau de stress.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-getting-massage_23-2150649758.jpg", imageAlt: "Réduction du stress et de l'anxiété"
|
|
},
|
|
{
|
|
title: "Favorise la récupération physique", description: "Accélérez votre récupération après l'effort ou une blessure.", imageSrc: "http://img.b2bpic.net/free-photo/male-physiotherapist-massage-session-with-female-patient_23-2148789783.jpg", imageAlt: "Récupération physique optimisée"
|
|
},
|
|
{
|
|
title: "Améliore la mobilité", description: "Augmentez votre flexibilité et votre amplitude de mouvement naturelle.", imageSrc: "http://img.b2bpic.net/free-photo/woman-receiving-relaxing-massage-spa_23-2148176893.jpg", imageAlt: "Amélioration de la mobilité et flexibilité"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TeamCardTwo
|
|
title="Votre massothérapeute"
|
|
description="Rencontrez Guylaine, votre massothérapeute dévouée à votre bien-être."
|
|
tag="Notre équipe"
|
|
tagIcon={Users}
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
members={[
|
|
{
|
|
id: "guylaine", name: "Guylaine", role: "Massothérapeute Professionnelle", description: "Guylaine offre une approche humaine et professionnelle de la massothérapie. Elle prend le temps d'écouter les besoins de chaque client afin d'offrir un soin adapté et efficace. Son objectif est d'aider ses clients à retrouver confort, mobilité et bien-être.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-entrepreneur-wearing-white-shirt-posing-standing-with-crossed-arms-indoors_7502-9695.jpg", imageAlt: "Portrait de Guylaine, massothérapeute professionnelle", socialLinks: []
|
|
},
|
|
{
|
|
id: "placeholder", name: "Sophie Martin", role: "Massothérapeute Associée", description: "Sophie apporte son expertise en techniques de massage spécialisées. Avec une passion pour le bien-être holistique, elle s'engage à offrir des soins personnalisés qui répondent aux besoins uniques de chaque client.", imageSrc: "http://img.b2bpic.net/free-photo/confident-businesswoman_1098-553.jpg", imageAlt: "Portrait de Sophie Martin, massothérapeute associée", socialLinks: []
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="Témoignages de nos clients"
|
|
description="Écoutez ce que nos clients satisfaits disent de leur expérience chez Massothérapie Plein-Soleil."
|
|
tag="Avis clients"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Max Luce", handle: "Client satisfait", testimonial: "Très bon service. Prend soin des clients et à l'écoute des besoins. Je recommande vivement!", imageSrc: "http://img.b2bpic.net/free-photo/confident-businesswoman_1098-553.jpg", imageAlt: "Max Luce"
|
|
},
|
|
{
|
|
id: "2", name: "Kim Pouliot", handle: "Client fidèle", testimonial: "Hyper professionnelle. Elle prend vraiment le temps de remettre ses patients sur pieds. Exceptionnelle!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg", imageAlt: "Kim Pouliot"
|
|
},
|
|
{
|
|
id: "3", name: "Stéphane Luce", handle: "Client régulier", testimonial: "Super massage. Je dois reprendre rendez-vous! L'ambiance est tellement apaisante et Guylaine est formidable.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-snowfall-city-new-year-mood_169016-66869.jpg", imageAlt: "Stéphane Luce"
|
|
},
|
|
{
|
|
id: "4", name: "Brigitte Duval", handle: "Client enthousiasmé", testimonial: "Très bon service. Massothérapeute très compétente. Je me sens complètement détendue après chaque séance!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg", imageAlt: "Brigitte Duval"
|
|
},
|
|
{
|
|
id: "5", name: "Jean Marchand", handle: "Client régulier", testimonial: "Une expérience transformatrice. Guylaine est vraiment attentive et professionnelle. Je reviendrai certainement.", imageSrc: "http://img.b2bpic.net/free-photo/confident-businesswoman_1098-553.jpg", imageAlt: "Jean Marchand"
|
|
},
|
|
{
|
|
id: "6", name: "Marie Dupuis", handle: "Client nouveau", testimonial: "J'ai trouvé un lieu de détente véritablement apaisante. Les mains de Guylaine travaillent des miracles!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg", imageAlt: "Marie Dupuis"
|
|
}
|
|
]}
|
|
speed={40}
|
|
/>
|
|
</div>
|
|
|
|
<div id="booking" data-section="booking">
|
|
<ContactCTA
|
|
tag="Prendre soin de soi"
|
|
tagIcon={Smile}
|
|
title="Prenez un moment pour vous"
|
|
description="Offrez à votre corps le soin qu'il mérite. Réservez votre massage dès aujourd'hui et retrouvez l'équilibre."
|
|
buttons={[
|
|
{ text: "Réserver un rendez-vous", href: "contact" },
|
|
{ text: "Appeler", href: "#" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Questions fréquemment posées"
|
|
description="Trouvez les réponses aux questions les plus courantes sur nos services de massothérapie."
|
|
tag="Aide"
|
|
tagIcon={HelpCircle}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Combien dure une séance?", content: "Une séance standard dure 60 minutes. Des séances de 30 minutes ou 90 minutes sont également disponibles selon vos besoins et préférences."
|
|
},
|
|
{
|
|
id: "2", title: "Quels types de massage offrez-vous?", content: "Nous offrons plusieurs types de massages adaptés à vos besoins, notamment le massage suédois, le massage thérapeutique, le massage des tissus profonds, et d'autres techniques spécialisées. Consultez-nous pour connaître les options disponibles."
|
|
},
|
|
{
|
|
id: "3", title: "Est-ce que les assurances sont acceptées?", content: "Oui, nous acceptons les demandes de remboursement d'assurance. Veuillez vérifier auprès de votre assurance pour connaître la couverture disponible. Nous pouvons vous fournir les documents nécessaires."
|
|
},
|
|
{
|
|
id: "4", title: "Comment prendre rendez-vous?", content: "Vous pouvez prendre rendez-vous directement en nous appelant ou en utilisant notre formulaire de réservation en ligne. Nous nous efforçons de vous offrir des créneaux horaires flexibles."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Nous joindre"
|
|
tagIcon={Phone}
|
|
title="Contactez-nous"
|
|
description="Appelez-nous ou visitez notre clinique. Nous sommes heureux de répondre à vos questions et de vous accueillir."
|
|
buttons={[
|
|
{ text: "Prendre rendez-vous", href: "#" },
|
|
{ text: "Nous appeler", href: "tel:+1234567890" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Navigation", items: [
|
|
{ label: "Accueil", href: "#hero" },
|
|
{ label: "Services", href: "#benefits" },
|
|
{ label: "À propos", href: "#about" },
|
|
{ label: "Témoignages", href: "#testimonials" }
|
|
]
|
|
},
|
|
{
|
|
title: "Ressources", items: [
|
|
{ label: "Questions fréquentes", href: "#faq" },
|
|
{ label: "Politique de confidentialité", href: "#" },
|
|
{ label: "Conditions d'utilisation", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Téléphone", href: "tel:+1234567890" },
|
|
{ label: "Courriel", href: "mailto:info@pleinsoleill.com" },
|
|
{ label: "Localisation", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Massothérapie Plein-Soleil. Tous droits réservés."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |