Bootstrap Components in Asitrastudio library

<section class="position-relative bg-light-light overflow-hidden">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light py-4">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" style="height: 21px;" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="44" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
      </button>
      <div class="collapse navbar-collapse" id="nav05">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#">Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
        </ul>
        <div>
          <a class="btn btn-outline-dark fw-medium d-flex align-items-center rounded-pill" href="#">
            <span class="me-3">Get consulation</span>
            <svg class="rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="position-relative mx-auto mb-12 pb-12 border-bottom">
      <div>
        <h1 class="display-1">We create modern architecture</h1>
        <div class="d-none d-xl-block position-absolute bottom-0 end-0 mw-sm mb-8">
          <span class="d-block mb-n1 fs-10 text-end fw-medium">Since</span>
          <span class="d-block mb-3 fs-10 text-end fw-medium">1979</span>
          <p class="text-end fw-medium">
            <span class="d-block">Duoloco&reg; is a strategic branding agency</span>
            <span class="d-block">focused on brand creation, rebrands, and brand</span>
            <span class="d-block">transformation for progressive companies.</span>
          </p>
        </div>
        <div class="d-xl-none mt-10 mw-sm ms-auto">
          <span class="d-block mb-n1 fs-10 text-end fw-medium">Since</span>
          <span class="d-block mb-3 fs-10 text-end fw-medium">1979</span>
          <p class="text-end fw-medium">
            <span class="d-block">Duoloco&reg; is a strategic branding agency</span>
            <span class="d-block">focused on brand creation, rebrands, and brand</span>
            <span class="d-block">transformation for progressive companies.</span>
          </p>
        </div>
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-12 col-md-7 position-relative">
        <div class="position-absolute top-0 end-0 mt-4 me-5 d-flex align-items-center justify-content-center" style="width: 180px; height: 180px;">
          <img class="position-absolute top-0 start-0 w-100 h-100 spin" src="asitrastudio-assets/headers/spin-bonus.svg" alt="">
          <img class="position-relative" src="asitrastudio-assets/headers/arrow-spin.svg" alt="">
        </div>
        <img class="imd-fluid w-100 rounded-top" style="object-fit: cover; height: 300px;" src="asitrastudio-assets/headers/header-photo-horizontal.png" alt="">
      </div>
      <div class="d-none d-md-block col-12 col-md-5">
        <div class="row">
          <div class="col-5">
            <img class="img-fluid w-100 rounded-top" style="object-fit: cover; height: 300px;" src="asitrastudio-assets/headers/header-photo-small2.png" alt="">
          </div>
          <div class="col-7">
            <img class="img-fluid w-100 rounded-top" style="object-fit: cover; height: 300px;" src="asitrastudio-assets/headers/header-photo1.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between py-8 px-8 bg-white overflow-auto">
      <div class="d-flex align-items-center">
        <a class="me-auto h4 mb-0 text-decoration-none" href="#">
          <img class="img-fluid" style="height: 16px;" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
        </a>
        <a class="navbar-close" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
      <div class="py-12">
        <ul class="nav flex-column">
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#">About</a></li>
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#">Services</a></li>
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#">Projects</a></li>
          <li class="nav-item"><a class="nav-link text-dark" href="#">Contact us</a></li>
        </ul>
      </div>
      <div><a class="btn btn-outline-dark mb-3 w-100 rounded-pill" href="#">Login</a><a class="btn btn-primary w-100 rounded-pill" href="#">Sign in</a></div>
    </nav>
  </div>
</section>