HTML:
<!-- Hero Section -->
<div class="position-relative u-bg-light-blue-50">
<div class="u-bg-img-hero" style="background-image: url(../../assets/img/bg-shapes/bg3.png);">
<div class="container">
<!-- Hero Carousel -->
<div class="js-slick-carousel u-slick d-flex align-items-center u-space-4 u-space-0--lg min-height-100vh--lg"
data-infinite="true"
data-autoplay="true"
data-speed="7000"
data-fade="true">
<div class="js-slide">
<!-- Slide #1 -->
<div class="text-center u-space-2-top w-lg-60 mx-auto">
<div class="mb-7">
<h1 class="display-3 font-size-48--md-down text-primary font-weight-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 u-btn-primary u-btn-wide u-btn-pill transition-3d-hover" href="../../html/pages/login-simple.html">Get Started</a>
</div>
<!-- End Slide #1 -->
</div>
<div class="js-slide">
<!-- Slide #2 -->
<div class="text-center u-space-2-top w-lg-60 mx-auto">
<div class="mb-7">
<h2 class="display-3 font-size-48--md-down text-primary font-weight-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 u-btn-primary u-btn-wide u-btn-pill transition-3d-hover" href="../../html/pages/login-simple.html">Get Started</a>
</div>
<!-- End Slide #2 -->
</div>
<div class="js-slide">
<!-- Slide #3 -->
<div class="text-center u-space-2-top w-lg-60 mx-auto">
<div class="mb-7">
<h2 class="display-3 font-size-48--md-down text-primary font-weight-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 u-btn-primary u-btn-wide u-btn-pill transition-3d-hover" href="../../html/pages/login-simple.html">Get Started</a>
</div>
<!-- End Slide #3 -->
</div>
</div>
<!-- End Hero Carousel -->
<!-- Go to Arrow -->
<div class="position-absolute-bottom-0 bottom-50 text-center">
<a class="js-go-to u-go-to-modern" href="javascript:;"
data-target="#contentSection">
<span class="fa fa-arrow-down u-go-to-modern__inner"></span>
</a>
</div>
<!-- End Go to Arrow -->
</div>
</div>
<!-- SVG Background -->
<figure class="position-absolute-bottom-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="140px" viewBox="20 -20 300 100">
<path class="u-fill-white" opacity="0.4" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
<path class="u-fill-white" opacity="0.4" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
<path class="u-fill-white" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
H42.401L43.415,98.342z" />
<path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
</svg>
</figure>
<!-- End SVG Background Section -->
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
