<!-- Hero -->
<div class="gradient-x-overlay-sm-primary position-relative overflow-hidden">
<div class="container content-space-t-3 content-space-t-lg-4 content-space-b-2">
<div class="w-lg-65 text-center mx-lg-auto">
<!-- Heading -->
<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>
<!-- End Heading -->
<div class="d-grid d-sm-flex justify-content-sm-center align-items-sm-center gap-3">
<a class="btn btn-primary btn-transition" href="#">Contact sales</a>
<small>or</small>
<a class="btn btn-soft-dark btn-transition" href="#">See pricing <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
</div>
<!-- Mockup -->
<div class="container content-space-b-2 content-space-b-lg-3">
<div class="position-relative w-lg-75 text-center mx-lg-auto">
<!-- Browser Device -->
<figure class="device-browser">
<div class="device-browser-header">
<div class="device-browser-header-btn-list">
<span class="device-browser-header-btn-list-btn"></span>
<span class="device-browser-header-btn-list-btn"></span>
<span class="device-browser-header-btn-list-btn"></span>
</div>
<div class="device-browser-header-browser-bar">www.htmlstream.com/front/</div>
</div>
<div class="device-browser-frame">
<img class="device-browser-img" src="../assets/img/1618x1010/img1.jpg" alt="Image Description">
</div>
</figure>
<!-- End Browser Device -->
<!-- SVG Shape -->
<figure class="position-absolute top-0 end-0 mt-n10 me-n10" style="width: 12rem;" data-aos="fade-up" data-aos-delay="100" data-aos-offset="-50">
<img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="Image Description">
</figure>
<!-- End SVG Shape -->
<!-- SVG Shape -->
<figure class="position-absolute bottom-0 start-0 mb-n7 ms-n7" style="width: 10rem;" data-aos="fade-up">
<img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
</figure>
<!-- End SVG Shape -->
</div>
</div>
<!-- End Mockup -->
<!-- SVG Background Shape -->
<figure class="position-absolute top-0 end-0 zi-n1 mt-n10 me-n10" style="width: 32rem;">
<svg viewBox="0 0 451 902" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M451 820C247.2 820 82 654.8 82 451C82 247.2 247.2 82 451 82" stroke="white" stroke-width="164" stroke-miterlimit="10"/>
</svg>
</figure>
<!-- End SVG Background Shape -->
<!-- SVG Background Shape -->
<figure class="position-absolute bottom-0 start-0 zi-n1 mb-n10 me-n10" style="width: 21rem;">
<svg viewBox="0 0 451 902" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.125" d="M0 82C203.8 82 369 247.2 369 451C369 654.8 203.8 820 0 820" stroke="url(#paint1_linear)" stroke-width="164" stroke-miterlimit="10"/>
<defs>
<linearGradient id="paint1_linear" x1="323.205" y1="785.242" x2="-97.6164" y2="56.3589" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="#377dff"/>
</linearGradient>
</defs>
</svg>
</figure>
<!-- End SVG Background Shape -->
</div>
<!-- End Hero -->
