Turn your ideas into a
Front's feature-rich designed demo pages help you create the best possible product.
<!-- Hero -->
<div class="d-lg-flex position-relative">
<div class="container d-lg-flex align-items-lg-center content-space-t-3 content-space-lg-0 min-vh-lg-100">
<!-- Heading -->
<div class="w-100">
<div class="row">
<div class="col-lg-5">
<div class="mb-5">
<h1 class="display-4 mb-3">
Turn your ideas into a
<span class="text-primary text-highlight-warning">
<span class="js-typedjs"
data-hs-typed-options='{
"strings": ["startup.", "future.", "success."],
"typeSpeed": 90,
"loop": true,
"backSpeed": 30,
"backDelay": 2500
}'></span>
</span>
</h1>
<p class="lead">Front's feature-rich designed demo pages help you create the best possible product.</p>
</div>
<div class="d-grid d-sm-flex gap-3">
<a class="btn btn-primary btn-transition px-6" href="../page-login-simple.html">Get started</a>
<a class="btn btn-link" href="#">Learn more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Title & Description -->
<!-- SVG Shape -->
<div class="col-lg-7 col-xl-6 d-none d-lg-block position-absolute top-0 end-0 pe-0" style="margin-top: 6.75rem;">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1137.5 979.2">
<path fill="#F9FBFF" d="M565.5,957.4c81.1-7.4,155.5-49.3,202.4-115.7C840,739.8,857,570,510.7,348.3C-35.5-1.5-4.2,340.3,2.7,389
c0.7,4.7,1.2,9.5,1.7,14.2l29.3,321c14,154.2,150.6,267.8,304.9,253.8L565.5,957.4z"/>
<defs>
<path id="mainHeroSVG1" d="M1137.5,0H450.4l-278,279.7C22.4,430.6,24.3,675,176.8,823.5l0,0C316.9,960,537.7,968.7,688.2,843.6l449.3-373.4V0z"/>
</defs>
<clipPath id="mainHeroSVG2">
<use xlink:href="#mainHeroSVG1"/>
</clipPath>
<g transform="matrix(1 0 0 1 0 0)" clip-path="url(#mainHeroSVG2)">
<image width="750" height="750" xlink:href="../assets/img/750x750/img2.jpg" transform="matrix(1.4462 0 0 1.4448 52.8755 0)"></image>
</g>
</svg>
</div>
<!-- End SVG Shape -->
</div>
</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>