<!-- Hero -->
<div class="gradient-y-sm-primary position-relative zi-2 overflow-hidden">
<div class="container position-relative content-space-2 content-space-t-lg-4">
<!-- Heading -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h1 class="display-4 mb-3">Software for People</h1>
<p class="lead">Install Front on your own infrastructure.</p>
</div>
<!-- End Title & Description -->
<!-- Swiper Slider -->
<div class="js-swiper-software-hero swiper zi-2">
<div class="swiper-wrapper">
<!-- Slide -->
<div class="swiper-slide my-2">
<!-- Card -->
<div class="card card-sm card-transition shadow-sm">
<img class="card-img-top" src="../assets/img/400x200/img1.jpg" alt="Image Description">
<div class="card-body">
<h4 class="card-title">Atlassian</h4>
<p class="card-text small">Developer tools</p>
<div class="d-grid">
<a class="btn btn-primary btn-sm" href="#">Install</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide my-2">
<!-- Card -->
<div class="card card-sm card-transition shadow-sm">
<img class="card-img-top" src="../assets/img/400x200/img2.jpg" alt="Image Description">
<div class="card-body">
<h4 class="card-title">Asana</h4>
<p class="card-text small">Productivity</p>
<div class="d-grid">
<a class="btn btn-primary btn-sm" href="#">Install</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide my-2">
<!-- Card -->
<div class="card card-sm card-transition shadow-sm">
<img class="card-img-top" src="../assets/img/400x200/img3.jpg" alt="Image Description">
<div class="card-body">
<h4 class="card-title">Slack</h4>
<p class="card-text small">Collaboration tool</p>
<div class="d-grid">
<a class="btn btn-primary btn-sm" href="#">Install</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide my-2">
<!-- Card -->
<div class="card card-sm card-transition shadow-sm">
<img class="card-img-top" src="../assets/img/400x200/img4.jpg" alt="Image Description">
<div class="card-body">
<h4 class="card-title">Spotify</h4>
<p class="card-text small">Streaming service</p>
<div class="d-grid">
<a class="btn btn-primary btn-sm" href="#">Install</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
<!-- Slide -->
<div class="swiper-slide my-2">
<!-- Card -->
<div class="card card-sm card-transition shadow-sm">
<img class="card-img-top" src="../assets/img/400x200/img5.jpg" alt="Image Description">
<div class="card-body">
<h4 class="card-title">DigitalOcean</h4>
<p class="card-text small">Cloud infrastructure</p>
<div class="d-grid">
<a class="btn btn-primary btn-sm" href="#">Install</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Slide -->
</div>
<!-- Pagination -->
<div class="js-swiper-software-hero-pagination swiper-pagination d-lg-none"></div>
<!-- Preloader -->
<div class="js-swiper-software-hero-preloader swiper-preloader">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!-- End Preloader -->
</div>
<!-- ENd Swiper Slider -->
<!-- SVG Shape -->
<figure class="position-absolute zi-n1" style="top: -35rem; left: 50rem; width: 62rem; height: 62rem;">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 260 260">
<circle fill="#e7eaf3" opacity=".7" cx="130" cy="130" r="130"/>
</svg>
</figure>
<!-- End SVG Shape -->
<!-- SVG Shape -->
<figure class="position-absolute zi-n1" style="top: 15rem; left: 70rem; width: 20rem; height: 20rem;">
<img class="img-fluid" src="../assets/svg/components/circled-stripe.svg" alt="Image Description">
</figure>
<!-- End SVG Shape -->
<!-- SVG Shape -->
<figure class="position-absolute zi-n1" style="bottom: 11rem; left: -3rem; width: 15rem; height: 15rem;">
<img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
</figure>
<!-- End SVG Shape -->
</div>
<!-- Shape -->
<div class="shape shape-bottom zi-1">
<svg width="3000" height="500" viewBox="0 0 3000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 500H3000V0L0 500Z" fill="#fff"/>
</svg>
</div>
<!-- End Shape -->
</div>
<!-- End Hero -->
<link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">
<!-- JS Implementing Plugins -->
<script src="../node_modules/swiper/swiper-bundle.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SWIPER
// =======================================================
var swiper = new Swiper('.js-swiper-software-hero',{
preloaderClass: 'custom-swiper-lazy-preloader',
slidesPerView: 1,
pagination: {
el: '.js-swiper-software-hero-pagination',
dynamicBullets: true,
clickable: true,
},
breakpoints: {
380: {
slidesPerView: 2,
spaceBetween: 15,
},
580: {
slidesPerView: 3,
spaceBetween: 15,
},
768: {
slidesPerView: 4,
spaceBetween: 15,
},
1024: {
slidesPerView: 5,
spaceBetween: 30,
},
},
on: {
'imagesReady': function (swiper) {
const preloader = swiper.el.querySelector('.js-swiper-software-hero-preloader')
preloader.parentNode.removeChild(preloader)
}
}
});
})()
</script>
