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

Open in your IDE?
  1. {% set keys = [
  2.     {
  3.       'title': 'Collaborateurs',
  4.       'number': '8',
  5.       'img': './assets/oaks-lane/services/key-1.webp',
  6.       'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.',
  7.     },
  8.     {
  9.       'title': 'Proiets étudiés ces six derniers mois',
  10.       'number': '78+',
  11.       'img': './assets/oaks-lane/services/key-2.webp',
  12.       'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation',
  13.     },
  14.     {
  15.       'title': 'Projets en cours',
  16.       'number': '32+',
  17.       'img': './assets/oaks-lane/services/key-3.webp',
  18.       'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation',
  19.     },
  20.     {
  21.       'title': 'Years of successful business',
  22.       'number': '15',
  23.       'img': './assets/oaks-lane/services/key-4.webp',
  24.       'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.',
  25.     },
  27.   ] %}
  29. <section class="key-section text-white py-8 md:py-20"
  30.   section-shade="dark">
  31.   <div class="container">
  32.     <h2 class="h2 md:text-center max-w-2xl mx-auto"
  33.       split-direction="top"
  34.       split-trigger="scroll">{{content.keysSectionTitle}}</h2>
  36.     <div class="grid md:grid-cols-2 xl:grid-cols-4 gap-6 md:gap-8 xl:gap-2 mt-6 md:mt-20">
  37.       {% for item in content.keys %}
  38.       <div class="key-item relative bg-blue text-center md:text-left"
  39.         fade
  40.         fade-trigger="none">
  41.         {# Image size 500*815 #}
  42.         {% if item.keysImage|length > 0 %}
  43.         {% set image = item.keysImage.thumbnails['500x815'] %}
  44.         <img class="absolute mix-blend-luminosity object-cover w-full h-full select-none pointer-events-none"
  45.           src="{{ image }}"
  46.           alt="">
  47.         {% endif %}
  49.         <div class="relative pt-20 px-6 pb-14 z-10">
  50.           <div
  51.             class="flex items-center justify-center mx-auto w-28 md:w-44 border border-white/20 rounded-full aspect-square text-5xl md:text-[3.875rem]">
  52.             <span>
  53.               {{item.keysNumber}}
  54.             </span>
  55.           </div>
  57.           <h3 class="h3 mt-8">{{item.keysTitle}}</h3>
  58.           <p class="text-sm md:text-base mt-8">
  59.             {{item.keysText|raw}}
  60.           </p>
  61.         </div>
  63.       </div>
  64.       {% endfor %}
  65.     </div>
  66.   </div>
  67. </section>