templates/pages/blocks/last_service_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 %}
  5. <section class="relative py-8 lg:py-16 overflow-hidden">
  6.     <div class="container">
  7.         {{ blocks.titleBlock({
  8.       title: content.title,
  9.       description: content.description,
  10.       link: {
  11.                 text: content.link_text,
  12.                 href: content.link
  13.             }
  14.     })}}
  16.         <div class="swiper slider-3 mt-16 !overflow-visible">
  17.             <div class="swiper-wrapper" batch-children>
  18.                 {% for item in content.services %}
  19.                     <div class="services-item swiper-slide" style="width: clamp(288px,24vw,450px); aspect-ratio: calc(450 / 520)">
  20.                         <div class="h-full" big-fade fade-trigger="batch">
  21.                             <div class="absolute inset-0">
  22.                                 {# <img class="img-cover" src="{{ asset('frontend2024/dist/img/home/services/' ~ (loop.index0 % 3 + 1) ~ '.webp') }}" alt="{{ item.title }}"> #}
  23.                                 {# <img class="img-cover" src="{{ asset(item.thumbnail.url) | imagine_filter('1040x720') }}" alt="{{ item.title }}" loading="lazy"> #}
  24.                                 <img class="img-cover" src="{{ asset(item.thumbnail.url)}}" alt="{{ item.title }}" loading="lazy">
  25.                                 <div class="absolute inset-0 bg-dark/20"></div>
  26.                             </div>
  28.                             <div class="absolute bottom-0 left-0 right-0 text-white flex items-center justify-between p-8 cursor-default">
  29.                                 <h3 class="h2-5">{{ item.title }}</h3>
  31.                                 <svg class="w-8 h-8" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  32.                                     <path d="M2 16H30" stroke="currentColor" stroke-width="2"/>
  33.                                     <path d="M22 8L30 16L22 24" stroke="currentColor" stroke-width="2"/>
  34.                                 </svg>
  35.                             </div>
  37.                             <div class="services-item__hover">
  38.                                 <h3 class="h3 mb-auto">{{ item.title }}</h3>
  39.                                 <div class="mt-10">
  40.                                     <p class="p">{{ item.short_desc | raw  }}</p>
  42.                                     <div class="mt-8">
  44.                                         <div class="btn-rounded btn__white">
  45.                                             <svg class="w-5 h-5" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  46.                                                 <path d="M1.25 10H18.75" stroke="currentColor"/>
  47.                                                 <path d="M13.75 5L18.75 10L13.75 15" stroke="currentColor"/>
  48.                                             </svg>
  49.                                             <span>En savoir plus</span>
  50.                                         </div>
  51.                                     </div>
  52.                                 </div>
  53.                             </div>
  55.                             <a class="absolute inset-0" href="{{item.url}}">
  56.                                 <span class="sr-only">En savoir plus</span>
  57.                             </a>
  58.                         </div>
  59.                     </div>
  60.                 {% endfor %}
  61.             </div>
  63.             <!-- Prev button -->
  64.             <div class="swiper-btn-prev-wrapp">
  65.                 {{ buttons.sliderPrev(true) }}
  66.             </div>
  68.             <!-- Next button -->
  69.             <div class="swiper-btn-next-wrapp">
  70.                 {{ buttons.sliderNext(true) }}
  71.             </div>
  72.         </div>
  73.     </div>
  74. </section>