templates/pages/blocks/single_property_section.html.twig line 1

Open in your IDE?
  1. {% import 'elements2024/macros/buttons.html.twig' as buttons %}
  2. {% import 'elements2024/macros/title-block.html.twig' as blocks %}
  4. {% if content.property is not null %}
  5.     <!-- Selection section -->
  6.     <section class="py-8 lg:py-16 overflow-hidden">
  7.         <div class="container">
  9.             {{ blocks.titleBlock({
  10.         title: content.title,
  11.         description: content.description,
  12.         link: {
  13.           text: content.link_text,
  14.           href: path('rent_detail', { encodedTitle: content.property.url }),
  15.         }
  16.       }) }}
  18.             <div class="grid max-sm:grid-rows-none max-xl:grid-rows-[3fr,1fr] xl:grid-cols-10 gap-4 mt-16" batch-children>
  19.                 <div class="xl:col-span-8" fade fade-trigger="batch">
  20.                     <div
  21.                         class="relative flex flex-col justify-between h-full p-4 sm:p-8 rounded overflow-hidden" style="min-height: clamp(320px, calc(100vh - 100px), 520px)">
  23.                         <!-- Property details -->
  24.                         <div class="relative flex max-sm:hidden justify-between gap-2 text-xs z-10">
  25.                             <div class="flex gap-2 flex-wrap">
  26.                                 <div class="flex items-center gap-2 bg-white rounded pl-2 pr-4 py-2">
  27.                                     <svg class="w-4 h-4" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  28.                                         <path d="M7.66622 1.6175L2.62531 2.62568L1.61713 7.66658C1.60099 7.7473 1.60502 7.83075 1.62888 7.90953C1.65273 7.98832 1.69566 8.05999 1.75387 8.1182L8.28217 14.6465C8.3286 14.6929 8.38372 14.7298 8.44438 14.7549C8.50504 14.78 8.57006 14.7929 8.63572 14.7929C8.70138 14.7929 8.7664 14.78 8.82706 14.7549C8.88773 14.7298 8.94284 14.6929 8.98927 14.6465L14.6461 8.98964C14.6926 8.94321 14.7294 8.88809 14.7545 8.82743C14.7796 8.76677 14.7926 8.70175 14.7926 8.63609C14.7926 8.57043 14.7796 8.50541 14.7545 8.44475C14.7294 8.38408 14.6926 8.32896 14.6461 8.28253L8.11783 1.75424C8.05962 1.69603 7.98795 1.6531 7.90917 1.62924C7.83039 1.60539 7.74693 1.60135 7.66622 1.6175V1.6175Z" stroke="#0A0A0A" stroke-linecap="round" stroke-linejoin="round"/>
  29.                                         <path d="M5.25 6C5.66421 6 6 5.66421 6 5.25C6 4.83579 5.66421 4.5 5.25 4.5C4.83579 4.5 4.5 4.83579 4.5 5.25C4.5 5.66421 4.83579 6 5.25 6Z" fill="#0A0A0A"/>
  30.                                     </svg>
  32.                                     <span>{{content.property.reference}}</span>
  33.                                 </div>
  35.                                 {% if content.property.type.title is defined %}
  36.                                 <div class="bg-white rounded px-4 py-2">
  37.                                     <span>{{content.property.type.title}}</span>
  38.                                 </div>
  39.                                 {% endif %}
  41.                                 {% if content.property.typeProperty is defined %}
  42.                                 <div class="bg-white rounded px-4 py-2">
  43.                                     <span>{{content.property.typeProperty}}</span>
  44.                                 </div>
  45.                                 {% endif %}
  46.                             </div>
  48.                             <div class="flex justify-end gap-2 flex-wrap">
  49.                                 <div class="flex items-center gap-2 text-xs bg-white rounded pl-2 pr-4 py-2">
  50.                                     <svg class="w-4 h-4" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  51.                                         <path d="M8 8.5C9.10457 8.5 10 7.60457 10 6.5C10 5.39543 9.10457 4.5 8 4.5C6.89543 4.5 6 5.39543 6 6.5C6 7.60457 6.89543 8.5 8 8.5Z" stroke="#1E713F" stroke-linecap="round" stroke-linejoin="round"/>
  52.                                         <path d="M13 6.5C13 11 8 14.5 8 14.5C8 14.5 3 11 3 6.5C3 5.17392 3.52678 3.90215 4.46447 2.96447C5.40215 2.02678 6.67392 1.5 8 1.5C9.32608 1.5 10.5979 2.02678 11.5355 2.96447C12.4732 3.90215 13 5.17392 13 6.5V6.5Z" stroke="#1E713F" stroke-linecap="round" stroke-linejoin="round"/>
  53.                                     </svg>
  55.                                     <span>
  56.                                         {{content.property.adresse}}
  57.                                     </span>
  58.                                 </div>
  60.                                 <div class="bg-white rounded px-4 py-2">
  61.                                     <span>CHF {{content.property.price|number_format(0, '.', "'")}}</span>
  62.                                 </div>
  63.                             </div>
  64.                         </div>
  66.                         <!-- Property image -->
  67.                         <div class="absolute inset-0 rounded overflow-hidden">
  68.                             <img src="{{asset('/property-images/'~content.property.photos[0].path)}}" alt="{{ content.property.name }}" class="img-cover" loading="lazy">
  69.                             <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-black/20"></div>
  70.                         </div>
  72.                         <!-- Property title, button -->
  73.                         <div class="relative mt-auto">
  74.                             <h3 class="h3 text-white">{{ content.property.name }}</h3>
  76.                             <div class="w-fit mt-8">
  77.                                 {{ buttons.linkRounded('Découvrir plus', path('rent_detail', { encodedTitle: content.property.url }), "btn__green", true) }}
  78.                             </div>
  79.                         </div>
  81.                     </div>
  82.                 </div>
  84.                 <div class="xl:col-span-2 grid max-xl:grid-cols-3 xl:grid-rows-3 gap-2 sm:gap-4">
  85.                     {% for image in content.property.photos|slice(1, 3) %}
  86.                         <div class="rounded max-h-52 overflow-hidden" fade fade-trigger="batch">
  87.                             <img src="{{asset('/property-images/'~image.path)}}" alt="" class="img-cover" loading="lazy">
  88.                         </div>
  89.                     {% endfor %}
  90.                 </div>
  91.             </div>
  92.         </div>
  93.     </section>
  95. {% endif %}