templates/website/index.html.twig line 1

Open in your IDE?
  1. {% extends "website/base.html.twig" %}
  2. {% block title %}Accueil{% endblock %}
  3. {% block body %}
  4.     
  5.     
  6.     
  7. <!-- About Us & Events -->
  8. <div class="container home">
  9.     <div class="row">
  10.         <div class="col-12 col-lg-8 col-xl-8">
  11.             <div class="container us">
  12.                 <div class="row">
  13.                     <div class="col-12 col-xl-3">
  14.                         <div class="us__img">
  15.                             <img src="/website/Assets/Map_La_Marguerite_v2-01.png" alt="image de l'association">
  16.                         </div>
  17.                     </div>
  18.                     <div class="col-12 col-xl-9">
  19.                         <div class="us__content">
  20.                             <h2>Qui sommes-nous ?</h2>
  21.                             <h3>Une association de patients au bénéfice de patients depuis 2017</h3>
  22.                             <p>
  23.                                 La Marguerite est une association loi 1901, à but non lucratif, spécialisée dans le soutien et l'accompagnement des personnes atteintes de pathologies chroniques qui regroupe plusieurs associations de santé. Elle est née du constat partagé du manque d'accompagnement des malades au quotidien.<br>Nous agissons pour limiter l'impact de la chronicité sur la qualité de vie des personnes malades et de leurs aidants. Nos actions s'attachent à "Aller vers" les populations vulnérables et/ou isolées pour réduire les inégalités d'accès au soin.
  24.                             </p>
  25.                             <div class="us__btns">
  26.                                 <a href="/contact"><button class="button contact-btn">Prendre Contact</button></a>
  27.                                 <a href="/equipe"><button class="button">Notre équipe</button></a>
  28.                             </div>
  29.                         </div>
  30.                     </div>
  31.                 </div>
  32.             </div>
  33.         </div>
  34.         <div class="col-12 col-lg-4 offset-xl-1 col-xl-3">
  35.             <div class="event__carousel">
  36.                 <img id="event__carousel-arrowLeft" class="event__carousel-arrowLeft" src="/website/Assets/arrow_down_purple.svg">
  37.                 {% if events is empty %}
  38.                 {% else %}
  39.                 <img id="event__carousel-arrowRight" class="event__carousel-arrowRight" src="/website/Assets/arrow_down_purple.svg">
  40.                 {% endif %}
  41.                 <div class="event__carousel-inner">
  42.                     {% if events is empty %}
  43.                         <div class="eventCard">
  44.                                 <div class="eventCard__header">    
  45.                                 </div>
  46.                                 <div class="eventCard__content">
  47.                                     <h3>Aucun événement prévu.</h3>
  48.                                 </div>
  49.                                 <div class="eventCard__footer">                                    
  50.                                 </div>
  51.                             </div>
  52.                     {% else %}
  53.                         {% for event in events %}
  54.                             <div class="eventCard">
  55.                                 <div class="eventCard__header">
  56.                                     <h2>{{ event.date | date('d/m/Y') }}</h2>
  57.                                 </div>
  58.                                 <div class="eventCard__content">
  59.                                     <h3>{{ event.title }}</h3>
  60.                                     <p>{{ event.description }}</p>
  61.                                 </div>
  62.                                 <div class="eventCard__footer">
  63.                                     <p>{{ event.place }}</p>
  64.                                 </div>
  65.                             </div>
  66.                         {% endfor %}
  67.                     {% endif %}
  68.                     
  69.                 </div>
  70.             </div>
  71.         </div>
  72.     </div>
  73. </div>
  74. <!-- Light Missions Cards -->
  75. <div class="container lightMission">
  76.     <div class="row">
  77.         <div class="col">
  78.             <h2 class="lightMission__title">Nos axes prioritaires</h2>
  79.         </div>
  80.     </div>
  81.     <div class="row lightMission__row">
  82.         <div class="col-12 col-xl-6">
  83.             <div class="bg-white rounded shadow p-5 lightMission__bigCard">
  84.                 <section class="lightMission__bigCardHaut">
  85.                     <h2>Promouvoir la Santé pour tous</h2>
  86.                     <ul>
  87.                         <li><img src="website/Assets/dot-li.svg" alt="point de liste"><p>Accompagnement et suivi santé individuel et collectif.</p></li>
  88.                         <li><img src="website/Assets/dot-li.svg" alt="point de liste"><p>Relais de proximité pour les professionnel du medico-social</p></li>
  89.                         <li><img src="website/Assets/dot-li.svg" alt="point de liste"><p>Proche des publics fragiles</p></li>
  90.                     </ul>
  91.                     <div class="lightMission__bigCardBas">
  92.                         <a href="/missions"><button class="button">En savoir plus</button></a>
  93.                         <a href="/contact"><button class="button">Demander un entretien individuel</button></a>
  94.                     </div>
  95.                 </section>
  96.                 <div id="carrouselPrevention" class="carousel slide lightMission__carrousel" data-ride="carousel">
  97.                     <div class="carousel-indicators lightMission__controls">
  98.                         <button class="lightMission__controlsBtn active" data-target="#carrouselPrevention" data-slide-to="0"></button>
  99.                         <button class="lightMission__controlsBtn" data-target="#carrouselPrevention" data-slide-to="1"></button>
  100.                         <button class="lightMission__controlsBtn" data-target="#carrouselPrevention" data-slide-to="2"></button>
  101.                     </div>
  102.                     <div class="carousel-inner">
  103.                         <div class="carousel-item active">
  104.                         <img class="d-block w-100" src="website/Assets/image1.jpg" alt="First slide">
  105.                         </div>
  106.                         <div class="carousel-item">
  107.                         <img class="d-block w-100" src="website/Assets/image2.jpg" alt="Second slide">
  108.                         </div>
  109.                         <div class="carousel-item">
  110.                         <img class="d-block w-100" src="website/Assets/image3.jpg" alt="Third slide">
  111.                         </div>
  112.                     </div>
  113.                 </div>
  114.             </div>
  115.         </div>
  116.         <div class="col-12 col-xl-6">
  117.             <section class="d-flex flex-column justify-content-between lightMission__smallCards">
  118.                 <div class="bg-white rounded shadow p-5 lightMission__smallCard">
  119.                     <h2>Soutien et reconnaissance de l'aidant</h2>
  120.                     <ul>
  121.                         <li><img src="website/Assets/dot-li.svg" alt="point de liste"><p>Promotion et reconnaissance du rôle d'aidant</p></li>
  122.                         <li><img src="website/Assets/dot-li.svg" alt="point de liste"><p>Temps de répit pour les aidants</p></li>
  123.                         <li><img src="website/Assets/dot-li.svg" alt="point de liste"><p>Groupes de parole</p></li>
  124.                     </ul>
  125.                     <a href="/missions"><button class="button">Découvrir</button></a>
  126.                 </div>
  127.         
  128.                 <div class="bg-white rounded shadow p-5 lightMission__smallCard">
  129.                     <h2>Innovation pour le mieux-être</h2>
  130.                     <ul>
  131.                         <li><img src="website/Assets/dot-li.svg" alt="point de liste"><p>Créateur de solutions innovantes</p></li>
  132.                         <li><img src="website/Assets/dot-li.svg" alt="point de liste"><p>Relai vers les startups et laboratoires de recherche</p></li>
  133.                     </ul>
  134.                     <a href="/missions"><button id="buttonToProject" class="button">Explorer nos projets</button></a>
  135.                 </div>
  136.             </section>
  137.         </div>
  138.     </div>
  139. </div>
  140. <!-- Patients experiences -->
  141. <div class="container patientExp">
  142.     <div class="row">
  143.         <div class="col">
  144.             <h2 class="patientExp__title">Valorisation de l'expérience patient</h2>
  145.         </div>
  146.     </div>
  147.     <div class="row">
  148.         <div class="col">
  149.             <div class="container patientExp__up">
  150.                 <div class="row">
  151.                     <div class="col-12 col-lg-4">
  152.                         <div class="patientExp__img">
  153.                             <img src="/website/Assets/donation.png">
  154.                         </div>
  155.                     </div>
  156.                     <div class="col-12 col-lg-8">
  157.                         <h2>Approche en binôme patient - professionnel de santé</h2>
  158.                         <p>Nous développons une approche du suivi patient animé par un binôme professionnel de santé, salarié de La Marguerite et un patient ressources issu de nos associations. Le patient ressources témoigne de son expérience de la maladie et vient compléter l’approche médicale de nos professionnels de santé.<br><br> Cette approche admet plusieurs vertus : <br><br>- Communication / compréhension facilitées par un discours adapté au quotidien<br>- Amélioration de la gestion de la maladie<br>- Meilleure observance thérapeutique<br>- Influence positive sur le moral et sur le bien-être / réduction de l’anxiété<br>- Partage d’infos pratiques et ressources techniques<br><br>Chaque patient ressources est formé à l’ETP (Education Thérapeutique du Patient)</p>
  159.                     </div>
  160.                 </div>
  161.             </div>
  162.         </div>
  163.     </div>
  164.     <div class="row">
  165.         <div class="col">
  166.             <div class="container patientExp__down">
  167.                 <div class="row">
  168.                     <div class="col-12 col-lg-8">
  169.                         <h2>S’engager dans un parcours valorisant votre expérience patient</h2>
  170.                         <p>Vous êtes atteint d’une maladie chronique et vous souhaitez partager votre expérience patient ?<br><br><strong>Devenez patient ressources La Marguerite.</strong><br><br>Etapes de la formation :<br> -Entretien préalable<br>-Formation interne et formation ETP<br>-Mise en pratique et suivi des patients de La Marguerite. <br><br>Vous aurez également, en fonction des besoins, la possibilité de devenir Patient Partenaire.<br>Les patients partenaires interviennent auprès de personnes malades et de leurs proches dans les services hospitaliers, en lien avec les équipes soignantes. A l’écoute des patients, ils répondent à leurs questionnements et font part de leur expérience. L’objectif est d’améliorer le quotidien des malades durant les traitements et de les soutenir en essayant de rompre le sentiment d’isolement. <a href="/contact">Devenir Patient Ressources</a></p>
  171.                     </div>
  172.                     <div class="col-12 col-lg-4">
  173.                         <iframe src="https://www.youtube.com/embed/2LYT2URzmSc?si=cktzDT382qoYw5BP" showinfo="0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  174.                         <p class="patientExp__caption">Témoignage de Corinne, Patient Partenaire<br>La Marguerite</p>
  175.                     </div>
  176.                 </div>
  177.             </div>
  178.         </div>
  179.     </div>
  180. </div>
  181. <!-- Testimonials -->
  182. <div id="carouselExampleIndicators" class="carousel slide testimonial" data-ride="carousel">
  183.     <div class="carousel-inner py-4">
  184.         
  185.         <div class="carousel-item active">
  186.         <div class="testiCard">
  187.             <h2>Carole </h2>
  188.             <p>Porteuse de plusieurs pathologies, j’ai été confrontée à différentes situations concernant l’annonce de la pathologie et l’errance médicale. Ayant dû subir une transplantation hépatique en urgence étant enfant, pas de préparation possible à l’intervention et à la gestion de l’« après ».</p>
  189.             <img class="testiCard__haut" src="website/Assets/testi_haut.svg" alt="Image de citation">
  190.             <img class="testiCard__bas" src="website/Assets/testi_bas.svg" alt="Image de citation">
  191.         </div>
  192.         </div>
  193.         <div class="carousel-item ">
  194.         <div class="testiCard">
  195.             <h2>Carole</h2>
  196.             <p>Porteuse de plusieurs pathologies, j’ai été confrontée à différentes situations concernant l’annonce de la pathologie et l’errance médicale. Ayant dû subir une transplantation hépatique en urgence étant enfant, pas de préparation possible à l’intervention et à la gestion de l’« après ».</p>
  197.             <img class="testiCard__haut" src="website/Assets/testi_haut.svg" alt="Image de citation">
  198.             <img class="testiCard__bas" src="website/Assets/testi_bas.svg" alt="Image de citation">
  199.         </div>
  200.         </div>
  201.         <div class="carousel-item ">
  202.         <div class="testiCard">
  203.             <h2>Carole</h2>
  204.             <p>Porteuse de plusieurs pathologies, j’ai été confrontée à différentes situations concernant l’annonce de la pathologie et l’errance médicale. Ayant dû subir une transplantation hépatique en urgence étant enfant, pas de préparation possible à l’intervention et à la gestion de l’« après ».</p>
  205.             <img class="testiCard__haut" src="website/Assets/testi_haut.svg" alt="Image de citation">
  206.             <img class="testiCard__bas" src="website/Assets/testi_bas.svg" alt="Image de citation">
  207.         </div>
  208.         </div>
  209.         
  210.     </div>
  211.     <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  212.         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  213.         <span class="sr-only">Previous</span>
  214.     </a>
  215.     <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  216.         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  217.         <span class="sr-only">Next</span>
  218.     </a>
  219. </div>
  220. {% endblock %}
  221. {% block javascripts %}
  222.     <script>
  223.     // If cookie notification, close
  224.     $(document).ready(function() {
  225.         if (getCookie('notif') === 'true') {
  226.             $('#notification').css({
  227.                 'max-height': '0',
  228.                 'margin-bottom': '0'
  229.             })
  230.             
  231.         }
  232.     });
  233.     // Close the notification 
  234.     $('#notification_cross').change(function() {
  235.         if ($(this).is(':checked')) {
  236.             $(this).parent().css({
  237.                 'max-height': '0',
  238.                 'margin-bottom': '0'
  239.             });
  240.             setCookie('notif', true, 1);
  241.         }
  242.     });
  243.     // Button to scroll to projects in missions page
  244.     $('#buttonToProject').click(function() {
  245.         setCookie("scrollProject", true, 1);
  246.     });
  247.     // Get the cars & carousel
  248.     let eventCards = document.querySelectorAll('.eventCard');
  249.     let eventCarousel = document.querySelector('.event__carousel-inner');
  250.     // Set first card
  251.     let currentCardIndex = 0;
  252.     let currentCard = eventCards[currentCardIndex];
  253.     // Set buttons & listeners
  254.     let prevButton = document.getElementById('event__carousel-arrowLeft');
  255.     let nextButton = document.getElementById('event__carousel-arrowRight');
  256.     prevButton.style.display = 'none';
  257.     nextButton.addEventListener('click', nextCard);
  258.     prevButton.addEventListener('click', prevCard);
  259.     // Slide to next card
  260.     function nextCard() {
  261.         let cardWidth = currentCard.offsetWidth;
  262.         // See if we are not at the last card
  263.         if (currentCardIndex < eventCards.length - 1) {
  264.             // Turn on the previous button cause we are going at the second card
  265.             if (currentCardIndex === 0) {
  266.                 prevButton.style.display = 'block';
  267.             }
  268.             currentCardIndex++;
  269.             // translate
  270.             eventCarousel.style.transform = `translateX(-${cardWidth * currentCardIndex}px)`;
  271.             // If it's the last card, turn off the next button
  272.             if (currentCardIndex === eventCards.length - 1) {
  273.                 nextButton.style.display = 'none';
  274.             }
  275.         }
  276.     }
  277.     function prevCard() {
  278.         let cardWidth = currentCard.offsetWidth;
  279.         // See if we are not at the first card
  280.         if (currentCardIndex > 0) {
  281.             // Turn on the next button cause we are going at the second to last card
  282.             if (currentCardIndex === eventCards.length - 1) {
  283.                 nextButton.style.display = 'block';
  284.             }
  285.             currentCardIndex--;
  286.             // translate
  287.             eventCarousel.style.transform = `translateX(-${cardWidth * currentCardIndex}px)`;
  288.             // If it's the first card, turn off the previous button
  289.             if (currentCardIndex === 0) {
  290.                 prevButton.style.display = 'none';
  291.             }
  292.         }
  293.     }
  294.     </script>
  295. {% endblock %}