templates/includes/blocks/homeHeroSection.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. <section class="home-hero-section relative lg:h-screen min-h-[600px] bg-white pt-[88px] lg:pt-28"
  5.   section-shade="light">
  6.   <div class="fixed-lines">
  7.     <div></div>
  8.     <div></div>
  9.     <div></div>
  10.   </div>
  12.   <div class="relative h-full grid grid-cols-1 z-10 lg:z-0">
  13.     <div class="relative overflow-hidden mt-12 translate-x-0">
  14.       <div class="lg:absolute px-8 xl:pl-12 pb-16 w-full sm:w-2/3 lg:w-1/3 z-10 lg:bg-white text-blue">
  16.         <h1
  17.           class="home-hero-title text-3xl xs:text-[2.4rem] lg:text-[2.25rem] xl:text-[2.75rem] 2xl:text-6xl font-extrabold leading-tight"
  18.           split-direction="top"
  19.           split-trigger="none">
  20.           {{ content.AlpineSubTitle }}
  21.           {{ content.AlpineTitle|raw }}
  22.         </h1>
  24.         {% set btnText = content.AlpineButtonText  %}
  25.         {% set btnUrl = sulu_content_path(content.AlpineButtonLink)  %}
  27.         {{macrosButton.arrowLink({
  28.         'wrappClass': 'mt-12',
  29.         'href': btnUrl,
  30.         'text': btnText,
  31.         'trigger': 'scroll'
  32.         })}}
  33.       </div>
  35.      <!-- Image -->
  36.     {% if content.AlpineMedia|length > 0 %}
  37.     {% set image = content.AlpineMedia.thumbnails['1920x1080'] %}
  38.       <img class="w-full lg:hidden"
  39.           src="{{ image }}"
  40.           alt="Oaks Lane"
  41.           loading="lazy">
  42.     {% endif %}
  44.       <div class="hidden lg:block relative h-full lg:px-8 xl:px-12 pointer-events-none">
  45.         <div class="home-hero-clip-img relative flex h-full overflow-hidden">
  47.           <div class="flex-grow h-full flex justify-end">
  48.             {% if content.AlpineMedia|length > 0 %}
  49.             {% set image = content.AlpineMedia.thumbnails['1920x1080'] %}
  50.             <img class="absolute top-0 left-0 w-full h-[120%] object-cover"
  51.               src="{{ image }}"
  52.               alt="Oaks Lane"
  53.               data-speed="0.3"
  54.               loading="lazy">
  55.             {% endif %}
  56.           </div>
  58.           <div class="flex justify-end lg:mx-8 lg:w-[calc(100%_/_3_-_42px)] xl:mx-12 xl:w-[calc(100%_/_3_-_4rem)]">
  59.             {% if content.AlpineMedia|length > 0 %}
  60.             {% set image = content.AlpineMedia.thumbnails['1920x1080'] %}
  61.             <img class="absolute top-0 left-0 w-full h-[120%] object-cover"
  62.               src="{{ image }}"
  63.               alt="Oaks Lane"
  64.               data-speed="0.3"
  65.               loading="lazy">
  66.             {% endif %}
  67.           </div>
  69.           <div class="flex-grow h-full flex justify-end">
  70.             {% if content.AlpineMedia|length > 0 %}
  71.             {% set image = content.AlpineMedia.thumbnails['1920x1080'] %}
  72.             <img class="absolute top-0 left-0 w-full h-[120%] object-cover"
  73.               src="{{ image }}"
  74.               alt="Oaks Lane"
  75.               data-speed="0.3"
  76.               loading="lazy">
  77.             {% endif %}
  78.           </div>
  80.         </div>
  81.       </div>
  83.     </div>
  84.   </div>
  86. </section>