{% extends "Accueil/layoutAccueil.html.twig" %}{% block stylesheets %}{{ parent() }}{% endblock %}{% block Content %}<body><main class="page-about-5sur5 py-5" style="background: #f7fafb;"> <div class="container"> {# HERO ---------------------------------------------------------------- #} <section class="mb-5"> <div class="row align-items-center g-4"> <div class="col-lg-6"> <span class="badge rounded-pill px-3 py-2 mb-3" style="background: rgba(65,162,170,0.08); color: #2f6f74; font-weight: 600;"> À propos de 5sur5 Séjour </span> <h1 class="mb-3" style="font-size: 2.1rem; font-weight: 700; color: #163c3f;"> La plateforme qui simplifie la communication des séjours et rassure les familles. </h1> <p class="lead mb-4" style="color: #5f6b73; max-width: 540px;"> 5sur5 Séjour accompagne les écoles, centres de loisirs et organisateurs de séjours pour partager facilement photos, vidéos et messages vocaux avec les familles, sans surcharge pour les équipes. </p> <div class="d-flex flex-wrap gap-3 mb-3"> <a href="{{ path('app_creation_simple_creer') }}" class="btn btn-primary px-4 py-2" style="border-radius: 999px; background: #41a2aa; border-color: #41a2aa; font-weight: 600;"> Créer un séjour simple </a> <a href="{{ path('app_contact') }}" class="btn btn-outline-secondary px-4 py-2" style="border-radius: 999px; font-weight: 500;"> Parler à un expert </a> </div> <p class="small text-muted mb-0"> Déjà adopté par des centaines de structures en France, pour des milliers de parents rassurés. </p> </div> <div class="col-lg-6"> <div class="p-4 p-lg-5 rounded-4 shadow-sm bg-white position-relative"> <div class="d-flex align-items-center mb-3"> <div class="me-3" style="width: 48px; height: 48px; border-radius: 16px; background: rgba(65,162,170,0.08); display: flex; align-items: center; justify-content: center;"> <i class="bi bi-images" style="font-size: 1.4rem; color: #41a2aa;"></i> </div> <div> <h2 class="h6 mb-1" style="font-weight: 600; color: #1b3a3f;">Un espace séjour dédié</h2> <p class="small text-muted mb-0">Photos, vidéos, messages vocaux et infos pratiques au même endroit.</p> </div> </div> <ul class="list-unstyled mb-4 small" style="color: #4f5a62;"> <li class="d-flex align-items-start mb-2"> <i class="bi bi-check-circle-fill me-2" style="color: #41a2aa;"></i> <span>Communication centralisée pour toute l’équipe accompagnatrice.</span> </li> <li class="d-flex align-items-start mb-2"> <i class="bi bi-check-circle-fill me-2" style="color: #41a2aa;"></i> <span>Parents rassurés, informés, impliqués sans appels répétés au standard.</span> </li> <li class="d-flex align-items-start mb-2"> <i class="bi bi-check-circle-fill me-2" style="color: #41a2aa;"></i> <span>Hébergement sécurisé en France, conforme RGPD.</span> </li> </ul> <div class="d-flex flex-wrap gap-3"> <div class="flex-fill"> <p class="small text-muted mb-1">Depuis</p> <p class="fw-semibold mb-0">2018</p> </div> <div class="flex-fill"> <p class="small text-muted mb-1">Structures accompagnées</p> <p class="fw-semibold mb-0">600+</p> </div> <div class="flex-fill"> <p class="small text-muted mb-1">Parents connectés</p> <p class="fw-semibold mb-0">160 000+</p> </div> </div> <div class="position-absolute" style="right: 18px; bottom: 18px; opacity: 0.18;"> <img src="/Accueil/imagesAccueil/logoHeader.png" alt="5sur5 Séjour" style="height: 42px;"> </div> </div> </div> </div> </section> {# À QUI S'ADRESSE 5SUR5 ------------------------------------------------ #} <section class="mb-5"> <div class="row align-items-center mb-3"> <div class="col-md-8"> <h2 class="h4 mb-2" style="color: #163c3f; font-weight: 700;">À qui s’adresse 5sur5 Séjour ?</h2> <p class="mb-0" style="color: #5f6b73;"> Une plateforme pensée pour les réalités de terrain : peu de temps, beaucoup d’enfants, des familles en attente de nouvelles. </p> </div> </div> <div class="row g-3 g-md-4"> <div class="col-md-4"> <div class="h-100 bg-white rounded-4 p-3 p-md-4 shadow-sm"> <div class="mb-3"> <span class="badge rounded-pill px-3 py-2" style="background: rgba(65,162,170,0.1); color: #1f5e64;">Écoles & collèges</span> </div> <h3 class="h6 mb-2" style="font-weight: 600;">Classes découvertes & voyages scolaires</h3> <p class="small text-muted mb-3"> Pour que les parents vivent le séjour avec leur enfant, sans encombrer le cahier de texte ni solliciter le secrétariat. </p> <ul class="small text-muted ps-3 mb-0"> <li>Communication simple pour les enseignants</li> <li>Accès sécurisé pour chaque parent</li> <li>Souvenirs accessibles après le retour</li> </ul> </div> </div> <div class="col-md-4"> <div class="h-100 bg-white rounded-4 p-3 p-md-4 shadow-sm"> <div class="mb-3"> <span class="badge rounded-pill px-3 py-2" style="background: rgba(245,96,64,0.08); color: #c44423;">Centres de loisirs & colos</span> </div> <h3 class="h6 mb-2" style="font-weight: 600;">Séjours courts ou saisons complètes</h3> <p class="small text-muted mb-3"> Pour montrer le sérieux de votre structure, valoriser l’équipe d’animation et rassurer les parents, même à distance. </p> <ul class="small text-muted ps-3 mb-0"> <li>Outil unique pour toutes les sessions</li> <li>Valorisation de vos projets éducatifs</li> <li>Image moderne et professionnelle</li> </ul> </div> </div> <div class="col-md-4"> <div class="h-100 bg-white rounded-4 p-3 p-md-4 shadow-sm"> <div class="mb-3"> <span class="badge rounded-pill px-3 py-2" style="background: rgba(22,60,63,0.06); color: #163c3f;">Collectivités & associations</span> </div> <h3 class="h6 mb-2" style="font-weight: 600;">Mairies, associations, organisateurs</h3> <p class="small text-muted mb-3"> Pour centraliser la communication, maîtriser l’image de vos séjours et faciliter le travail des équipes de terrain. </p> <ul class="small text-muted ps-3 mb-0"> <li>Charte graphique respectée</li> <li>Paramétrage adapté à vos besoins</li> <li>Support réactif en français</li> </ul> </div> </div> </div> </section> {# NOTRE PROMESSE -------------------------------------------------------- #} <section class="mb-5"> <div class="row g-4 align-items-center"> <div class="col-lg-5"> <h2 class="h4 mb-3" style="color: #163c3f; font-weight: 700;">Notre promesse : simplicité pour vous, émotions pour les familles.</h2> <p class="mb-3" style="color: #5f6b73;"> Nous savons que les équipes éducatives manquent de temps et gèrent déjà beaucoup d’imprévus sur place. 5sur5 Séjour a été pensé pour s’intégrer naturellement à votre journée, sans ajouter une « mission » de plus. </p> <p class="mb-3" style="color: #5f6b73;"> Quelques photos, une courte description, parfois un message vocal : en quelques minutes, vous offrez aux parents un aperçu précieux du séjour. Rassurant pour eux. Gérant pour vous. </p> <p class="mb-0 small text-muted"> Résultat : moins d’appels, moins d’e-mails, plus de confiance et de reconnaissance pour vos équipes. </p> </div> <div class="col-lg-7"> <div class="bg-white rounded-4 p-3 p-md-4 shadow-sm"> <div class="row g-3 g-md-4"> <div class="col-md-4"> <div class="h-100"> <p class="small text-muted mb-1">Moins d’appels</p> <p class="h4 mb-1" style="color: #41a2aa; font-weight: 700;">-70%</p> <p class="small text-muted mb-0"> de sollicitations au standard et aux équipes pendant les séjours. </p> </div> </div> <div class="col-md-4"> <div class="h-100"> <p class="small text-muted mb-1">Parents rassurés</p> <p class="h4 mb-1" style="color: #41a2aa; font-weight: 700;">160k+</p> <p class="small text-muted mb-0"> parents ont suivi un séjour via 5sur5 Séjour depuis le lancement. </p> </div> </div> <div class="col-md-4"> <div class="h-100"> <p class="small text-muted mb-1">Séjours accompagnés</p> <p class="h4 mb-1" style="color: #41a2aa; font-weight: 700;">3000+</p> <p class="small text-muted mb-0"> séjours partagés, de la classe verte au grand camp d’été. </p> </div> </div> </div> <hr class="my-3"> <div class="row g-3"> <div class="col-md-6"> <div class="d-flex align-items-start"> <div class="me-2 mt-1"> <i class="bi bi-emoji-smile" style="color: #f56040;"></i> </div> <div class="small" style="color: #4f5a62;"> <strong>Pour les familles</strong><br> Des nouvelles régulières, sans demander aux enfants ni déranger l’équipe. </div> </div> </div> <div class="col-md-6"> <div class="d-flex align-items-start"> <div class="me-2 mt-1"> <i class="bi bi-people" style="color: #41a2aa;"></i> </div> <div class="small" style="color: #4f5a62;"> <strong>Pour la structure</strong><br> Un outil professionnel, maîtrisé, en cohérence avec votre projet éducatif. </div> </div> </div> </div> </div> </div> </div> </section> {# COMMENT ÇA MARCHE AVEC VOUS ----------------------------------------- #} <section class="mb-5"> <div class="row mb-3"> <div class="col-md-8"> <h2 class="h4 mb-2" style="color: #163c3f; font-weight: 700;">Comment nous travaillons avec vous ?</h2> <p class="mb-0" style="color: #5f6b73;"> Notre équipe accompagne les partenaires avant, pendant et après les séjours, pour que l’outil reste un soutien — pas une contrainte. </p> </div> </div> <div class="row g-3 g-md-4"> <div class="col-md-4"> <div class="h-100 bg-white rounded-4 p-3 p-md-4 shadow-sm"> <div class="d-flex align-items-center mb-2"> <span class="badge rounded-pill me-2" style="background: rgba(65,162,170,0.1); color: #1f5e64;">1</span> <h3 class="h6 mb-0" style="font-weight: 600;">On prépare le séjour ensemble</h3> </div> <p class="small text-muted mb-0"> Paramétrage de votre espace séjour, ajout de votre logo, aide à la rédaction de la présentation et des premières informations pratiques. </p> </div> </div> <div class="col-md-4"> <div class="h-100 bg-white rounded-4 p-3 p-md-4 shadow-sm"> <div class="d-flex align-items-center mb-2"> <span class="badge rounded-pill me-2" style="background: rgba(245,96,64,0.1); color: #c44423;">2</span> <h3 class="h6 mb-0" style="font-weight: 600;">On accompagne vos équipes sur place</h3> </div> <p class="small text-muted mb-0"> Tutoriels simples, modèles de messages, réponses rapides si besoin. Dans certains cas, notre équipe peut même publier pour vous à partir de vos contenus. </p> </div> </div> <div class="col-md-4"> <div class="h-100 bg-white rounded-4 p-3 p-md-4 shadow-sm"> <div class="d-flex align-items-center mb-2"> <span class="badge rounded-pill me-2" style="background: rgba(22,60,63,0.1); color: #163c3f;">3</span> <h3 class="h6 mb-0" style="font-weight: 600;">On valorise l’après-séjour</h3> </div> <p class="small text-muted mb-0"> Vos contenus restent accessibles, les familles peuvent conserver les souvenirs, et vous disposez d’un support concret pour vos bilans et communications futures. </p> </div> </div> </div> </section> {# SÉCURITÉ & RGPD ------------------------------------------------------ #} <section class="mb-5"> <div class="row g-4 align-items-center"> <div class="col-lg-6"> <h2 class="h4 mb-3" style="color: #163c3f; font-weight: 700;">Sécurité des données & respect du RGPD</h2> <p class="mb-3" style="color: #5f6b73;"> La confiance des familles et des structures est au cœur de notre travail. 5sur5 Séjour a été conçu dès le départ avec des exigences fortes en matière de protection des données. </p> <ul class="small text-muted ps-3 mb-3"> <li>Hébergement des données en France, auprès de prestataires reconnus.</li> <li>Gestion des accès par liens sécurisés et comptes parents.</li> <li>Paramètres de confidentialité adaptés à vos besoins (photos visibles uniquement pour les parents du séjour, etc.).</li> <li>Possibilité de suppression des contenus sur demande de la structure.</li> </ul> <p class="small text-muted mb-0"> Nous restons disponibles pour répondre à vos questions juridiques ou techniques et fournir, si besoin, des éléments pour vos DPO et services juridiques. </p> </div> <div class="col-lg-6"> <div class="bg-white rounded-4 p-3 p-md-4 shadow-sm"> <div class="d-flex align-items-center mb-3"> <div class="me-3" style="width: 44px; height: 44px; border-radius: 16px; background: rgba(65,162,170,0.08); display: flex; align-items: center; justify-content: center;"> <i class="bi bi-shield-lock" style="font-size: 1.5rem; color: #41a2aa;"></i> </div> <div> <h3 class="h6 mb-1" style="font-weight: 600; color: #1b3a3f;">Un cadre clair pour vos équipes</h3> <p class="small text-muted mb-0"> Nous fournissons des modèles d’autorisation, des bonnes pratiques et des recommandations pour les photos et vidéos, pour que vos équipes soient sereines. </p> </div> </div> <div class="row g-3 small"> <div class="col-md-6"> <div class="p-3 rounded-3" style="background: rgba(65,162,170,0.03);"> <p class="text-muted mb-1">Transparence</p> <p class="fw-semibold mb-1" style="color: #163c3f;">Charte & mentions claires</p> <p class="text-muted mb-0"> Politique de confidentialité accessible, langage compréhensible pour les familles. </p> </div> </div> <div class="col-md-6"> <div class="p-3 rounded-3" style="background: rgba(22,60,63,0.03);"> <p class="text-muted mb-1">Contrôle</p> <p class="fw-semibold mb-1" style="color: #163c3f;">Vous gardez la main</p> <p class="text-muted mb-0"> Les structures restent propriétaires de leurs contenus et décident de la durée de mise en ligne. </p> </div> </div> </div> </div> </div> </div> </section> {# TEMOIGNAGE / CITATION ----------------------------------------------- #} <section class="mb-5"> <div class="bg-white rounded-4 p-4 p-md-5 shadow-sm"> <div class="row g-4 align-items-center"> <div class="col-md-8"> <p class="small text-uppercase text-muted mb-2" style="letter-spacing: .08em;">Ce que disent nos partenaires</p> <p class="mb-3" style="font-size: 1rem; color: #324048;"> « Depuis que nous utilisons 5sur5 Séjour, les parents sont rassurés et les appels au standard ont largement diminué. L’équipe apprécie la simplicité de l’outil, et nous avons une vitrine fidèle de nos séjours. » </p> <p class="small mb-0" style="color: #5f6b73;"> <strong>Direction d’un centre de loisirs – Région Île-de-France</strong> </p> </div> <div class="col-md-4"> <div class="p-3 rounded-4" style="background: linear-gradient(135deg, #41a2aa, #f56040); color: #fff;"> <p class="small text-uppercase mb-2" style="letter-spacing: .08em;">En chiffres</p> <p class="mb-1" style="font-size: 1.8rem; font-weight: 700;">+95%</p> <p class="small mb-3">des structures renouvellent l’utilisation de 5sur5 Séjour d’une année sur l’autre.</p> <p class="small mb-0">Notre objectif est simple : que chaque séjour accompagné soit une réussite pour les enfants, les familles et vos équipes.</p> </div> </div> </div> </div> </section> {# CTA FINAL ------------------------------------------------------------ #} <section class="mb-3"> <div class="bg-white rounded-4 p-4 p-md-5 shadow-sm text-center"> <h2 class="h4 mb-2" style="color: #163c3f; font-weight: 700;"> Prêt à rassurer les familles lors de votre prochain séjour ? </h2> <p class="mb-4" style="color: #5f6b73;"> Créez un premier espace séjour en quelques minutes, ou échangeons ensemble pour trouver la formule la plus adaptée à votre structure. </p> <div class="d-flex flex-wrap justify-content-center gap-3 mb-3"> <a href="{{ path('app_creation_simple_creer') }}" class="btn btn-primary px-4 py-2" style="border-radius: 999px; background: #41a2aa; border-color: #41a2aa; font-weight: 600;"> Créer un séjour simple </a> <a href="{{ path('app_creation_simple_creer') }}" class="btn btn-outline-secondary px-4 py-2" style="border-radius: 999px; font-weight: 500;"> Réserver une démo </a> </div> <p class="small text-muted mb-0"> Sans engagement. Nous vous accompagnons pas à pas si besoin. </p> </div> </section> </div></main>{% endblock %}