Bootstrap Components in Metis library

<section style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-size: contain; background-repeat: no-repeat; background-position: top;">
  <div class="container">
    <nav class="position-relative navbar navbar-expand-lg navbar-light py-3 mb-5">
      <a class="navbar-brand" href="#">
        <img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="side-menu" data-target="#sideMenuHeaders01" aria-controls="sideMenuHeaders01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item me-2"><a class="nav-link" href="#">Product</a></li>
          <li class="nav-item me-2"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item me-2"><a class="nav-link" href="#">About Us</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        </ul>
        <div class="ms-auto"><a class="btn btn-outline-primary me-2" href="#">Log In</a><a class="btn btn-primary" href="#">Sign Up</a></div>
      </div>
    </nav>
    <div class="mb-5 mx-auto text-center" style="max-width: 32rem;">
      <div class="mb-5">
        <h2 class="mb-3 fs-1 fw-bold">
          <span>The quick</span>
          <span class="text-primary">brown fox</span>
          <span>jumps over the lazy dog.</span>
        </h2>
        <p class="lead text-muted mb-0">The quick brown fox jumps over the lazy dog.</p>
      </div>
      <div><a class="btn btn-primary me-2" href="#">Check Now</a><a class="btn btn-outline-primary" href="#">Documentation</a></div>
    </div>
    <div class="position-relative text-center mx-auto mb-5" style="max-width: 48rem;">
      <img class="img-fluid" src="metis-assets/elements/pattern-small.png" alt="">
      <div class="position-absolute" style="top: 3%; left: 9%; width: 82%; height: 90%;">
        <img class="img-fluid d-block mx-auto" src="metis-assets/elements/app-mockup.png" alt="">
      </div>
    </div>
    <div class="row justify-content-center align-items-center pt-2">
      <div class="col-6 col-md-4 col-lg-2 mb-5 text-center">
        <img class="img-fluid" src="metis-assets/logos/brands/tesla.svg" alt="">
      </div>
      <div class="col-6 col-md-4 col-lg-2 mb-5 text-center">
        <img class="img-fluid" src="metis-assets/logos/brands/facebook.svg" alt="">
      </div>
      <div class="col-6 col-md-4 col-lg-2 mb-5 text-center">
        <img class="img-fluid" src="metis-assets/logos/brands/marvel.svg" alt="">
      </div>
      <div class="col-6 col-md-4 col-lg-2 mb-5 text-center">
        <img class="img-fluid" src="metis-assets/logos/brands/nike.svg" alt="">
      </div>
      <div class="d-none d-md-block col-md-4 col-lg-2 mb-5 text-center">
        <img class="img-fluid" src="metis-assets/logos/brands/airbnb.svg" alt="">
      </div>
    </div>
  </div>
  <div class="d-none fixed-top top-0 bottom-0" id="sideMenuHeaders01">
    <div class="position-absolute top-0 end-0 bottom-0 start-0 bg-dark" style="opacity: 0.7"></div>
    <nav class="navbar navbar-light position-absolute top-0 bottom-0 start-0 w-75 pt-3 pb-4 px-4 bg-white" style="overflow-y: auto;">
      <div class="d-flex flex-column w-100 h-100">
        <div class="d-flex justify-content-between mb-4">
          <a href="#">
            <img class="img-fluid" src="metis-assets/logos/metis/metis.svg" alt="" width="106">
          </a>
          <button class="btn-close" type="button" data-toggle="side-menu" data-target="#sideMenuHeaders01" aria-controls="sideMenuHeaders01" aria-label="Close"></button>
        </div>
        <div>
          <ul class="navbar-nav mb-4">
            <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          </ul>
          <div class="border-top pt-4 mb-5"><a class="btn btn-outline-primary w-100 mb-2" href="#">Log in</a><a class="btn btn-primary w-100" href="#">Sign up</a></div>
        </div>
        <div class="mt-auto">
          <p>
            <span>Get in Touch</span>
            <a href="#">[email protected]</a>
          </p>
          <a class="me-2" href="#">
            <img src="metis-assets/icons/facebook-blue.svg" alt="">
          </a>
          <a class="me-2" href="#">
            <img src="metis-assets/icons/twitter-blue.svg" alt="">
          </a>
          <a class="me-2" href="#">
            <img src="metis-assets/icons/instagram-blue.svg" alt="">
          </a>
        </div>
      </div>
    </nav>
  </div>
</section>