templates/elements/home_cover/home_cover.html.twig line 1

Open in your IDE?
  1. {% import 'elements2024/macros/buttons.html.twig' as buttons %}
  3. <!-- Hero section -->
  4. <section class="home-hero-section relative max-lg:pt-32 max-lg:pb-16 md:h-screen">
  5.     <div class="absolute inset-0 overflow-hidden">
  6.         <div class="absolute inset-0 animate-slowLoopZoomInOut">
  7.             {% if image %}
  8.                 <img class="home-hero-bg img-cover" src="{{image.thumbnails['1440x800']}}" srcset="{{image.thumbnails['2880x1600']}} 2x" alt="">
  9.             {% endif %}
  10.             <div class="absolute inset-0 bg-dark/20"></div>
  11.         </div>
  12.     </div>
  13.     <div class="container px-4 h-full flex flex-col justify-center relative">
  15.         <div class="xl:max-w-8/12 w-full mx-auto">
  16.             <h1 class="home-hero-title h2 text-center uppercase text-white" fade>{{ title }}</h1>
  18.             <div class="home-hero-deal flex flex-col md:flex-row gap-4 lg:gap-8 mt-16" fade>
  19.                 <div class="form-deal-type">
  20.                     <button data-form-action="/buy" data-price-select="acheter" class="active" >Acheter</button>
  21.                     <button data-form-action="/rent" data-price-select="louer">Louer</button>
  22.                 </div>
  24.                 <a class="btn-rounded btn__green" href="/nos-services/estimer">
  25.                     <span>Estimer</span>
  26.                     <svg class="w-5 h-5" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  27.                         <path d="M1.25 10H18.75" stroke="currentColor"/>
  28.                         <path d="M13.75 5L18.75 10L13.75 15" stroke="currentColor"/>
  29.                     </svg>
  30.                 </a>
  31.             </div>
  33.             {% if eyebrowHtml is defined %}
  34.             <div class="text-white text-center">{{ eyebrowHtml | raw }}</div>
  35.             {% else %}
  36.             <form method="GET" action="/buy" class="home-hero-form flex flex-col lg:flex-row max-lg:gap-6 lg:justify-between bg-white py-6 lg:py-3 px-4 lg:pl-4 lg:pr-3 rounded-xl lg:rounded-full mt-4 lg:divide-x divide-dark/60">
  37.                 <div class="multiselect-wrapp lg:w-1/4">
  38.                     <label for="location" class="truncate">Localité(s) (Canton, ville, NPA)</label>
  39.                     <div class="js-location-select" id="location" name="location[]" fetch-url="{{path('offers_locations_autocomplete')}}"></div>
  40.                 </div>
  42.                 <div class="multiselect-wrapp lg:w-1/4">
  43.                     <label for="type">Type</label>
  44.                     {{ render(controller('App\\Controller\\Website\\LayoutController::selectType')) }}
  45.                 </div>
  47.                 <div class="multiselect-wrapp lg:w-1/4">
  48.                     <label>Budget (CHF)</label>
  49.                     <div data-vue-root>
  50.                         <dropdown>
  51.                             <template slot="header">
  52.                                 <button
  53.                                     type="button"
  54.                                     class="vscomp-toggle-button vscomp-wrapper"
  55.                                     :class="{ 'has-value': priceSelectionDisplay }"
  56.                                 >
  57.                                     <div class="vscomp-value" v-text="priceSelectionDisplay || 'Choisir'"></div>
  58.                                     <div class="vscomp-arrow"></div>
  59.                                 </button>
  60.                             </template>
  61.                             <template slot="default">
  62.                                 <div class="flex gap-4">
  63.                                     <number-input-with-suggestions
  64.                                         input-class="simple-input"
  65.                                         v-model="priceMin"
  66.                                         :suggestions="minPriceSuggestions"
  67.                                         :format-option="formatPriceOption"
  68.                                         placeholder="Min"
  69.                                         name="priceMin"
  70.                                         list-class="vscomp-options-list price-list"
  71.                                         list-item-class="vscomp-option"
  72.                                     />
  74.                                     <number-input-with-suggestions
  75.                                         input-class="simple-input"
  76.                                         v-model="priceMax"
  77.                                         :suggestions="maxPriceSuggestions"
  78.                                         :format-option="formatPriceOption"
  79.                                         placeholder="Max"
  80.                                         name="priceMax"
  81.                                         list-class="vscomp-options-list price-list"
  82.                                         list-item-class="vscomp-option"
  83.                                     />
  84.                                 </div>
  85.                             </template>
  86.                         </dropdown>
  87.                     </div>
  88.                 </div>
  90.                 <button class="btn-rounded btn__green">Recherche</button>
  91.             </form>
  92.             {% endif %}
  93.         </div>
  94.     </div>
  95. </section>