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

Open in your IDE?
  1. <section class="text-white pt-28 md:pt-[120px] pb-8 md:pb-20"
  2.   section-shade="dark">
  3.   <div class="container flex flex-col lg:flex-row lg:justify-between gap-16">
  4.     <div class="lg:w-7/12 xl:w-8/12">
  5.       <div class="relative w-full h-[335px] md:h-[390px] lg:h-[700px] xl:h-[930px] clip-path-tr-bl overflow-hidden">
  6.         {# image size 1730 × 1390 webp ~70-100kb #}
  7.         {% if content.singleServiceImage|length > 0 %}
  8.         {% set image = content.singleServiceImage.url %}
  9.         <img class="absolute object-cover w-full h-full"
  10.           zoom-out
  11.           zoom-out-trigger="scroll"
  12.           src="{{ image }}"
  13.           alt="Benefits"
  14.           loading="lazy">
  15.         {% endif %}
  16.       </div>
  17.     </div>
  18.  
  19.     <div class="md:w-8/12 lg:w-5/12 xl:w-4/12">
  20.       <h2 class="h2"
  21.         split-direction="top"
  22.         split-trigger="scroll">{{content.singleServiceTitle}}</h2>
  23.       <div class="text-sm mt-8"
  24.         fade
  25.         fade-trigger="scroll">{{content.singleServiceText|raw}}</div>
  26.       <div class="mt-12">
  27.         <h3 class="title text-2xl"
  28.           split-direction="bottom"
  29.           split-trigger="scroll">{{content.BenefitsTitle}}</h3>
  30.         <ul class="flex flex-col gap-6 mt-6">
  31.           {% for item in content.benefits %}
  32.           <li class="flex gap-4"
  33.             fade
  34.             fade-trigger="scroll">
  35.             <span class="flex items-center justify-center w-8 h-8 border border-white rounded shrink-0">
  36.               <svg class="w-3 h-3">
  37.                 <use xlink:href="#icon-check"></use>
  38.               </svg>
  39.             </span>
  40.             {{item.BenefitsText}}
  41.           </li>
  42.           {% endfor %}
  43.         </ul>
  44.       </div>
  45.     </div>
  46.   </div>
  47. </section>