<!-- 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>
