templates/Accueil/PageAccueil.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <!--
  3. Template name: Nova
  4. Template author: FreeBootstrap.net
  5. Author website: https://freebootstrap.net/
  6. License: https://freebootstrap.net/license
  7. -->
  8. <html lang="fr">
  9.   <head>
  10.     <meta charset="utf-8">
  11.     <meta name="viewport" content="width=device-width, initial-scale=1">
  12.     <title>5sur5séjour - Plateforme de partage de photos, vidéos et messages vocaux</title>
  13.      
  14.     <!-- ======= Google Font =======-->
  15.     <link rel="preconnect" href="https://fonts.googleapis.com">
  16.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  17.     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
  18.     <!-- End Google Font-->
  19.     
  20.     <!-- ======= Styles =======-->
  21.     <link href="{{ asset('Accueil/vendors/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
  22.     <link href="{{ asset('Accueil/vendors/bootstrap-icons/font/bootstrap-icons.min.css') }}" rel="stylesheet">
  23.     <link href="{{ asset('Accueil/vendors/glightbox/glightbox.min.css') }}" rel="stylesheet">
  24.     <link href="{{ asset('Accueil/vendors/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
  25.     <link href="{{ asset('Accueil/vendors/aos/aos.css') }}" rel="stylesheet">
  26.     <!-- End Styles-->
  27.     
  28.     <!-- ======= Theme Style =======-->
  29.     <link href="{{ asset('Accueil/css/style_nova.css') }}?v={{ "now"|date("Y-m-d-H-i-s") }}" rel="stylesheet">
  30.     <!-- End Theme Style-->
  31.     
  33.     
  34.     <!-- ======= Apply theme =======-->
  35.     <script>
  36.       // Apply the theme as early as possible to avoid flicker
  37.       (function() {
  38.         const storedTheme = localStorage.getItem('theme') || 'light';
  39.         document.documentElement.setAttribute('data-bs-theme', storedTheme);
  40.       })();
  41.     </script>
  42.   </head>
  43.   <body>
  44.     
  45.     <!-- ======= Site Wrap =======-->
  46.     <div class="site-wrap">
  47.       
  48.       <!-- ======= Header =======-->
  49.       <header class="fbs__net-navbar navbar navbar-expand-lg dark" aria-label="freebootstrap.net navbar">
  50.         <div class="container d-flex align-items-center justify-content-between">
  51.           
  52.           <!-- Start Logo-->
  53.           <a class="navbar-brand w-auto" href="#">
  54.             <img class="logo dark img-fluid" src="{{ asset('Accueil/imagesAccueil/logoHeader.png') }}" alt="5sur5séjour logo" style="height: 65px;">
  55.           </a>
  56.           <!-- End Logo-->
  57.           
  58.           <!-- Start offcanvas-->
  59.           <div class="offcanvas offcanvas-start w-75" id="fbs__net-navbars" tabindex="-1" aria-labelledby="fbs__net-navbarsLabel">
  60.             
  61.             <div class="offcanvas-header">
  62.               <div class="offcanvas-header-logo">
  63.                 <a class="logo-link" id="fbs__net-navbarsLabel" href="#">
  64.                   <img class="logo light img-fluid" src="{{ asset('Accueil/imagesAccueil/logoHeader.png') }}" alt="5sur5séjour logo" style="height: 60px;">
  65.                 </a>
  66.               </div>
  67.               <button class="btn-close btn-close-black" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  68.             </div>
  69.             
  70.             <div class="offcanvas-body align-items-lg-center">
  71.               
  72.               <ul class="navbar-nav nav me-auto ps-lg-5 mb-2 mb-lg-0">
  73.                 <li class="nav-item"><a class="nav-link scroll-link" href="#about">A propos</a></li>
  74.                 <li class="nav-item"><a class="nav-link scroll-link" href="#how-it-works">Comment ça marche</a></li>
  75.                 <li class="nav-item"><a class="nav-link scroll-link" href="#pricing">Boite vocale</a></li>
  76.                 <li class="nav-item"><a class="nav-link scroll-link" href="#services">Services</a></li>
  77.                 <li class="nav-item dropdown">
  78.                   <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Nos produits <i class="bi bi-chevron-down"></i></a>
  79.                   <ul class="dropdown-menu">
  80.                   
  81.                                                 {% for produit in produit %}
  82.                                                     {% if produit.labeleType!="Connexion" %}
  84.                                        <li class="nav-item"><a class="nav-link scroll-link" href="{{path('album',{'id':produit.labeleType})}}"> {{produit.labeleType}}</a></li>
  87.                                                     {% endif %}
  88.                                                 {% endfor %}
  89.                    
  90.                   </ul>
  91.                 </li>
  92.                 <li class="nav-item"><a class="nav-link scroll-link" href="#contact">Contact</a></li>
  93.               </ul>
  94.               
  95.             </div>
  96.           </div>
  97.           <!-- End offcanvas-->
  98.           
  99.           <div class="ms-auto w-auto">
  100.             
  101.             <div class="header-social d-flex align-items-center gap-1">
  102.               <a class="btn btn-primary py-2" href="#jemeconnecte">Je me connecte</a>
  103.               
  104.               <button class="fbs__net-navbar-toggler justify-content-center align-items-center ms-auto" data-bs-toggle="offcanvas" data-bs-target="#fbs__net-navbars" aria-controls="fbs__net-navbars" aria-label="Toggle navigation" aria-expanded="false">
  105.                 <svg class="fbs__net-icon-menu" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  106.                   <line x1="21" x2="3" y1="6" y2="6"></line>
  107.                   <line x1="15" x2="3" y1="12" y2="12"></line>
  108.                   <line x1="17" x2="3" y1="18" y2="18"></line>
  109.                 </svg>
  110.                 <svg class="fbs__net-icon-close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  111.                   <path d="M18 6 6 18"></path>
  112.                   <path d="m6 6 12 12"></path>
  113.                 </svg>
  114.               </button>
  115.               
  116.             </div>
  117.             
  118.           </div>
  119.         </div>
  120.       </header>
  121.       <!-- End Header-->
  122.       
  123.       <!-- ======= Main =======-->
  124.       <main>
  125.        
  126.            <!-- ======= Hero =======-->
  127.         <section class="hero__v6 section" id="home">
  128.           <div class="container">
  129.             <div class="row">
  130.               <div class="col-lg-6 mb-4 mb-lg-0">
  131.                 <div class="row">
  132.                   <div class="col-lg-11">
  133.                     <span class="hero-subtitle text-uppercase" data-aos="fade-up" data-aos-delay="0">La plateforme sécurisée qui rassure les familles</span>
  134.                     <h1 class="hero-title mb-3" data-aos="fade-up" data-aos-delay="100"> 5sur5séjour : Partagez photos & messages vocaux avec les familles en toute simplicité.</h1>
  135.                     <p class="hero-description mb-4 mb-lg-5" data-aos="fade-up" data-aos-delay="200">Accompagnement humain | Appels automatiques aux parents | 100% conforme RGPD</p>
  136.                  
  137.                   </div>
  138.                 </div>
  139.               </div>
  140.               <div class="col-lg-6">
  141.                 <div class="hero-img">
  142.                   <img class="img-card img-fluid" style="background: radial-gradient(gray, transparent);border-radius: 30px;" src="{{ asset('Accueil/imagesAccueil/demo1.png') }}" alt="Image card" data-aos="fade-down" data-aos-delay="600">
  143.                   <img class="img-main img-fluid rounded-4" src="{{ asset('Accueil/imagesAccueil/slider/bg-slider1.png') }}" alt="Hero Image" data-aos="fade-in" data-aos-delay="500">
  144.                 </div>
  145.               </div>
  146.               <div class="d-flex flex-wrap align-items-center justify-content-between gap-4 flex-column flex-md-row col-md-8">
  147.   <!-- Bouton CTA -->
  148.   <div class="cta d-flex gap-2" data-aos="fade-up" data-aos-delay="300">
  149.     <a class="btn"  href="{{ path('app_login_back_Partenaire') }}">Demander un séjour test gratuit  <svg class="lucide lucide-arrow-up-right" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  150.       <path d="M7 7h10v10"></path>
  151.       <path d="M7 17 17 7"></path>
  152.     </svg></a> 
  153.    
  154.   </div>
  156.   <!-- Logos -->
  157.   <div class="logos" data-aos="fade-up" data-aos-delay="400">
  158.     <span class="logos-title text-uppercase d-block">Utilisée déjà par plus de 1000 partenaires</span>
  159.   </div>
  160. </div>
  161.             </div>
  162.           </div>
  163.           <!-- End Hero-->
  164.         </section>
  165.         <!-- End Hero-->
  166.         
  167.         <!-- ======= Vignettes Section =======-->
  168.         <section class="about_wrap_area aboutWrapper mb-5">
  169.           <div class="container" id="jemeconnecte">
  170.             <div class="row">
  171.               <div class="col-xl-4 col-md-4 col-lg-4">
  172.                 <div class="single_service_wrap text-center vignetteContent" data-aos="fade-up" data-aos-delay="0">
  173.                   <img class="imageParent" src="{{ asset('Accueil/imagesAccueil/son_sejour.svg') }}" alt="Parent">
  174.                   <h3 class="titreVignette">Vous êtes parent</h3>
  175.                   <p class="txtVignette">Consultez les photos et vidéos à tout moment, <b>et soyez appelé dès qu’un nouveau message vocal est déposé — restez connectés au séjour, où que vous soyez.</b> </p>
  176.                   <a href="{{ path('app_back_Parent') }}" class="btnparent btnconnection-Vignette btnconnection-VignetteAcc">Je me connecte</a>
  177.                 </div>
  178.               </div>
  179.               <div class="col-xl-4 col-md-4 col-lg-4">
  180.                 <div class="single_service_wrap text-center vignetteContent" data-aos="fade-up" data-aos-delay="200">
  181.                   <img class="imageAcc" src="{{ asset('Accueil/imagesAccueil/espceAcc.svg') }}" alt="Accompagnateur">
  182.                   <h3 class="titreVignette titreAcc">Vous êtes accompagnateur</h3>
  183.                   <p class="txtVignette txtAcc">Partagez facilement photos et messages pour rassurer les familles — créez et gérez vos séjours en toute simplicité. </p>
  184.                   <a href="{{ path('app_back_Acommpa') }}" class="btnconnection-Vignette btnconnection-VignetteAcc">Je me connecte</a>
  185.                 </div>
  186.               </div>
  187.               <div class="col-xl-4 col-md-4 col-lg-4">
  188.                 <div class="single_service_wrap text-center vignetteContent" data-aos="fade-up" data-aos-delay="400">
  189.                   <img class="imagePartenaire" src="{{ asset('Accueil/imagesAccueil/espcPart.svg') }}" alt="Partenaire">
  190.                   <h3 class="titreVignette titrePartenaire">Vous êtes partenaire</br></h3>
  191.                   <p class="txtVignette txtPartenaire">
  192.                     <br/>Créez et gérez tous vos séjours depuis un espace dédié, avec un service client sur mesure et des outils pensés pour vous.</p>
  193.                   <a href="{{ path('app_login_back_Partenaire') }}" class="btnconnection-Vignette btnconnection-VignettePart">Je me connecte</a>
  194.                 </div>
  195.               </div>
  196.             </div>
  197.           </div>
  198.         </section>
  199.         <!-- End Vignettes -->
  200.         
  201.     
  202.         
  203.         <!-- ======= About =======-->
  204.         <section class="about__v4 section" id="about">
  205.           <div class="container">
  206.             <div class="row">
  207.               <div class="col-md-6 order-md-2">
  208.                 <div class="row justify-content-end">
  209.                   <div class="col-md-11 mb-4 mb-md-0">
  210.                     <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">A propos de nous</span>
  211.                     <h2 class="mb-4" data-aos="fade-up" data-aos-delay="100">Avec 5sur5séjour, bénéficiez d'un outil conçu pour créer du lien, de la confiance et du souvenir, tout au long du séjour</h2>
  212.                     <div data-aos="fade-up" data-aos-delay="200">
  213.                       <p>5sur5séjour est la plateforme de référence pour les séjours scolaires et les colonies. Elle permet aux familles de suivre leur enfant tout au long du séjour, de partager des photos et des vidéos, et de recevoir des appels et des notifications en temps réel.</p>
  214.                     </div>
  215.                     <h4 class="small fw-bold mt-4 mb-3" data-aos="fade-up" data-aos-delay="300">Nos valeurs</h4>
  216.                     <ul class="d-flex flex-row flex-wrap list-unstyled gap-3 features" data-aos="fade-up" data-aos-delay="400">
  217.                       <li class="d-flex align-items-center gap-2"><span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span><span class="text">Sécurisée</span></li>
  218.                       <li class="d-flex align-items-center gap-2"><span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span><span class="text">Fiable</span></li>
  219.                       <li class="d-flex align-items-center gap-2"><span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span><span class="text">Facile d'utilisation</span></li>
  220.                       <li class="d-flex align-items-center gap-2"><span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span><span class="text">Transparente</span></li>
  221.                       <li class="d-flex align-items-center gap-2"><span class="icon rounded-circle text-center"><i class="bi bi-check"></i></span><span class="text">Conçue pour les familles</span></li>
  222.                     </ul>
  223.                   </div>
  224.                 </div>
  225.               </div>
  226.               <div class="col-md-6"> 
  227.                 <div class="img-wrap position-relative">
  228.                   <img class="img-fluid rounded-4" src="{{ asset('Accueil/imagesAccueil/feature.png') }}" alt="Sécurité 5sur5séjour" data-aos="fade-up" data-aos-delay="0" style="width: 100%; height: 300px; object-fit: cover;">
  229.                   <div class="mission-statement p-4 rounded-4 d-flex gap-4" data-aos="fade-up" data-aos-delay="100">
  230.                     <div class="mission-icon text-center rounded-circle"><i class="bi bi-lightbulb fs-4"></i></div>
  231.                     <div>
  232.                       <h3 class="text-uppercase fw-bold">Notre mission</h3>
  233.                       <p class="fs-5 mb-0">Notre mission est de vous offrir une solution simple, fiable et professionnelle pour partager le séjour avec les familles.</p>
  234.                     </div>
  235.                   </div>
  236.                 </div>
  237.               </div>
  238.             </div>
  239.           </div>
  240.         </section>
  241.         <!-- End About-->
  242.         
  243.         <!-- ======= Features =======-->
  244.         <section class="section features__v2" id="features">
  245.           <div class="container">
  246.             <div class="row">
  247.               <div class="col-12">
  248.                 <div class="d-lg-flex p-5 rounded-4 content" data-aos="fade-in" data-aos-delay="0">
  249.                   <div class="row">
  250.                     <div class="col-lg-5 mb-5 mb-lg-0" data-aos="fade-up" data-aos-delay="0">
  251.                       <div class="row"> 
  252.                         <div class="col-lg-11">
  253.                           <div class="h-100 flex-column justify-content-between d-flex">
  254.                             <div>
  255.                               <h2 class="mb-4">Pourquoi nous choisir</h2>
  256.                               <p class="mb-5">5sur5séjour n’est pas qu’un outil pour les animateurs.
  257. C’est une solution complète pour les centres qui veulent gagner du temps, rassurer les familles, et moderniser leur image.</p>
  258.                             </div>
  259.                             <div class="align-self-start">
  260.                               <a class="glightbox btn btn-play d-inline-flex align-items-center gap-2" href="{{ path('app_back_Acommpa') }}" data-gallery="video">
  261.                                 <i class="bi bi-play-fill"></i> Créer mon espace séjour maintenant
  262.                               </a>
  263.                             </div>
  264.                           </div>
  265.                         </div>
  266.                       </div>
  267.                     </div>
  268.                     <div class="col-lg-7">
  269.                       <div class="row justify-content-end">
  270.                         <div class="col-lg-11">
  271.                           <div class="row">
  272.                             <div class="col-sm-6" data-aos="fade-up" data-aos-delay="0">
  273.                               <div class="icon text-center mb-4"><i class="bi bi-person-check fs-4"></i></div>
  274.                               <h3 class="fs-6 fw-bold mb-3">Un lien direct avec les familles sans stress</h3>
  275.                               <p>Les messages vocaux, les photos et les notifications automatiques rassurent les familles en continu. Le séjour peut ainsi se dérouler en toute sérénité.</p>
  276.                             </div>
  277.                             <div class="col-sm-6" data-aos="fade-up" data-aos-delay="100">
  278.                               <div class="icon text-center mb-4"><i class="bi bi-graph-up fs-4"></i></div>
  279.                               <h3 class="fs-6 fw-bold mb-3">Une plateforme au service de votre image  </h3>
  280.                               <p>5sur5 vous permet de partager facilement les souvenirs des enfants tout en valorisant l’image de votre centre.</p>
  281.                             </div>
  282.                             <div class="col-sm-6" data-aos="fade-up" data-aos-delay="200">
  283.                               <div class="icon text-center mb-4"><i class="bi bi-headset fs-4"></i></div>
  284.                               <h3 class="fs-6 fw-bold mb-3">Accompagnement complet, pas juste un support</h3>
  285.                               <p>Notre équipe ne se contente pas de répondre aux questions.
  286. Nous créons et importons vos séjours et assurons un support technique réactif tout au long du séjour.</p>
  287.                             </div>
  288.                             <div class="col-sm-6" data-aos="fade-up" data-aos-delay="300">
  289.                               <div class="icon text-center mb-4"><i class="bi bi-gift fs-4"></i></div>
  290.                               <h3 class="fs-6 fw-bold mb-3">Offrez aux familles la possibilité de conserver un souvenir unique du séjour</h3>
  291.                               <p>Grâce à notre boutique intégrée, chaque parent peut créer ses propres produits souvenirs à offrir.</p>
  292.                             </div>
  293.                           </div>
  294.                         </div>
  295.                       </div>
  296.                     </div>
  297.                   </div>
  298.                 </div>
  299.               </div>
  300.             </div>
  301.           </div>
  302.         </section>
  303.         <!-- End Features-->
  304.         
  305.         <!-- ======= How it works =======-->
  306.         <section class="section howitworks__v1" id="how-it-works">
  307.           <div class="container">
  308.             <div class="row mb-5">
  309.               <div class="col-md-6 text-center mx-auto">
  310.                 <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">Comment ça marche</span>
  311.                 <h2 data-aos="fade-up" data-aos-delay="100">Comment ça marche</h2>
  312.                 <p data-aos="fade-up" data-aos-delay="200">Une plateforme complète qui centralise contenus et communications, pour partager le séjour avec les familles en toute simplicité, sans surcharge pour les équipes.</p>
  313.               </div>
  314.             </div>
  315.             <div class="row g-md-5">
  316.               <div class="col-md-6 col-lg-3">
  317.                 <div class="step-card text-center h-100 d-flex flex-column justify-content-start position-relative" data-aos="fade-up" data-aos-delay="0">
  318.                   <div data-aos="fade-right" data-aos-delay="500">
  319.                     <img class="arch-line" src="{{ asset('Accueil/imagesAccueil/arch-line.png') }}" alt="Flèche animation">
  320.                   </div>
  321.                   <span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">1</span>
  322.                   <div>
  323.                     <h3 class="fs-5 mb-4">Mise en place de l'espace séjour</h3>
  324.                     <p>Créez votre séjour en quelques clics… ou confiez-nous l’import de plusieurs séjours, on s’occupe de tout..</p>
  325.                   </div>
  326.                 </div>
  327.               </div>
  328.               <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="600">
  329.                 <div class="step-card reverse text-center h-100 d-flex flex-column justify-content-start position-relative">
  330.                   <div data-aos="fade-right" data-aos-delay="1100">
  331.                     <img class="arch-line reverse" src="{{ asset('Accueil/imagesAccueil/arch-line-reverse.png') }}" alt="Flèche animation">
  332.                   </div>
  333.                   <span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">2</span>
  334.                   <h3 class="fs-5 mb-4">Activation de l'espace séjour </h3>
  335.                   <p>Après la création d'un espace séjour, vous recevrez un lien avec les détails d'activation de votre compte par email.</p>
  336.                 </div>
  337.               </div>
  338.               <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="1200">
  339.                 <div class="step-card text-center h-100 d-flex flex-column justify-content-start position-relative">
  340.                   <div data-aos="fade-right" data-aos-delay="1700">
  341.                     <img class="arch-line" src="{{ asset('Accueil/imagesAccueil/arch-line.png') }}" alt="Flèche animation">
  342.                   </div>
  343.                   <span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">3</span>
  344.                   <h3 class="fs-5 mb-4">Explorer les fonctionnalités</h3>
  345.                   <p>Explorez les fonctionnalités de la plateforme et découvrez comment elles peuvent vous aider à gérer votre séjour.</p>
  346.                 </div>
  347.               </div>
  348.               <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="1800">
  349.                 <div class="step-card last text-center h-100 d-flex flex-column justify-content-start position-relative">
  350.                   <span class="step-number rounded-circle text-center fw-bold mb-5 mx-auto">4</span>
  351.                   <div>
  352.                     <h3 class="fs-5 mb-4">Partager vos photos et vidéos et messages vocaux</h3>
  353.                     <p>Partagez vos photos et vidéos avec les familles en utilisant le lien de partage.</p>
  354.                   </div>
  355.                 </div>
  356.               </div>
  357.             </div>
  358.           </div>
  359.         </section>
  360.         <!-- End How it works-->
  361.         
  362.         <!-- ======= Pricing =======-->
  363.         <section class="section pricing__v2" id="pricing">
  364.           <div class="container">
  365.             <div class="row mb-5">
  366.               <div class="col-md-5 mx-auto text-center">
  367.                 <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">Boite vocale</span>
  368.                 <h2 class="mb-3" data-aos="fade-up" data-aos-delay="100">Boîte vocale 5sur5 – Messages vocaux illimités</h2>
  369.                 <p data-aos="fade-up" data-aos-delay="200">Offrez aux familles une expérience unique : chaque message vocal enregistré par les accompagnateurs est transmis par appel téléphonique directement aux parents, partout dans le monde.</p>
  370.               </div>
  371.             </div>
  372.             <div class="row">
  373.               <div class="col-md-4 mb-4 mb-md-0" data-aos="fade-up" data-aos-delay="300">
  374.                 <div class="p-5 rounded-4 price-table h-100">
  375.                   <h3>Boîte Vocale</h3>
  376.                   <p>Les accompagnateurs peuvent enregistrer des messages vocaux depuis l'application web, où qu'ils soient dans le monde. À chaque message déposé, les parents reçoivent un appel automatique sur leur téléphone et peuvent écouter immédiatement ce message rassurant. C'est simple, rapide, sécurisé, et très apprécié par les familles.</p>
  377.                   <div><a class="btn" href="#">Créer ma boite vocale</a></div>
  378.                 </div>
  379.               </div>
  380.               <div class="col-md-8" data-aos="fade-up" data-aos-delay="400">
  381.                 <div class="p-5 rounded-4 price-table popular h-100">
  382.                   <div class="row">
  383.                     <div class="col-md-6">
  384.                       <h3 class="mb-3">Tarif</h3>
  385.                       <div class="price mb-4">
  386.                         <strong class="me-1">2,90 €</strong><span>pour tout le séjour</span>
  387.                         <p>(Cet accès peut être offert par un de nos partenaires voyagistes ou un CSE).</p>
  388.                       </div>
  389.                       <div><a class="btn btn-white hover-outline" href="#">🎙️ Messages vocaux illimités</a></div>
  390.                     </div>
  391.                     <div class="col-md-6 pricing-features">
  392.                       <h4 class="text-uppercase fw-bold mb-3">Fonctionnalités</h4>
  393.                       <ul class="list-unstyled d-flex flex-column gap-3">
  394.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Enregistrement de messages vocaux depuis n'importe où</span></li>
  395.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Appel automatique vers les parents à chaque message</span></li>
  396.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Accès illimité web pendant tout le séjour</span></li>
  397.                         <li class="d-flex gap-2 align-items-start mb-0"><span class="icon rounded-circle position-relative mt-1"><i class="bi bi-check"></i></span><span>Parfait pour rassurer les familles sans surcharge pour les encadrants</span></li>
  398.                       </ul>
  399.                     </div>
  400.                   </div>
  401.                 </div>
  402.               </div>
  403.             </div>
  404.           </div>
  405.         </section>
  406.         <!-- End Pricing-->
  407.         
  408.         <!-- ======= Stats =======-->
  409.         <section class="stats__v3 section">
  410.           <div class="container">
  411.             <div class="row">
  412.               <div class="col-12">
  413.                 <div class="d-flex flex-wrap content rounded-4" data-aos="fade-up" data-aos-delay="0">
  414.                   <div class="rounded-borders">
  415.                     <div class="rounded-border-1"></div>
  416.                     <div class="rounded-border-2"></div>
  417.                     <div class="rounded-border-3"></div>
  418.                   </div>
  419.                   <div class="col-12 col-sm-6 col-md-4 mb-4 mb-md-0 text-center" data-aos="fade-up" data-aos-delay="100">
  420.                     <div class="stat-item">
  421.                       <h3 class="fs-1 fw-bold"><span class="purecounter" data-purecounter-start="0" data-purecounter-end="370" data-purecounter-duration="2">0</span><span>K+</span></h3>
  422.                       <p class="mb-0">Lien de confiance créé avec les familles</p>
  423.                     </div>
  424.                   </div>
  425.                   <div class="col-12 col-sm-6 col-md-4 mb-4 mb-md-0 text-center" data-aos="fade-up" data-aos-delay="200">
  426.                     <div class="stat-item">
  427.                       <h3 class="fs-1 fw-bold"><span class="purecounter" data-purecounter-start="0" data-purecounter-end="100" data-purecounter-duration="2">0</span><span>%</span></h3>
  428.                       <p class="mb-0">Partage de photos et vidéos en toute sécurité</p>
  429.                     </div>
  430.                   </div>
  431.                   <div class="col-12 col-sm-6 col-md-4 mb-4 mb-md-0 text-center" data-aos="fade-up" data-aos-delay="300">
  432.                     <div class="stat-item">
  433.                       <h3 class="fs-1 fw-bold"><span class="purecounter" data-purecounter-start="0" data-purecounter-end="20" data-purecounter-duration="2">0</span><span>K+</span></h3>
  434.                       <p class="mb-0">Séjour partagé par les accompagnateurs</p>
  435.                     </div>
  436.                   </div>
  437.                 </div>
  438.               </div>
  439.             </div>
  440.           </div>
  441.         </section>
  442.         <!-- End Stats-->
  443.         
  444.         <!-- ======= Services =======-->
  445.         <section class="section services__v3" id="services">
  446.           <div class="container">
  447.             <div class="row mb-5">
  448.               <div class="col-md-8 mx-auto text-center">
  449.                 <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">Nos services</span>
  450.                 <h2 class="mb-3" data-aos="fade-up" data-aos-delay="100">Innovation et sécurité pour les séjours scolaires et les colonies de vacances en France et à l'étranger</h2>
  451.               </div>
  452.             </div>
  453.             <div class="row g-4">
  454.               <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
  455.                 <div class="service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-5">
  456.                   <div>
  457.                     <span class="icon mb-4">
  458. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-images" viewBox="0 0 16 16" style="width: 50px; height: 50px;">
  460.   <img src="{{ asset('Accueil/imagesAccueil/photo_share.png') }}" alt="securité" style="width: 50px; height: 50px;">
  462. </svg>                    </span>
  463.                     <h3 class="fs-5 mb-3">Gérez vos séjours</h3>
  464.                     <p class="mb-4">Gérez vos séjours en toute simplicité : partage sécurisé, suivi des familles, accompagnement humain. On vous montre tout.</p>
  465.                   </div>
  466.                   <a class="special-link d-inline-flex gap-2 align-items-center text-decoration-none" href="#">
  467.                     <span class="icons"><i class="icon-1 bi bi-arrow-right-short"></i><i class="icon-2 bi bi-arrow-right-short"></i></span>
  468.                     <span>Créer mon espace séjour</span>
  469.                   </a>
  470.                 </div>
  471.               </div>
  472.               <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
  473.                 <div class="service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-5">
  474.                   <div>
  475.                     <span class="icon mb-4">
  476.                       <img src="{{ asset('Accueil/imagesAccueil/vocal_bleu.png') }}" alt="Vocal" style="width: 50px; height: 50px;">
  477.                     </span>
  478.                     <h3 class="fs-5 mb-3">Boite vocale moderne</h3>
  479.                     <p>Enregistrez votre message sur la plateforme, où que vous soyez dans le monde, et les parents seront appelés instantanément pour l'écouter. Une expérience unique, sans effort, et profondément rassurante.</p>
  480.                   </div>
  481.                   <a class="special-link d-inline-flex gap-2 align-items-center text-decoration-none" href="#">
  482.                     <span class="icons"><i class="icon-1 bi bi-arrow-right-short"></i><i class="icon-2 bi bi-arrow-right-short"></i></span>
  483.                     <span>Créer mon espace séjour </span>
  484.                   </a>
  485.                 </div>
  486.               </div>
  487.               <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
  488.                 <div class="service-card p-4 rounded-4 h-100 d-flex flex-column justify-content-between gap-5">
  489.                   <div>
  490.                     <span class="icon mb-4">
  491.       <img src="{{ asset('Accueil/imagesAccueil/security.svg') }}" alt="securité" style="width: 50px; height: 50px;">
  493.                     </span>
  494.                     <h3 class="fs-5 mb-3">Partage sécurisé des contenus</h3>
  495.                     <p class="mb-4">5sur5séjour garantit un hébergement sécurisé de tous vos contenus. Les accompagnateurs peuvent facilement publier photos et vidéos, accessibles uniquement aux familles autorisées grâce à un code séjour unique.</p>
  496.                   </div>
  497.                   <a class="special-link d-inline-flex gap-2 align-items-center text-decoration-none" href="#">
  498.                     <span class="icons"><i class="icon-1 bi bi-arrow-right-short"></i><i class="icon-2 bi bi-arrow-right-short"></i></span>
  499.                     <span>Créer mon espace séjour</span>
  500.                   </a>
  501.                 </div>
  502.               </div>
  503.             </div>
  504.           </div>
  505.         </section>
  506.         <!-- End Services-->
  507.         <!-- ======= Section Gratuité Écoles Publiques ======= -->
  508. <section class="section bg-light" id="free-schools">
  509.   <div class="container">
  510.     <div class="row mb-5">
  511.       <div class="col-md-8 mx-auto text-center">
  512.         <span class="subtitle text-uppercase mb-3 aos-init aos-animate"  style="    background-color: rgba(var(--bs-secondary-rgb), 0.2);
  513.     color: var(--bs-primary);
  514.     display: inline-block;
  515.     padding: 5px 12px;
  516.     border-radius: 7px;
  517.     font-weight: 600;
  518.     font-size: 0.75rem;data-aos="fade-up" data-aos-delay="0">Pour les écoles publiques</span>
  519.         <h2 class="mb-3" data-aos="fade-up" data-aos-delay="100">Une plateforme gratuite pour les écoles publiques</h2>
  520.         <p class="lead" data-aos="fade-up" data-aos-delay="200">
  521. Chez 5sur5, nous pensons que chaque élève devrait pouvoir partager ses souvenirs avec sa famille,
  522. <strong>quel que soit le budget de son établissement</strong>.
  523. C’est pourquoi l’accès à notre plateforme est entièrement gratuit pour les écoles publiques, incluant le partage de photos, vidéos.
  524.       <br> <strong>La fonctionnalité de boîte vocale est proposée en option.</strong>
  527.         </p>
  528.       </div>
  529.     </div>
  530.     <div class="row g-4">
  531.       <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
  532.         <div class="service-card p-4 rounded-4 h-100">
  533.           <div class="mb-4 text-center">
  534.             <i class="bi bi-check-circle fs-1 text-primary"></i>
  535.           </div>
  536.           <h4 class="text-center">Aucun coût pour l'école</h4>
  537.           <p class="text-center">L'accès est entièrement gratuit, sans abonnement ni frais caché.</p>
  538.         </div>
  539.       </div>
  540.       <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
  541.         <div class="service-card p-4 rounded-4 h-100">
  542.           <div class="mb-4 text-center">
  543.             <i class="bi bi-x-circle fs-1 text-danger"></i>
  544.           </div>
  545.           <h4 class="text-center">Aucun achat imposé</h4>
  546.           <p class="text-center">Les familles ne sont pas forcées d’acheter un album ou un souvenir.</p>
  547.         </div>
  548.       </div>
  549.       <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="500">
  550.         <div class="service-card p-4 rounded-4 h-100">
  551.           <div class="mb-4 text-center">
  552.             <i class="bi bi-image fs-1 text-success"></i>
  553.           </div>
  554.           <h4 class="text-center">Galerie privée</h4>
  555.           <p class="text-center">Partage gratuit sécurisé de photos, vidéos.</p>
  556.         </div>
  557.       </div>
  558.       <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="600">
  559.         <div class="service-card p-4 rounded-4 h-100">
  560.           <div class="mb-4 text-center">
  561.             <i class="bi bi-shield-lock fs-1 text-info"></i>
  562.           </div>
  563.           <h4 class="text-center">Conforme RGPD</h4>
  564.           <p class="text-center">Vos données sont protégées selon les normes européennes.</p>
  565.         </div>
  566.       </div>
  567.     </div>
  568.     <div class="row mt-5" style="display:none;">
  569.       <div class="col-12 text-center">
  570.         <a href="#formulaire-demande" class="btn btn-primary btn-lg" data-aos="fade-up" data-aos-delay="700">
  571.           Demander un accès gratuit pour mon école
  572.         </a>
  573.       </div>
  574.     </div>
  575.   </div>
  576. </section>
  577. <!-- End Section Gratuité Écoles Publiques -->
  579.         <!-- ======= Contact =======-->
  580.         <section class="section contact__v2" id="contact">
  581.           <div class="container">
  582.             <div class="row mb-5">
  583.               <div class="col-md-6 col-lg-7 mx-auto text-center">
  584.                 <span class="subtitle text-uppercase mb-3" data-aos="fade-up" data-aos-delay="0">Contact</span>
  585.                 <h2 class="h2 fw-bold mb-3" data-aos="fade-up" data-aos-delay="0">Nous contacter</h2>
  586.                 <p data-aos="fade-up" data-aos-delay="100">Nous sommes à votre écoute pour répondre à vos questions et vous aider à mieux comprendre nos services.</p>
  587.               </div>
  588.             </div>
  589.             <div class="row">
  590.               <div class="col-md-6">
  591.                 <div class="d-flex gap-5 flex-column">
  592.                   <div class="d-flex align-items-start gap-3" data-aos="fade-up" data-aos-delay="0">
  593.                     <div class="icon d-block"><i class="bi bi-telephone"></i></div>
  594.                     <span>
  595.                       <span class="d-block">Téléphone</span>
  596.                       <strong>05 36 28 29 30</strong>
  597.                     </span>
  598.                   </div>
  599.                   <div class="d-flex align-items-start gap-3" data-aos="fade-up" data-aos-delay="100">
  600.                     <div class="icon d-block"><i class="bi bi-send"></i></div>
  601.                     <span>
  602.                       <span class="d-block">Email</span>
  603.                       <strong>contact@5sur5sejour.com</strong>
  604.                     </span>
  605.                   </div>
  606.                   <div class="d-flex align-items-start gap-3" data-aos="fade-up" data-aos-delay="200">
  607.                     <div class="icon d-block"><i class="bi bi-geo-alt"></i></div>
  608.                     <span>
  609.                       <span class="d-block">Adresse</span>
  610.                       <address class="fw-bold">5sur5séjour<br>France</address>
  611.                     </span>
  612.                   </div>
  613.                 </div>
  614.               </div>
  615.               <div class="col-md-6">
  616.                 <div class="form-wrapper" data-aos="fade-up" data-aos-delay="300">
  617.                   <form id="contactForm" action="{{ path('app_contact') }}" method="POST">
  618.                     <div class="row gap-3 mb-3">
  619.                       <div class="col-md-12">
  620.                         <label class="mb-2" for="name">Nom</label>
  621.                         <input class="form-control" id="name" type="text" name="name" required="">
  622.                       </div>
  623.                       <div class="col-md-12">
  624.                         <label class="mb-2" for="email">Email</label>
  625.                         <input class="form-control" id="email" type="email" name="email" required="">
  626.                       </div>
  627.                     </div>
  628.                     <div class="row gap-3 mb-3">
  629.                       <div class="col-md-12">
  630.                         <label class="mb-2" for="subject">Sujet</label>
  631.                         <input class="form-control" id="subject" type="text" name="subject">
  632.                       </div>
  633.                     </div>
  634.                     <div class="row gap-3 gap-md-0 mb-3">
  635.                       <div class="col-md-12">
  636.                         <label class="mb-2" for="message">Message</label>
  637.                         <textarea class="form-control" id="message" name="message" rows="5" required=""></textarea>
  638.                       </div>
  639.                     </div>
  640.                     <button class="btn btn-primary fw-semibold" type="submit">Envoyer le message</button>
  641.                   </form>
  642.                   <div class="mt-3 d-none alert alert-success" id="successMessage">Message envoyé avec succès !</div>
  643.                   <div class="mt-3 d-none alert alert-danger" id="errorMessage">Échec de l'envoi du message. Veuillez réessayer plus tard.</div>
  644.                 </div>
  645.               </div>
  646.             </div>
  647.           </div>
  648.         </section>
  649.         <!-- End Contact-->
  650.         
  651.         <!-- ======= Footer =======-->
  652.         <footer class="footer pt-5 pb-5">
  653.           <div class="container">
  654.             <div class="row mb-5 pb-4">
  655.               <div class="col-md-7">
  656.                 <h2 class="fs-5">Rejoignez notre newsletter</h2>
  657.                 <p>Restez informé de nos dernières actualités et offres — rejoignez notre newsletter aujourd'hui !</p>
  658.               </div>
  659.               <div class="col-md-5">
  660.                 <form class="d-flex gap-2">
  661.                   <input class="form-control" type="email" placeholder="Votre email" required="">
  662.                   <button class="btn btn-primary fs-6" type="submit">S'abonner</button>
  663.                 </form>
  664.               </div>
  665.             </div>
  666.             <div class="row justify-content-between mb-5 g-xl-5">
  667.               <div class="col-md-4 mb-5 mb-lg-0">
  668.                 <h3 class="mb-3">À propos</h3>
  669.                 <p class="mb-4">5sur5séjour est la plateforme de référence pour les séjours scolaires et les colonies de vacances, permettant aux familles de suivre leur enfant tout au long du séjour.</p>
  670.               </div>
  671.               <div class="col-md-7">
  672.                 <div class="row g-2">
  673.                   <div class="col-md-6 col-lg-4 mb-4 mb-lg-0">
  674.                     <h3 class="mb-3">Entreprise</h3>
  675.                     <ul class="list-unstyled">
  676.                       <li><a href="{{path('sur5')}}">À propos</a></li>
  677.                       <li><a  href = "{{path('Mentions_legales')}}" >Mentions légales</a></li>
  678.                       <li><a  href = "{{path('Conditons_generales')}}" >Conditions générales</a></li>
  679.                       <li><a  href = "{{path('Politique')}}" >Politique de confidentialité</a></li>
  680.                     </ul>
  681.                   </div>
  682.                   <div class="col-md-6 col-lg-4 mb-4 mb-lg-0">
  683.                     <h3 class="mb-3">Comptes</h3>
  684.                     <ul class="list-unstyled">
  685.                       <li><a href="#jemeconnecte">S'inscrire</a></li>
  686.                       <li><a href="#jemeconnecte">Se connecter</a></li>
  687.                      
  688.                     </ul>
  689.                   </div>
  690.                   <div class="col-md-6 col-lg-4 mb-4 mb-lg-0 quick-contact">
  691.                     <h3 class="mb-3">Contact</h3>
  692.                     <p class="d-flex mb-3"><i class="bi bi-geo-alt-fill me-3"></i><span>5sur5séjour<br>France</span></p>
  693.                     <a class="d-flex mb-3" href="mailto:contact@5sur5sejour.com"><i class="bi bi-envelope-fill me-3"></i><span>contact@5sur5sejour.com</span></a>
  694.                     <a class="d-flex mb-3" href="tel://05 36 28 29 30"><i class="bi bi-telephone-fill me-3"></i><span>05 36 28 29 30</span></a>
  695.                     <a class="d-flex mb-3" href="https://5sur5sejour.com"><i class="bi bi-globe me-3"></i><span>5sur5sejour.com</span></a>
  696.                   </div>
  697.                 </div>
  698.               </div>
  699.             </div>
  700.             <div class="row credits pt-3">
  701.               <div class="col-xl-8 text-center text-xl-start mb-3 mb-xl-0">
  702.                 &copy;
  703.                 <script>document.write(new Date().getFullYear());</script> 5sur5séjour. 
  704.                 Tous droits réservés.
  705.               </div>
  706.             </div>
  707.           </div>
  708.         </footer>
  709.         <!-- End Footer-->
  710.         
  711.       </main>
  712.     </div>
  713.     
  714.     <!-- ======= Back to Top =======-->
  715.     <button id="back-to-top"><i class="bi bi-arrow-up-short"></i></button>
  716.     <!-- End Back to top-->
  717.     
  718.     <!-- ======= Javascripts =======-->
  719.     <script src="{{ asset('Accueil/vendors/bootstrap/bootstrap.bundle.min.js') }}"></script>
  720.     <script src="{{ asset('Accueil/vendors/gsap/gsap.min.js') }}"></script>
  721.     <script src="{{ asset('Accueil/vendors/imagesloaded/imagesloaded.pkgd.min.js') }}"></script>
  722.     <script src="{{ asset('Accueil/vendors/isotope/isotope.pkgd.min.js') }}"></script>
  723.     <script src="{{ asset('Accueil/vendors/glightbox/glightbox.min.js') }}"></script>
  724.     <script src="{{ asset('Accueil/vendors/swiper/swiper-bundle.min.js') }}"></script>
  725.     <script src="{{ asset('Accueil/vendors/aos/aos.js') }}"></script>
  726.     <script src="{{ asset('Accueil/vendors/purecounter/purecounter.js') }}"></script>
  727.     <script src="{{ asset('Accueil/js/js_nova.js') }}"></script>
  728.     <script src="{{ asset('Accueil/js/test-animations.js') }}"></script>
  729.     
  730.     <!-- Initialize AOS -->
  731.     <script>
  732.       document.addEventListener('DOMContentLoaded', function() {
  733.         console.log('DOM loaded, initializing AOS...');
  734.         
  735.         // Initialize AOS
  736.         AOS.init({
  737.           duration: 1000,
  738.           easing: 'ease-in-out',
  739.           once: true,
  740.           mirror: false
  741.         });
  742.         
  743.         console.log('AOS initialized');
  744.         
  745.         // Initialize PureCounter
  746.         new PureCounter();
  747.         
  748.         // Initialize GLightbox
  749.         const lightbox = GLightbox({
  750.           selector: '.glightbox'
  751.         });
  752.         
  753.         // Debug: Check if arch-line images are loaded
  754.         const archLines = document.querySelectorAll('.arch-line');
  755.         console.log('Found arch-line elements:', archLines.length);
  756.         archLines.forEach((line, index) => {
  757.           console.log(`Arch-line ${index + 1}:`, line.src, line.complete ? 'loaded' : 'loading...');
  758.         });
  759.         
  760.         // Smooth scrolling for anchor links
  761.         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  762.           anchor.addEventListener('click', function (e) {
  763.             e.preventDefault();
  764.             const target = document.querySelector(this.getAttribute('href'));
  765.             if (target) {
  766.               target.scrollIntoView({
  767.                 behavior: 'smooth',
  768.                 block: 'start'
  769.               });
  770.             }
  771.           });
  772.         });
  773.         
  774.         // Back to top button
  775.         const backToTop = document.getElementById('back-to-top');
  776.         if (backToTop) {
  777.           window.addEventListener('scroll', function() {
  778.             if (window.pageYOffset > 100) {
  779.               backToTop.style.display = 'block';
  780.             } else {
  781.               backToTop.style.display = 'none';
  782.             }
  783.           });
  784.           
  785.           backToTop.addEventListener('click', function() {
  786.             window.scrollTo({
  787.               top: 0,
  788.               behavior: 'smooth'
  789.             });
  790.           });
  791.         }
  792.         
  793.         // Animation des flèches pour l'ancienne section
  794.         function startArrowAnimation() {
  795.           const arrowImg = document.querySelector('.MyImgFirstPosition');
  796.           const lineImg = document.querySelector('.MyLineFirstPosition');
  797.           
  798.           if (arrowImg && lineImg) {
  799.             // Démarrer l'animation après 1 seconde
  800.             setTimeout(() => {
  801.               arrowImg.classList.add('Myimg');
  802.               lineImg.classList.add('MyLine');
  803.             }, 1000);
  804.           }
  805.         }
  806.         
  807.         // Démarrer l'animation des flèches
  808.         startArrowAnimation();
  809.         
  810.         // Slider simple (sans Owl Carousel pour l'instant)
  811.         let currentSlide = 0;
  812.         const slides = document.querySelectorAll('.single_slider');
  813.         
  814.         function showSlide(index) {
  815.           slides.forEach((slide, i) => {
  816.             slide.style.display = i === index ? 'flex' : 'none';
  817.           });
  818.         }
  819.         
  820.         function nextSlide() {
  821.           currentSlide = (currentSlide + 1) % slides.length;
  822.           showSlide(currentSlide);
  823.         }
  824.         
  825.         // Initialiser le slider
  826.         if (slides.length > 0) {
  827.           showSlide(0);
  828.           // Changer de slide toutes les 5 secondes
  829.           setInterval(nextSlide, 5000);
  830.         }
  831.         
  832.         // Nouveau slider functionality
  833.         let currentHeroSlide = 0;
  834.         const heroSlides = [
  835.           {
  836.             title: "Révolutionnez la Communication",
  837.             description: "Partagez vos aventures avec les familles en toute sécurité grâce à notre plateforme, agrémentée de photos, de vidéos et messages.",
  838.             image: "{{ asset('Accueil/imagesAccueil/slider/child-laughing.jpg') }}"
  839.           },
  840.           {
  841.             title: "La plateforme qui rassure les familles",
  842.             description: "Partagez vos souvenirs en toute sécurité avec des photos, vidéos et messages vocaux.",
  843.             image: "{{ asset('Accueil/imagesAccueil/secure.jpg') }}"
  844.           },
  845.           {
  846.             title: "Messages vocaux et photos",
  847.             description: "Restez connecté avec votre enfant tout au long du séjour grâce à notre technologie sécurisée.",
  848.             image: "{{ asset('Accueil/imagesAccueil/slider/bg-slider.svg') }}"
  849.           }
  850.         ];
  851.         
  852.         function changeSlide(direction) {
  853.           currentHeroSlide = (currentHeroSlide + direction + heroSlides.length) % heroSlides.length;
  854.           updateHeroSlider();
  855.         }
  856.         
  857.         function updateHeroSlider() {
  858.           const titleElement = document.querySelector('.hero-slider-title');
  859.           const descriptionElement = document.querySelector('.hero-slider-description');
  860.           const imageElement = document.querySelector('.hero-slider-image img');
  861.           
  862.           if (titleElement && descriptionElement && imageElement) {
  863.             // Animation de transition
  864.             titleElement.style.opacity = '0';
  865.             descriptionElement.style.opacity = '0';
  866.             
  867.             setTimeout(() => {
  868.               titleElement.textContent = heroSlides[currentHeroSlide].title;
  869.               descriptionElement.textContent = heroSlides[currentHeroSlide].description;
  870.               imageElement.src = heroSlides[currentHeroSlide].image;
  871.               
  872.               titleElement.style.opacity = '1';
  873.               descriptionElement.style.opacity = '1';
  874.             }, 300);
  875.           }
  876.         }
  877.         
  878.         // Auto-play pour le nouveau slider
  879.         setInterval(() => {
  880.           changeSlide(1);
  881.         }, 6000);
  882.         
  883.         // Gestion du formulaire de contact
  884.         const contactForm = document.getElementById('contactForm');
  885.         const successMessage = document.getElementById('successMessage');
  886.         const errorMessage = document.getElementById('errorMessage');
  887.         
  888.         if (contactForm) {
  889.           contactForm.addEventListener('submit', function(e) {
  890.             e.preventDefault();
  891.             
  892.             // Masquer les messages précédents
  893.             successMessage.classList.add('d-none');
  894.             errorMessage.classList.add('d-none');
  895.             
  896.             // Désactiver le bouton pendant l'envoi
  897.             const submitButton = contactForm.querySelector('button[type="submit"]');
  898.             const originalText = submitButton.textContent;
  899.             submitButton.textContent = 'Envoi en cours...';
  900.             submitButton.disabled = true;
  901.             
  902.             // Récupérer les données du formulaire
  903.             const formData = new FormData(contactForm);
  904.             
  905.             // Envoyer la requête AJAX
  906.             fetch(contactForm.action, {
  907.               method: 'POST',
  908.               body: formData,
  909.               headers: {
  910.                 'X-Requested-With': 'XMLHttpRequest'
  911.               }
  912.             })
  913.             .then(response => response.json())
  914.             .then(data => {
  915.               if (data.success) {
  916.                 // Afficher le message de succès
  917.                 successMessage.textContent = data.message;
  918.                 successMessage.classList.remove('d-none');
  919.                 
  920.                 // Réinitialiser le formulaire
  921.                 contactForm.reset();
  922.               } else {
  923.                 // Afficher le message d'erreur
  924.                 errorMessage.textContent = data.message;
  925.                 errorMessage.classList.remove('d-none');
  926.               }
  927.             })
  928.             .catch(error => {
  929.               console.error('Erreur:', error);
  930.               errorMessage.textContent = 'Une erreur est survenue lors de l\'envoi du message. Veuillez réessayer plus tard.';
  931.               errorMessage.classList.remove('d-none');
  932.             })
  933.             .finally(() => {
  934.               // Réactiver le bouton
  935.               submitButton.textContent = originalText;
  936.               submitButton.disabled = false;
  937.             });
  938.           });
  939.         }
  940.         
  941.       });
  942.     </script>
  943.     <!-- End JavaScripts-->
  944.   </body>
  945. </html>