Homepage Hero
This is the homepage hero
- Markup Details
-
{{ attach_library('goizueta_theme/homepage-hero') }} <section class="homepage-hero__container"> <ul class="homepage-hero__slider"> {% for slide in homepage_hero.slides %} {% set slide_attributes = slide.attributes ? slide.attributes.addClass('homepage-hero__slide') : ' class="homepage-hero__slide"' %} <li{{ slide_attributes|raw }}> <div class="homepage-hero__ratio-control-rel"> <div class="homepage-hero__ratio-control-abs"> <div class="homepage-hero__main-image"> {{ slide.main_image|raw }} </div> <div class="homepage-hero__slide-content"> <div class="homepage-hero__slide-title-container"> <h2 class="homepage-hero__slide-title" data-animation="fadeInUp" {% if loop.index == 1 %}data-delay="0s"{% else %}data-delay="1.75s"{% endif %}> {{ slide.title }}</h2> </div> <div class="homepage-hero__slide-line" data-animation="bounceInLeft" {% if loop.index == 1 %}data-delay="0s"{% else %}data-delay="1s"{% endif %}></div> <div class="homepage-hero__inner-container"> <div class="homepage-hero__inner-content" data-animation="fadeInDown" {% if loop.index == 1 %}data-delay="0s"{% else %}data-delay="1.75s"{% endif %}> <div class="homepage-hero__inner-subtitle"> {{ slide.subtitle }} </div> {% include '@components/button/button.twig' with { "button": { "text": slide.cta.text, "url": slide.cta.url, "classes": 'button--ghost homepage-hero__button' } } only %} </div> </div> </div> {# Decorative elements. #} <div class="homepage-hero__circle"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.2 64.2"><path d="M51.6 8.9c.4-.6.6-1.3.6-2.1 0-2.3-1.9-4.2-4.2-4.2-1.4 0-2.7.7-3.5 1.8-3.8-1.7-8-2.7-12.4-2.7-16.7.1-30.3 13.7-30.3 30.4s13.6 30.3 30.3 30.3c16.7 0 30.3-13.6 30.3-30.3 0-9.3-4.2-17.7-10.8-23.2zM32.1 61.4c-16.2 0-29.3-13.1-29.3-29.3 0-16.2 13.1-29.3 29.3-29.3 4.2 0 8.3.9 11.9 2.5-.2.5-.3 1-.3 1.5 0 2.3 1.9 4.2 4.2 4.2 1.2 0 2.3-.5 3-1.3 6.4 5.4 10.4 13.4 10.4 22.4.1 16.1-13.1 29.3-29.2 29.3z" fill="#e3a44d"/><circle cx="32.1" cy="32.1" r="23.9" opacity=".5" fill="#fff"/></svg> </div> <div class="homepage-hero__left-line"> <svg data-animation="fadeInLeft" data-delay="1s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.9 156.8"><path fill="#e3a44d" d="M21.89 135.342L135.31 21.924l21.849 21.849L43.74 157.192z"/><path fill="#1c274c" d="M.054 113.391L113.472-.027l21.85 21.849L21.903 135.241z"/></svg> </div> <div class="homepage-hero__right-line"> <svg data-animation="fadeInRight" data-delay="0.8s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.9 156.8"><path fill="#e3a44d" d="M21.89 135.342L135.31 21.924l21.849 21.849L43.74 157.192z"/><path fill="#1c274c" d="M.054 113.391L113.472-.027l21.85 21.849L21.903 135.241z"/></svg> </div> <div class="homepage-hero__white-dots"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.9 73.5"><style>.st0{fill:#fff}</style><g id="Layer_2"><circle class="st0" cx="9.8" cy="9.3" r="1.9"/><circle class="st0" cx="6.7" cy="36.1" r="1.9"/><circle class="st0" cx="3" cy="3.2" r=".5"/><circle class="st0" cx="1.5" cy="15.3" r=".5"/><circle class="st0" cx="4.1" cy="18.8" r=".5"/><circle class="st0" cx="7.6" cy="15.7" r=".5"/><circle class="st0" cx="10.6" cy="19.5" r=".5"/><circle class="st0" cx="8.4" cy="23.5" r=".5"/><circle class="st0" cx="13.1" cy="24.1" r=".5"/><circle class="st0" cx="9.9" cy="27.6" r=".5"/><circle class="st0" cx="4.2" cy="24" r=".5"/><circle class="st0" cx="6.1" cy="28.3" r=".5"/><circle class="st0" cx="9.1" cy="32" r=".5"/><circle class="st0" cx="10.6" cy="37.5" r=".5"/><circle class="st0" cx="13.6" cy="30.2" r=".5"/><circle class="st0" cx="12.2" cy="33.7" r=".5"/><circle class="st0" cx="14.1" cy="38.2" r=".5"/><circle class="st0" cx="11.7" cy="40.5" r=".5"/><circle class="st0" cx="14.2" cy="43.1" r=".5"/><circle class="st0" cx="11.2" cy="45.5" r=".5"/><circle class="st0" cx="23" cy="34.2" r="1.9"/><circle class="st0" cx="19.9" cy="61" r="1.9"/><circle class="st0" cx="16.2" cy="28.1" r=".5"/><circle class="st0" cx="14.7" cy="40.2" r=".5"/><circle class="st0" cx="17.3" cy="43.7" r=".5"/><circle class="st0" cx="20.7" cy="40.5" r=".5"/><circle class="st0" cx="23.7" cy="44.3" r=".5"/><circle class="st0" cx="21.6" cy="48.4" r=".5"/><circle class="st0" cx="26.3" cy="49" r=".5"/><circle class="st0" cx="23.1" cy="52.5" r=".5"/><circle class="st0" cx="17.4" cy="48.9" r=".5"/><circle class="st0" cx="19.2" cy="53.2" r=".5"/><circle class="st0" cx="22.2" cy="56.9" r=".5"/><circle class="st0" cx="23.7" cy="62.3" r=".5"/><circle class="st0" cx="26.7" cy="55" r=".5"/><circle class="st0" cx="25.4" cy="58.5" r=".5"/><circle class="st0" cx="27.2" cy="63" r=".5"/><circle class="st0" cx="24.9" cy="65.4" r=".5"/><circle class="st0" cx="27.4" cy="68" r=".5"/><circle class="st0" cx="24.4" cy="70.4" r=".5"/></g></svg> </div> <div class="homepage-hero__white-dots-upper"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89.8 55"><style>.st0{fill:#fff}</style><g id="Layer_2"><circle class="st0" cx="65.9" cy="14.4" r="1.9"/><circle class="st0" cx="39.1" cy="11.2" r="1.9"/><circle class="st0" cx="72.1" cy="7.5" r=".5"/><circle class="st0" cx="60" cy="6.1" r=".5"/><circle class="st0" cx="56.5" cy="8.6" r=".5"/><circle class="st0" cx="59.6" cy="12.1" r=".5"/><circle class="st0" cx="55.8" cy="15.1" r=".5"/><circle class="st0" cx="48.1" cy="29.8" r=".5"/><circle class="st0" cx="51.8" cy="12.9" r=".5"/><circle class="st0" cx="51.1" cy="17.6" r=".5"/><circle class="st0" cx="54.6" cy="28.1" r=".5"/><circle class="st0" cx="54.9" cy="22.8" r=".5"/><circle class="st0" cx="47.6" cy="14.4" r=".5"/><circle class="st0" cx="51.3" cy="8.8" r=".5"/><circle class="st0" cx="47" cy="10.6" r=".5"/><circle class="st0" cx="43.3" cy="13.6" r=".5"/><circle class="st0" cx="37.8" cy="15.1" r=".5"/><circle class="st0" cx="45.1" cy="18.1" r=".5"/><circle class="st0" cx="41.6" cy="16.8" r=".5"/><circle class="st0" cx="37.1" cy="18.6" r=".5"/><circle class="st0" cx="34.8" cy="16.2" r=".5"/><circle class="st0" cx="32.1" cy="18.7" r=".5"/><circle class="st0" cx="29.8" cy="15.8" r=".5"/><circle class="st0" cx="41" cy="27.5" r="1.9"/><circle class="st0" cx="61.5" cy="24.7" r="1.9"/><circle class="st0" cx="58.8" cy="31.2" r="1.9"/><circle class="st0" cx="76.4" cy="44.5" r="1.9"/><circle class="st0" cx="14.2" cy="24.4" r="1.9"/><circle class="st0" cx="47.2" cy="20.7" r=".5"/><circle class="st0" cx="42.2" cy="20.8" r=".5"/><circle class="st0" cx="59.8" cy="19.6" r=".5"/><circle class="st0" cx="35.1" cy="19.2" r=".5"/><circle class="st0" cx="31.6" cy="21.8" r=".5"/><circle class="st0" cx="34.7" cy="25.2" r=".5"/><circle class="st0" cx="30.9" cy="28.2" r=".5"/><circle class="st0" cx="26.9" cy="26.1" r=".5"/><circle class="st0" cx="26.2" cy="30.8" r=".5"/><circle class="st0" cx="22.8" cy="27.6" r=".5"/><circle class="st0" cx="26.4" cy="21.9" r=".5"/><circle class="st0" cx="22.1" cy="23.8" r=".5"/><circle class="st0" cx="71.9" cy="33.9" r=".5"/><circle class="st0" cx="67.9" cy="31.8" r=".5"/><circle class="st0" cx="67.3" cy="36.5" r=".5"/><circle class="st0" cx="81.6" cy="47.4" r=".5"/><circle class="st0" cx="63.8" cy="33.3" r=".5"/><circle class="st0" cx="78.1" cy="35.5" r=".5"/><circle class="st0" cx="75.2" cy="36.8" r=".5"/><circle class="st0" cx="76.7" cy="39.9" r=".5"/><circle class="st0" cx="80.5" cy="39.1" r=".5"/><circle class="st0" cx="71" cy="37.1" r=".5"/><circle class="st0" cx="81" cy="43.4" r=".5"/><circle class="st0" cx="74.4" cy="30.4" r=".5"/><circle class="st0" cx="70.9" cy="27.2" r=".5"/><circle class="st0" cx="67.4" cy="27.6" r=".5"/><circle class="st0" cx="63.1" cy="29.4" r=".5"/><circle class="st0" cx="18.4" cy="26.8" r=".5"/><circle class="st0" cx="12.9" cy="28.2" r=".5"/><circle class="st0" cx="20.2" cy="31.2" r=".5"/><circle class="st0" cx="16.7" cy="29.9" r=".5"/><circle class="st0" cx="12.2" cy="31.8" r=".5"/><circle class="st0" cx="9.9" cy="29.4" r=".5"/><circle class="st0" cx="7.2" cy="31.9" r=".5"/><circle class="st0" cx="4.9" cy="28.9" r=".5"/><circle class="st0" cx="70.6" cy="21.9" r=".5"/><circle class="st0" cx="68" cy="24.4" r=".5"/><circle class="st0" cx="65.6" cy="21.4" r=".5"/></g></svg> </div> </div> </div> </li> {% endfor %} </ul> <div class="homepage-hero__slider-pager"> <span class="left"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <path d="M3.828 9l6.071-6.071-1.414-1.414-8.485 8.485 8.485 8.485 1.414-1.414-6.071-6.071h16.172v-2h-16.172z"></path> </svg> </span> <span class="play-pause"> <svg class="play-pause__pause" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <path d="M5 4h3v12h-3v-12zM12 4h3v12h-3v-12z"></path> </svg> <svg class="play-pause__play" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <path d="M4 4l12 6-12 6z"></path> </svg> </span> <span class="right"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <path d="M16.172 9l-6.071-6.071 1.414-1.414 8.485 8.485-8.485 8.485-1.414-1.414 6.071-6.071h-16.172v-2z"></path> </svg> </span> </div> </section>