Bootstrap Components

<section class="pb-20">
  <nav class="navbar navbar-expand-lg navbar-light bg-light"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" src="flaro-assets/logos/flaro-logo-black.svg" alt=""/></a>
      <div class="collapse navbar-collapse me-5 justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#" >Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Solutions</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>
      <div class="d-none d-lg-block"><a class="btn btn-primary" href="#" >Try 14 Days Free Trial</a></div>
      <div class="d-lg-none">
        <button class="btn navbar-burger p-0">
          <svg class="text-primary" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="28" fill="currentColor"></rect>
            <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 pt-24">
        <div class="mw-xl mw-lg-2xl mx-auto mx-lg-0"><a class="btn d-inline-flex px-2 py-1 mb-6 align-items-center btn-success-light rounded-pill" href="#"><span class="me-1 fw-semibold" >👋 We are hiring. View open roles</span>
            <svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.66667 3.41675L12.75 7.50008M12.75 7.50008L8.66667 11.5834M12.75 7.50008L2.25 7.50008" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
          <h1 class="h2 mb-6" >Discover mentors that helps you grow</h1>
          <p class="mw-lg fs-7 mb-10" >Get the best-in-class group mentoring plans and professional benefits for your team.</p>
          <div class="d-sm-flex align-items-center mb-24"><a class="btn d-block d-sm-inline-block mb-4 mb-sm-0 me-sm-6 btn-primary" href="#" >Join Free for 30 Days</a><a class="btn d-block d-sm-inline-block btn-outline-light-dark" href="#">
              <svg width="19" height="18" viewbox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.75 3.75C2.75 2.92157 3.42157 2.25 4.25 2.25H6.70943C7.03225 2.25 7.31886 2.45657 7.42094 2.76283L8.5443 6.13291C8.66233 6.48699 8.50203 6.87398 8.1682 7.0409L6.47525 7.88737C7.30194 9.72091 8.77909 11.1981 10.6126 12.0247L11.4591 10.3318C11.626 9.99796 12.013 9.83767 12.3671 9.9557L15.7372 11.0791C16.0434 11.1811 16.25 11.4677 16.25 11.7906V14.25C16.25 15.0784 15.5784 15.75 14.75 15.75H14C7.7868 15.75 2.75 10.7132 2.75 4.5V3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span class="ms-1 text-black fw-medium" >Book a call</span></a></div>
          <p class="fs-8 fw-semibold text-secondary mb-6" >TRUSTED AND LOVED BY 100+ TECH FIRST TEAMS</p>
          <div class="d-flex flex-column flex-sm-row align-items-center"><img class="mb-5 mb-sm-0 me-sm-6" src="flaro-assets/logos/brands/brand.png" alt=""/><img class="mb-5 mb-sm-0 me-sm-6" src="flaro-assets/logos/brands/brand2.png" alt=""/><img src="flaro-assets/logos/brands/brand3.png" alt=""/></div>
        </div>
      </div>
      <div class="col-12 col-lg-6 pt-24">
        <div class="mw-2xl mx-auto"><img class="img-fluid" src="flaro-assets/images/headers/header.png" alt=""/></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" src="flaro-assets/logos/flaro-logo-black.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-16">
        <ul class="nav flex-column">
          <li class="nav-item mb-8"><a class="nav-link text-dark" href="#" >Features</a></li>
          <li class="nav-item mb-8"><a class="nav-link text-dark" href="#" >Solutions</a></li>
          <li class="nav-item mb-8"><a class="nav-link text-dark" href="#" >Resources</a></li>
          <li class="nav-item"><a class="nav-link text-dark" href="#" >Pricing</a></li>
        </ul>
      </div>
      <div><a class="btn w-100 fw-medium" href="#" >Login</a><a class="btn w-100 btn-primary" href="#" >Sign in</a></div>
    </nav>
  </div>
</section>