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. {% if content.aboutHeroLinkedItem == 'aboutHeroModal' or content.aboutHeroLinkedItem == 'aboutHeroModalCalendly' %}
  17. <div class="modal" :class="{'modal--show': show}" x-data="modal">
  18.     {% endif %}
  19. <div class="about-hero about-hero--{% if content.inverted %}inverted {% else %}default{% endif %}" x-data="abouthero"
  20.      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 }}%">
  21.     <div class="about-hero__container pt-hero">
  22.         <svg class="about-hero__background" fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 930 860"
  23.              x-ref="background">
  24.             <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"
  25.                   stroke="currentColor" stroke-miterlimit="10"/>
  26.         </svg>
  27.         <div class="about-hero__content">
  28.             {% if content.aboutHeroPagina %}
  29.             {% if content.aboutHeroSeoHeadlinePagina %}<{{ content.aboutHeroSeoHeadlinePagina }}>{% endif %}
  30.                 <div class="pagina"{% if content.inverted %} style="color: #fff;" {% endif %}>
  31.                     {{ content.aboutHeroPagina }}
  32.                 </div>
  33.             {% if content.aboutHeroSeoHeadlinePagina %}</{{ content.aboutHeroSeoHeadlinePagina }}>{% endif %}
  34.             {% endif %}
  35.             <{{ content.aboutHeroSeoHeadlineTitle ? content.aboutHeroSeoHeadlineTitle : 'h1' }} class="about-hero__title {% if content.aboutHeroTitleMobile %}desktop-only {% endif %}" x-ref="title">
  36.                 {{ content.title|raw }}
  37.             </{{ content.aboutHeroSeoHeadlineTitle ? content.aboutHeroSeoHeadlineTitle : 'h1' }}>
  38.             {% if content.aboutHeroTitleMobile %}
  39.                 <{{ content.aboutHeroSeoHeadlineTitle ? content.aboutHeroSeoHeadlineTitle : 'h1' }} class="about-hero__title mobile-only" x-ref="mobiletitle">
  40.                     {{ content.aboutHeroTitleMobile|raw }}
  41.                 </{{ content.aboutHeroSeoHeadlineTitle ? content.aboutHeroSeoHeadlineTitle : 'h1' }}>
  42.             {% endif %}
  43.             <{{ content.aboutHeroSeoHeadlineText ? content.aboutHeroSeoHeadlineText : 'div' }} class="about-hero__text" x-ref="text">
  44.                 {{ content.text|raw }}
  45.             </{{ content.aboutHeroSeoHeadlineText ? content.aboutHeroSeoHeadlineText : 'div' }}>
  46.             {% if content.image %}
  47.                 <div class="about-hero__media">
  48.                     <img class="about-hero__image" src ="{{ content.image|thumbnailUrl('2880x') }}"
  49.                          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"
  50.                          alt="{{ content.aboutHeroImageALT|default(content.image.description|striptags) }}"
  51.                          x-ref="image"
  52.                          sizes="(min-width: 1440px) 720px, (min-width: 768px) 50vw, 100vw">
  53.                 </div>
  54.             {% endif %}
  55.             {% if content.aboutHeroLinkedItem == 'aboutHeroModal' or content.aboutHeroLinkedItem == 'aboutHeroModalCalendly' %}
  56.                 <div class="about-hero__actions" x-ref="actions">
  57.                     {% if content.aboutHeroButtonType == 'box' %}
  58.                         <button @click="open"
  59.                            class="button button--{{ content.aboutHeroButtonColor }}
  60.                                   button--size-{{ content.aboutHeroButtonSize }}">
  61.                            <span class="button__inner">
  62.                               {{ content.aboutHeroButtonLabel }}
  63.                            </span>
  64.                         </button>
  65.                     {% elseif content.aboutHeroButtonType == 'text' %}
  66.                         <button @click="open"
  67.                            class="text-button text-button--{{ content.aboutHeroTextButtonColor }}
  68.                                   {% if content.uppercase %} uppercase {% endif %}">
  69.                             {{ content.aboutHeroButtonLabel }}
  70.                             <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  71.                                 <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  72.                                       stroke-linecap="round" stroke-linejoin="round"/>
  73.                             </svg>
  74.                         </button>
  75.                     {% endif %}
  76.                 </div>
  77.             {% elseif content.aboutHeroActionLink != null %}
  78.                 <div class="about-hero__actions" x-ref="actions">
  79.                     {% if content.aboutHeroButtonType == 'box' %}
  80.                         <a href="{{ content.aboutHeroActionLink }}"
  81.                            class="button button--{{ content.aboutHeroButtonColor }}
  82.                                   button--size-{{ content.aboutHeroButtonSize }}">
  83.                            <span class="button__inner">
  84.                               {{ content.aboutHeroButtonLabel }}
  85.                            </span>
  86.                         </a>
  87.                     {% elseif content.aboutHeroButtonType == 'text' %}
  88.                         <a href="{{ content.aboutHeroActionLink }}"
  89.                            class="text-button text-button--{{ content.aboutHeroTextButtonColor }}
  90.                                   {% if content.uppercase %} uppercase {% endif %}">
  91.                             {{ content.aboutHeroButtonLabel }}
  92.                             <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  93.                                 <path d="M.5 8.5h15M10.5 3.5l5 5-5 5" stroke="currentColor" stroke-miterlimit="10"
  94.                                      stroke-linecap="round" stroke-linejoin="round"/>
  95.                             </svg>
  96.                         </a>
  97.                     {% endif %}
  98.                 </div>
  99.             {% endif %}
  100.             <div class="about-hero__arrow" x-ref="arrow">
  101.                 <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 25">
  102.                     <path fill-rule="evenodd" clip-rule="evenodd" d="M25 25L50 0H25v25z" fill="#00F"/>
  103.                     <path fill-rule="evenodd" clip-rule="evenodd" d="M25 0H0l25 25V0z" fill="#FF73F5"/>
  104.                 </svg>
  105.             </div>
  106.         </div>
  107.     </div>
  108. </div>
  109. {% if content.aboutHeroLinkedItem == 'aboutHeroModal' %}
  110.     {% if content.aboutHeroDownloadFormBlock %}
  111.         {% include('/includes/blocks/' ~ content.aboutHeroDownloadFormBlock.type ~ '.html.twig') with { content: content.aboutHeroDownloadFormBlock, view: view.aboutHeroDownloadFormBlock } %}
  112.     {% endif %}
  113. {% endif %}
  114. {% if content.aboutHeroLinkedItem == 'aboutHeroModalCalendly' %}
  115.     {% if content.aboutHeroCalendlyFormBlock %}
  116.         {% include('/includes/blocks/' ~ content.aboutHeroCalendlyFormBlock.type ~ '.html.twig') with { content: content.aboutHeroCalendlyFormBlock, view: view.aboutHeroCalendlyFormBlock } %}
  117.     {% endif %}
  118. {% endif %}
  119. {% if content.aboutHeroLinkedItem == 'aboutHeroModal' or content.aboutHeroLinkedItem == 'aboutHeroModalCalendly' %}
  120.     </div>
  121. {% endif %}