# Unlock your

With our platform, you can quantify your skills, grow in your role and stay relevant on critical topics.

Start a free trial How it works

- HTML
- JS

                    <!-- 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>