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

Open in your IDE?
  1. <section class="hero-section relative h-screen min-h-[600px] bg-blue text-white pt-[88px] lg:pt-28"
  2.   section-shade="transparent">
  3.   <div class="big-container h-full">
  5.     <div
  6.       class="relative flex flex-col md:justify-end pt-10 pb-28 md:w-10/12 lg:w-9/12 xl:w-7/12 max-w-[690px] h-full z-10">
  7.       <div class="hero-uppertitle uppertitle"
  8.         fade
  9.         fade-trigger="none">
  10.         <i></i>
  11.         {{content.heroSectionSubTitle}}
  12.       </div>
  14.       <h1 class="hero-title h1 mt-6"
  15.         split-direction="bottom"
  16.         split-trigger="none">
  17.         {{content.heroSectionTitle}}
  18.       </h1>
  20.       <div class="hero-p lg:text-lg xl:text-2xl mt-6 {{text|length < 160 ? 'max-w-[480px] xl:max-w-xl' : ''}}"
  21.         fade
  22.         fade-trigger="none">
  23.         {{content.heroSectionDescription|raw}}
  24.       </div>
  25.     </div>
  26.   </div>
  28.   <div
  29.     class="absolute md:top-0 bottom-0 left-4 md:left-auto right-0 min-h-[240px] h-[45vh] md:h-auto md:w-10/12 max-w-[1920px] pointer-events-none">
  30.     <div
  31.       class="hero-img-wrapp relative h-full {{ luminosity ? 'mix-blend-luminosity' : '' }} overflow-hidden opacity-50"
  32.       style="clip-path: polygon(43% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 37%, 42% 37%, 42% 100%, 43% 100%);">
  33.       {# Image size 1720*1080 #}
  34.       {% if content.heroSectionImage|length > 0 %}
  35.       {% set image = content.heroSectionImage.thumbnails['1720x1080'] %}
  36.       <img class="hero-img opacity-0 scale-[1.4] w-full h-full object-cover"
  37.         src="{{image}}"
  38.         alt="Our Services">
  39.       {% endif %}
  40.     </div>
  41.   </div>
  42. </section>