The |
pro account for entrepreneurs.

Much more than a bank, Front is the ideal, fastest and most convenient financial and administrative co-driver to work with peace of mind.

Contact Sales Get Started
Image Description Image Description

Integrate
quickly

Front lets you spend your development time on product improvements.

Image Description

Raphael Olston

Business 
<!-- Hero Section -->
<div class="position-relative bg-white overflow-hidden">
  <div class="container position-relative z-index-2 space-top-3 space-top-lg-4 space-bottom-2 space-bottom-md-3">
    <div class="row align-items-lg-center">
      <div class="col-lg-5 mb-5 mb-lg-0">
        <!-- Info -->
        <div class="mb-6">
          <h1 class="text-white mb-3">
            The
            <span class="text-indigo font-weight-bold">
              <span class="js-text-animation"
                data-hs-typed-options='{
                  "strings": ["ideal", "fastest", "convenient"],
                  "typeSpeed": 60,
                  "loop": true,
                  "backSpeed": 25,
                  "backDelay": 1500
                }'></span>
            </span>
            <br>
            pro account for entrepreneurs.
          </h1>
          <p class="text-white-70">Much more than a bank, Front is the ideal, fastest and most convenient financial and administrative co-driver to work with peace of mind.</p>
        </div>

        <a class="btn btn-light btn-wide btn-pill shadow-soft transition-3d-hover mb-2 mb-sm-0 mr-4" href="#">Contact Sales</a>
        <a class="btn btn-indigo btn-wide btn-pill transition-3d-hover mb-2 mb-sm-0" href="#">Get Started</a>
        <!-- End Info -->
      </div>

      <div class="col-lg-7">
        <div class="position-relative">
          <!-- Device Mockup -->
          <div class="device d-none d-sm-block mb-3 mb-sm-0" data-aos="fade-up">
            <img class="img-fluid" src="../../assets/svg/components/macbook.svg" alt="Image Description">
            <img class="device-macbook-screen" src="../../assets/img/1618x1010/img3.jpg" alt="Image Description">
          </div>
          <!-- End Device Mockup -->

          <!-- Card Info -->
          <div class="position-sm-absolute bottom-0 right-0 max-w-sm-40rem mx-auto ml-sm-auto mb-sm-n5" data-aos="fade-up" data-aos-delay="100">
            <div class="card bg-indigo">
              <div class="card-boyd">
                <h2 class="h5 text-white mb-3">Integrate<br>quickly</h2>

                <p class="text-info">Front lets you spend your development time on product improvements.</p>

                <!-- Avatar -->
                <div class="media align-items-center">
                  <div class="avatar avatar-xs avatar-circle mr-2">
                    <img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
                  </div>
                  <div class="media-body">
                    <h3 class="font-size-1 text-white mb-0">Raphael Olston</h3>
                    <small class="d-block text-light">Business</small>
                  </div>
                </div>
                <!-- End Avatar -->
              </div>
            </div>
          </div>
          <!-- Enc Card Info -->
        </div>
      </div>
    </div>
  </div>

  <!-- SVG Shape -->
  <div class="bg-primary position-absolute top-0 right-0 bottom-0 left-0"></div>

  <figure class="d-none d-md-block position-absolute" style="top: 0rem; left: 40rem; 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="#1818EF" opacity=".1" cx="130" cy="130" r="130"/>
    </svg>
  </figure>
  <figure class="d-none d-md-block position-absolute" style="top: 8rem; left: 40rem; 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="#A612DD" opacity=".1" cx="130" cy="130" r="130"/>
    </svg>
  </figure>
  <figure class="d-none d-md-block position-absolute" style="top: 5rem; left: -10rem; 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="#1919CC" opacity=".1" cx="130" cy="130" r="130"/>
    </svg>
  </figure>
  <figure class="d-none d-md-block position-absolute" style="top: -5rem; left: -10rem; width: 75rem; height: 62rem;">
    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 260 260">
      <circle fill="#1818EF" opacity=".1" cx="130" cy="130" r="130"/>
    </svg>
  </figure>

  <figure class="position-absolute bottom-0 right-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 Shape -->
</div>
<!-- End Hero Section -->
Copy
<link rel="stylesheet" href="./assets/vendor/aos/dist/aos.css">
Copy
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/typed.js/lib/typed.min.js"></script>
<script src="./assets/vendor/aos/dist/aos.js"></script>

<!-- JSFront -->

<script>
  // INITIALIZATION OF TEXT ANIMATION (TYPING)
  // =======================================================
  var typed = $.HSCore.components.HSTyped.init(".js-text-animation");


  // INITIALIZATION OF AOS
  // =======================================================
  AOS.init({
    duration: 650,
    once: true
  });
</script>
Copy