Front business

Install Front on your own infrastructure

Image Description
Image Description
<!-- Hero Section -->
<div id="SVGheroBottomShape" class="svg-preloader position-relative gradient-half-primary-v5 z-index-2 overflow-hidden">
  <div class="container space-top-2 space-top-md-3">
    <!-- Title -->
    <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-9">
      <h1 class="display-4 font-size-md-down-5 text-white">Front <strong class="font-weight-semi-bold">business</strong></h1>
      <p class="lead text-white-70">Install Front on your own infrastructure</p>
    </div>
    <!-- End Title -->

    <!-- Slick Carousel -->
    <div class="js-slick-carousel u-slick u-slick--gutters-3 z-index-2"
         data-slides-show="5"
         data-slides-scroll="1"
         data-pagi-classes="d-lg-none text-center u-slick__pagination mt-7 mb-0"
         data-responsive='[{
           "breakpoint": 1200,
           "settings": {
             "slidesToShow": 4
           }
         }, {
           "breakpoint": 992,
           "settings": {
             "slidesToShow": 3
           }
         }, {
           "breakpoint": 768,
           "settings": {
             "slidesToShow": 2
           }
         }, {
           "breakpoint": 480,
           "settings": {
             "slidesToShow": 1
           }
         }]'>
      <div class="js-slide mt-1">
        <!-- Icon Block -->
        <article class="card border-0 shadow-sm transition-3d-hover mb-3">
          <div class="card-body bg-primary rounded-top p-5">
            <div class="u-avatar bg-white rounded p-2 mx-auto">
              <img class="img-fluid" src="../../assets/img/160x160/img12.png" alt="Image Description">
            </div>
          </div>
          <div class="card-body p-4">
            <div class="mb-3">
              <h2 class="h6 mb-0">Atlassian</h2>
              <small class="d-block text-secondary">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 border-0 shadow-sm transition-3d-hover mb-3">
          <div class="card-body bg-danger rounded-top p-5">
            <div class="u-avatar bg-white rounded p-2 mx-auto">
              <img class="img-fluid" src="../../assets/img/160x160/img13.png" alt="Image Description">
            </div>
          </div>
          <div class="card-body p-4">
            <div class="mb-3">
              <h2 class="h6 mb-0">Asana</h2>
              <small class="d-block text-secondary">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 border-0 shadow-sm transition-3d-hover mb-3">
          <div class="card-body bg-warning rounded-top p-5">
            <div class="u-avatar bg-white rounded p-2 mx-auto">
              <img class="img-fluid" src="../../assets/img/160x160/img14.png" alt="Image Description">
            </div>
          </div>
          <div class="card-body p-4">
            <div class="mb-3">
              <h2 class="h6 mb-0">Slack</h2>
              <small class="d-block text-secondary">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 border-0 shadow-sm transition-3d-hover mb-3">
          <div class="card-body bg-success rounded-top p-5">
            <div class="u-avatar bg-white rounded p-2 mx-auto">
              <img class="img-fluid" src="../../assets/img/160x160/img15.png" alt="Image Description">
            </div>
          </div>
          <div class="card-body p-4">
            <div class="mb-3">
              <h2 class="h6 mb-0">Spotify</h2>
              <small class="d-block text-secondary">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 border-0 shadow-sm transition-3d-hover mb-3">
          <div class="card-body bg-primary rounded-top p-5">
            <div class="u-avatar bg-white rounded p-2 mx-auto">
              <img class="img-fluid" src="../../assets/img/160x160/img16.png" alt="Image Description">
            </div>
          </div>
          <div class="card-body p-4">
            <div class="mb-3">
              <h2 class="h6 mb-0">DigitalOcean</h2>
              <small class="d-block text-secondary">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 -->
  </div>

  <!-- SVG Bottom Shape -->
  <figure class="position-absolute right-0 bottom-0 left-0">
    <img class="js-svg-injector" src="../../assets/svg/components/irregular-shape-1-bottom.svg" alt="Image Description"
         data-parent="#SVGheroBottomShape">
  </figure>
  <!-- End SVG Bottom Shape -->

  <!-- SVG Background Element -->
  <figure class="position-absolute top-0 right-0 left-0 z-index-n1">
    <img class="js-svg-injector" src="../../assets/svg/components/bg-elements-9.svg" alt="Image Description"
         data-parent="#SVGheroBottomShape">
  </figure>
  <!-- End SVG Background Element -->
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

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

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

  $(document).on('ready', function () {
    // initialization of slick carousel
    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');

    // initialization of go to
    $.HSCore.components.HSGoTo.init('.js-go-to');
  });
</script>