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-[80vh] md: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.             
  13.             <div class="flex justify-center mb-5 gap-2 md:gap-6">
  14.                 {% include 'components/selectCountry.html.twig' with {countrySelected: app.request.query.get('selectCountry')} %}
  15.             </div>
  17.             <div class="relative flex items-center w-full max-w-sm mx-auto rounded-full overflow-hidden">
  18.                 <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 hidden">
  19.                 <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">
  20.                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  21.                         <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>
  22.                     </svg>
  23.                 </button>
  24.             </div>
  25.             <input type="hidden" name="lat" id="lat">
  26.             <input type="hidden" name="lng" id="lng">
  27.         </form>
  28.         <p class="text-xl text-white mt-4">{{ 'landing.thousands_accommodations'|trans }}</p>
  29.     </div>
  30. </div>
  32. <div class="container mx-auto px-4 py-8 text-center">
  33.     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  34.         <div class="bg-transparent p-6 text-center max-lg:p-4">
  35.             <img src="/images/icons/attestation.png" alt="Attestation Icon" class="mx-auto mb-4 w-28 h-auto">
  36.             <h3 class="text-xl font-semibold mb-4">{{ 'landing.attestation'|trans }}</h3>
  37.         </div>
  38.         <div class="bg-transparent p-6 text-center max-lg:p-4">
  39.             <img src="/images/icons/sans-deplacement.png" alt="Sans Déplacement Icon" class="mx-auto mb-4 w-28 h-auto">
  40.             <h3 class="text-xl font-semibold mb-4">{{ 'landing.no_displacement'|trans }}</h3>
  41.         </div>
  42.         <div class="bg-transparent p-6 text-center max-lg:p-4">
  43.             <img src="/images/icons/securite.png" alt="Sécurité Icon" class="mx-auto mb-4 w-28 h-auto">
  44.             <h3 class="text-xl font-semibold mb-4">{{ 'landing.security'|trans }}</h3>
  45.         </div>
  46.     </div>
  47. </div>
  49. <div class="bg-gray-200 w-full px-4 py-8 text-left mb-200 max-lg:p-4">
  50.     <h2 class="text-4xl font-bold text-center mb-6 max-lg:text-3xl">{{ 'landing.selection_accommodations'|trans }} <span id="accommodation-title-country">{{'search.France'|trans}}</span>{{ 'landing.selection_accommodations2'|trans }}</h2> <br/>
  51.     {% include 'components/sectionAccommodationCountry.html.twig'%} <!-- Section biens récents par pays -->
  52. </div>
  54. <div class="container text-center mx-auto px-4 py-8 mb-200">
  55.     <h2 class="text-4xl font-bold mb-6 text-center">
  56.         {{ 'landing.roomlers_solution'|trans }}
  57.     </h2>
  58.     <br/>
  59.     <div class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-6">
  60.         <!-- Section 1 -->
  61.         <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]">
  62.             <h3 class="text-xl mb-2">
  63.                 <span class="text-2xl font-bold">1.</span><br/>
  64.                 <strong>{{ 'landing.create_account'|trans }}</strong>
  65.             </h3>
  66.             <p class="text-gray-700 flex-grow">
  67.                 {{ 'landing.access_catalog'|trans }}
  68.             </p>
  69.         </div>
  70.         <!-- Section 2 -->
  71.         <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]">
  72.             <h3 class="text-xl mb-2">
  73.                 <span class="text-2xl font-bold">2.</span><br/>
  74.                 <strong>{{ 'landing.generate_attestation'|trans }}</strong><br/>{{ 'landing.step'|trans }}
  75.             </h3>
  76.             <p class="text-gray-700 flex-grow">
  77.                 {{ 'landing.complete_visa'|trans }}
  78.             </p>
  79.         </div>
  80.         <!-- Section 3 -->
  81.         <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]">
  82.             <h3 class="text-xl mb-2">
  83.                 <span class="text-2xl font-bold">3.</span><br/>
  84.                 <strong>{{ 'landing.book_accommodation'|trans }}</strong>
  85.             </h3>
  86.             <p class="text-gray-700 flex-grow">
  87.                 {{ 'landing.choose_accommodation'|trans }}
  88.             </p>
  89.         </div>
  90.     </div>
  91.     <br/>
  92.     <div class="text-center mt-8">
  93.         {% if app.user %}
  94.             {% if app.user.asRole('ROLE_TENANT') %}
  95.                 <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)]">
  96.                     {{ 'landing.start'|trans }}
  97.                 </a>
  98.             {% elseif app.user.asRole('ROLE_AGENT') %}
  99.                 <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)]">
  100.                     {{ 'landing.start'|trans }}
  101.                 </a>
  102.             {% elseif app.user.asRole('ROLE_SUPER_AGENT') %}
  103.                 <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)]">
  104.                     {{ 'landing.start'|trans }}
  105.                 </a>
  106.             {% elseif app.user.asRole('ROLE_LESSOR') or app.user.asRole('ROLE_LESSOR_RESIDENT') %}
  107.                 <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">
  108.                     {{ 'landing.start'|trans }}
  109.                 </button>
  110.             {% endif %}
  111.         {% else %}
  112.             <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)]">
  113.                 {{ 'landing.start'|trans }}
  114.             </button>
  115.         {% endif %}
  116.     </div>
  117. </div>
  119. <div class="bg-gray-200 w-full px-4 py-8 mb-200">
  120.     <h2 class="text-4xl md:text-3xl font-bold mb-6 text-center">{{ 'landing.things'|trans }}</h2>
  121.     <br/>
  122.     <div class=" text-center grid grid-cols-1 md:grid-cols-3 gap-12">
  123.         <div class="bg-white p-6 rounded-lg shadow-md md:w-11/12 mx-auto max-lg:p-4 text-center">
  124.             <img src="/images/icons/citation.png" alt="Icône de citation" class="w-8 h-8 mb-4 mx-auto">
  125.             <p class="text-gray-700">{{ 'landing.testimonial_alejandro'|trans }} <br/>
  126.                 <br/><em>{{ 'landing.alejandro'|trans }}</em>
  127.             </p>
  128.         </div>
  129.         <div class="bg-white p-6 rounded-lg shadow-md md:w-11/12 mx-auto max-lg:p-4 text-center">
  130.             <img src="/images/icons/citation.png" alt="Icône de citation" class="w-8 h-8 mb-4 mx-auto">
  131.             <p class="text-gray-700">{{ 'landing.testimonial_mei'|trans }} <br/>
  132.                 <br/><em>{{ 'landing.mei'|trans }}</em>
  133.             </p>
  134.         </div>
  135.         <div class="bg-white p-6 rounded-lg shadow-md md:w-11/12 mx-auto max-lg:p-4 text-center">
  136.             <img src="/images/icons/citation.png" alt="Icône de citation" class="w-8 h-8 mb-4 mx-auto">
  137.             <p class="text-gray-700">{{ 'landing.testimonial_luca'|trans }} <br/>
  138.                 <br/><em>{{ 'landing.luca'|trans }}</em>
  139.             </p>
  140.         </div>
  141.     </div>
  142. </div>
  144. <style>
  145.     .faq-section {
  146.         display: flex;
  147.         align-items: center;
  148.     }
  149.     .faq-title {
  150.         display: flex;
  151.         align-items: center;
  152.         justify-content: center;
  153.     }
  154.     .faq-questions {
  155.         display: flex;
  156.         flex-direction: column;
  157.     }
  158.     .faq-answer {
  159.         max-height: 0;
  160.         overflow: hidden;
  161.         transition: max-height 0.3s ease-out;
  162.     }
  163.     .faq-answer.active {
  164.         max-height: 200px; /* Ajustez cette valeur selon vos besoins */
  165.         overflow: visible;
  166.     }
  167. </style>
  169. <div class="container mx-auto px-4 py-8 mb-24 flex flex-col md:flex-row items-start justify-between faq-section">
  170.     <div class="w-full md:w-1/3 p-4 faq-title">
  171.         <h2 class="text-3xl font-bold mb-4">{{ 'landing.weanswer'|trans }}<br/> {{ 'landing.questions'|trans }}</h2>
  172.     </div>
  173.     <div class="w-full md:w-2/3 p-4 space-y-4 faq-questions">
  174.         <!-- Question 1 -->
  175.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  176.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  177.                 <div class="flex-1 text-left pr-4">{{ 'landing.question1'|trans }}</div>
  178.                 <div class="flex-shrink-0 w-6 h-6">
  179.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  180.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  181.                     </svg>
  182.                 </div>
  183.             </button>
  184.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  185.                 <p class="p-4 text-gray-700">{{ 'landing.faq_fees'|trans }}</p>
  186.             </div>
  187.         </div>
  189.         <!-- Question 2 -->
  190.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  191.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  192.                 <div class="flex-1 text-left pr-4">{{ 'landing.question2'|trans }}</div>
  193.                 <div class="flex-shrink-0 w-6 h-6">
  194.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  195.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  196.                     </svg>
  197.                 </div>
  198.             </button>
  199.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  200.                 <p class="p-4 text-gray-700">{{ 'landing.faq_refund'|trans }}</p>
  201.             </div>
  202.         </div>
  204.         <!-- Question 3 -->
  205.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  206.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  207.                 <div class="flex-1 text-left pr-4">{{ 'landing.question3'|trans }}</div>
  208.                 <div class="flex-shrink-0 w-6 h-6">
  209.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  210.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  211.                     </svg>
  212.                 </div>
  213.             </button>
  214.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  215.                 <p class="p-4 text-gray-700">{{ 'landing.faq_apl'|trans }}</p>
  216.             </div>
  217.         </div>
  219.         <!-- Question 4 -->
  220.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  221.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  222.                 <div class="flex-1 text-left pr-4">{{ 'landing.question4'|trans }}</div>
  223.                 <div class="flex-shrink-0 w-6 h-6">
  224.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  225.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  226.                     </svg>
  227.                 </div>
  228.             </button>
  229.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  230.                 <p class="p-4 text-gray-700">{{ 'landing.faq_furnished'|trans }}</p>
  231.             </div>
  232.         </div>
  234.         <!-- Question 5 -->
  235.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  236.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  237.                 <div class="flex-1 text-left pr-4">{{ 'landing.question5'|trans }}</div>
  238.                 <div class="flex-shrink-0 w-6 h-6">
  239.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  240.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  241.                     </svg>
  242.                 </div>
  243.             </button>
  244.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  245.                 <p class="p-4 text-gray-700">{{ 'landing.faq_lease_duration'|trans }}</p>
  246.             </div>
  247.         </div>
  249.         <!-- Question 6 -->
  250.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  251.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  252.                 <div class="flex-1 text-left pr-4">{{ 'landing.question6'|trans }}</div>
  253.                 <div class="flex-shrink-0 w-6 h-6">
  254.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  255.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  256.                     </svg>
  257.                 </div>
  258.             </button>
  259.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  260.                 <p class="p-4 text-gray-700">{{ 'landing.faq_leave_accommodation'|trans }}</p>
  261.             </div>
  262.         </div>
  264.         <!-- Question 7 -->
  265.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  266.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  267.                 <div class="flex-1 text-left pr-4">{{ 'landing.question7'|trans }}</div>
  268.                 <div class="flex-shrink-0 w-6 h-6">
  269.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  270.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  271.                     </svg>
  272.                 </div>
  273.             </button>
  274.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  275.                 <p class="p-4 text-gray-700">{{ 'landing.faq_insurance'|trans }}</p>
  276.             </div>
  277.         </div>
  279.         <!-- Question 8 -->
  280.         <div class="border border-gray-300 rounded-lg overflow-hidden shadow-md relative faq-item">
  281.             <button class="faq-question flex justify-between items-center w-full p-4 font-semibold text-left hover:bg-gray-200 transition">
  282.                 <div class="flex-1 text-left pr-4">{{ 'landing.question8'|trans }}</div>
  283.                 <div class="flex-shrink-0 w-6 h-6">
  284.                     <svg class="w-6 h-6 text-gray-600 transition-transform transform rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  285.                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
  286.                     </svg>
  287.                 </div>
  288.             </button>
  289.             <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
  290.                 <p class="p-4 text-gray-700">{{ 'landing.faq_guarantor'|trans }}</p>
  291.             </div>
  292.         </div>
  293.         <!-- Question 9 -->
  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.question9'|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_no_guarantor'|trans|raw }}</p>
  305.             </div>
  306.         </div>
  307.     </div>
  308. </div>
  310. <div class="bg-gray-200 w-full px-4 py-8 mb-200">
  311.     <h2 class="text-4xl md:text-3xl font-bold mb-6 text-center">{{ 'landing.popular_destinations'|trans }}</h2> <br/>
  312.     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  313.         <a href="{{ path('advanced_search', {'city': 'Paris', 'lat': 48.8575475, 'lng': 2.3513765}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  314.             <h3 class="text-lg md:text-xl font-semibold mb-2">Paris et sa banlieue</h3>
  315.         </a>
  316.         <a href="{{ path('advanced_search', {'city': 'Lille', 'lat': 50.624378, 'lng': 3.0678588}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  317.             <h3 class="text-lg md:text-xl font-semibold mb-2">Lille</h3>
  318.         </a>
  319.         <a href="{{ path('advanced_search', {'city': 'Lyon', 'lat': 45.764043, 'lng': 4.835659}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  320.             <h3 class="text-lg md:text-xl font-semibold mb-2">Lyon</h3>
  321.         </a>
  322.         <a href="{{ path('advanced_search', {'city': 'Toulouse', 'lat': 43.6048462, 'lng': 1.442848}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  323.             <h3 class="text-lg md:text-xl font-semibold mb-2">Toulouse</h3>
  324.         </a>
  325.         <a href="{{ path('advanced_search', {'city': 'Strasbourg', 'lat': 48.5734053, 'lng': 7.752111299999999}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  326.             <h3 class="text-lg md:text-xl font-semibold mb-2">Strasbourg</h3>
  327.         </a>
  328.         <a href="{{ path('advanced_search', {'city': 'Marseille', 'lat': 43.3025742, 'lng': 5.369074299999999}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  329.             <h3 class="text-lg md:text-xl font-semibold mb-2">Marseille</h3>
  330.         </a>
  331.         <a href="{{ path('advanced_search', {'city': 'Rennes', 'lat': 48.117266, 'lng': 1.6777926}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  332.             <h3 class="text-lg md:text-xl font-semibold mb-2">Rennes</h3>
  333.         </a>
  334.         <a href="{{ path('advanced_search', {'city': 'Bordeaux', 'lat': 44.8416106, 'lng': 0.5810938000000001}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  335.             <h3 class="text-lg md:text-xl font-semibold mb-2">Bordeaux</h3>
  336.         </a>
  337.         <a href="{{ path('advanced_search', {'city': 'Montpellier', 'lat': 43.6108535, 'lng': 3.8761323}) }}" class="bg-white p-6 rounded-lg shadow-md text-center">
  338.             <h3 class="text-lg md:text-xl font-semibold mb-2">Montpellier</h3>
  339.         </a>
  340.     </div>
  341. </div> <br/> <br/>
  343. <!-- Modal de connexion/inscription -->
  344. <div id="connectModal" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  345.     <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
  346.         <p class="text-lg font-semibold mb-4">{{ 'landing.option'|trans }}</p>
  347.         <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">
  348.             {{ 'landing.login'|trans }}
  349.         </button>
  350.         <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">
  351.             {{ 'landing.register'|trans }}
  352.         </button>
  353.     </div>
  354. </div>
  355. <div id="connectPop" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center hidden z-50">
  356.     <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
  357.         <p class="text-lg font-semibold mb-4">{{ 'landing.tenant'|trans }}</p>
  358.         <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">
  359.             {{ 'landing.login'|trans }}
  360.         </button>
  361.     </div>
  362. </div>
  364. <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">
  365.     {{ 'landing.search'|trans }}
  366. </button>
  368. <script>
  369.     let autocompleteLanding;
  370.     var countryTranslations = {
  371.         'FR': '{{ 'search.InFrance'|trans }}',
  372.         'BE': '{{ 'search.InBelgique'|trans }}',
  373.         'DE': '{{ 'search.InAllemagne'|trans }}',
  374.         'ES': '{{ 'search.InEspagne'|trans }}',
  375.         'IT': '{{ 'search.InItalie'|trans }}',
  376.         'PT': '{{ 'search.InPortugal'|trans }}',
  377.         'CA': '{{ 'search.InCanada'|trans }}',
  378.         'LU': '{{ 'search.InLuxembourg'|trans }}'
  379.     };
  381.     function initAutocomplete(inputId) {
  382.         const input = document.getElementById(inputId);
  383.         if (!input) {
  384.             console.error("Input non trouvé :", inputId);
  385.             return;
  386.         }
  388.         const options = {
  389.             types: ['(cities)'],
  390.             componentRestrictions: { country: 'FR' }
  391.         };
  393.         try {
  394.             autocompleteLanding = new google.maps.places.Autocomplete(input, options);
  395.             
  396.             document.querySelectorAll('select[name=selectCountry]').forEach(inputSelect => {
  397.                 inputSelect.addEventListener('change', async () => {
  398.                     var countryName = inputSelect.value;
  399.                     inputSelect.value ? document.querySelectorAll('input[name=city]')[0].style.display = 'block' : document.querySelectorAll('input[name=city]')[0].style.display = 'none';
  400.                     autocompleteLanding.setComponentRestrictions({ country: inputSelect.value ? inputSelect.value : 'FR' });
  401.                     spanCountryChecked = document.getElementById('accommodation-title-country');
  402.                     spanCountryChecked.textContent = countryTranslations[countryName];
  403.                     
  404.                     const response = await fetch(`/buildings-country?country=${inputSelect.id}&acronym=${inputSelect.value}`);
  405.                     const html = await response.text();
  406.                     document.getElementById('recent-carousel').innerHTML = html;
  407.                 })
  408.             });
  410.             autocompleteLanding.addListener('place_changed', function () {
  411.                 const place = autocompleteLanding.getPlace();
  412.                 if (!place.geometry) {
  413.                     console.error("Aucune géométrie trouvée pour ce lieu.");
  414.                     return;
  415.                 }
  417.                 const latInput = document.getElementById('lat');
  418.                 const lngInput = document.getElementById('lng');
  420.                 if (latInput && lngInput) {
  421.                     latInput.value = place.geometry.location.lat();
  422.                     lngInput.value = place.geometry.location.lng();
  423.                 }
  425.                 let city = "";
  426.                 place.address_components.forEach(component => {
  427.                     if (component.types.includes("locality")) {
  428.                         city = component.long_name;
  429.                     }
  430.                 });
  432.                 input.value = city || place.name; // Fallback si le nom de la ville n'est pas trouvé
  434.                 const form = input.closest('form');
  435.                 if (form) {
  436.                     form.submit();
  437.                 }
  439.             });
  440.         } catch (error) {
  441.             console.error("Erreur lors de l'initialisation de l'autocomplétion :", error);
  442.         }
  443.     }
  445.     // Fonction pour charger l'API Google Maps de manière asynchrone
  446.     function loadGoogleMapsAPI() {
  447.         if (typeof google === 'undefined' || !google.maps) {
  448.             const script = document.createElement('script');
  449.             script.src = 'https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&libraries=places&callback=initializeAutocomplete';
  450.             script.async = true;
  451.             script.defer = true;
  452.             script.onerror = () => {
  453.                 console.error("Erreur lors du chargement de l'API Google Maps.");
  454.             };
  455.             document.head.appendChild(script);
  456.         } else {
  457.             initializeAutocomplete();
  458.         }
  459.     }
  461.     // Fonction pour initialiser l'autocomplétion après le chargement de l'API
  462.     function initializeAutocomplete() {
  463.         if (typeof google !== 'undefined' && google.maps && google.maps.places) {
  464.             initAutocomplete('address-landing');
  465.         } else {
  466.             console.error("Google Maps API non chargée correctement.");
  467.         }
  468.     }
  470.     // Fonction pour configurer un carousel
  471.     function setupCarousel(carousel) {
  472.         const carouselId = carousel.id.split('-')[1];
  473.         const slides = carousel.querySelectorAll('a');
  474.         const indicators = document.querySelectorAll(`#carousel-indicators-${carouselId} button`);
  475.         const prevButton = document.querySelector(`[data-carousel-prev="${carouselId}"]`);
  476.         const nextButton = document.querySelector(`[data-carousel-next="${carouselId}"]`);
  478.         let currentIndex = 0;
  479.         const totalSlides = slides.length;
  481.         function updateCarousel() {
  482.             if (slides.length === 0) return;
  484.             slides.forEach((slide, index) => {
  485.                 slide.style.transition = 'opacity 0.6s ease-in-out, transform 0.6s ease-in-out';
  486.                 slide.style.position = 'absolute';
  487.                 slide.style.opacity = '0';
  488.                 slide.style.transform = 'translateX(100%)';
  489.             });
  491.             const currentSlide = slides[currentIndex];
  492.             currentSlide.style.opacity = '1';
  493.             currentSlide.style.transform = 'translateX(0)';
  495.             indicators.forEach((indicator, index) => {
  496.                 if (index === currentIndex) {
  497.                     indicator.classList.add('bg-[#ffcc00]', 'opacity-100');
  498.                     indicator.classList.remove('bg-gray-300', 'opacity-50');
  499.                 } else {
  500.                     indicator.classList.remove('bg-[#ffcc00]', 'opacity-100');
  501.                     indicator.classList.add('bg-gray-300', 'opacity-50');
  502.                 }
  503.             });
  504.         }
  506.         function goToSlide(index) {
  507.             currentIndex = (index + totalSlides) % totalSlides;
  508.             updateCarousel();
  509.         }
  511.         function nextSlide() {
  512.             goToSlide(currentIndex + 1);
  513.         }
  515.         function prevSlide() {
  516.             goToSlide(currentIndex - 1);
  517.         }
  519.         // Événements
  520.         if (nextButton) nextButton.addEventListener('click', nextSlide);
  521.         if (prevButton) prevButton.addEventListener('click', prevSlide);
  523.         indicators.forEach((indicator, index) => {
  524.             indicator.addEventListener('click', () => goToSlide(index));
  525.         });
  527.     }
  529.     // Initialisation du script
  530.     document.addEventListener('DOMContentLoaded', function () {
  531.         // Charger l'API Google Maps
  532.         loadGoogleMapsAPI();
  534.         // Gestion de la modal de connexion/inscription
  535.         const openModalElements = document.querySelectorAll('#openModalLink1, #openConnectModalBtn');
  536.         const connectModal = document.getElementById('connectModal');
  538.         openModalElements.forEach(element => {
  539.             element.addEventListener('click', function (event) {
  540.                 event.preventDefault();
  541.                 connectModal.classList.remove('hidden');
  542.             });
  543.         });
  545.         connectModal.addEventListener('click', function (event) {
  546.             if (event.target === connectModal) {
  547.                 connectModal.classList.add('hidden');
  548.             }
  549.         });
  551.         // Gestion du bouton de recherche (défilement vers le haut)
  552.         const scrollToTopBtn = document.getElementById('scrollToTopBtn');
  554.         scrollToTopBtn.addEventListener('click', function () {
  555.             window.scrollTo({
  556.                 top: 0,
  557.                 behavior: 'smooth'
  558.             });
  559.         });
  561.         // Affichage/masquage du bouton de défilement
  562.         window.addEventListener('scroll', function () {
  563.             if (window.scrollY > 100) {
  564.                 scrollToTopBtn.style.display = 'block';
  565.             } else {
  566.                 scrollToTopBtn.style.display = 'none';
  567.             }
  568.         });
  570.         // Gestion des carrousels
  571.         const carousels = document.querySelectorAll('[id^="carousel-"]');
  572.         carousels.forEach(setupCarousel);
  574.         // Gestion des clics sur les cœurs (affichage de la modal)
  575.         const likeButtons = document.querySelectorAll('.like-button');
  576.         likeButtons.forEach(button => {
  577.             button.addEventListener('click', function () {
  578.                 const connectModal = document.getElementById('connectModal');
  579.                 connectModal.classList.remove('hidden');
  580.             });
  581.         });
  583.         // Gestion du menu de langue
  584.         const languageDropdown = document.getElementById('languageDropdown');
  585.         const languageMenu = document.getElementById('languageMenu');
  587.         if (languageDropdown && languageMenu) {
  588.             languageDropdown.addEventListener('click', function () {
  589.                 languageMenu.classList.toggle('hidden');
  590.             });
  591.         }
  593.         // Gestion de l'accordéon
  594.         const accordionButtons = document.querySelectorAll('.faq-question');
  595.         accordionButtons.forEach(button => {
  596.             button.addEventListener('click', function() {
  597.                 const content = this.nextElementSibling;
  598.                 const isExpanded = content.classList.contains('active');
  600.                 // Fermer tous les autres éléments de l'accordéon
  601.                 accordionButtons.forEach(btn => {
  602.                     const otherContent = btn.nextElementSibling;
  603.                     if (btn !== this) {
  604.                         otherContent.classList.remove('active');
  605.                     }
  606.                 });
  608.                 // Basculer l'état de l'élément cliqué
  609.                 if (isExpanded) {
  610.                     content.classList.remove('active');
  611.                 } else {
  612.                     content.classList.add('active');
  613.                 }
  614.             });
  615.         });
  616.     // Ajout du gestionnaire d'événements pour la touche "Entrée"
  617.     const searchInput = document.getElementById('address-landing');
  618.         if (searchInput) {
  619.             searchInput.addEventListener('keydown', function (event) {
  620.                 if (event.key === 'Enter') {
  621.                     event.preventDefault();
  622.                     document.getElementById('search-form').submit();
  623.                 }
  624.             });
  625.         }
  627.     const openPopElements = document.querySelectorAll('#openPopLink1, #openPopLink2');
  628.     const connectPop = document.getElementById('connectPop');
  630.     if (openPopElements.length > 0 && connectPop) {
  631.         openPopElements.forEach(element => {
  632.             element.addEventListener('click', function (event) {
  633.                 event.preventDefault();
  634.                 connectPop.classList.remove('hidden');
  635.             });
  636.         });
  638.         connectPop.addEventListener('click', function (event) {
  639.             if (event.target === connectPop) {
  640.                 connectPop.classList.add('hidden');
  641.             }
  642.         });
  644.         connectPop.querySelector('.bg-white').addEventListener('click', function (event) {
  645.             event.stopPropagation();
  646.         });
  647.     }
  648.     });
  649. </script>
  650. {% endblock %}