Bootstrap Components in Zospace library

<section class="pb-20 bg-secondary-dark overflow-hidden">
  <nav class="navbar pt-10 navbar-dark navbar-expand-lg">
    <div class="container position-relative">
      <a class="navbar-brand h4 mb-0 text-decoration-none" href="#">
        <img src="zospace-assets/logos/zospace-logo.svg" alt="" style="height: 30px;" width="auto">
      </a>
      <div class="d-lg-none">
        <button class="btn p-0 btn-sm navbar-burger">
          <svg width="39" height="13" viewbox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="39" height="2" rx="1" transform="matrix(-1 0 0 1 39 0)" fill="#C4C4C4"></rect><rect width="20" height="2" rx="1" transform="matrix(-1 0 0 1 20 11)" fill="#C4C4C4"></rect></svg>
        </button>
      </div>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item position-relative">
            <a class="nav-link" href="#">Product</a>
            <div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
          </li>
          <li class="nav-item position-relative">
            <a class="nav-link" href="#">Story</a>
            <div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
          </li>
          <li class="nav-item position-relative">
            <a class="nav-link" href="#">Features</a>
            <div class="position-absolute top-50 end-0 bg-secondary rounded-circle" style="width: 5px; height: 5px;"></div>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block"><a class="btn btn-outline-light" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="container position-relative">
    <div class="row align-items-center mb-24 mb-lg-8">
      <div class="col-12 col-lg-6 pt-24 py-xl-32 mb-24 mb-xl-0">
        <span class="h6 text-primary">Teams Together</span>
        <h1 class="mw-md mw-xl-lg h2 text-white mt-14 mb-12">Bring your team together. Right here.</h1>
        <p class="text-secondary-light mb-24">The quick brown fox jumps over the lazy dog.</p>
        <a class="btn btn-primary" href="#">Learn how</a>
      </div>
      <div class="col-12 col-lg-6 position-relative">
        <img class="img-fluid" src="zospace-assets/images/men-circle-apps-stars.png" alt="" style="object-fit: contain;">
      </div>
    </div>
    <div class="row justify-content-center align-items-center">
      <div class="col-6 col-md-4 col-lg-2 mb-6 mb-lg-0">
        <img class="d-block mx-auto img-fluid" src="zospace-assets/logos/dropbox-gray.svg" alt="">
      </div>
      <div class="col-6 col-md-4 col-lg-2 mb-6 mb-lg-0">
        <img class="d-block mx-auto img-fluid" src="zospace-assets/logos/stripe-gray.svg" alt="">
      </div>
      <div class="col-6 col-md-4 col-lg-2 mb-6 mb-lg-0">
        <img class="d-block mx-auto img-fluid" src="zospace-assets/logos/slack-gray.svg" alt="">
      </div>
      <div class="col-6 col-md-4 col-lg-2 mb-6 mb-md-0">
        <img class="d-block mx-auto img-fluid" src="zospace-assets/logos/stripe-gray.svg" alt="">
      </div>
      <div class="col-6 col-md-4 col-lg-2 mb-6 mb-lg-0">
        <img class="d-block mx-auto img-fluid" src="zospace-assets/logos/dropbox-gray.svg" alt="">
      </div>
    </div>
  </div>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-secondary-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column py-8 px-8 bg-white overflow-auto">
      <div class="d-flex align-items-center mb-32">
        <a class="me-auto h4 mb-0 text-decoration-none" href="#">
          <img src="zospace-assets/logos/zospace-dark-logo.svg" alt="" style="height: 28px;" width="auto">
        </a>
        <button class="navbar-close btn-close" type="button" aria-label="Close"></button>
      </div>
      <div>
        <ul class="nav flex-column">
          <li class="nav-item"><a class="nav-link text-dark py-5 ps-8 bg-primary-light rounded" href="#">Product</a></li>
          <li class="nav-item"><a class="nav-link text-dark py-5 ps-8" href="#">Story</a></li>
          <li class="nav-item"><a class="nav-link text-dark py-5 ps-8" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link text-dark py-5 ps-8" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="py-6"><a class="w-100 mb-2 btn btn-outline-light text-dark" href="#">Sign In</a><a class="w-100 btn btn-primary" href="#">Sign Up</a></div>
        <p class="mb-4 small text-center text-muted">
          <span>&copy; 2022. All rights reserved.</span>
        </p>
      </div>
    </nav>
  </div>
</section>