Bootstrap Components

<section style="background: url(gradia-assets/images/hero/bg.png) no-repeat center center; background-size: cover;">
  <div>
    <nav class="navbar navbar-dark navbar-expand-lg bg-transparent py-5 py-lg-3 px-5">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt="">
        </a>
        <div class="collapse navbar-collapse me-5 justify-content-end">
          <ul class="navbar-nav">
            <li class="nav-item p-5">
              <a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-white mb-0">Features</h3>
              </a>
            </li>
            <li class="nav-item p-5">
              <a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-white mb-0">Solutions</h3>
              </a>
            </li>
            <li class="nav-item p-5">
              <a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-white mb-0">Features</h3>
              </a>
            </li>
            <li class="nav-item p-5">
              <a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-white mb-0">Pricing</h3>
              </a>
            </li>
          </ul>
        </div>
        <div class="d-none d-lg-block">
          <div class="border border-2 border-light rounded-3">
            <button class="btn btn-transparent px-4 py-3 rounded-1" type="button">
              <span class="fs-17 fw-medium text-white mb-0">Start Free Trial</span>
            </button>
          </div>
        </div>
        <div class="d-lg-none">
          <button class="btn navbar-burger p-0">
            <svg class="text-dark-light" 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="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="gradia-assets/logos/gradia-name-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-12">
              <a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-secondary mb-0">Features</h3>
              </a>
            </li>
            <li class="nav-item mb-12">
              <a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-secondary mb-0">Solutions</h3>
              </a>
            </li>
            <li class="nav-item mb-12">
              <a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-secondary mb-0">Resources</h3>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-inline-block p-0" href="#">
                <h3 class="fs-17 fw-medium text-secondary mb-0">Pricing</h3>
              </a>
            </li>
          </ul>
        </div>
        <div>
          <button class="btn btn-light px-4 py-3 w-100 mb-5 rounded-1" type="button">
            <span class="fs-17 fw-medium text-secondary mb-0">Login</span>
          </button>
          <div class="d-inline-block w-100 rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
            <button class="btn btn-light px-4 py-3 w-100 rounded-1" type="button">
              <span class="fs-17 fw-medium text-secondary mb-0">Start Free Trial</span>
            </button>
          </div>
        </div>
      </nav>
    </div>
  </div>
  <div class="overflow-hidden pt-32 pb-40">
    <div class="container">
      <div class="row g-16">
        <div class="col-12 col-md-5 col-xl-6">
          <h4 class="fs-16 fw-medium text-secondary-light mb-5">Grow fast, get things done with ease</h4>
          <h2 class="fs-6 text-white mb-14">Manage remote team, anywhere, anytime.</h2>
          <div class="row mb-20 g-5">
            <div class="col-auto">
              <button class="btn btn-light px-6 py-4 w-100" type="button">
                <span class="fs-18 fw-medium mb-0">Start 14 Days Free Trial</span>
              </button>
            </div>
            <div class="col-auto">
              <button class="btn btn-outline-dark px-6 py-4 w-100" type="button">
                <span class="fs-18 fw-medium text-white mb-0">How it works</span>
              </button>
            </div>
          </div>
          <div class="mw-md-md">
            <div class="row g-6">
              <div class="col-auto">
                <img class="img-fluid" style="width: 51px; height: 51px;" src="gradia-assets/images/hero/avatar-man.png" alt="">
              </div>
              <div class="col">
                <p class="text-light-dark mb-3">&ldquo;You made it so simple. My new team is so much faster and easier to work with than my old site. I just choose the page, make the change.&rdquo;</p>
                <h3 class="fs-18 fw-medium text-white mb-0">Denny Jones, founder of Growthio</h3>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-7 col-xl-6">
          <div class="row mb-6">
            <div class="col-12">
              <div class="d-flex justify-content-center">
                <div class="d-inline-block w-100 p-3 bg-white" style="max-width: 245px; border-radius: 15px;">
                  <div class="row g-3">
                    <div class="col-auto">
                      <img class="img-fluid" src="gradia-assets/images/hero/avatar-circle.png" alt="">
                    </div>
                    <div class="col">
                      <h3 class="fs-18 fw-medium mb-0">Albert Flores</h3>
                      <p class="fs-20 text-dark mb-2">Software Engineer</p>
                      <span class="badge bg-light-light text-dark fw-medium">
                        <div class="d-flex align-items-center">
                          <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                          <p class="mb-0">Wyoming, USA</p>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row mb-6 justify-content-center">
            <div class="col-12 col-lg-6 mb-6 mb-lg-0">
              <div class="d-flex justify-content-center justify-content-lg-end">
                <div class="d-inline-block w-100 p-3 bg-white" style="max-width: 245px; border-radius: 15px;">
                  <div class="row g-3">
                    <div class="col-auto">
                      <img class="img-fluid" src="gradia-assets/images/hero/avatar-circle2.png" alt="">
                    </div>
                    <div class="col">
                      <h3 class="fs-18 fw-medium mb-0">Darlene Robertson</h3>
                      <p class="fs-20 text-dark mb-2">Software Tester</p>
                      <span class="badge bg-light-light text-dark fw-medium">
                        <div class="d-flex align-items-center">
                          <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                          <p class="mb-0">New York, USA</p>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <div class="d-flex justify-content-center justify-content-lg-start">
                <div class="d-inline-block w-100 p-3 bg-white" style="max-width: 245px; border-radius: 15px;">
                  <div class="row g-3">
                    <div class="col-auto">
                      <img class="img-fluid" src="gradia-assets/images/hero/avatar-circle3.png" alt="">
                    </div>
                    <div class="col">
                      <h3 class="fs-18 fw-medium mb-0">Kristin Watson</h3>
                      <p class="fs-20 text-dark mb-2">Project Manager</p>
                      <span class="badge bg-light-light text-dark fw-medium">
                        <div class="d-flex align-items-center">
                          <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                          <p class="mb-0">Pennsylvania, USA</p>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row mb-6 me-xl-28 justify-content-center">
            <div class="col-12 col-lg-6 mb-6 mb-lg-0">
              <div class="d-flex justify-content-center justify-content-lg-end">
                <div class="d-inline-block w-100 p-3 bg-white" style="max-width: 245px; border-radius: 15px;">
                  <div class="row g-3">
                    <div class="col-auto">
                      <img class="img-fluid" src="gradia-assets/images/hero/avatar-circle3.png" alt="">
                    </div>
                    <div class="col">
                      <h3 class="fs-18 fw-medium mb-0">Guy Hawkins</h3>
                      <p class="fs-20 text-dark mb-2">Scrum Master</p>
                      <span class="badge bg-light-light text-dark fw-medium">
                        <div class="d-flex align-items-center">
                          <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                          <p class="mb-0">North Carolina, USA</p>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <div class="d-flex justify-content-center justify-content-lg-start">
                <div class="d-inline-block w-100 p-3 bg-white" style="max-width: 245px; border-radius: 15px;">
                  <div class="row g-3">
                    <div class="col-auto">
                      <img class="img-fluid" src="gradia-assets/images/hero/avatar-circle4.png" alt="">
                    </div>
                    <div class="col">
                      <h3 class="fs-18 fw-medium mb-0">Annette Black</h3>
                      <p class="fs-20 text-dark mb-2">Software Engineer</p>
                      <span class="badge bg-light-light text-dark fw-medium">
                        <div class="d-flex align-items-center">
                          <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                          <p class="mb-0">North Dakota, USA</p>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row mb-6 ms-xl-6 justify-content-center">
            <div class="col-12 col-lg-6 mb-6 mb-lg-0">
              <div class="d-flex justify-content-center justify-content-lg-end">
                <div class="d-inline-block w-100 p-3 bg-white" style="max-width: 245px; border-radius: 15px;">
                  <div class="row g-3">
                    <div class="col-auto">
                      <img class="img-fluid" src="gradia-assets/images/hero/avatar-circle.png" alt="">
                    </div>
                    <div class="col">
                      <h3 class="fs-18 fw-medium mb-0">Robert Fox</h3>
                      <p class="fs-20 text-dark mb-2">UI/UX Designer</p>
                      <span class="badge bg-light-light text-dark fw-medium">
                        <div class="d-flex align-items-center">
                          <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                          <p class="mb-0">Maine, USA</p>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <div class="d-flex justify-content-center justify-content-lg-start">
                <div class="d-inline-block w-100 p-3 bg-white" style="max-width: 245px; border-radius: 15px;">
                  <div class="row g-3">
                    <div class="col-auto">
                      <img class="img-fluid" src="gradia-assets/images/hero/avatar-circle2.png" alt="">
                    </div>
                    <div class="col">
                      <h3 class="fs-18 fw-medium mb-0">Cody Fisher</h3>
                      <p class="fs-20 text-dark mb-2">Ethical Hacker</p>
                      <span class="badge bg-light-light text-dark fw-medium">
                        <div class="d-flex align-items-center">
                          <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                          <p class="mb-0">Alaska, USA</p>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>