<!-- Hero -->
<div class="container content-space-t-4 content-space-t-lg-5 content-space-b-2 content-space-b-lg-3">
<div class="row justify-content-lg-between mb-10">
<div class="col-sm-7 col-md-5 order-md-2 mb-7 mb-md-0">
<img class="img-fluid" src="../assets/img/illustrations/unlock.png" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-md-6 col-lg-5">
<!-- Heading -->
<div class="mb-5">
<h1>Build awesome apps with your web skills</h1>
<p>Built on standard web technology, teams use Front to build beautiful cross-platform hybrid apps in a fraction of the time.</p>
</div>
<!-- End Title & Description -->
<div class="d-grid d-sm-flex gap-3">
<a class="btn btn-primary btn-transition" href="#">Get started</a>
<a class="btn btn-link" href="#">Let's Talk <i class="bi-chevron-right small ms-1"></i></a>
</div>
<p class="form-text small">Start free trial. * No credit card required.</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Swiper Slider -->
<div class="js-swiper-hero-clients swiper-container text-center">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
</div>
<!-- End Slide -->
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
</div>
<!-- End Slide -->
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/mailchimp-dark.svg" alt="Logo">
</div>
<!-- End Slide -->
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/layar-dark.svg" alt="Logo">
</div>
<!-- End Slide -->
<div class="swiper-slide">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/hubspot-dark.svg" alt="Logo">
</div>
<!-- End Slide -->
</div>
</div>
<!-- End Swiper Slider -->
</div>
<!-- End Hero -->
<link rel="stylesheet" href="../assets/vendor/swiper/swiper-bundle.min.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var swiper = new Swiper('.js-swiper-hero-clients',{
slidesPerView: 2,
breakpoints: {
380: {
slidesPerView: 3,
spaceBetween: 15,
},
768: {
slidesPerView: 4,
spaceBetween: 15,
},
1024: {
slidesPerView: 5,
spaceBetween: 15,
},
},
});
})()
</script>
