The #1 software development tool.

              
                <!-- 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">front.prod.52abp.com</div>
                        </div>

                        <div class="device-browser-frame">
                          <img class="device-browser-img" src="../assets/img/1618x1010/img1.jpg" alt="图片描述内容">
                        </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="图片描述内容">
                      </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="图片描述内容">
                      </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 -->