<!-- Hero -->
<div class="container content-space-2">
<div class="row justify-content-md-between align-items-sm-center">
<div class="col-8 col-sm-6 col-md-5 mb-5 mb-sm-0">
<img class="img-fluid" src="../assets/svg/illustrations/oc-growing.svg" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-sm-6">
<div class="mb-5">
<h1 class="display-4 mb-3">
Unlock your
<br>
<span class="text-primary text-highlight-warning">
<span class="js-typedjs"
data-hs-typed-options='{
"strings": ["future.", "potential.", "skills."],
"typeSpeed": 90,
"loop": true,
"backSpeed": 30,
"backDelay": 2500
}'></span>
</span>
</h1>
<p class="lead">With our platform, you can quantify your skills, grow in your role and stay relevant on critical topics.</p>
</div>
<div class="d-grid d-md-flex gap-3 align-items-md-center">
<a class="btn btn-primary" href="../page-login.html">Start a free trial</a>
<!-- Fancybox -->
<a class="video-player video-player-btn" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
<span class="video-player-icon shadow-sm me-2">
<i class="bi-play-fill"></i>
</span>
How it works
</a>
<!-- End Fancybox -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Hero -->
<!-- JS Implementing Plugins -->
<script src="../node_modules/typed.js/lib/typed.min.js"></script>
<script src="../node_modules/fslightbox/index.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>
