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.
Integrate
quickly
Front lets you spend your development time on product improvements.
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"></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 rounded p-5">
<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/32x32/img6.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>
<!-- 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 -->
<link rel="stylesheet" href="../../assets/vendor/aos/dist/aos.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/typed.js/lib/typed.min.js"></script>
<script src="../../assets/vendor/aos/dist/aos.js"></script>
<script>
// initialization of text animation (typing)
var typed = new Typed(".js-text-animation", {
strings: ["ideal", "fastest", "convenient"],
typeSpeed: 60,
loop: true,
backSpeed: 25,
backDelay: 1500
});
// initialization of aos
AOS.init({
duration: 650,
once: true
});
</script>