Bootstrap Hero Section Components in Nightsable library

<section class="pb-12 pb-lg-24 bg-black position-relative overflow-hidden"><img class="position-absolute top-0 start-0" src="nightsable-assets/images/headers/layer-blur.svg" alt="">
  <nav class="position-relative navbar navbar-expand-lg navbar-dark bg-transparent mb-20 z-1">
    <div class="container" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a>
      <button class="navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1 text-primary">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">About us</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Wallet</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Blog</a></li>
        </ul>
        <div class="ms-14"><a class="btn btn-outline-light" href="#">Get in touch</a></div>
      </div>
    </div>
  </nav>
  <div class="d-none d-lg-block position-absolute top-0 h-100 end-0 pt-20 pt-lg-40 pb-24 px-5 col-6">
    <div class="position-relative mw-3xl ms-auto"><img class="position-absolute top-0 end-0" src="nightsable-assets/images/headers/lines.svg" alt=""><img src="nightsable-assets/images/headers/star.svg" alt=""><img class="position-absolute top-50 start-0" src="nightsable-assets/images/headers/star.svg" alt=""><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/headers/star.svg" alt=""><img class="img-fluid d-block h-100 mx-auto position-relative" src="nightsable-assets/images/headers/card.png" alt=""></div>
  </div>
  <div class="container position-relative">
    <div class="row">
      <div class="col-12 col-lg-6">
        <div class="mw-md mw-lg-xl mx-auto mx-lg-0"><span class="badge mb-2 text-primary">Nightsable</span>
          <h1 class="font-heading text-white mb-8" style="letter-spacing: -0.2rem;">Making credit history with nightsable</h1>
          <p class="mw-xs lead">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p><a class="btn btn-primary" href="#">Start now</a>
        </div>
      </div>
      <div class="col-12 d-lg-none mt-20">
        <div class="position-relative">
          <div class="position-relative mw-3xl ms-auto"><img class="position-absolute top-0 end-0" src="nightsable-assets/images/headers/lines.svg" alt=""><img src="nightsable-assets/images/headers/star.svg" alt=""><img class="position-absolute top-50 start-0" src="nightsable-assets/images/headers/star.svg" alt=""><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/headers/star.svg" alt=""><img class="img-fluid d-block h-100 mx-auto position-relative" src="nightsable-assets/images/headers/card.png" alt=""></div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-primary-dark bg-opacity-25"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-8 pb-10 px-8 bg-black overflow-auto">
      <div class="d-flex align-items-center justify-content-between mb-16"><a class="d-inline-block text-decoration-none" href="#"><img class="img-fluid" src="nightsable-assets/logos/logo.svg" alt=""></a><a class="navbar-close text-primary" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
            <path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" fill="currentColor"></path>
          </svg></a></div>
      <ul class="nav flex-column my-auto">
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Home</a></li>
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">About us</a></li>
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Wallet</a></li>
        <li class="nav-item mb-1"><a class="btn text-white ps-4 text-start w-100 fw-normal" href="#">Blog</a></li>
      </ul><a class="btn mt-8 w-100 btn-outline-light" href="#">Get in touch</a>
    </nav>
  </div>
</section>