templates/includes/blocks/about-hero.html.twig line 1

  1. {% if content.aboutHeroImageWidth == "" %}
  2.     {% set aboutHeroImageWidth = "50" %}
  3. {% else %}
  4.     {% set aboutHeroImageWidth = content.aboutHeroImageWidth %}
  5. {% endif %}
  6. {% if content.aboutHeroTextWidth == "" %}
  7.     {% set aboutHeroTextWidth = "50" %}
  8. {% else %}
  9.     {% set aboutHeroTextWidth = content.aboutHeroTextWidth %}
  10. {% endif %}
  11. {% if content.aboutHeroVerticalOffset == "" %}
  12.     {% set aboutHeroVerticalOffset = "0" %}
  13. {% else %}
  14.     {% set aboutHeroVerticalOffset = content.aboutHeroVerticalOffset %}
  15. {% endif %}
  16. <div class="about-hero about-hero--{% if content.inverted %}inverted {% else %}default{% endif %}" x-data="abouthero"
  17.      style="--hero-text-width: {{ aboutHeroTextWidth }}%; --hero-image-width: {{ aboutHeroImageWidth }}%; --hero-image-offset: -{{ content.aboutHeroImageOffset }}%; --hero-image-vertical-anchor: {{ content.aboutHeroImageVerticalAnchor }}; --hero-image-vertical-offset: {{ aboutHeroVerticalOffset }}%">
  18.     <div class="about-hero__container pt-hero">
  19.         <svg class="about-hero__background" fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 930 860"
  20.              x-ref="background">
  21.             <path d="M2650.26 1587.1L484.51-576.938M484.948 1361.22l-.439-1938.156M484.948 1361.22l484.51-1808.214M-.3 1232.4L1529.44-296.948M2957.6 440.075L0 1231.28M969.457-446.995L0 1231.28M969.458-446.994L484.948 1361.22M484.802-578.029L1044.93 1511.27M393.639-247.165L2559.7 1917.15M87.73 899.852l2956.48-790.917"
  22.                   stroke="currentColor" stroke-miterlimit="10"/>
  23.         </svg>
  24.         <div class="about-hero__content">
  25.             {% if content.aboutHeroPagina %}
  26.             {% if content.aboutHeroSeoHeadlinePagina %}<{{ content.aboutHeroSeoHeadlinePagina }}>{% endif %}
  27.                 <div class="pagina"{% if content.inverted %} style="color: #fff;" {% endif %}>
  28.                     {{ content.aboutHeroPagina }}
  29.                 </div>
  30.             {% if content.aboutHeroSeoHeadlinePagina %}</{{ content.aboutHeroSeoHeadlinePagina }}>{% endif %}
  31.             {% endif %}
  32.             <{{ content.aboutHeroSeoHeadlineTitle ? content.aboutHeroSeoHeadlineTitle : 'h1' }} class="about-hero__title {% if content.aboutHeroTitleMobile %}desktop-only {% endif %}" x-ref="title">
  33.                 {{ content.title|raw }}
  34.             </{{ content.aboutHeroSeoHeadlineTitle ? content.aboutHeroSeoHeadlineTitle : 'h1' }}>
  35.             {% if content.aboutHeroTitleMobile %}
  36.                 <{{ content.aboutHeroSeoHeadlineTitle ? content.aboutHeroSeoHeadlineTitle : 'h1' }} class="about-hero__title mobile-only" x-ref="mobiletitle">
  37.                     {{ content.aboutHeroTitleMobile|raw }}
  38.                 </{{ content.aboutHeroSeoHeadlineTitle ? content.aboutHeroSeoHeadlineTitle : 'h1' }}>
  39.             {% endif %}
  40.             <{{ content.aboutHeroSeoHeadlineText ? content.aboutHeroSeoHeadlineText : 'div' }} class="about-hero__text" x-ref="text">
  41.                 {{ content.text|raw }}
  42.             </{{ content.aboutHeroSeoHeadlineText ? content.aboutHeroSeoHeadlineText : 'div' }}>
  43.             {% if content.image %}
  44.                 <div class="about-hero__media">
  45.                     <img class="about-hero__image" src ="{{ content.image|thumbnailUrl('2880x') }}"
  46.                          srcset ="{{ content.image|thumbnailUrl('320x') }} 320w, {{ content.image|thumbnailUrl('640x') }} 640w, {{ content.image|thumbnailUrl('720x') }} 720w, {{ content.image|thumbnailUrl('1280x') }} 1280w, {{ content.image|thumbnailUrl('1440x') }} 1440w, {{ content.image|thumbnailUrl('2048x') }} 2048w"
  47.                          alt="{{ content.aboutHeroImageALT|default(content.image.description|striptags) }}"
  48.                          x-ref="image"
  49.                          sizes="(min-width: 1440px) 720px, (min-width: 768px) 50vw, 100vw">
  50.                 </div>
  51.             {% endif %}
  52.             {% if content.aboutHeroActionLink != null %}
  53.                 <div class="about-hero__actions" x-ref="actions">
  54.                     {% if content.aboutHeroButtonType == 'box' %}
  55.                         <a href="{{ content.aboutHeroActionLink }}"
  56.                            class="button button--{{ content.aboutHeroButtonColor }}
  57.                                   button--size-{{ content.aboutHeroButtonSize }}">
  58.                            <span class="button__inner">
  59.                               {{ content.aboutHeroButtonLabel }}
  60.                            </span>
  61.                         </a>
  62.                     {% elseif content.aboutHeroButtonType == 'text' %}
  63.                         <a href="{{ content.aboutHeroActionLink }}"
  64.                            class="text-button text-button--{{ content.aboutHeroTextButtonColor }}
  65.                                   {% if content.uppercase %} uppercase {% endif %}">
  66.                             {{ content.aboutHeroButtonLabel }}
  67.                             <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  68.                                 <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  69.                                      stroke-linecap="round" stroke-linejoin="round"/>
  70.                             </svg>
  71.                         </a>
  72.                     {% endif %}
  73.                 </div>
  74.             {% endif %}
  75.             <div class="about-hero__arrow" x-ref="arrow">
  76.                 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 25">
  77.                     <path fill-rule="evenodd" clip-rule="evenodd" d="M25 25L50 0H25v25z" fill="#00F"/>
  78.                     <path fill-rule="evenodd" clip-rule="evenodd" d="M25 0H0l25 25V0z" fill="#FF73F5"/>
  79.                 </svg>
  80.             </div>
  81.         </div>
  82.     </div>
  83. </div>