The #1 software development tool.
Front Software is built for every member of your software team to plan, track, and release great software.
<!-- Hero Section -->
<div class="gradient-x-overlay-sm-indigo position-relative overflow-hidden">
<div class="container space-top-3 space-top-lg-4 space-bottom-2">
<div class="w-lg-60 text-center mx-lg-auto">
<div class="mb-5">
<h1 class="display-4 mb-3">The <span class="text-primary">#1</span> software development tool.</h1>
<p class="lead">Front Software is built for every member of your software team to plan, track, and release great software.</p>
</div>
<a class="btn btn-soft-indigo transition-3d-hover" href="#">Contact Sales</a>
<small class="text-muted my-3 my-sm-0 mx-2 mx-sm-3">or</small>
<a class="btn btn-primary transition-3d-hover" href="#">See Pricing <i class="fas fa-angle-right ml-1"></i></a>
</div>
</div>
<!-- Mockup -->
<div class="container space-2">
<div class="position-relative w-lg-75 text-center mx-lg-auto">
<div class="position-relative shadow-lg z-index-2 rounded-lg" data-aos="fade-up" data-aos-offset="-50">
<img class="img-fluid rounded-lg" src="../../assets/img/1618x1010/img3.jpg" alt="Image Description">
</div>
<figure class="max-w-15rem w-100 position-absolute top-0 right-0" data-aos="fade-up" data-aos-delay="100" data-aos-offset="-50">
<div class="mt-n11 mr-n11">
<img class="img-fluid" src="../../assets/svg/components/dots-1.svg" alt="Image Description">
</div>
</figure>
<figure class="max-w-15rem w-100 position-absolute bottom-0 left-0" data-aos="fade-up">
<div class="mb-n7 ml-n7">
<img class="img-fluid" src="../../assets/svg/components/dots-1.svg" alt="Image Description">
</div>
</figure>
</div>
</div>
<!-- End Mockup -->
<!-- SVG Background Shape -->
<figure class="w-35 position-absolute top-0 right-0 z-index-n1 mt-n11 mr-n11">
<img class="img-fluid" src="../../assets/svg/components/half-circle-1.svg" alt="Image Description">
</figure>
<figure class="w-25 position-absolute bottom-0 left-0 z-index-n1 mb-n11 ml-n11">
<img class="img-fluid" src="../../assets/svg/components/half-circle-2.svg" alt="Image Description">
</figure>
<!-- End SVG Background Shape -->
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/aos/dist/aos.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/aos/dist/aos.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of aos
AOS.init({
duration: 650,
once: true
});
});
</script>