Image Description
<!-- Hero Section -->
<div id="SVGwave1BottomSM" class="svg-preloader position-relative bg-light">
  <div class="d-md-flex bg-img-hero" style="background-image: url(../../assets/img/bg-shapes/bg3.png);">
    <!-- Hero Carousel -->
    <div class="js-slick-carousel u-slick container d-md-flex align-items-md-center space-top-2 space-bottom-4 space-md-4 space-lg-0 height-md-100vh"
         data-infinite="true"
         data-autoplay="true"
         data-speed="7000"
         data-fade="true">
      <div class="js-slide">
        <!-- Slide #1 -->
        <div class="text-center space-top-2 w-lg-60 mx-auto">
          <div class="mb-7">
            <h1 class="display-3 font-size-md-down-5 text-primary font-weight-semi-bold">Make Front do it.</h1>
            <p class="lead">Start knowing what your attendees value, and win more business with Front template.</p>
          </div>
          <a class="btn btn-primary btn-wide btn-pill transition-3d-hover" href="login-simple.html">Get Started</a>
        </div>
        <!-- End Slide #1 -->
      </div>

      <div class="js-slide">
        <!-- Slide #2 -->
        <div class="text-center space-top-2 w-lg-60 mx-auto">
          <div class="mb-7">
            <h2 class="display-3 font-size-md-down-5 text-primary font-weight-semi-bold">Made more manageable.</h2>
            <p class="lead">In Front, everything can find a place. A channel for every project, coffee or department</p>
          </div>
          <a class="btn btn-primary btn-wide btn-pill transition-3d-hover" href="login-simple.html">Get Started</a>
        </div>
        <!-- End Slide #2 -->
      </div>

      <div class="js-slide">
        <!-- Slide #3 -->
        <div class="text-center space-top-2 w-lg-60 mx-auto">
          <div class="mb-7">
            <h2 class="display-3 font-size-md-down-5 text-primary font-weight-semi-bold">The best way to design.</h2>
            <p class="lead">Front integrates easily with your website and helps grow your brand use cases.</p>
          </div>
          <a class="btn btn-primary btn-wide btn-pill transition-3d-hover" href="login-simple.html">Get Started</a>
        </div>
        <!-- End Slide #3 -->
      </div>
    </div>
    <!-- End Hero Carousel -->

    <!-- Go to Arrow -->
    <div class="position-absolute right-0 bottom-0 left-0 text-center mb-7">
      <a class="js-go-to u-go-to-modern" href="javascript:;"
         data-target="#featuresSection"
         data-compensation="#header"
         data-type="static">
        <span class="fas fa-arrow-down u-go-to-modern__inner"></span>
      </a>
    </div>
    <!-- End Go to Arrow -->
  </div>

  <!-- SVG Background -->
  <figure class="position-absolute right-0 bottom-0 left-0">
    <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom-sm.svg" alt="Image Description"
         data-parent="#SVGwave1BottomSM">
  </figure>
  <!-- End SVG Background Section -->
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<script src="../../assets/js/components/hs.go-to.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });

  $(document).on('ready', function () {
    // initialization of slick carousel
    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');

    // initialization of go to
    $.HSCore.components.HSGoTo.init('.js-go-to');
  });
</script>