<!-- Hero -->
<div class="position-relative bg-dark overflow-hidden" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
<div class="container position-relative zi-2 content-space-t-3 content-space-t-lg-4 content-space-b-2 content-space-b-md-3">
<div class="row align-items-lg-center">
<div class="col-lg-5 mb-7 mb-lg-0">
<!-- Heading -->
<div class="mb-6">
<h1 class="display-6 text-white">
The
<span class="text-warning">
<span class="js-typedjs"
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="lead 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>
<!-- End Title & Description -->
<div class="d-grid d-sm-flex gap-3">
<a class="btn btn-primary btn-transition" href="../page-login-simple.html">Contact sales</a>
<a class="btn btn-ghost-light btn-transition" href="#">Get started <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Col -->
<div class="col-lg-7">
<div class="position-relative">
<!-- 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">www.htmlstream.com/front/</div>
</div>
<div class="device-browser-frame">
<img class="device-browser-img" src="../assets/img/1618x1010/img1.jpg" alt="Image Description">
</div>
</figure>
<!-- End Browser Device -->
<div class="d-none d-sm-block position-absolute bottom-0 end-0 zi-1 mb-n5 me-n5" style="max-width: 20rem;" data-aos="fade-up" data-aos-delay="100">
<!-- Card -->
<div class="card bg-warning" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
<div class="card-body">
<h4 class="card-title">Integrate quickly</h4>
<p class="card-text text-dark">Front lets you spend your development time on product improvements.</p>
<!-- Avatar -->
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-2">
<h5 class="card-title mb-0">Raphael Olston</h5>
<p class="card-text text-dark small">Business</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- Shape -->
<div class="shape shape-bottom zi-1">
<svg width="3000" height="500" viewBox="0 0 3000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 500H3000V0L0 500Z" fill="#fff"/>
</svg>
</div>
<!-- End Shape -->
</div>
<!-- End Hero -->
<!-- JS Implementing Plugins -->
<script src="../node_modules/typed.js/lib/typed.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.typed.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF TEXT ANIMATION (TYPING)
// =======================================================
HSCore.components.HSTyped.init('.js-typedjs')
})()
</script>
