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