templates/attestation/index.html.twig line 1

  1. {% extends 'base_footer.html.twig' %}
  2. {% block title %}{{ 'attestationp.titre'|trans }}{% endblock %}
  3. {% block body %}
  4. {% set faq_items = [
  5.     {
  6.         'question': 'attestationp.faq.question1',
  7.         'answer': 'attestationp.faq.reponse1'
  8.     },
  9.     {
  10.         'question': 'attestationp.faq.question2',
  11.         'answer': 'attestationp.faq.reponse2'
  12.     },
  13.     {
  14.         'question': 'attestationp.faq.question3',
  15.         'answer': 'attestationp.faq.reponse3'
  16.     },
  17.     {
  18.         'question': 'attestationp.faq.question4',
  19.         'answer': 'attestationp.faq.reponse4'
  20.     },
  21.     {
  22.         'question': 'attestationp.faq.question5',
  23.         'answer': 'attestationp.faq.reponse5'
  24.     }
  25. ] %}
  26. <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  27.     <!-- En-tête -->
  28.     <div class="bg-gray-200 py-12 md:py-16 mb-8 text-center w-full">
  29.         <h1 class="text-2xl md:text-3xl font-bold px-4">{{ 'attestationp.titre'|trans }}</h1>
  30.     </div>
  31.     <!-- Section Trouver un logement -->
  32.     <div class="py-12 md:py-16 mb-8 text-center">
  33.         <h2 class="text-2xl md:text-3xl font-bold mb-6 max-w-4xl mx-auto px-4">{{ 'attestationp.trouver_logement'|trans }}</h2>
  34.         <div class="max-w-3xl mx-auto space-y-4 px-4">
  35.             <p>{{ 'attestationp.trouver_logement_description'|trans }}</p>
  36.             <p>{{ 'attestationp.trouver_logement_description1'|trans }} <strong>{{ 'attestationp.trouver_logement_description2'|trans }}</strong> {{ 'attestationp.trouver_logement_description3'|trans }} <strong>{{ 'attestationp.trouver_logement_description4'|trans }}</strong> {{ 'attestationp.trouver_logement_description5'|trans }}</p>
  37.         </div>
  38.     </div>
  39.     <!-- Section Réservation anticipée -->
  40.     <div class="bg-gray-200 py-12 md:py-16 mb-8 w-full">
  41.         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  42.             <div class="flex flex-col lg:flex-row gap-8">
  43.                 <div class="lg:w-1/2">
  44.                     <h2 class="text-2xl md:text-3xl font-bold mb-6">{{ 'attestationp.reservation_anticipee'|trans }}</h2>
  45.                     <div class="space-y-4">
  46.                         <p>{{ 'attestationp.early_reservation_1'|trans }} <strong>{{ 'attestationp.early_reservation_1_2'|trans }}</strong></p>
  47.                         <p>{{ 'attestationp.early_reservation_2'|trans }} <strong>{{ 'attestationp.early_reservation_2_2'|trans }}</strong> {{ 'attestationp.early_reservation_2_3'|trans }} <strong>{{ 'attestationp.early_reservation_2_4'|trans }}</strong></p>
  48.                         <p>{{ 'attestationp.early_reservation_3'|trans }} <strong>{{ 'attestationp.early_reservation_3_1'|trans }}</strong></p>
  49.                         <p>{{ 'attestationp.early_reservation_4'|trans }}</p>
  50.                     </div>
  51.                 </div>
  52.                 <div class="lg:w-1/2 flex justify-center lg:justify-end">
  53.                     <div class="bg-white p-6 md:p-8 rounded-lg shadow-md max-w-md w-full">
  54.                         <p>💡 {{ 'attestationp.reservation_anticipee_description_2'|trans }} <strong>{{ 'attestationp.reservation_anticipee_description_3'|trans }}</strong> {{ 'attestationp.reservation_anticipee_description_4'|trans }}</p>
  55.                     </div>
  56.                 </div>
  57.             </div>
  58.         </div>
  59.     </div>
  60.     <!-- Section Pourquoi Roomlers -->
  61.     <div class="py-12 md:py-16 mb-8">
  62.         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  63.             <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center">{{ 'attestationp.pourquoi_roomlers'|trans }}</h2>
  64.             <p class="text-center max-w-3xl mx-auto mb-8 md:mb-12 px-4">
  65.                 {{ 'attestationp.pourquoi_roomlers_description'|trans }} <strong>{{ 'attestationp.pourquoi_roomlers_description1'|trans }}</strong> {{ 'attestationp.pourquoi_roomlers_description2'|trans }} <strong>{{ 'attestationp.pourquoi_roomlers_description3'|trans }}</strong> {{ 'attestationp.pourquoi_roomlers_description4'|trans }} <strong>{{ 'attestationp.pourquoi_roomlers_description5'|trans }}</strong>
  66.             </p>
  67.             <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
  68.                 <div class="bg-gray-100 p-6 rounded-lg">
  69.                     <p class="font-bold">{{ 'attestationp.etudiants_internationaux'|trans }}</p>
  70.                 </div>
  71.                 <div class="bg-gray-100 p-6 rounded-lg">
  72.                     <p class="font-bold">{{ 'attestationp.logements_verifies'|trans }}</p>
  73.                 </div>
  74.                 <div class="bg-gray-100 p-6 rounded-lg">
  75.                     <p class="font-bold">{{ 'attestationp.accompagnement_complet'|trans }}</p>
  76.                 </div>
  77.             </div>
  78.         </div>
  79.     </div>
  80.     <!-- Section Comment obtenir -->
  81.     <div class="bg-gray-200 py-12 md:py-16 mb-8 w-full">
  82.     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  83.         <div class="flex flex-col lg:flex-row gap-8">
  84.             <div class="lg:w-1/3 flex items-center"> <!-- Ajout de flex et items-center pour centrer verticalement -->
  85.                 <h2 class="text-2xl md:text-3xl font-bold mb-6">{{ 'attestationp.comment_obtenir'|trans }}</h2>
  86.             </div>
  87.             <div class="lg:w-2/3">
  88.                 <div class="space-y-6">
  89.                     <p>{{ 'attestationp.comment_obtenir_description'|trans }} <strong>{{ 'attestationp.comment_obtenir_description1'|trans }}</strong> {{ 'attestationp.comment_obtenir_description2'|trans }}</p>
  90.                     <div class="space-y-6">
  91.                         <div class="bg-white p-6 rounded-lg shadow-sm">
  92.                             <h3 class="font-bold text-lg mb-2">{{ 'attestationp.etapes.etape1'|trans }}</h3>
  93.                             <p>{{ 'attestationp.etapes.etape1_description'|trans }}</p>
  94.                         </div>
  95.                         <div class="bg-white p-6 rounded-lg shadow-sm">
  96.                             <h3 class="font-bold text-lg mb-2">{{ 'attestationp.etapes.etape2'|trans }}</h3>
  97.                             <p>{{ 'attestationp.etapes.etape2_description'|trans }}</p>
  98.                         </div>
  99.                         <div class="bg-white p-6 rounded-lg shadow-sm">
  100.                             <h3 class="font-bold text-lg mb-2">{{ 'attestationp.etapes.etape3'|trans }}</h3>
  101.                             <p>{{ 'attestationp.etapes.etape3_description'|trans }}</p>
  102.                         </div>
  103.                     </div>
  104.                     <div class="text-center mt-8 md:mt-12">
  105.                         {% if app.user %}
  106.                             {% if app.user.asRole('ROLE_TENANT') %}
  107.                                 <a href="{{ path('app_user_generateattestation') }}" class="inline-block bg-yellow-400 text-black font-semibold px-6 py-3 md:px-8 md:py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  108.                                     {{ 'attestationp.demarrer_maintenant'|trans }}
  109.                                 </a>
  110.                             {% elseif app.user.asRole('ROLE_AGENT') or app.user.asRole('ROLE_SUPER_AGENT') %}
  111.                                 <a href="{{ path('app_user_generateattestation') }}" class="inline-block bg-yellow-400 text-black font-semibold px-6 py-3 md:px-8 md:py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  112.                                     {{ 'attestationp.demarrer_maintenant'|trans }}
  113.                                 </a>
  114.                             {% elseif app.user.asRole('ROLE_LESSOR') or app.user.asRole('ROLE_LESSOR_RESIDENT') %}
  115.                                 <button id="openPopLink1" class="inline-block bg-yellow-400 text-black font-semibold px-6 py-3 md:px-8 md:py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  116.                                     {{ 'attestationp.demarrer_prereservation'|trans }}
  117.                                 </button>
  118.                             {% else %}
  119.                                 <button id="openModalLink1" class="inline-block bg-yellow-400 text-black font-semibold px-6 py-3 md:px-8 md:py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  120.                                     {{ 'attestationp.demarrer_maintenant'|trans }}
  121.                                 </button>
  122.                             {% endif %}
  123.                         {% else %}
  124.                             <button id="openModalLink1" class="inline-block bg-yellow-400 text-black font-semibold px-6 py-3 md:px-8 md:py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  125.                                 {{ 'attestationp.demarrer_maintenant'|trans }}
  126.                             </button>
  127.                         {% endif %}
  128.                     </div>
  129.                 </div>
  130.             </div>
  131.         </div>
  132.     </div>
  133. </div>
  135.     <!-- Section FAQ -->
  136.     <div class="py-12 md:py-16 mb-8">
  137.         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  138.             <div class="flex flex-col lg:flex-row lg:items-center gap-8">
  139.                 <!-- Titre à gauche sur desktop, centré verticalement -->
  140.                 <div class="lg:w-1/3 lg:flex lg:items-center lg:justify-end">
  141.                     <h2 class="text-2xl md:text-3xl font-bold text-center lg:text-right lg:pr-8">
  142.                         {{ 'attestationp.rep'|trans }}<br/> {{ 'attestationp.question'|trans }}
  143.                     </h2>
  144.                 </div>
  145.                 <!-- Questions à droite sur desktop -->
  146.                 <div class="lg:w-2/3 space-y-4">
  147.                     {% for item in faq_items %}
  148.                         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative">
  149.                             <button class="faq-question flex items-center justify-between w-full p-4 font-semibold text-left transition duration-300 ease-in-out hover:bg-gray-100">
  150.                                 <span class="text-left">{{ item.question|trans }}</span>
  151.                                 <svg class="faq-icon w-5 h-5 text-gray-600 transition-transform transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  152.                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  153.                                 </svg>
  154.                             </button>
  155.                             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  156.                                 <div class="p-4 text-gray-700">{{ item.answer|trans }}</div>
  157.                             </div>
  158.                         </div>
  159.                     {% endfor %}
  160.                 </div>
  161.             </div>
  162.         </div>
  163.     </div>
  164.     <!-- Section Prêt à commencer -->
  165.     <div class="bg-gray-200 py-12 md:py-16 w-full">
  166.         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
  167.             <h2 class="text-2xl md:text-3xl font-bold mb-6">{{ 'attestationp.pret_commencer'|trans }}</h2>
  168.             <p class="max-w-3xl mx-auto mb-8 md:mb-12 px-4">
  169.                 {{ 'attestationp.pret_commencer_description'|trans }} <strong>{{ 'attestationp.pret_commencer_description1'|trans }}</strong> {{ 'attestationp.pret_commencer_description2'|trans }} <strong>{{ 'attestationp.pret_commencer_description3'|trans }}</strong>
  170.             </p>
  171.             {% if app.user %}
  172.                 {% if app.user.asRole('ROLE_TENANT') %}
  173.                     <a href="{{ path('app_user_generateattestation') }}" class="inline-block bg-yellow-400 text-black font-semibold px-6 py-3 md:px-8 md:py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  174.                         {{ 'attestationp.demarrer_prereservation'|trans }}
  175.                     </a>
  176.                 {% elseif app.user.asRole('ROLE_AGENT') or app.user.asRole('ROLE_SUPER_AGENT') %}
  177.                     <a href="{{ path('app_user_generateattestation') }}" class="inline-block bg-yellow-400 text-black font-semibold px-6 py-3 md:px-8 md:py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  178.                         {{ 'attestationp.demarrer_prereservation'|trans }}
  179.                     </a>
  180.                 {% elseif app.user.asRole('ROLE_LESSOR') or app.user.asRole('ROLE_LESSOR_RESIDENT') %}
  181.                     <button id="openPopLink2" class="inline-block bg-yellow-400 text-black font-semibold px-6 py-3 md:px-8 md:py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  182.                         {{ 'attestationp.demarrer_prereservation'|trans }}
  183.                     </button>
  184.                 {% else %}
  185.                     <button id="openModalLink2" class="inline-block bg-yellow-400 text-black font-semibold px-6 py-3 md:px-8 md:py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  186.                         {{ 'attestationp.demarrer_prereservation'|trans }}
  187.                     </button>
  188.                 {% endif %}
  189.             {% else %}
  190.                 <button id="openModalLink2" class="inline-block bg-yellow-400 text-black font-semibold px-6 py-3 md:px-8 md:py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  191.                     {{ 'attestationp.demarrer_prereservation'|trans }}
  192.                 </button>
  193.             {% endif %}
  194.         </div>
  195.     </div>
  196. </div>
  197. <!-- Modal de connexion/inscription -->
  198. <div id="connectModal" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  199.     <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full mx-4 text-center">
  200.         <p class="text-lg font-semibold mb-4">{{ 'attestationp.choisissez_option'|trans }}</p>
  201.         <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">
  202.             {{ 'attestationp.connexion'|trans }}
  203.         </button>
  204.         <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">
  205.             {{ 'attestationp.inscription'|trans }}
  206.         </button>
  207.     </div>
  208. </div>
  209. <!-- Modal2-->
  210. <div id="connectPop" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  211.     <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full mx-4 text-center">
  212.         <p class="text-lg font-semibold mb-4">{{ 'attestationp.veuillez_connexion'|trans }}</p>
  213.         <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">
  214.             {{ 'attestationp.connexion'|trans }}
  215.         </button>
  216.     </div>
  217. </div> <br> <br>
  218. {% endblock %}
  219. {% block javascripts %}
  220. <script>
  221. document.addEventListener('DOMContentLoaded', function () {
  222.     // Gestion du modal de connexion/inscription
  223.     const openModalElements = document.querySelectorAll('#openModalLink1, #openModalLink2');
  224.     const connectModal = document.getElementById('connectModal');
  225.     if (openModalElements.length > 0 && connectModal) {
  226.         openModalElements.forEach(element => {
  227.             element.addEventListener('click', function (event) {
  228.                 event.preventDefault();
  229.                 connectModal.classList.remove('hidden');
  230.             });
  231.         });
  232.         connectModal.addEventListener('click', function (event) {
  233.             if (event.target === connectModal) {
  234.                 connectModal.classList.add('hidden');
  235.             }
  236.         });
  237.         connectModal.querySelector('.bg-white').addEventListener('click', function (event) {
  238.             event.stopPropagation();
  239.         });
  240.     }
  241.     const openPopElements = document.querySelectorAll('#openPopLink1, #openPopLink2');
  242.     const connectPop = document.getElementById('connectPop');
  243.     if (openPopElements.length > 0 && connectPop) {
  244.         openPopElements.forEach(element => {
  245.             element.addEventListener('click', function (event) {
  246.                 event.preventDefault();
  247.                 connectPop.classList.remove('hidden');
  248.             });
  249.         });
  250.         connectPop.addEventListener('click', function (event) {
  251.             if (event.target === connectPop) {
  252.                 connectPop.classList.add('hidden');
  253.             }
  254.         });
  255.         connectPop.querySelector('.bg-white').addEventListener('click', function (event) {
  256.             event.stopPropagation();
  257.         });
  258.     }
  259.     // Gestion de l'accordéon FAQ
  260.     const faqQuestions = document.querySelectorAll('.faq-question');
  261.     faqQuestions.forEach(question => {
  262.         question.addEventListener('click', () => {
  263.             const answer = question.parentElement.querySelector('.faq-answer');
  264.             const icon = question.querySelector('.faq-icon');
  265.             // Fermer toutes les autres réponses
  266.             document.querySelectorAll('.faq-answer').forEach(item => {
  267.                 if (item !== answer) {
  268.                     item.classList.remove('max-h-[500px]');
  269.                     item.previousElementSibling.querySelector('.faq-icon').classList.remove('rotate-180');
  270.                     item.previousElementSibling.classList.remove('bg-gray-100');
  271.                 }
  272.             });
  273.             // Basculer l'état de la réponse cliquée
  274.             if (answer.classList.contains('max-h-[500px]')) {
  275.                 answer.classList.remove('max-h-[500px]');
  276.                 icon.classList.remove('rotate-180');
  277.                 question.classList.remove('bg-gray-100');
  278.             } else {
  279.                 answer.classList.add('max-h-[500px]');
  280.                 icon.classList.add('rotate-180');
  281.                 question.classList.add('bg-gray-100');
  282.             }
  283.         });
  284.     });
  285. });
  286. </script>
  287. <style>
  288. .faq-answer {
  289.     transition: max-height 0.3s ease-out;
  290.     overflow: hidden;
  291. }
  292. .faq-icon {
  293.     transition: transform 0.3s ease;
  294. }
  295. .rotate-180 {
  296.     transform: rotate(180deg);
  297. }
  298. @media (max-width: 1023px) {
  299.     .lg\:flex-row {
  300.         flex-direction: column;
  301.     }
  302.     .lg\:w-1\/3, .lg\:w-2\/3, .lg\:w-1\/2 {
  303.         width: 100%;
  304.     }
  305. }
  306. </style>
  307. {% endblock %}