{{ attach_library('saar/slider') }}
<section class="section-hero full-width">
  <div class="container">
    <div class="slider">
      <div class="slider-text-container">
        <div class="splide" aria-label="hero slider">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <div class="slider-text">
                  <h2>Launch Faster, Perform Better With Optimised Cloud Hosting</h2>
                  <p>Our cloud platform runs like a well-tuned engine, ready to carry your website or app as far as your ambition stretches.</p>
                  <p>
                    <a href="#" class="button">Get Started</a>
                    <a href="#" class="button-outline">Read more</a>
                  </p>
                  <ul class="list-check flex gap">
                    <li>7-Day Free Trial</li>
                    <li>Cancel Anytime</li>
                    <li>No Credit Card</li>
                  </ul>
                </div><!-- /slider-text -->
              </li>
              <li class="splide__slide">
                <div class="slider-text">
                  <h2>Protect Your Entire Network With Enterprise Level Security</h2>
                  <p>Protect your business with advanced, always-on network security. Stay compliant, stay guarded, stay in control.</p>
                  <p>
                    <a href="#" class="button">Get Started</a>
                    <a href="#" class="button-outline">Read more</a>
                  </p>
                  <ul class="list-check flex gap">
                    <li>7-Day Free Trial</li>
                    <li>Cancel Anytime</li>
                    <li>No Credit Card</li>
                  </ul>
                </div><!-- /slider-text -->
              </li>
              <li class="splide__slide">
                <div class="slider-text">
                  <h2>Empower Business with Enterprise Grade DevOps Strategy and Automation</h2>
                  <p>Empower your engineering teams with automation and precision. Build, test, and ship with confidence and clarity.</p>
                  <p>
                    <a href="#" class="button">Get Started</a>
                    <a href="#" class="button-outline">Read more</a>
                  </p>
                  <ul class="list-check flex gap">
                    <li>7-Day Free Trial</li>
                    <li>Cancel Anytime</li>
                    <li>No Credit Card</li>
                  </ul>
                </div><!-- /slider-text -->
              </li>
            </ul>
          </div>
        </div>
      </div><!-- /slider-text-container -->
      <div class="slider-img">
        <img src="{{ base_path ~ directory }}/images/demo/slider/slider.svg" alt="hero slider" />
      </div><!-- /slider-img -->
    </div><!-- /slider -->
  </div><!-- /container -->
</section>
<script>
document.addEventListener( 'DOMContentLoaded', function() {
  var splide = new Splide( '.splide', {
    type: 'loop',
    perPage: 1,
    autoplay: true,
    rewind: true,
    pauseOnHover: false,
    interval: 5000,
    arrowPath: 'M0.5 1L20 20.5L0.5 41.5',
  } );
  splide.mount();
});
</script>