The #1 software development tool.

Front Software is built for every member of your software team to plan, track, and release great software.

HTML
JS

              
                <!-- Hero Section -->
                <div id="SVGHero" class="svg-preloader gradient-overlay-half-indigo-v1 position-relative overflow-hidden">
                  <div class="container space-2 space-top-md-5 space-top-lg-4">
                    <div class="w-lg-60 text-center mx-lg-auto">
                      <div class="mb-5">
                        <h1 class="display-4 font-size-md-down-5 font-weight-medium 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 btn-wide transition-3d-hover" href="#">
                        Contact Sales
                        <small class="fas fa-arrow-right ml-2"></small>
                      </a>
                      <small class="d-block d-sm-inline-block text-muted my-3 my-sm-0 mx-sm-3">or</small>
                      <a class="btn btn-primary btn-wide transition-3d-hover" href="#">See Pricing</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">
                        <img class="img-fluid rounded-lg" src="../../assets/img/1618x1010/img3.jpg" alt="Image Description">
                      </div>

                      <figure class="max-width-15 w-100 position-absolute top-0 right-0">
                        <div class="mt-n11 mr-n11">
                          <img class="js-svg-injector" src="../../assets/svg/components/dots.svg" alt="Image Description"
                               data-parent="#SVGHero">
                        </div>
                      </figure>
                      <figure class="max-width-15 w-100 position-absolute bottom-0 left-0">
                        <div class="mb-n7 ml-n7">
                          <img class="js-svg-injector" src="../../assets/svg/components/dots.svg" alt="Image Description"
                               data-parent="#SVGHero">
                        </div>
                      </figure>
                    </div>
                  </div>
                  <!-- End Mockup -->

                  <!-- SVG Background Shape -->
                  <figure class="ie-half-circle-1-1 w-35 position-absolute top-0 right-0 z-index-n1 mt-n11 mr-n11">
                    <img class="js-svg-injector" src="../../assets/svg/components/half-circle-1.svg" alt="Image Description"
                         data-parent="#SVGHero">
                  </figure>

                  <figure class="ie-half-circle-2-1 w-25 position-absolute bottom-0 left-0 z-index-n1 mb-n11 ml-n11">
                    <img class="js-svg-injector" src="../../assets/svg/components/half-circle-2.svg" alt="Image Description"
                         data-parent="#SVGHero">
                  </figure>
                  <!-- End SVG Background Shape -->
                </div>
                <!-- End Hero Section -->

              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>