templates/qui/index.html.twig line 1

  1. {% extends 'base_footer.html.twig' %}
  3. {% block title %}{{ 'about.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">{{ 'about.header'|trans }}</h1>
  10.         </div>
  11.     </div>
  13.     <!-- Section Roomlers -->
  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">{{ 'about.roomlers_section'|trans }}</h2>
  17.             <div class="max-w-3xl mx-auto space-y-4">
  18.                 <p>{{ 'about.roomlers_text'|trans }}</p>
  19.             </div>
  20.         </div>
  21.     </div>
  23.     <!-- Section Qui sommes-nous -->
  24.     <div class="bg-gray-200 py-16 mb-8 w-full">
  25.         <div class="container mx-auto px-4 flex flex-col md:flex-row gap-12">
  26.             <div class="md:w-1/2">
  27.                 <h2 class="text-3xl font-bold mb-8">{{ 'about.who_are_we'|trans }}</h2>
  28.                 <div class="space-y-6">
  29.                     <p>{{ 'about.who_are_we_text_1'|trans }}</p>
  30.                     <p>{{ 'about.who_are_we_text_2'|trans }}</p>
  31.                     <p>{{ 'about.who_are_we_text_3'|trans }}</p>
  32.                 </div>
  33.             </div>
  34.             <div class="md:w-1/2 flex justify-end">
  35.                 <div class="bg-white p-8 rounded-lg shadow-md max-w-md">
  36.                     <p>{{ 'about.who_are_we_box'|trans }}</p>
  37.                     <img class="w-3/4 h-3/4 mt-4 pb-4 mx-auto block" src="{{ absolute_url(asset('images/site/objectif-roomlers.png')) }}" alt="objectif-roomlers">
  38.                 </div>
  39.             </div>
  40.         </div>
  41.     </div>
  43.     <!-- Section Notre mission -->
  44.     <div class="py-16 mb-8">
  45.         <div class="container mx-auto px-4">
  46.             <h2 class="text-3xl font-bold mb-6">{{ 'about.our_mission'|trans }}</h2>
  47.             <p class="text-lg mb-8">
  48.                 {{ 'about.our_mission_text'|trans }}
  49.             </p>
  50.         </div>
  51.     </div>
  53.     <!-- Section Côté bailleurs -->
  54.     <div class="py-16 mb-8 bg-gray-100 w-full">
  55.         <div class="container mx-auto px-4">
  56.             <div class="flex flex-col md:flex-row gap-12">
  57.                 <div class="md:w-1/2">
  58.                     <h2 class="text-3xl font-bold mb-6">{{ 'about.landlord_side'|trans }}</h2>
  59.                     <p class="text-lg mb-4">
  60.                         {{ 'about.landlord_side_text'|trans }}
  61.                     </p>
  62.                     <ul class="list-disc text-lg ml-8">
  63.                         <li>{{ 'about.landlord_side_list_1'|trans }}</li>
  64.                         <li>{{ 'about.landlord_side_list_2'|trans }}</li>
  65.                         <li>{{ 'about.landlord_side_list_3'|trans }}</li>
  66.                     </ul>
  67.                 </div>
  68.                 <div class="md:w-1/2 flex justify-end">
  69.                     <div class="bg-white p-8 rounded-lg shadow-md max-w-md">
  70.                         {# <p>{{ 'about.landlord_side_box'|trans }}</p> #}
  71.                         <img class="mt-4 mx-auto block" src="{{ absolute_url(asset('images/site/bailleur-roomlers.png')) }}" alt="bailleur-roomlers">
  72.                     </div>
  73.                 </div>
  74.             </div>
  75.             <div class="text-center mt-12">
  76.                 <a href="{{ path('services') }}" class="inline-block bg-yellow-400 text-black font-semibold px-8 py-4 rounded-lg hover:bg-yellow-500 transition">
  77.                     {{ 'about.discover_services'|trans }}
  78.                 </a>
  79.             </div>
  80.         </div>
  81.     </div>
  83.     <!-- Section Côté locataires -->
  84.     <div class="py-16 mb-8">
  85.         <div class="container mx-auto px-4">
  86.             <div class="flex flex-col md:flex-row gap-12">
  87.                 <div class="md:w-1/2">
  88.                     <h2 class="text-3xl font-bold mb-6">{{ 'about.tenant_side'|trans }}</h2>
  89.                     <p class="text-lg mb-4">
  90.                         {{ 'about.tenant_side_text'|trans }}
  91.                     </p>
  92.                     <ul class="list-disc text-lg ml-8">
  93.                         <li>{{ 'about.tenant_side_list_1'|trans }}</li>
  94.                         <li>{{ 'about.tenant_side_list_2'|trans }}</li>
  95.                         <li>{{ 'about.tenant_side_list_3'|trans }}</li>
  96.                         <li>{{ 'about.tenant_side_list_4'|trans }}</li>
  97.                         <li>{{ 'about.tenant_side_list_5'|trans }}</li>
  98.                         <li>{{ 'about.tenant_side_list_6'|trans }}</li>
  99.                     </ul>
  100.                 </div>
  101.                 <div class="md:w-1/2 flex justify-end">
  102.                     <div class="bg-white p-8 rounded-lg shadow-md max-w-md">
  103.                         {# <p>{{ 'about.tenant_side_box'|trans }}</p> #}
  104.                         <img class="mx-auto block" style="margin-top: 55px" src="{{ absolute_url(asset('images/site/locataire-roomlers.png')) }}" alt="locataire-roomler">                        
  105.                     </div>
  106.                 </div>
  107.             </div>
  108.             <div class="text-center mt-12">
  109.                 {% if app.user %}
  110.                     {% if app.user.asRole('ROLE_TENANT') %}
  111.                         <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">
  112.                             {{ 'about.start_search'|trans }}
  113.                         </a>
  114.                     {% elseif app.user.asRole('ROLE_LESSOR') or app.user.asRole('ROLE_LESSOR_RESIDENT') %}
  115.                         <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">
  116.                             {{ 'about.start_search'|trans }}
  117.                         </a>
  118.                     {% endif %}
  119.                 {% else %}
  120.                     <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">
  121.                         {{ 'about.start_search'|trans }}
  122.                     </button>
  123.                 {% endif %}
  124.             </div>
  125.         </div>
  126.     </div>
  128.     <!-- Section Pourquoi promouvoir votre logement sur Roomlers -->
  129.     <div class="py-16 mb-8 bg-gray-100 w-full">
  130.         <div class="container mx-auto px-4">
  131.             <h2 class="text-3xl font-bold mb-6 text-center">{{ 'about.why_promote'|trans }}</h2>
  132.             <p class="text-lg mb-8 text-center">
  133.                 {{ 'about.why_promote_text'|trans }}
  134.             </p>
  135.             <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-center">
  136.                 <div>
  137.                     <div class="items-center justify-center mb-4">
  138.                         <span class="inline-block bg-gray-300 rounded-full p-4 mr-4">
  139.                             <img class="w-6 h-6 mx-auto block" src="{{ absolute_url(asset('images/site/filtre.png')) }}" alt="filtre">
  140.                         </span>
  141.                         <h3 class="text-lg font-semibold">{{ 'about.filters'|trans }}</h3>
  142.                     </div>
  143.                     <p>{{ 'about.filters_text'|trans }}</p>
  144.                 </div>
  145.                 <div>
  146.                     <div class="items-center justify-center mb-4">
  147.                         <span class="inline-block bg-gray-300 rounded-full p-4 mr-4">
  148.                             <img class="w-6 h-6 mx-auto block" src="{{ absolute_url(asset('images/site/monde.png')) }}" alt="monde">
  149.                         </span>
  150.                         <h3 class="text-lg font-semibold">{{ 'about.international_reach'|trans }}</h3>
  151.                     </div>
  152.                     <p>{{ 'about.international_reach_text'|trans }}</p>
  153.                 </div>
  154.                 <div>
  155.                     <div class="items-center justify-center mb-4">
  156.                         <span class="inline-block bg-gray-300 rounded-full p-4 mr-4">
  157.                             <img class="w-6 h-6 mx-auto block" src="{{ absolute_url(asset('images/site/dossier.png')) }}" alt="dossier">
  158.                         </span>
  159.                         <h3 class="text-lg font-semibold">{{ 'about.complete_files'|trans }}</h3>
  160.                     </div>
  161.                     <p>{{ 'about.complete_files_text'|trans }}</p>
  162.                 </div>
  163.                 <div>
  164.                     <div class="items-center justify-center mb-4">
  165.                         <span class="inline-block bg-gray-300 rounded-full p-4 mr-4">
  166.                             <img class="w-6 h-6 mx-auto block" src="{{ absolute_url(asset('images/site/claquement-de-doigt.png')) }}" alt="claquement-de-doigt">
  167.                         </span>
  168.                         <h3 class="text-lg font-semibold">{{ 'about.simplified_booking'|trans }}</h3>
  169.                     </div>
  170.                     <p>{{ 'about.simplified_booking_text'|trans }}</p>
  171.                 </div>
  172.             </div>
  173.         </div>
  174.     </div>
  176.     <!-- Section Ils nous font confiance -->
  177.     <div class="py-16 mb-8 w-full">
  178.         <div class="container mx-auto px-4">
  179.             <h2 class="text-3xl font-bold mb-6 text-center">{{ 'about.they_trust_us'|trans }}</h2>
  180.             <div class="flex flex-col md:flex-row justify-center items-center gap-8 mt-8">
  181.                 <div class="text-lg">
  182.                     <ul class="list-disc ml-8">
  183.                         <li>{{ 'about.trusted_schools_list'|trans|raw }}</li>
  184.                         <li>{{ 'about.trusted_schools_list1'|trans|raw }}</li>
  185.                         <li>{{ 'about.trusted_schools_list2'|trans|raw }}</li>
  186.                         <li>{{ 'about.trusted_schools_list3'|trans|raw }}</li>
  187.                         <li>{{ 'about.trusted_schools_list4'|trans|raw }}</li>
  188.                         <li>{{ 'about.trusted_schools_list5'|trans|raw }}</li>
  189.                         <li>{{ 'about.trusted_schools_list6'|trans|raw }}</li>
  190.                         <li>{{ 'about.trusted_schools_list7'|trans|raw }}</li>
  191.                         <li>{{ 'about.trusted_schools_list8'|trans|raw }}</li>
  192.                         <li>{{ 'about.trusted_schools_list9'|trans|raw }}</li>
  193.                         <li>{{ 'about.trusted_schools_list10'|trans|raw }}</li>
  194.                         <li>{{ 'about.trusted_schools_list11'|trans|raw }}</li>
  195.                         <li>{{ 'about.trusted_schools_list12'|trans|raw }}</li>
  196.                         <li>{{ 'about.trusted_schools_list13'|trans|raw }}</li>
  197.                         <li>{{ 'about.trusted_schools_list14'|trans|raw }}</li>
  198.                         <li>{{ 'about.trusted_schools_list15'|trans|raw }}</li>
  199.                         <li>{{ 'about.trusted_schools_list16'|trans|raw }}</li>
  200.                         <li>{{ 'about.trusted_schools_list17'|trans|raw }}</li>
  201.                         <li>{{ 'about.trusted_schools_list18'|trans|raw }}</li>
  202.                         <li>{{ 'about.trusted_schools_list19'|trans|raw }}</li>
  203.                         <li>{{ 'about.trusted_schools_list20'|trans|raw }}</li>
  204.                         <li>{{ 'about.trusted_schools_list21'|trans|raw }}</li>
  205.                         <li>{{ 'about.trusted_schools_list22'|trans|raw }}</li>
  206.                         <li>{{ 'about.trusted_schools_list23'|trans|raw }}</li>
  207.                         <li>{{ 'about.trusted_schools_list24'|trans|raw }}</li>
  208.                         <li>{{ 'about.trusted_schools_list25'|trans|raw }}</li>
  209.                         <li>{{ 'about.trusted_schools_list26'|trans|raw }}</li>
  210.                         <li>{{ 'about.trusted_schools_list27'|trans|raw }}</li>
  211.                     </ul>
  212.                 </div>
  213.             </div>
  214.         </div>
  215.     </div>
  217.     <!-- Conclusion -->
  218.     <section class="py-16 bg-gray-100 w-full">
  219.         <div class="container mx-auto px-4">
  220.             <div class="max-w-3xl mx-auto text-center">
  221.                 <h2 class="text-3xl font-bold mb-8">{{ 'about.ready_to_rent'|trans }}</h2>
  222.                 <div class="space-y-6 text-lg">
  223.                     <p>{{ 'about.ready_to_rent_text_1'|trans|raw }} <strong>{{ 'about.ready_to_rent_text_2'|trans|raw }}</strong></p>
  224.                 </div>
  225.                 <div class="mt-12">
  226.                     {% if app.user %}
  227.                         {% if app.user.asRole('ROLE_TENANT') %}
  228.                             <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">
  229.                                 {{ 'about.sign_up'|trans }}
  230.                             </a>
  231.                         {% elseif app.user.asRole('ROLE_LESSOR') or app.user.asRole('ROLE_LESSOR_RESIDENT') %}
  232.                             <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">
  233.                                 {{ 'about.sign_up'|trans }}
  234.                             </a>
  235.                         {% endif %}
  236.                     {% else %}
  237.                         <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">
  238.                             {{ 'about.sign_up'|trans }}
  239.                         </button>
  240.                     {% endif %}
  241.                 </div>
  242.             </div>
  243.         </div>
  244.     </section>
  246.     <!-- Modal de connexion/inscription -->
  247.     <div id="connectModal" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  248.         <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
  249.             <p class="text-lg font-semibold mb-4">{{ 'about.modal.choose'|trans }}</p>
  250.             <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">
  251.                 {{ 'about.modal.login'|trans }}
  252.             </button>
  253.             <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">
  254.                 {{ 'about.modal.register'|trans }}
  255.             </button>
  256.         </div>
  257.     </div>
  258. {% endblock %}
  260. {% block javascripts %}
  261. <script>
  262. document.addEventListener('DOMContentLoaded', function () {
  263.     // Gestion du modal de connexion/inscription
  264.     const openModalElements = document.querySelectorAll('#openModalLink1, #openModalLink2');
  265.     const connectModal = document.getElementById('connectModal');
  267.     if (openModalElements.length > 0 && connectModal) {
  268.         openModalElements.forEach(element => {
  269.             element.addEventListener('click', function (event) {
  270.                 event.preventDefault();
  271.                 connectModal.classList.remove('hidden');
  272.             });
  273.         });
  275.         connectModal.addEventListener('click', function (event) {
  276.             if (event.target === connectModal) {
  277.                 connectModal.classList.add('hidden');
  278.             }
  279.         });
  281.         connectModal.querySelector('.bg-white').addEventListener('click', function (event) {
  282.             event.stopPropagation();
  283.         });
  284.     }
  285. });
  286. </script>
  287. {% endblock %}