Bootstrap Components in Flex library

<section class="pb-24 bg-light-light overflow-hidden">
  <div class="position-relative">
    <nav class="navbar navbar-dark navbar-expand-lg py-5 py-lg-1">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
        </a>
        <div class="collapse navbar-collapse justify-content-center">
          <ul class="navbar-nav">
            <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Product</a></li>
            <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Features</a></li>
            <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Pricing</a></li>
            <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Resources</a></li>
          </ul>
        </div>
        <div class="d-none d-lg-block">
          <div class="row align-items-center g-6">
            <div class="col-auto"><a class="fs-11 link-secondary fw-medium" href="#">Log In</a></div>
            <div class="col-auto"><a class="btn btn-sm btn-success text-success-light shadow" href="#">Sign Up</a></div>
          </div>
        </div>
        <div class="d-lg-none">
          <a class="btn navbar-burger p-0" href="#">
            <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect class="text-white" width="32" height="32" rx="6" fill="currentColor"></rect>
              <path class="text-secondary" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </nav>
    <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-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 p-6 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="flex-assets/logos/flex-dark-green.svg" alt="">
          </a>
          <a class="navbar-close text-secondary" 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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <div class="py-16">
          <ul class="nav nav-pills flex-column">
            <li class="nav-item"><a class="nav-link link-secondary-dark bg-light-light" href="#">Product</a></li>
            <li class="nav-item"><a class="nav-link link-secondary" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link link-secondary" href="#">Pricing</a></li>
            <li class="nav-item"><a class="nav-link link-secondary" href="#">Resources</a></li>
          </ul>
        </div>
        <div class="row align-items-center g-6">
          <div class="col-12"><a class="link-secondary fs-11 d-block w-100 text-center fw-medium" href="#">Log In</a></div>
          <div class="col-12"><a class="btn btn-sm btn-success w-100 text-success-light shadow" href="#">Sign Up</a></div>
        </div>
      </nav>
    </div>
  </div>
  <div class="container">
    <div class="mt-5 position-relative bg-secondary-dark rounded-4 overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
      <img class="position-absolute start-0 top-0 mt-n32 ms-n32" style="z-index:1;" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
      <img class="position-absolute end-0 bottom-0 mb-n32 me-n32" style="z-index:1;" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
      <img class="position-absolute end-0 top-0 mt-6 me-6" style="z-index:1;" src="flex-assets/elements/dots-blue.svg" alt="">
      <img class="position-absolute start-0 bottom-0 mb-6 ms-6" style="z-index:1;" src="flex-assets/elements/dots-blue.svg" alt="">
      <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
      <div class="position-relative mw-4xl text-center mx-auto py-20 px-8" style="z-index: 1;">
        <span class="mb-6 badge bg-success text-white text-uppercase shadow">Header</span>
        <h1 class="mb-6 font-heading fs-4 text-white" style="letter-spacing: -1px;">A small business is only as good as its tools.</h1>
        <p class="mb-7 fs-9 fw-medium text-secondary-light">We&rsquo;re different. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
        <form class="mb-4">
          <div class="row g-4 justify-content-center">
            <div class="col-12 col-md-auto">
              <div class="form-group position-relative">
                <svg class="position-absolute start-0 top-50 translate-middle-y ms-4" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM18.59 6L12.71 11.88C12.617 11.9737 12.5064 12.0481 12.3846 12.0989C12.2627 12.1497 12.132 12.1758 12 12.1758C11.868 12.1758 11.7373 12.1497 11.6154 12.0989C11.4936 12.0481 11.383 11.9737 11.29 11.88L5.41 6H18.59ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V7.41L9.88 13.29C10.4425 13.8518 11.205 14.1674 12 14.1674C12.795 14.1674 13.5575 13.8518 14.12 13.29L20 7.41V17Z" fill="#556987"></path>
                </svg>
                <input class="form-control py-4 ps-12 shadow" id="headerInput37-1" type="email" aria-describedby="emailHelp" placeholder="Enter your work email">
              </div>
            </div>
            <div class="col-12 col-md-auto">
              <button class="btn btn-lg btn-success fs-10 w-100 py-3 px-7 h-100 shadow" type="submit">Get early access</button>
            </div>
          </div>
        </form>
        <p class="mb-0 fs-12 text-secondary-light fw-medium">Start your free 14-day trial today, no credit card required.</p>
      </div>
    </div>
  </div>
</section>