templates/home/landing_page.html.twig line 1

  1. {% extends 'base_landing.html.twig' %}
  3. {% block title %}{{ 'landing.title'|trans }}{% endblock %}
  5. {% block body %}
  6. <!-- Section de l'image "sleep" en pleine largeur -->
  7. <div class="relative w-screen h-[60vh] flex items-center justify-center bg-cover bg-center bg-no-repeat mb-200" style="background-image: url('/images/sleep1.png');">
  8.     <div class="absolute inset-0 bg-black bg-opacity-25"></div>
  9.     <div class="absolute text-center w-full px-4">
  10.         <h1 class="text-4xl text-white font-bold mb-4">{{ 'landing.find_accommodation'|trans }}</h1>
  11.         <form id="search-form" method="GET" action="{{ path('advanced_search') }}" class="space-y-4">
  12.             <div class="relative flex items-center w-full max-w-sm mx-auto rounded-full overflow-hidden">
  13.                 <input type="text" id="address-landing" name="city" placeholder="{{ 'landing.destination'|trans }}" class="w-full px-4 py-2 rounded-full text-black focus:outline-none">
  14.                 <button type="submit" class="absolute right-[-0rem] bg-[#ffcc00] text-black w-10 h-10 rounded-full flex items-center justify-center hover:bg-[#ffcc00] transition border border-2 border-white">
  15.                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  16.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
  17.                     </svg>
  18.                 </button>
  19.             </div>
  20.             <input type="hidden" name="lat" id="lat">
  21.             <input type="hidden" name="lng" id="lng">
  22.         </form>
  23.         <p class="text-xl text-white mt-4">{{ 'landing.thousands_accommodations'|trans }}</p>
  24.     </div>
  25. </div>
  27. <div class="container mx-auto px-4 py-8 text-center">
  28.     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  29.         <div class="bg-transparent p-6 text-center max-lg:p-4">
  30.             <img src="/images/icons/attestation.png" alt="Attestation Icon" class="mx-auto mb-4 w-28 h-auto">
  31.             <h3 class="text-xl font-semibold mb-4">{{ 'landing.attestation'|trans }}</h3>
  32.         </div>
  33.         <div class="bg-transparent p-6 text-center max-lg:p-4">
  34.             <img src="/images/icons/sans-deplacement.png" alt="Sans Déplacement Icon" class="mx-auto mb-4 w-28 h-auto">
  35.             <h3 class="text-xl font-semibold mb-4">{{ 'landing.no_displacement'|trans }}</h3>
  36.         </div>
  37.         <div class="bg-transparent p-6 text-center max-lg:p-4">
  38.             <img src="/images/icons/securite.png" alt="Sécurité Icon" class="mx-auto mb-4 w-28 h-auto">
  39.             <h3 class="text-xl font-semibold mb-4">{{ 'landing.security'|trans }}</h3>
  40.         </div>
  41.     </div>
  42. </div>
  44. <div class="bg-gray-200 w-full px-4 py-8 text-left mb-200 max-lg:p-4">
  45.     <h2 class="text-4xl font-bold text-center mb-6 max-lg:text-3xl">{{ 'landing.selection_accommodations'|trans }}</h2> <br/>
  46.     <div class="relative overflow-hidden">
  47.         <div class="grid grid-cols-1 md:grid-cols-4 gap-4" id="recent-carousel">
  48.             {% for building in recentBuildings %}
  49.                 {% set filteredFiles2 = building.buildingDocuments|filter(item => item.name starts with 'file' or item.name starts with 'imageComplexe') %}
  50.                 <div class="flex-shrink-0 w-full bg-white shadow-md rounded-lg overflow-hidden z-10">
  51.                     <div class="relative w-full h-56 overflow-hidden max-lg:h-48">
  52.                         {% if filteredFiles2 is not empty %}
  53.                             <div class="absolute inset-0 flex transition-transform duration-500 ease-in-out" id="carousel-{{ building.id }}">
  54.                                 {% for bd in filteredFiles2 %}
  55.                                     <a href="{{ path('detail_building', {id: building.id}) }}" class="w-full flex-shrink-0 bg-cover bg-no-repeat bg-center"
  56.                                        style="background-image: url('{{ asset('images/files/' ~ bd.imageFile) }}'); height: 14rem;">
  57.                                     </a>
  58.                                 {% endfor %}
  59.                             </div>
  60.                             <div class="flex absolute bottom-2 left-1/2 z-30 space-x-2 -translate-x-1/2" id="carousel-indicators-{{ building.id }}">
  61.                                 {% for document in filteredFiles2 %}
  62.                                     <button type="button" class="w-3 h-3 rounded-full border border-gray-400 bg-gray-300 opacity-50" aria-label="Slide {{ loop.index0 }}" data-carousel-slide-to="{{ loop.index0 }}"></button>
  63.                                 {% endfor %}
  64.                             </div>
  65.                             {% if filteredFiles2|length > 1 %}
  66.                                 <button type="button" class="absolute top-1/2 left-2 z-40 transform -translate-y-1/2 bg-gray-300 p-2 rounded-full shadow-md" data-carousel-prev="{{ building.id }}">
  67.                                     <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  68.                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
  69.                                     </svg>
  70.                                 </button>
  71.                                 <button type="button" class="absolute top-1/2 right-2 z-40 transform -translate-y-1/2 bg-gray-300 p-2 rounded-full shadow-md" data-carousel-next="{{ building.id }}">
  72.                                     <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  73.                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  74.                                     </svg>
  75.                                 </button>
  76.                             {% endif %}
  77.                         {% endif %}
  78.                     </div>
  79.                     <div class="p-4 flex justify-between items-start max-lg:p-2">
  80.                         <div>
  81.                             {% if building.cityEntity is not null %}
  82.                                 <a href="{{ path('detail_building', {id: building.id}) }}" class="block text-sm font-bold">
  83.                                     {{ building.cityEntity.city }}, {{ building.cityEntity.country }}
  84.                                 </a>
  85.                             {% else %}
  86.                                 <span class="block text-sm font-bold text-red-500">{{ 'City information not available'|trans }}</span>
  87.                             {% endif %}
  88.                             <a href="{{ path('detail_building', {id: building.id}) }}" class="block text-sm font-bold">{{ building.rent / 100 }} € {{ 'accueil.parmois'|trans }}</a>
  89.                             <a href="{{ path('detail_building', {id: building.id}) }}" class="block text-gray-500 text-sm">{{ 'accueil.add'|trans }}{{ building.createdAt|date('d/m/y') }}</a>
  90.                             {% if building.status == 'Disponible' %}
  91.                                 {% if building.dateStartAt %}
  92.                                     <p class="text-gray-500 text-sm">{{ 'accueil.availableDate'|trans }} {{ building.dateStartAt|date('d/m/y') }}</p>
  93.                                 {% else %}
  94.                                     <p class="text-gray-500 text-sm">{{ 'accueil.availableDateNow'|trans }}</p>
  95.                                 {% endif %}
  96.                             {% elseif building.dateStartAt %}
  97.                                 <p class="text-gray-500 text-sm">{{ 'accueil.dateStartAt'|trans }} {{ building.dateStartAt|date('d/m/y') }}</p>
  98.                             {% endif %}
  99.                         </div>
  100.                         <a class="flex items-center justify-center p-3 cursor-pointer rounded-lg mt-2" id="like-button-{{ building.id }}">
  101.                             {% if likedBuildings[building.id] is defined and likedBuildings[building.id] %}
  102.                                 <i style="color: #ffcc00" class="fa-solid fa-heart pl-3 fa-2x like-button" data-image-id="{{ building.id }}"></i>
  103.                             {% else %}
  104.                                 <i style="color: #ffcc00" class="fa-regular fa-heart pl-3 fa-2x like-button" data-image-id="{{ building.id }}"></i>
  105.                             {% endif %}
  106.                         </a>
  107.                     </div>
  108.                 </div>
  109.             {% endfor %}
  110.         </div>
  111.     </div>
  112. </div>
  114. <div class="container text-center mx-auto px-4 py-8 mb-200">
  115.     <h2 class="text-4xl font-bold mb-6 text-center">
  116.         {{ 'landing.roomlers_solution'|trans }}
  117.     </h2>
  118.     <br/>
  119.     <div class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-6">
  120.         <!-- Section 1 -->
  121.         <div class="bg-gray-200 p-6 rounded-lg shadow-md flex flex-col md:w-11/12 mx-auto max-lg:p-4 min-h-[250px]">
  122.             <h3 class="text-xl mb-2">
  123.                 <span class="text-2xl font-bold">1.</span><br/>
  124.                 <strong>{{ 'landing.create_account'|trans }}</strong>
  125.             </h3>
  126.             <p class="text-gray-700 flex-grow">
  127.                 {{ 'landing.access_catalog'|trans }}
  128.             </p>
  129.         </div>
  130.         <!-- Section 2 -->
  131.         <div class="bg-gray-200 p-6 rounded-lg shadow-md flex flex-col md:w-11/12 mx-auto max-lg:p-4 min-h-[250px]">
  132.             <h3 class="text-xl mb-2">
  133.                 <span class="text-2xl font-bold">2.</span><br/>
  134.                 <strong>{{ 'landing.generate_attestation'|trans }}</strong><br/>{{ 'landing.step'|trans }}
  135.             </h3>
  136.             <p class="text-gray-700 flex-grow">
  137.                 {{ 'landing.complete_visa'|trans }}
  138.             </p>
  139.         </div>
  140.         <!-- Section 3 -->
  141.         <div class="bg-gray-200 p-6 rounded-lg shadow-md flex flex-col md:w-11/12 mx-auto max-lg:p-4 min-h-[250px]">
  142.             <h3 class="text-xl mb-2">
  143.                 <span class="text-2xl font-bold">3.</span><br/>
  144.                 <strong>{{ 'landing.book_accommodation'|trans }}</strong>
  145.             </h3>
  146.             <p class="text-gray-700 flex-grow">
  147.                 {{ 'landing.choose_accommodation'|trans }}
  148.             </p>
  149.         </div>
  150.     </div>
  151.     <br/>
  152.     <div class="text-center mt-8">
  153.         {% if app.user %}
  154.             {% if app.user.asRole('ROLE_TENANT') %}
  155.                 <a href="{{ path('tenant_home') }}" class="bg-[#FFCC00] text-black px-6 py-2 rounded-lg font-semibold hover:bg-[#FFCC00] transition w-full md:w-[calc(33.333%-2rem)]">
  156.                     {{ 'landing.start'|trans }}
  157.                 </a>
  158.             {% elseif app.user.asRole('ROLE_AGENT') %}
  159.                 <button id="openPopLink1" class="bg-[#FFCC00] text-black px-6 py-2 rounded-lg font-semibold hover:bg-[#FFCC00] transition w-full md:w-[calc(33.333%-2rem)]">
  160.                     {{ 'landing.start'|trans }}
  161.                 </a>
  162.             {% elseif app.user.asRole('ROLE_SUPER_AGENT') %}
  163.                 <button id="openPopLink1" class="bg-[#FFCC00] text-black px-6 py-2 rounded-lg font-semibold hover:bg-[#FFCC00] transition w-full md:w-[calc(33.333%-2rem)]">
  164.                     {{ 'landing.start'|trans }}
  165.                 </a>
  166.             {% elseif app.user.asRole('ROLE_LESSOR') or app.user.asRole('ROLE_LESSOR_RESIDENT') %}
  167.                 <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">
  168.                     {{ 'landing.start'|trans }}
  169.                 </button>
  170.             {% endif %}
  171.         {% else %}
  172.             <button id="openConnectModalBtn" class="bg-[#FFCC00] text-black px-6 py-2 rounded-lg font-semibold hover:bg-[#FFCC00] transition w-full md:w-[calc(33.333%-2rem)]">
  173.                 {{ 'landing.start'|trans }}
  174.             </button>
  175.         {% endif %}
  176.     </div>
  177. </div>
  179. <div class="bg-gray-200 w-full px-4 py-8 mb-200">
  180.     <h2 class="text-4xl md:text-3xl font-bold mb-6 text-center">{{ 'landing.things'|trans }}</h2>
  181.     <br/>
  182.     <div class=" text-center grid grid-cols-1 md:grid-cols-3 gap-12">
  183.         <div class="bg-white p-6 rounded-lg shadow-md md:w-11/12 mx-auto max-lg:p-4 text-center">
  184.             <img src="/images/icons/citation.png" alt="Icône de citation" class="w-8 h-8 mb-4 mx-auto">
  185.             <p class="text-gray-700">{{ 'landing.testimonial_alejandro'|trans }} <br/>
  186.                 <br/><em>{{ 'landing.alejandro'|trans }}</em>
  187.             </p>
  188.         </div>
  189.         <div class="bg-white p-6 rounded-lg shadow-md md:w-11/12 mx-auto max-lg:p-4 text-center">
  190.             <img src="/images/icons/citation.png" alt="Icône de citation" class="w-8 h-8 mb-4 mx-auto">
  191.             <p class="text-gray-700">{{ 'landing.testimonial_mei'|trans }} <br/>
  192.                 <br/><em>{{ 'landing.mei'|trans }}</em>
  193.             </p>
  194.         </div>
  195.         <div class="bg-white p-6 rounded-lg shadow-md md:w-11/12 mx-auto max-lg:p-4 text-center">
  196.             <img src="/images/icons/citation.png" alt="Icône de citation" class="w-8 h-8 mb-4 mx-auto">
  197.             <p class="text-gray-700">{{ 'landing.testimonial_luca'|trans }} <br/>
  198.                 <br/><em>{{ 'landing.luca'|trans }}</em>
  199.             </p>
  200.         </div>
  201.     </div>
  202. </div>
  204. <style>
  205.     .faq-section {
  206.         display: flex;
  207.         align-items: center;
  208.     }
  209.     .faq-title {
  210.         display: flex;
  211.         align-items: center;
  212.         justify-content: center;
  213.     }
  214.     .faq-questions {
  215.         display: flex;
  216.         flex-direction: column;
  217.     }
  218.     .faq-answer {
  219.         max-height: 0;
  220.         overflow: hidden;
  221.         transition: max-height 0.3s ease-out;
  222.     }
  223.     .faq-answer.active {
  224.         max-height: 200px; /* Ajustez cette valeur selon vos besoins */
  225.         overflow: visible;
  226.     }
  227. </style>
  228. <div class="container mx-auto px-4 py-8 mb-24 flex flex-col md:flex-row items-start justify-between faq-section">
  229.     <div class="w-full md:w-1/3 p-4 faq-title">
  230.         <h2 class="text-3xl font-bold mb-4">{{ 'landing.weanswer'|trans }}<br/> {{ 'landing.questions'|trans }}</h2>
  231.     </div>
  232.     <div class="w-full md:w-2/3 p-4 space-y-4 faq-questions">
  233.         <!-- Question 1 -->
  234.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  235.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  236.                 <div class="flex-1 text-left pr-4">{{ 'landing.question1'|trans }}</div>
  237.                 <div class="flex-shrink-0 w-6 h-6">
  238.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  239.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  240.                     </svg>
  241.                 </div>
  242.             </button>
  243.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  244.                 <p class="p-4 text-gray-700">{{ 'landing.faq_fees'|trans }}</p>
  245.             </div>
  246.         </div>
  248.         <!-- Question 2 -->
  249.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  250.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  251.                 <div class="flex-1 text-left pr-4">{{ 'landing.question2'|trans }}</div>
  252.                 <div class="flex-shrink-0 w-6 h-6">
  253.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  254.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  255.                     </svg>
  256.                 </div>
  257.             </button>
  258.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  259.                 <p class="p-4 text-gray-700">{{ 'landing.faq_refund'|trans }}</p>
  260.             </div>
  261.         </div>
  263.         <!-- Question 3 -->
  264.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  265.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  266.                 <div class="flex-1 text-left pr-4">{{ 'landing.question3'|trans }}</div>
  267.                 <div class="flex-shrink-0 w-6 h-6">
  268.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  269.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  270.                     </svg>
  271.                 </div>
  272.             </button>
  273.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  274.                 <p class="p-4 text-gray-700">{{ 'landing.faq_apl'|trans }}</p>
  275.             </div>
  276.         </div>
  278.         <!-- Question 4 -->
  279.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  280.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  281.                 <div class="flex-1 text-left pr-4">{{ 'landing.question4'|trans }}</div>
  282.                 <div class="flex-shrink-0 w-6 h-6">
  283.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  284.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  285.                     </svg>
  286.                 </div>
  287.             </button>
  288.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  289.                 <p class="p-4 text-gray-700">{{ 'landing.faq_furnished'|trans }}</p>
  290.             </div>
  291.         </div>
  293.         <!-- Question 5 -->
  294.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  295.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  296.                 <div class="flex-1 text-left pr-4">{{ 'landing.question5'|trans }}</div>
  297.                 <div class="flex-shrink-0 w-6 h-6">
  298.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  299.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  300.                     </svg>
  301.                 </div>
  302.             </button>
  303.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  304.                 <p class="p-4 text-gray-700">{{ 'landing.faq_lease_duration'|trans }}</p>
  305.             </div>
  306.         </div>
  308.         <!-- Question 6 -->
  309.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  310.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  311.                 <div class="flex-1 text-left pr-4">{{ 'landing.question6'|trans }}</div>
  312.                 <div class="flex-shrink-0 w-6 h-6">
  313.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  314.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  315.                     </svg>
  316.                 </div>
  317.             </button>
  318.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  319.                 <p class="p-4 text-gray-700">{{ 'landing.faq_leave_accommodation'|trans }}</p>
  320.             </div>
  321.         </div>
  323.         <!-- Question 7 -->
  324.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  325.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  326.                 <div class="flex-1 text-left pr-4">{{ 'landing.question7'|trans }}</div>
  327.                 <div class="flex-shrink-0 w-6 h-6">
  328.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  329.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  330.                     </svg>
  331.                 </div>
  332.             </button>
  333.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  334.                 <p class="p-4 text-gray-700">{{ 'landing.faq_insurance'|trans }}</p>
  335.             </div>
  336.         </div>
  338.         <!-- Question 8 -->
  339.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  340.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  341.                 <div class="flex-1 text-left pr-4">{{ 'landing.question8'|trans }}</div>
  342.                 <div class="flex-shrink-0 w-6 h-6">
  343.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  344.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  345.                     </svg>
  346.                 </div>
  347.             </button>
  348.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  349.                 <p class="p-4 text-gray-700">{{ 'landing.faq_guarantor'|trans }}</p>
  350.             </div>
  351.         </div>
  352.         <!-- Question 9 -->
  353.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  354.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  355.                 <div class="flex-1 text-left pr-4">{{ 'landing.question9'|trans }}</div>
  356.                 <div class="flex-shrink-0 w-6 h-6">
  357.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  358.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  359.                     </svg>
  360.                 </div>
  361.             </button>
  362.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  363.                 <p class="p-4 text-gray-700">{{ 'landing.faq_no_guarantor'|trans|raw }}</p>
  364.             </div>
  365.         </div>
  366.     </div>
  367. </div>
  369. <div class="bg-gray-200 w-full px-4 py-8 mb-200">
  370.     <h2 class="text-4xl md:text-3xl font-bold mb-6 text-center">{{ 'landing.popular_destinations'|trans }}</h2> <br/>
  371.     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  372.         <a href="{{ path('advanced_search', {'city': 'Paris', 'lat': 48.8575475, 'lng': 2.3513765}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  373.             <h3 class="text-lg md:text-xl font-semibold mb-2">Paris</h3>
  374.         </a>
  375.         <a href="{{ path('advanced_search', {'city': 'Lille', 'lat': 50.624378, 'lng': 3.0678588}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  376.             <h3 class="text-lg md:text-xl font-semibold mb-2">Lille</h3>
  377.         </a>
  378.         <a href="{{ path('advanced_search', {'city': 'Lyon', 'lat': 45.764043, 'lng': 4.835659}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  379.             <h3 class="text-lg md:text-xl font-semibold mb-2">Lyon</h3>
  380.         </a>
  381.         <a href="{{ path('advanced_search', {'city': 'Toulouse', 'lat': 43.6048462, 'lng': 1.442848}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  382.             <h3 class="text-lg md:text-xl font-semibold mb-2">Toulouse</h3>
  383.         </a>
  384.         <a href="{{ path('advanced_search', {'city': 'Strasbourg', 'lat': 48.5734053, 'lng': 7.752111299999999}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  385.             <h3 class="text-lg md:text-xl font-semibold mb-2">Strasbourg</h3>
  386.         </a>
  387.         <a href="{{ path('advanced_search', {'city': 'Marseille', 'lat': 43.3025742, 'lng': 5.369074299999999}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  388.             <h3 class="text-lg md:text-xl font-semibold mb-2">Marseille</h3>
  389.         </a>
  390.         <a href="{{ path('advanced_search', {'city': 'Rennes', 'lat': 48.117266, 'lng': 1.6777926}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  391.             <h3 class="text-lg md:text-xl font-semibold mb-2">Rennes</h3>
  392.         </a>
  393.         <a href="{{ path('advanced_search', {'city': 'Bordeaux', 'lat': 44.8416106, 'lng': 0.5810938000000001}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  394.             <h3 class="text-lg md:text-xl font-semibold mb-2">Bordeaux</h3>
  395.         </a>
  396.         <a href="{{ path('advanced_search', {'city': 'Montpellier', 'lat': 43.6108535, 'lng': 3.8761323}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  397.             <h3 class="text-lg md:text-xl font-semibold mb-2">Montpellier</h3>
  398.         </a>
  399.     </div>
  400. </div> <br/> <br/>
  402. <!-- Modal de connexion/inscription -->
  403. <div id="connectModal" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  404.     <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
  405.         <p class="text-lg font-semibold mb-4">{{ 'landing.option'|trans }}</p>
  406.         <button onclick="window.location.href='{{ path('app_login_site') }}'" class="bg-[#ffcc00] text-black px-4 py-2 rounded-lg font-semibold hover:bg-[#ffcc00] transition mb-2">
  407.             {{ 'landing.login'|trans }}
  408.         </button>
  409.         <button onclick="window.location.href='{{ path('app_register') }}'" class="bg-[#ffcc00] text-black px-4 py-2 rounded-lg font-semibold hover:bg-[#ffcc00] transition">
  410.             {{ 'landing.register'|trans }}
  411.         </button>
  412.     </div>
  413. </div>
  414. <div id="connectPop" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  415.     <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
  416.         <p class="text-lg font-semibold mb-4">{{ 'landing.tenant'|trans }}</p>
  417.         <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">
  418.             {{ 'landing.login'|trans }}
  419.         </button>
  420.     </div>
  421. </div>
  423. <button id="scrollToTopBtn" class="fixed bottom-4 right-4 bg-[#FFCC00] text-black px-4 py-2 rounded-lg font-semibold hover:bg-[#e6b800] transition-all z-[1000] border-2 border-black">
  424.     {{ 'landing.search'|trans }}
  425. </button>
  427. <script>
  428.     let autocompleteLanding;
  430.     // Fonction pour initialiser l'autocomplétion Google Maps
  431.     function initAutocomplete(inputId) {
  432.         const input = document.getElementById(inputId);
  433.         if (!input) {
  434.             console.error("Input non trouvé :", inputId);
  435.             return;
  436.         }
  438.         const options = {
  439.             types: ['(cities)'], // Limiter aux villes
  440.             componentRestrictions: { country: 'fr' } // France uniquement
  441.         };
  443.         try {
  444.             autocompleteLanding = new google.maps.places.Autocomplete(input, options);
  446.             autocompleteLanding.addListener('place_changed', function () {
  447.                 const place = autocompleteLanding.getPlace();
  448.                 if (!place.geometry) {
  449.                     console.error("Aucune géométrie trouvée pour ce lieu.");
  450.                     return;
  451.                 }
  453.                 const latInput = document.getElementById('lat');
  454.                 const lngInput = document.getElementById('lng');
  456.                 if (latInput && lngInput) {
  457.                     latInput.value = place.geometry.location.lat();
  458.                     lngInput.value = place.geometry.location.lng();
  459.                 }
  461.                 let city = "";
  462.                 place.address_components.forEach(component => {
  463.                     if (component.types.includes("locality")) {
  464.                         city = component.long_name;
  465.                     }
  466.                 });
  468.                 input.value = city || place.name; // Fallback si le nom de la ville n'est pas trouvé
  470.                 const form = input.closest('form');
  471.                 if (form) {
  472.                     form.submit();
  473.                 }
  475.             });
  476.         } catch (error) {
  477.             console.error("Erreur lors de l'initialisation de l'autocomplétion :", error);
  478.         }
  479.     }
  481.     // Fonction pour charger l'API Google Maps de manière asynchrone
  482.     function loadGoogleMapsAPI() {
  483.         if (typeof google === 'undefined' || !google.maps) {
  484.             const script = document.createElement('script');
  485.             script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyA4fnlCYx-sU6oAMsNfli8_IqwFIsdxfA4&libraries=places&callback=initializeAutocomplete';
  486.             script.async = true;
  487.             script.defer = true;
  488.             script.onerror = () => {
  489.                 console.error("Erreur lors du chargement de l'API Google Maps.");
  490.             };
  491.             document.head.appendChild(script);
  492.         } else {
  493.             initializeAutocomplete();
  494.         }
  495.     }
  497.     // Fonction pour initialiser l'autocomplétion après le chargement de l'API
  498.     function initializeAutocomplete() {
  499.         if (typeof google !== 'undefined' && google.maps && google.maps.places) {
  500.             console.log("test");
  501.             initAutocomplete('address-landing');
  502.         } else {
  503.             console.error("Google Maps API non chargée correctement.");
  504.         }
  505.     }
  507.     // Fonction pour configurer un carousel
  508.     function setupCarousel(carousel) {
  509.         const carouselId = carousel.id.split('-')[1];
  510.         const slides = carousel.querySelectorAll('a');
  511.         const indicators = document.querySelectorAll(`#carousel-indicators-${carouselId} button`);
  512.         const prevButton = document.querySelector(`[data-carousel-prev="${carouselId}"]`);
  513.         const nextButton = document.querySelector(`[data-carousel-next="${carouselId}"]`);
  515.         let currentIndex = 0;
  516.         const totalSlides = slides.length;
  518.         function updateCarousel() {
  519.             if (slides.length === 0) return;
  521.             slides.forEach((slide, index) => {
  522.                 slide.style.transition = 'opacity 0.6s ease-in-out, transform 0.6s ease-in-out';
  523.                 slide.style.position = 'absolute';
  524.                 slide.style.opacity = '0';
  525.                 slide.style.transform = 'translateX(100%)';
  526.             });
  528.             const currentSlide = slides[currentIndex];
  529.             currentSlide.style.opacity = '1';
  530.             currentSlide.style.transform = 'translateX(0)';
  532.             indicators.forEach((indicator, index) => {
  533.                 if (index === currentIndex) {
  534.                     indicator.classList.add('bg-[#ffcc00]', 'opacity-100');
  535.                     indicator.classList.remove('bg-gray-300', 'opacity-50');
  536.                 } else {
  537.                     indicator.classList.remove('bg-[#ffcc00]', 'opacity-100');
  538.                     indicator.classList.add('bg-gray-300', 'opacity-50');
  539.                 }
  540.             });
  541.         }
  543.         function goToSlide(index) {
  544.             currentIndex = (index + totalSlides) % totalSlides;
  545.             updateCarousel();
  546.         }
  548.         function nextSlide() {
  549.             goToSlide(currentIndex + 1);
  550.         }
  552.         function prevSlide() {
  553.             goToSlide(currentIndex - 1);
  554.         }
  556.         // Événements
  557.         if (nextButton) nextButton.addEventListener('click', nextSlide);
  558.         if (prevButton) prevButton.addEventListener('click', prevSlide);
  560.         indicators.forEach((indicator, index) => {
  561.             indicator.addEventListener('click', () => goToSlide(index));
  562.         });
  564.     }
  566.     // Initialisation du script
  567.     document.addEventListener('DOMContentLoaded', function () {
  568.         // Charger l'API Google Maps
  569.         loadGoogleMapsAPI();
  571.         // Gestion de la modal de connexion/inscription
  572.         const openModalElements = document.querySelectorAll('#openModalLink1, #openConnectModalBtn');
  573.         const connectModal = document.getElementById('connectModal');
  575.         openModalElements.forEach(element => {
  576.             element.addEventListener('click', function (event) {
  577.                 event.preventDefault();
  578.                 connectModal.classList.remove('hidden');
  579.             });
  580.         });
  582.         connectModal.addEventListener('click', function (event) {
  583.             if (event.target === connectModal) {
  584.                 connectModal.classList.add('hidden');
  585.             }
  586.         });
  588.         // Gestion du bouton de recherche (défilement vers le haut)
  589.         const scrollToTopBtn = document.getElementById('scrollToTopBtn');
  591.         scrollToTopBtn.addEventListener('click', function () {
  592.             window.scrollTo({
  593.                 top: 0,
  594.                 behavior: 'smooth'
  595.             });
  596.         });
  598.         // Affichage/masquage du bouton de défilement
  599.         window.addEventListener('scroll', function () {
  600.             if (window.scrollY > 100) {
  601.                 scrollToTopBtn.style.display = 'block';
  602.             } else {
  603.                 scrollToTopBtn.style.display = 'none';
  604.             }
  605.         });
  607.         // Gestion des carrousels
  608.         const carousels = document.querySelectorAll('[id^="carousel-"]');
  609.         carousels.forEach(setupCarousel);
  611.         // Gestion des clics sur les cœurs (affichage de la modal)
  612.         const likeButtons = document.querySelectorAll('.like-button');
  613.         likeButtons.forEach(button => {
  614.             button.addEventListener('click', function () {
  615.                 const connectModal = document.getElementById('connectModal');
  616.                 connectModal.classList.remove('hidden');
  617.             });
  618.         });
  620.         // Gestion du menu de langue
  621.         const languageDropdown = document.getElementById('languageDropdown');
  622.         const languageMenu = document.getElementById('languageMenu');
  624.         if (languageDropdown && languageMenu) {
  625.             languageDropdown.addEventListener('click', function () {
  626.                 languageMenu.classList.toggle('hidden');
  627.             });
  628.         }
  630.         // Gestion de l'accordéon
  631.         const accordionButtons = document.querySelectorAll('.faq-question');
  632.         accordionButtons.forEach(button => {
  633.             button.addEventListener('click', function() {
  634.                 const content = this.nextElementSibling;
  635.                 const isExpanded = content.classList.contains('active');
  637.                 // Fermer tous les autres éléments de l'accordéon
  638.                 accordionButtons.forEach(btn => {
  639.                     const otherContent = btn.nextElementSibling;
  640.                     if (btn !== this) {
  641.                         otherContent.classList.remove('active');
  642.                     }
  643.                 });
  645.                 // Basculer l'état de l'élément cliqué
  646.                 if (isExpanded) {
  647.                     content.classList.remove('active');
  648.                 } else {
  649.                     content.classList.add('active');
  650.                 }
  651.             });
  652.         });
  653.     // Ajout du gestionnaire d'événements pour la touche "Entrée"
  654.     const searchInput = document.getElementById('address-landing');
  655.         if (searchInput) {
  656.             searchInput.addEventListener('keydown', function (event) {
  657.                 if (event.key === 'Enter') {
  658.                     event.preventDefault();
  659.                     document.getElementById('search-form').submit();
  660.                 }
  661.             });
  662.         }
  664.     const openPopElements = document.querySelectorAll('#openPopLink1, #openPopLink2');
  665.     const connectPop = document.getElementById('connectPop');
  667.     if (openPopElements.length > 0 && connectPop) {
  668.         openPopElements.forEach(element => {
  669.             element.addEventListener('click', function (event) {
  670.                 event.preventDefault();
  671.                 connectPop.classList.remove('hidden');
  672.             });
  673.         });
  675.         connectPop.addEventListener('click', function (event) {
  676.             if (event.target === connectPop) {
  677.                 connectPop.classList.add('hidden');
  678.             }
  679.         });
  681.         connectPop.querySelector('.bg-white').addEventListener('click', function (event) {
  682.             event.stopPropagation();
  683.         });
  684.     }
  685.     });
  686. </script>
  687. {% endblock %}