templates/assurance/index.html.twig line 1

  1. {% extends 'base_footer.html.twig' %}
  3. {% block title %}{{ 'assurance.page_title'|trans }}{% endblock %}
  5. {% block body %}
  6.     {% set garanties = [
  7.         {
  8.             'title' : 'assurance.garanties.degats_eaux',
  9.             'description' : 'assurance.garanties.degats_eaux_desc'
  10.         },
  11.         {
  12.             'title' : 'assurance.garanties.incendie',
  13.             'description' : 'assurance.garanties.incendie_desc'
  14.         },
  15.         {
  16.             'title' : 'assurance.garanties.vol_vandalisme',
  17.             'description' : 'assurance.garanties.vol_vandalisme_desc'
  18.         },
  19.         {
  20.             'title' : 'assurance.garanties.catastrophes',
  21.             'description' : 'assurance.garanties.catastrophes_desc'
  22.         },
  23.         {
  24.             'title' : 'assurance.garanties.responsabilite',
  25.             'description' : 'assurance.garanties.responsabilite_desc'
  26.         },
  27.         {
  28.             'title' : 'assurance.garanties.defense_recours',
  29.             'description' : 'assurance.garanties.defense_recours_desc'
  30.         }
  31.     ] %}
  33.     {% set faq_items = [
  34.         {
  35.             'question' : 'assurance.faq.pourquoi_question',
  36.             'answer' : 'assurance.faq.pourquoi_answer'
  37.         },
  38.         {
  39.             'question' : 'assurance.faq.risques_question',
  40.             'answer' : 'assurance.faq.risques_answer'
  41.         },
  42.         {
  43.             'question' : 'assurance.faq.comment_question',
  44.             'answer' : 'assurance.faq.comment_answer'
  45.         },
  46.         {
  47.             'question' : 'assurance.faq.cout_question',
  48.             'answer' : 'assurance.faq.cout_answer'
  49.         }
  50.     ] %}
  52.     <section class="bg-gray-100 py-16">
  53.         <div class="container mx-auto px-4">
  54.             <div class="max-w-3xl mx-auto text-center">
  55.                 <h1 class="text-4xl font-bold mb-6">{{ 'assurance.hero_title'|trans }}</h1>
  56.             </div>
  57.         </div>
  58.     </section>
  60.     <section class="py-16">
  61.         <div class="container mx-auto px-4">
  62.             <div class="max-w-3xl mx-auto">
  63.                 <h2 class="text-3xl font-bold mb-8 text-center">{{ 'assurance.section_titre_1'|trans }}</h2>
  64.                 <div class="space-y-6 text-lg">
  65.                     <p>{{ 'assurance.paragraph_1'|trans|raw }}</p>
  66.                     <p>{{ 'assurance.paragraph_2'|trans }}</p>
  67.                     <p>{{ 'assurance.paragraph_3'|trans|raw }}</p>
  68.                 </div>
  69.             </div>
  70.         </div>
  71.     </section>
  73.     <section class="bg-gray-100 py-16">
  74.         <div class="container mx-auto px-4">
  75.             <div class="max-w-3xl mx-auto text-center">
  76.                 <h2 class="text-3xl font-bold mb-8 text-center">{{ 'assurance.section_titre_2'|trans }}</h2>
  77.             </div>
  78.             <div class="max-w-3xl mx-auto space-y-6 text-lg">
  79.                 <p>{{ 'assurance.obligation_title'|trans|raw }}</p>
  80.                 <p>{{ 'assurance.obligation_title_2'|trans }}</p>
  81.                 <ul class="list-disc pl-6 space-y-3">
  82.                     <li>{{ 'assurance.obligation_list_1'|trans }}</li>
  83.                     <li>{{ 'assurance.obligation_list_2'|trans }}</li>
  84.                 </ul>
  85.                 <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-6">
  86.                     <p class="font-semibold">✔ {{ 'assurance.obligation_tip_title'|trans }}</p>
  87.                     <p>{{ 'assurance.obligation_tip_text'|trans|raw }}</p>
  88.                 </div>
  89.             </div>
  90.         </div>
  91.     </section>
  93.     <section class="py-16">
  94.         <div class="container mx-auto px-4">
  95.             <div class="max-w-3xl mx-auto">
  96.                 <h2 class="text-3xl font-bold mb-8 text-center">{{ 'assurance.section_titre_3'|trans }}</h2>
  97.                 <div class="space-y-6 text-lg">
  98.                     <p>{{ 'assurance.avantages_intro'|trans }}</p>
  99.                     <ul class="list-disc pl-6 space-y-3">
  100.                         <li>{{ 'assurance.avantage_1'|trans|raw }}</li>
  101.                         <li>{{ 'assurance.avantage_2'|trans|raw }}</li>
  102.                         <li>{{ 'assurance.avantage_3'|trans }}</li>
  103.                     </ul>
  104.                     <p>{{ 'assurance.avantages_conclusion'|trans }}</p>
  105.                     <p>{{ 'assurance.avantages_conclusion2'|trans|raw }}</p>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </section>
  111.     <section class="py-16 bg-gray-100">
  112.         <div class="container mx-auto px-4">
  113.             <div class="max-w-3xl mx-auto">
  114.                 <h2 class="text-3xl font-bold mb-8 text-center">{{ 'assurance.section_titre_4'|trans }}</h2>
  115.                 <div class="space-y-6 text-lg">
  116.                     <div>
  117.                         <h3 class="text-2xl font-semibold mb-4">{{ 'assurance.conseil_1_title'|trans }}</h3>
  118.                         <ul class="list-disc pl-6 space-y-3">
  119.                             <li>{{ 'assurance.garanties'|trans }}</li>
  120.                             <li>{{ 'assurance.franchise'|trans }}</li>
  121.                             <li>{{ 'assurance.exclusions'|trans }}</li>
  122.                         </ul>
  123.                     </div>
  124.                     <div>
  125.                         <h3 class="text-2xl font-semibold mb-4">{{ 'assurance.conseil_2_title'|trans }}</h3>
  126.                         <ul class="list-disc pl-6 space-y-3">
  127.                             <li>{{ 'assurance.incident'|trans }}</li>
  128.                             <li>{{ 'assurance.delais'|trans }}</li>
  129.                             <li>{{ 'assurance.preuves'|trans }}</li>
  130.                         </ul>
  131.                     </div>
  132.                     <div>
  133.                         <h3 class="text-2xl font-semibold mb-4">{{ 'assurance.conseil_3_title'|trans }}</h3>
  134.                         <ul class="list-disc pl-6 space-y-3">
  135.                             <li>{{ 'assurance.colocataire'|trans }}</li>
  136.                             <li>{{ 'assurance.depart'|trans }}</li>
  137.                         </ul>
  138.                     </div>
  139.                 </div>
  140.                 <div class="text-center mt-12">
  141.                     <a href="https://souscription.etudassur.fr/?origine=SIWD" class="inline-block bg-yellow-400 text-black font-semibold px-8 py-4 rounded-lg hover:bg-yellow-500 transition" target="_blank" rel="noopener noreferrer">
  142.                         {{ 'assurance.btn_start'|trans }}
  143.                     </a>
  144.                 </div>
  145.             </div>
  146.         </div>
  147.     </section>
  149.     <section class="py-16 bg-gray-100">
  150.         <div class="container mx-auto px-4">
  151.             <div class="max-w-3xl mx-auto text-center">
  152.                 <h2 class="text-3xl font-bold mb-8">{{ 'assurance.section_5_title'|trans }}</h2>
  153.                 <div class="space-y-6 text-lg">
  154.                     <p>{{ 'assurance.conclusion_1'|trans|raw }}</p>
  155.                     <p>{{ 'assurance.conclusion_2'|trans|raw }}</p>
  156.                 </div>
  157.                 <div class="mt-12 text-center">
  158.                     <p class="mb-2 text-gray-700 font-medium">
  159.                         {{ 'assurance.partenaire_intro'|trans }}
  160.                     </p>
  161.                     <img src="/images/logo-etudassur.png" alt="Logo Etudassur" class="mb-4 mx-auto w-32">
  162.                     <a href="https://souscription.etudassur.fr/?origine=SIWD" class="inline-block bg-yellow-400 text-black font-semibold px-8 py-4 rounded-lg hover:bg-yellow-500 transition" target="_blank" rel="noopener noreferrer">
  163.                         {{ 'assurance.btn_quote'|trans }}
  164.                     </a>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.     </section>
  170.     <div id="connectModal" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  171.         <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
  172.             <p class="text-lg font-semibold mb-4">{{ 'assurance.modal.choose'|trans }}</p>
  173.             <button onclick="window.location.href='{{ path('app_login_site') }}'" class="bg-yellow-400 text-black px-4 py-2 rounded-lg font-semibold hover:bg-yellow-500 transition mb-2 w-full">
  174.                 {{ 'assurance.modal.login'|trans }}
  175.             </button>
  176.             <button onclick="window.location.href='{{ path('app_register') }}'" class="bg-yellow-400 text-black px-4 py-2 rounded-lg font-semibold hover:bg-yellow-500 transition w-full">
  177.                 {{ 'assurance.modal.register'|trans }}
  178.             </button>
  179.         </div>
  180.     </div>
  181. {% endblock %}
  183. {% block javascripts %}
  184. <script>
  185. function toggleFaq(button) {
  186.     const content = button.nextElementSibling;
  187.     content.classList.toggle('hidden');
  188.     const icon = button.querySelector('i');
  189.     icon.classList.toggle('fa-chevron-down');
  190.     icon.classList.toggle('fa-chevron-up');
  191. }
  193. document.addEventListener('DOMContentLoaded', function () {
  194.     const openModalElements = document.querySelectorAll('#openModalLink1, #openModalLinkMobile');
  195.     const connectModal = document.getElementById('connectModal');
  197.     if (openModalElements.length > 0 && connectModal) {
  198.         openModalElements.forEach(element => {
  199.             element.addEventListener('click', function (event) {
  200.                 event.preventDefault();
  201.                 connectModal.classList.remove('hidden');
  202.             });
  203.         });
  205.         connectModal.addEventListener('click', function (event) {
  206.             if (event.target === connectModal) {
  207.                 connectModal.classList.add('hidden');
  208.             }
  209.         });
  211.         connectModal.querySelector('.bg-white').addEventListener('click', function (event) {
  212.             event.stopPropagation();
  213.         });
  214.     }
  215. });
  216. </script>
  217. {% endblock %}