Start your journey with Unify

              
                <!-- Hero -->
                <div class="container content-space-1">
                  <div class="row justify-content-lg-between align-items-lg-center">
                    <div class="col-lg-5 mb-5 mb-lg-0">
                      <div class="mb-5">
                        <h1 class="display-4 text-dark mb-5">Start your journey with <span class="text-primary">Unify</span></h1>
                        <p class="fs-3">Feature-rich components and designed demo pages help you create the best possible products.</p>
                      </div>

                      <div class="d-grid d-sm-flex gap-3 mb-5">
                        <a class="btn btn-primary" href="#">Request demo</a>
                        <a class="btn btn-ghost-dark btn-pointer" href="#">Sign up free</a>
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-lg-6">
                      <div class="position-relative">
                        <div class="position-relative">
                          <img class="img-fluid" src="../assets/img/950x950/img1.jpg" alt="Image Description">

                          <div class="position-absolute bottom-0 end-0">
                            <img class="w-100" src="../assets/svg/illustrations/cubics.svg" alt="SVG" style="max-width: 30rem;">
                          </div>
                        </div>

                        <!-- Media -->
                        <div class="d-inline-block position-absolute top-0 start-0 bg-white w-100 rounded-pill shadow-sm p-2 mt-5 ms-n5" style="max-width: 12rem;">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                              <span class="avatar avatar-sm avatar-circle">
                                <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                              </span>
                            </div>
                            <div class="flex-grow-1 ms-2">
                              <div class="fs-5 fw-bold mb-0">Julia</div>
                              <span class="d-block fs-6">Fantastic theme!</span>
                            </div>
                          </div>
                        </div>
                        <!-- End Media -->

                        <!-- Media -->
                        <div class="d-inline-block position-absolute bottom-0 start-0 bg-warning w-100 rounded-pill shadow-sm p-2 mb-10 ms-n10" style="max-width: 16rem;">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                              <span class="avatar avatar-sm avatar-circle">
                                <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                              </span>
                            </div>
                            <div class="flex-grow-1 ms-2">
                              <div class="fs-5 fw-bold text-dark mb-0">Michael</div>
                              <span class="d-block fs-6 text-dark">Excellent documentation 🔥👋</span>
                            </div>
                          </div>
                        </div>
                        <!-- End Media -->
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Hero -->