Bootstrap Components in Pstls library

<section class="pb-20 position-relative overflow-hidden">
  <nav class="navbar py-10 navbar-expand-xl navbar-light bg-transparent">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116">
      </a>
      <button class="btn p-0 d-xl-none navbar-burger">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-32 mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Products</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Resources</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        </ul>
        <div class="ms-auto"><a class="btn" href="#">Log In</a><a class="btn btn-dark mt-3 mt-md-0" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="row d-lg-flex flex-lg-row justify-content-lg-between">
      <div class="position-relative top-0 start-0 ms-n32 pe-32 col-12 d-none d-lg-flex align-items-lg-center col-lg-auto">
        <div class="position-absolute d-flex" style="transform: rotate(-90deg);"><a class="me-14 small fw-bold text-decoration-none text-dark" href="#">Facebook</a><a class="me-14 small fw-bold text-decoration-none text-dark" href="#">Twitter</a><a class="small fw-bold text-decoration-none text-dark" href="#">Instagram</a></div>
      </div>
      <div class="col-12 col-md-6 col-lg-5 d-md-flex align-items-md-center d-lg-none">
        <ul class="mw-lg mx-auto list-unstyled mb-0 mt-md-0 text-center d-flex justify-content-center justify-content-md-between gap-6 flex-md-column">
          <li><a class="text-decoration-none small text-dark fw-bold" href="#">Twitter</a></li>
          <li class="my-md-8"><a class="text-decoration-none small text-dark fw-bold" href="#">Facebook</a></li>
          <li><a class="text-decoration-none small text-dark fw-bold" href="#">Instagram</a></li>
        </ul>
      </div>
      <div class="col-12 col-md-6 col-lg-5 mb-6 mt-lg-0">
        <div class="mt-6 mt-md-0 d-flex flex-column align-items-center">
          <div>
            <img class="img-fluid" src="pstls-assets/images/headers/header-1-woman.jpg" alt="">
          </div>
          <ul class="list-unstyled mb-0 d-flex justify-content-center mt-9">
            <li class="d-flex me-3"><a class="p-1 bg-dark rounded-circle" href="#"></a></li>
            <li class="d-flex me-3"><a class="p-1 bg-light rounded-circle" href="#"></a></li>
            <li class="d-flex me-3"><a class="p-1 bg-light rounded-circle" href="#"></a></li>
            <li class="d-flex"><a class="p-1 bg-light rounded-circle" href="#"></a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-12 col-lg-5 d-lg-flex flex-lg-row align-items-lg-center">
        <div class="mw-lg mx-auto mw-md-none">
          <h1 class="lh-sm mb-6">
            <span>Created for</span>
            <span class="text-primary">ambitious</span>
            <span>businesses.</span>
          </h1>
          <p class="lh-lg mw-md-md mw-xl-sm mb-6">Pstls. Kit uses attractive colors and modern typography to make you look good, no matter what business you&rsquo;re in.</p>
          <div class="ms-auto"><a class="btn btn-dark d-block d-md-inline-block" href="#">Details</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-none d-xl-block h-100 position-absolute top-0 start-0 bg-warning-light mw-sm w-100 mx-xl-n10" style="background-image: url('pstls-assets/images/headers/shadows-color.png'); background-repeat: no-repeat; background-size: cover; z-index: -1;"></div>
  <div class="navbar-menu d-none position-fixed top-0 start-0 bottom-0 w-75 mw-sm" style="z-index: 9999;">
    <div class="navbar-close 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 py-10 px-6 bg-white overflow-auto">
      <div class="d-flex align-items-center mb-12">
        <a class="me-auto h4 mb-0 text-decoration-none" href="#">
          <img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="102">
        </a>
        <button class="btn navbar-close" type="button" aria-label="Close">
          <img src="pstls-assets/images/navigations/x2.svg" alt="">
        </button>
      </div>
      <div>
        <ul class="nav flex-column">
          <li class="nav-item py-3"><a class="nav-link fw-bold text-dark" href="#">Home</a></li>
          <li class="nav-item py-3"><a class="nav-link fw-bold text-dark" href="#">Products</a></li>
          <li class="nav-item py-3"><a class="nav-link fw-bold text-dark" href="#">Resources</a></li>
          <li class="nav-item py-3"><a class="nav-link fw-bold text-dark" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="py-6"><a class="btn w-100 mb-4" href="#">Log In</a><a class="btn btn-dark w-100" href="#">Sign Up</a></div>
      </div>
    </nav>
  </div>
  <img class="img-fluid position-absolute top-0 end-0" src="pstls-assets/images/headers/shadow-right.png" alt="" style="z-index: -1;">
</section>