templates/includes/blocks/servicesSection.html.twig line 1

Open in your IDE?
  1. {% import "./macros_typography.html.twig" as macrosTypography %}
  2. {% import "./macros_button.html.twig" as macrosButton %}
  4. {% for section in content.services %}
  6. {% set item = sulu_content_load(section.id,{'title': 'title', 'url': 'url', 'description': 'description', 'image': 'image', 'icon': 'icon'}) %}
  8. <section class="service-section text-blue pt-16 md:pt-20 {{loop.last ? 'pb-[70px] md:pb-20' : 'pb-8 md:pb-10'}}" section-shade="light">
  9.   <div
  10.     class="big-container flex flex-col {{loop.index is odd ? 'lg:flex-row-reverse' : 'lg:flex-row'}} justify-between gap-6">
  12.     <div class="lg:w-7/12">
  13.       <div
  14.         class="relative w-full min-h-[250px] md:min-h-[350px] lg:min-h-[695px] {{loop.index is even ? 'clip-path-tl-br' : 'clip-path-tr-bl'}} overflow-hidden">
  15.         {# image size 1730 × 1390 webp ~70-100kb #}
  16.         {% if item.content.image|length > 0 %}
  17.         {% set image = item.content.image.url %}
  18.         <img class="absolute object-cover w-full h-full"
  19.           zoom-out
  20.           zoom-out-trigger="scroll"
  21.           src="{{ image }}"
  22.           alt="{{item.content.title}} image"
  23.           loading="lazy">
  24.         {% endif %}
  25.       </div>
  26.     </div>
  28.     <div class="lg:w-4/12">
  29.       <div class="max-w-[90px]"
  30.         fade
  31.         fade-trigger="scroll">
  32.         {# Image size 100*100 #}
  33.         <img class="w-full"
  34.           src="{{ item.content.icon }}"
  35.           alt="{{ item.content.title }} icon"
  36.           loading="lazy">
  37.       </div>
  39.       <h2 class="h2 mt-6 lg:mt-20"
  40.         split-direction="top"
  41.         split-trigger="scroll">{{item.content.title}}</h2>
  43.       <div class="text-sm sm:w-8/12 lg:w-full mt-6 lg:mt-8"
  44.         fade
  45.         fade-trigger="scroll">{{ item.content.description | raw}}</div>
  47.       {{macrosButton.arrowLink({
  48.       'wrappClass': 'mt-6 lg:mt-12',
  49.       'text': content.textLink,
  50.       'href': sulu_content_path(item.content.url),
  51.       'trigger': 'scroll'
  52.       })}}
  53.     </div>
  55.   </div>
  56. </section>   
  58. {% endfor %}