templates/services/index.html.twig line 1

  1. {% extends 'base_footer.html.twig' %}
  3. {% block title %}{{ 'services.title'|trans }}{% endblock %}
  5. {% block body %}
  6.     <!-- En-tête -->
  7.     <div class="bg-gray-200 py-16 mb-8 text-center w-full">
  8.         <div class="container mx-auto px-4">
  9.             <h1 class="text-3xl font-bold">{{ 'services.header'|trans }}</h1>
  10.         </div>
  11.     </div>
  13.     <!-- Section Simplifiez la recherche de logement -->
  14.     <div class="py-16 mb-8 text-center">
  15.         <div class="container mx-auto px-4">
  16.             <h2 class="text-3xl font-bold mb-6 max-w-4xl mx-auto">{{ 'services.simplified_solution'|trans }}</h2>
  17.             <div class="max-w-3xl mx-auto space-y-4">
  18.                 <p>{{ 'services.simplified_solution_text_1'|trans|raw }}</p>
  19.                 <p>{{ 'services.simplified_solution_text_2'|trans|raw }}</p>
  20.             </div>
  21.         </div>
  22.     </div>
  24.     <div class="flex justify-center">
  25.     <hr class="my-6 border-gray-300 w-1/2">
  26. </div>
  28.     <!-- Section Locataires : Trouver un logement depuis l'étranger -->
  29.     <div class="py-16 mb-8 bg-white w-full">
  30.         <div class="container mx-auto px-4">
  31.             <div class="flex flex-col md:flex-row gap-12">
  32.                 <div class="md:w-1/2 flex items-center">
  33.                     <h2 class="text-3xl font-bold">{{ 'services.tenants_section_title'|trans }}</h2>
  34.                 </div>
  35.                 <div class="md:w-1/2">
  36.                     <p class="mb-6">{{ 'services.tenants_section_text'|trans }}</p>
  37.                     <ul class="list-disc pl-6 space-y-3">
  38.                         <li><strong>{{ 'services.simplified_search'|trans }}</strong> : {{ 'services.simplified_search_description'|trans }}</li>
  39.                         <li><strong>{{ 'services.accommodation_prereservation'|trans }}</strong> : {{ 'services.accommodation_prereservation_description'|trans }}</li>
  40.                         <li><strong>{{ 'services.final_booking'|trans }}</strong> : {{ 'services.final_booking_description'|trans }}</li>
  41.                         <li><strong>{{ 'services.dedicated_support'|trans }}</strong> : {{ 'services.dedicated_support_description'|trans }}</li>
  42.                     </ul>
  43.                     <br/>
  44.                     <h3 class="font-semibold mb-3">{{ 'services.useful_services'|trans }}</h3>
  45.                     <ul class="list-disc pl-6 space-y-3">
  46.                         <li><strong>{{ 'services.irrevocable_transfer_certificate'|trans }}</strong> : {{ 'services.irrevocable_transfer_certificate_description'|trans }}</li>
  47.                         <li><strong>{{ 'services.home_insurance'|trans }}</strong> : {{ 'services.home_insurance_description'|trans }}</li>
  48.                     </ul> <br>
  49.                     <div class="flex justify-center"> <br>
  50.                         {% if app.user %}
  51.                             {% if app.user.asRole('ROLE_TENANT') %}
  52.                                 <a href="{{ path('tenant_home') }}" class="inline-block bg-yellow-400 text-black font-semibold px-8 py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  53.                                     {{ 'services.start_search'|trans }}
  54.                                 </a>
  55.                             {% elseif app.user.asRole('ROLE_LESSOR') or app.user.asRole('ROLE_LESSOR_RESIDENT') %}
  56.                                 <a href="{{ path('lessor-home') }}" class="inline-block bg-yellow-400 text-black font-semibold px-8 py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  57.                                     {{ 'services.start_search'|trans }}
  58.                                 </a>
  59.                             {% endif %}
  60.                         {% else %}
  61.                             <button id="openModalLink1" class="inline-block bg-yellow-400 text-black font-semibold px-8 py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  62.                                 {{ 'services.start_search'|trans }}
  63.                             </button>
  64.                         {% endif %}
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.         </div>
  69.     </div>
  70.     <div class="flex justify-center">
  71.     <hr class="my-6 border-gray-300 w-1/2">
  72. </div>
  74.     <!-- Section Bailleurs : Gestion simplifiée -->
  75.     <div class="py-16 mb-8 bg-white w-full">
  76.         <div class="container mx-auto px-4">
  77.             <div class="flex flex-col md:flex-row gap-12">
  78.                 <div class="md:w-1/2 flex items-center">
  79.                     <h2 class="text-3xl font-bold">{{ 'services.landlords_section_title'|trans }}</h2>
  80.                 </div>
  81.                 <div class="md:w-1/2">
  82.                     <p class="mb-6">{{ 'services.landlords_section_text'|trans|raw }}</p>
  83.                     <ul class="list-disc pl-6 space-y-3">
  84.                         <li><strong>{{ 'services.detailed_listings'|trans }}</strong> : {{ 'services.detailed_listings_description'|trans }}</li>
  85.                         <li><strong>{{ 'services.complete_applications'|trans }}</strong> : {{ 'services.complete_applications_description'|trans }}</li>
  86.                         <li><strong>{{ 'services.simplified_selection'|trans }}</strong> : {{ 'services.simplified_selection_description'|trans }}</li>
  87.                         <li><strong>{{ 'services.dedicated_support'|trans }}</strong> : {{ 'services.dedicated_support_description'|trans }}</li>
  88.                     </ul>
  89.                     <br/>
  90.                     <div class="flex justify-center">
  91.                         {% if app.user %}
  92.                             {% if app.user.asRole('ROLE_LESSOR') or app.user.asRole('ROLE_LESSOR_RESIDENT') %}
  93.                                 <a href="{{ path('building_temp_step1', {'newBuilding': true}) }}" class="inline-block bg-yellow-400 text-black font-semibold px-8 py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  94.                                     {{ 'services.create_listing'|trans }}
  95.                                 </a>
  96.                             {% elseif app.user.asRole('ROLE_TENANT') %}
  97.                                 <button id="openPopLink1" class="inline-block bg-yellow-400 text-black font-semibold px-8 py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  98.                                     {{ 'services.create_listing'|trans }}
  99.                                 </button>
  100.                             {% else %}
  101.                                 <button id="openModalLink2" class="inline-block bg-yellow-400 text-black font-semibold px-8 py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  102.                                     {{ 'services.create_listing'|trans }}
  103.                                 </button>
  104.                             {% endif %}
  105.                         {% else %}
  106.                             <button id="openModalLink2" class="inline-block bg-yellow-400 text-black font-semibold px-8 py-4 rounded-lg hover:bg-yellow-500 transition-colors">
  107.                                 {{ 'services.create_listing'|trans }}
  108.                             </button>
  109.                         {% endif %}
  110.                     </div>
  111.                 </div>
  112.             </div>
  113.         </div>
  114.     </div>
  116.     <!-- Modal de connexion/inscription -->
  117.     <div id="connectModal" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  118.         <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
  119.             <p class="text-lg font-semibold mb-4">{{ 'services.choose_option'|trans }}</p>
  120.             <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">
  121.                 {{ 'services.login'|trans }}
  122.             </button>
  123.             <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">
  124.                 {{ 'services.register'|trans }}
  125.             </button>
  126.         </div>
  127.     </div>
  129.     <!-- Modal2 -->
  130.     <div id="connectPop" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  131.         <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
  132.             <p class="text-lg font-semibold mb-4">{{ 'services.please_login_as_landlord'|trans }}</p>
  133.             <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">
  134.                 {{ 'services.login'|trans }}
  135.             </button>
  136.         </div>
  137.     </div>
  138. {% endblock %}
  140. {% block javascripts %}
  141. <script>
  142. function toggleFaq(button) {
  143.     const content = button.nextElementSibling;
  144.     content.classList.toggle('hidden');
  145. }
  147. document.addEventListener('DOMContentLoaded', function () {
  148.     console.log('DOM fully loaded and parsed');
  150.     // Gestion du modal de connexion/inscription
  151.     const openModalElements = document.querySelectorAll('#openModalLink1, #openModalLink2');
  152.     const connectModal = document.getElementById('connectModal');
  154.     if (openModalElements.length > 0 && connectModal) {
  155.         openModalElements.forEach(element => {
  156.             element.addEventListener('click', function (event) {
  157.                 event.preventDefault();
  158.                 connectModal.classList.remove('hidden');
  159.             });
  160.         });
  162.         connectModal.addEventListener('click', function (event) {
  163.             if (event.target === connectModal) {
  164.                 connectModal.classList.add('hidden');
  165.             }
  166.         });
  168.         connectModal.querySelector('.bg-white').addEventListener('click', function (event) {
  169.             event.stopPropagation();
  170.         });
  171.     } else {
  172.         console.log('openModalElements or connectModal not found');
  173.     }
  175.     const openPopElements = document.querySelectorAll('#openPopLink1, #openPopLink2');
  176.     const connectPop = document.getElementById('connectPop');
  178.     if (openPopElements.length > 0 && connectPop) {
  179.         openPopElements.forEach(element => {
  180.             element.addEventListener('click', function (event) {
  181.                 event.preventDefault();
  182.                 connectPop.classList.remove('hidden');
  183.             });
  184.         });
  186.         connectPop.addEventListener('click', function (event) {
  187.             if (event.target === connectPop) {
  188.                 connectPop.classList.add('hidden');
  189.             }
  190.         });
  192.         connectPop.querySelector('.bg-white').addEventListener('click', function (event) {
  193.             event.stopPropagation();
  194.         });
  195.     } else {
  196.         console.log('openPopElements or connectPop not found');
  197.     }
  198. });
  199. </script>
  200. {% endblock %}