Software for People

Install Front on your own infrastructure.

Image Description
Image Description
              
                <!-- Hero Section -->
                <div class="gradient-y-sm-primary position-relative z-index-2 overflow-hidden">
                  <div class="container space-top-2 space-top-lg-4 position-relative">
                    <!-- Title -->
                    <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 -->

                    <!-- Slick Carousel -->
                    <div class="js-slick-carousel slick slick-gutters-3 z-index-2"
                         data-hs-slick-carousel-options='{
                           "slidesToShow": 5,
                           "dots": true,
                           "dotsClass": "slick-pagination d-lg-none",
                           "responsive": [{
                             "breakpoint": 1200,
                               "settings": {
                                 "slidesToShow": 4
                               }
                             }, {
                             "breakpoint": 992,
                             "settings": {
                               "slidesToShow": 3
                               }
                             }, {
                             "breakpoint": 768,
                             "settings": {
                               "slidesToShow": 2
                               }
                             }, {
                             "breakpoint": 554,
                             "settings": {
                               "slidesToShow": 1
                             }
                           }]
                         }'>
                      <div class="js-slide mt-1">
                        <!-- Icon Block -->
                        <article class="card shadow-sm max-w-27rem transition-3d-hover mx-auto mb-5">
                          <div class="card-header bg-primary text-center rounded-top">
                            <div class="avatar d-block bg-white rounded p-2 mx-auto">
                              <img class="avatar-img" src="../../assets/img/160x160/img12.png" alt="Image Description">
                            </div>
                          </div>
                          <div class="card-body">
                            <div class="mb-3">
                              <h2 class="h4 mb-1">Atlassian</h2>
                              <small class="d-block text-body">Developer tools</small>
                            </div>
                            <a class="btn btn-sm btn-block btn-primary" href="#">Install</a>
                          </div>
                        </article>
                        <!-- End Icon Block -->
                      </div>

                      <div class="js-slide mt-1">
                        <!-- Icon Block -->
                        <article class="card shadow-sm max-w-27rem transition-3d-hover mx-auto mb-5">
                          <div class="card-header bg-danger text-center rounded-top">
                            <div class="avatar d-block bg-white rounded p-2 mx-auto">
                              <img class="avatar-img" src="../../assets/img/160x160/img13.png" alt="Image Description">
                            </div>
                          </div>
                          <div class="card-body">
                            <div class="mb-3">
                              <h3 class="h4 mb-1">Asana</h3>
                              <small class="d-block text-body">Productivity</small>
                            </div>
                            <a class="btn btn-sm btn-block btn-primary" href="#">Install</a>
                          </div>
                        </article>
                        <!-- End Icon Block -->
                      </div>

                      <div class="js-slide mt-1">
                        <!-- Icon Block -->
                        <article class="card shadow-sm max-w-27rem transition-3d-hover mx-auto mb-5">
                          <div class="card-header bg-warning text-center rounded-top">
                            <div class="avatar d-block bg-white rounded p-2 mx-auto">
                              <img class="avatar-img" src="../../assets/img/160x160/img14.png" alt="Image Description">
                            </div>
                          </div>
                          <div class="card-body">
                            <div class="mb-3">
                              <h4 class="mb-1">Slack</h4>
                              <small class="d-block text-body">Collaboration tool</small>
                            </div>
                            <a class="btn btn-sm btn-block btn-primary" href="#">Install</a>
                          </div>
                        </article>
                        <!-- End Icon Block -->
                      </div>

                      <div class="js-slide mt-1">
                        <!-- Icon Block -->
                        <article class="card shadow-sm max-w-27rem transition-3d-hover mx-auto mb-5">
                          <div class="card-header bg-success text-center rounded-top">
                            <div class="avatar d-block bg-white rounded p-2 mx-auto">
                              <img class="avatar-img" src="../../assets/img/160x160/img15.png" alt="Image Description">
                            </div>
                          </div>
                          <div class="card-body">
                            <div class="mb-3">
                              <h4 class="mb-1">Spotify</h4>
                              <small class="d-block text-body">Streaming service</small>
                            </div>
                            <a class="btn btn-sm btn-block btn-primary" href="#">Install</a>
                          </div>
                        </article>
                        <!-- End Icon Block -->
                      </div>

                      <div class="js-slide mt-1">
                        <!-- Icon Block -->
                        <article class="card shadow-sm max-w-27rem transition-3d-hover mx-auto mb-5">
                          <div class="card-header bg-primary text-center rounded-top">
                            <div class="avatar d-block bg-white rounded p-2 mx-auto">
                              <img class="avatar-img" src="../../assets/img/160x160/img16.png" alt="Image Description">
                            </div>
                          </div>
                          <div class="card-body">
                            <div class="mb-3">
                              <h4 class="mb-1">DigitalOcean</h4>
                              <small class="d-block text-body">Cloud infrastructure</small>
                            </div>
                            <a class="btn btn-sm btn-block btn-primary" href="#">Install</a>
                          </div>
                        </article>
                        <!-- End Icon Block -->
                      </div>
                    </div>
                    <!-- End Slick Carousel -->

                    <!-- SVG Shapes -->
                    <figure class="position-absolute z-index-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>
                    <figure class="position-absolute z-index-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>
                    <figure class="position-absolute z-index-n1" style="bottom: 7rem; left: -3rem; width: 15rem; height: 15rem;">
                      <img class="img-fluid" src="../../assets/svg/components/dots-3.svg" alt="Image Description">
                    </figure>
                    <!-- End SVG Shapes -->
                  </div>

                  <!-- SVG Bottom Shape -->
                  <figure class="position-absolute right-0 bottom-0 left-0">
                    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1921 273">
                      <polygon fill="#fff" points="0,273 1921,273 1921,0 "/>
                    </svg>
                  </figure>
                  <!-- End SVG Bottom Shape -->
                </div>
                <!-- End Hero Section -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/hs.slick-carousel.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of slick carousel
                    $('.js-slick-carousel').each(function() {
                      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
                    });
                  });
                </script>