Redirecting to PayPal

Can't find the right component?

Describe it and Shuffle AI builds it in seconds, ready to edit and export.

Free to start Generate with AI

UI Components by Shuffle

Browse 13489 beautiful UI components — complete with full source code, visual editing, AI assistance, and more.

Framework

UI Library

Components

Bootstrap Component #6821

<section class="position-relative py-32 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <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>
  <img class="position-absolute top-0 start-0 ms-n36 mt-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute bottom-0 end-0 me-n36 mb-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute top-0 end-0 me-6 mt-6" src="flex-assets/elements/dots-blue.svg" alt="">
  <img class="position-absolute bottom-0 start-0 ms-6 mb-6" src="flex-assets/elements/dots-blue.svg" alt="">
  <div class="position-relative container" style="z-index:1;">
    <img class="img-fluid mb-16 w-100" src="flex-assets/images/http-codes/error-code2.png" alt="">
    <div class="text-center mw-md-5xl mx-auto">
      <span class="badge mb-4 bg-success-dark text-success shadow">Error 404</span>
      <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Page not found</h2>
      <p class="mb-12 fs-9 text-secondary-light">Something went wrong, so this page is broken.</p>
      <div class="row justify-content-center g-4 g-md-6">
        <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Go back to Homepage</a></div>
        <div class="col-12 col-md-auto"><a class="btn btn-lg btn-dark-light w-100 text-success-light shadow" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6822

<section class="position-relative py-20 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <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 container" style="z-index:1;">
    <div class="mb-16 text-center">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Pricing</span>
      <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Flexible pricing plan for your startup</h2>
      <p class="mb-6 fs-9 fw-medium text-secondary-light">Pricing that scales with your business immediately.</p>
      <div class="d-inline-flex shadow"><a class="d-inline-flex px-4 py-3 fs-12 fw-medium text-white bg-secondary border border-light-dark rounded-start" href="#">Billed Monthly</a><a class="d-inline-flex px-4 py-3 fs-12 fw-medium text-secondary-light bg-dark-light border border-light-dark rounded-end" href="#">Billed Annually</a></div>
    </div>
    <div class="row g-8">
      <div class="col-12 col-md-6">
        <div class="bg-white rounded shadow">
          <div class="border-bottom border-light">
            <div class="px-8 py-4">
              <div class="row justify-content-between align-items-center g-4">
                <div class="col-auto">
                  <h3 class="mb-0 fs-7 fw-semibold">Basic plan</h3>
                  <p class="mb-0 fw-medium text-secondary-light">For bigger teams</p>
                </div>
                <div class="col-auto">
                  <div class="d-flex">
                    <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                    <div class="fs-4 fw-semibold">
                      <span>99</span>
                      <span class="fs-11 text-secondary">/mo</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="border-bottom border-light">
            <div class="p-8">
              <ul class="mb-0 list-unstyled">
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Access to all features</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Assisted onboarding support</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
                </li>
                <li class="d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Program reviews 1x a month</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="p-8"><a class="btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow" href="#">Get Started Now</a></div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="bg-white rounded shadow">
          <div class="border-bottom border-light">
            <div class="px-8 py-4">
              <div class="row justify-content-between align-items-center g-4">
                <div class="col-auto">
                  <h3 class="mb-0 fs-7 fw-semibold">Lifetime</h3>
                  <p class="mb-0 fw-medium text-secondary-light">Unlimited possibilities</p>
                </div>
                <div class="col-auto">
                  <div class="d-flex">
                    <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                    <div class="fs-4 fw-semibold">
                      <span>189</span>
                      <span class="fs-11 text-secondary">/mo</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="border-bottom border-light">
            <div class="p-8">
              <ul class="mb-0 list-unstyled">
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Access to all features</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Assisted onboarding support</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
                </li>
                <li class="d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Program reviews 1x a month</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="p-8"><a class="btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow" href="#">Get Started Now</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6823

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative pt-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container pb-12" style="z-index:1;">
      <div class="row g-16">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="mw-md-xs">
            <div class="d-flex mb-4">
              <a href="#">
                <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
              </a>
            </div>
            <p class="fs-10 fw-medium text-secondary">Launch your own Software As A Service Application with Flex Solutions.</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-2">
          <div class="mw-md-xs">
            <h3 class="font-heading mb-5 fs-10">Product</h3>
            <ul class="nav flex-column">
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Features</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Solutions</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Pricing</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Tutorials</a></li>
              <li class="nav-item"><a class="nav-link p-0 fs-11 link-secondary" href="#">Updates</a></li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-2">
          <div class="mw-md-xs">
            <h3 class="font-heading mb-5 fs-10">Remaining</h3>
            <ul class="nav flex-column">
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Blog</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Newsletter</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Help Centre</a></li>
              <li class="nav-item mb-4"><a class="nav-link p-0 fs-11 link-secondary" href="#">Careers</a></li>
              <li class="nav-item"><a class="nav-link p-0 fs-11 link-secondary" href="#">Support</a></li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="mw-md-sm">
            <h3 class="font-heading mb-5 fs-10">Newsletter</h3>
            <div class="row g-4 justify-content-center">
              <div class="col">
                <div class="form-group">
                  <input class="form-control text-secondary-dark p-3 shadow" id="footerInput12-1" type="email" aria-describedby="emailHelp" value="support@shuffle.dev" placeholder="Enter email">
                </div>
              </div>
              <div class="col-12 col-lg-auto">
                <button class="btn btn-lg btn-success fs-11 w-100 py-3 px-4 h-100 shadow" type="submit">Subscribe</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="position-relative container" style="z-index: 1;">
      <p class="mb-0 pt-10 pb-16 fs-12 fw-medium text-center text-secondary-light">&copy; 2021 Flex. All rights reserved.</p>
    </div>
  </div>
</section>

Bootstrap Component #6824

<section class="position-relative py-32 bg-white overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);"></div>
  <img class="position-absolute top-0 start-0 ms-n36 mt-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute bottom-0 end-0 me-n36 mb-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute top-0 end-0 me-6 mt-6" src="flex-assets/elements/dots-blue.svg" alt="">
  <img class="position-absolute bottom-0 start-0 ms-6 mb-6" src="flex-assets/elements/dots-blue.svg" alt="">
  <div class="position-relative container" style="z-index:1;">
    <img class="img-fluid mb-16 w-100" src="flex-assets/images/http-codes/error-code2.png" alt="">
    <div class="text-center mw-md-5xl mx-auto">
      <span class="badge mb-4 bg-success-dark text-success shadow">Error 404</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Page not found</h2>
      <p class="mb-12 fs-9 text-secondary">Something went wrong, so this page is broken.</p>
      <div class="row justify-content-center g-4 g-md-6">
        <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Go back to Homepage</a></div>
        <div class="col-12 col-md-auto">
          <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light w-100 text-light-dark shadow" href="#">Try Again</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6825

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="overflow-hidden">
    <div class="position-relative py-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
      <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 container" style="z-index:1;">
        <h3 class="mb-8 font-heading fs-11 text-secondary fw-medium text-center">Trusted by the top companies in this industry</h3>
        <div class="row justify-content-center g-16">
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal-dark.png" alt="">
          </div>
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/logos/brands/symtric-normal-dark.png" alt="">
          </div>
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal-dark.png" alt="">
          </div>
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal-dark.png" alt="">
          </div>
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/logos/brands/welytics-normal-dark.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6826

<section class="position-relative py-20 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <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 container" style="z-index:1;">
    <div class="mb-16 row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-md">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Team</span>
          <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Meet our team</h2>
          <p class="mb-0 fs-9 fw-medium text-secondary-light">Highly professional and capable of running your business across all digital channels.</p>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="row justify-content-end g-4">
          <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Open Positions</a></div>
          <div class="col-12 col-md-auto"><a class="btn btn-lg btn-dark-light w-100 text-success-light shadow" href="#">About Us</a></div>
        </div>
      </div>
    </div>
    <div class="row justify-content-center g-8">
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold text-white" style="letter-spacing: -0.5px;">Macauley Herring</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">CEO &amp; Founder</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square2.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold text-white" style="letter-spacing: -0.5px;">Ivan Mathews</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">CTO</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square3.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold text-white" style="letter-spacing: -0.5px;">Elen Benitez</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">CPO</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square4.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold text-white" style="letter-spacing: -0.5px;">Macauley Herring</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">Customer Success</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square5.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold text-white" style="letter-spacing: -0.5px;">Alya Levine</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">Backend Developer</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square6.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold text-white" style="letter-spacing: -0.5px;">Rose Hernandez</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">iOS Developer</h4>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6827

<section class="position-relative py-20 bg-white overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-16 row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-md">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Team</span>
          <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Meet our team</h2>
          <p class="mb-0 fs-9 fw-medium text-secondary">Highly professional and capable of running your business across all digital channels.</p>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="row justify-content-end g-4">
          <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Open Positions</a></div>
          <div class="col-12 col-md-auto">
            <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light w-100 text-light-dark shadow" href="#">About Us</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row justify-content-center g-8">
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Macauley Herring</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">CEO &amp; Founder</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square2.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Ivan Mathews</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">CTO</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square3.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Elen Benitez</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">CPO</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square4.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Macauley Herring</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">Customer Success</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square5.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Alya Levine</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">Backend Developer</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square6.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Rose Hernandez</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">iOS Developer</h4>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6828

<section class="position-relative pt-32 pb-24 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="p-8 pt-14 pb-16 bg-white mw-xl mx-auto rounded-3 shadow-sm">
      <div class="mb-7 text-center mw-md mx-auto">
        <div class="position-absolute top-0 start-50 translate-middle-x mt-n8 d-flex align-items-center justify-content-center mx-auto bg-success rounded-3" style="width: 64px; height: 64px;">
          <img class="img-fluid" style="height: 40px;" src="flex-assets/images/sign-in/logo.svg" alt="">
        </div>
        <h2 class="font-heading mb-4 fs-7">Sign in to your account</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary">Start your demo version</p>
      </div>
      <form class="mw-sm mx-auto">
        <div class="mb-4 row g-6">
          <div class="col-12">
            <div class="form-group">
              <label class="mb-1 fw-medium text-light-dark" for="signInInput11-1">Email</label>
              <input class="form-control text-secondary-dark shadow" id="signInInput11-1" type="email" aria-describedby="emailHelp" value="support@shuffle.dev" placeholder="Email">
            </div>
          </div>
          <div class="col-12">
            <div class="form-group">
              <label class="mb-1 fw-medium text-light-dark" for="signInInput11-2">Password</label>
              <input class="form-control text-secondary-dark shadow" id="signInInput11-2" type="password" aria-describedby="passwordHelp" value="**********************" placeholder="Password">
            </div>
          </div>
        </div>
        <div class="mb-6 row align-items-center justify-content-between g-2">
          <div class="col-auto">
            <div class="form-check">
              <input class="form-check-input shadow" id="flexCheckDefault" type="checkbox" value="">
              <label class="form-check-label fs-13 fw-medium text-light-dark" for="flexCheckDefault">Remember me</label>
            </div>
          </div>
          <div class="col-auto"><a class="fs-13 fw-medium text-success link-success" href="#">Forgot your password?</a></div>
        </div>
        <div class="mb-6 row">
          <div class="col-12">
            <button class="btn btn-lg btn-success fs-11 py-3 w-100 text-success-light shadow" type="submit">Sign In</button>
          </div>
        </div>
        <p class="mb-0 fs-13 fw-medium text-light-dark text-center">
          <span>Don&rsquo;t have an account?</span>
          <a class="text-success link-success" href="#">Sign up</a>
        </p>
      </form>
    </div>
  </div>
</section>

Bootstrap Component #6829

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <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 container" style="z-index:1;">
      <div class="mb-16 row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="mw-md-xl">
            <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">How it works</span>
            <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Gain more insight into how people use your</h2>
            <p class="mb-0 fs-9 fw-medium text-secondary-light">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-center justify-content-md-end">
            <div class="col-auto">
              <div class="position-relative">
                <div class="overflow-hidden rounded-5" style="max-width: 554px; height: 312px;">
                  <video class="h-100" poster="flex-assets/images/how-it-works/poster.png" muted="">
                    <source src="https://static.shuffle.dev/files/video-placeholder.mp4" type="video/mp4">
                  </video>
                  <a class="position-absolute top-50 start-50 translate-middle text-success link-success" href="#">
                    <svg width="64" height="64" viewbox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="32" cy="32" r="32" fill="currentColor"></circle>
                      <path d="M40.5 31.13L26.5 23.05C26.348 22.9622 26.1755 22.916 26 22.916C25.8245 22.916 25.652 22.9622 25.5 23.05C25.3474 23.1381 25.2208 23.265 25.133 23.4177C25.0452 23.5705 24.9993 23.7438 25 23.92V40.08C24.9993 40.2562 25.0452 40.4295 25.133 40.5823C25.2208 40.735 25.3474 40.8619 25.5 40.95C25.652 41.0378 25.8245 41.084 26 41.084C26.1755 41.084 26.348 41.0378 26.5 40.95L40.5 32.87C40.6539 32.7828 40.7819 32.6563 40.871 32.5035C40.96 32.3506 41.007 32.1769 41.007 32C41.007 31.8231 40.96 31.6494 40.871 31.4965C40.7819 31.3437 40.6539 31.2172 40.5 31.13ZM27 38.35V25.65L38 32L27 38.35Z" fill="white"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row g-8">
        <div class="col-12 col-md-4">
          <div class="mw-md-sm">
            <div class="mb-4 d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success rounded-pill" style="width: 48px; height: 48px;">1</div>
            <h3 class="mb-2 font-heading fs-9 text-white">Measure your performance</h3>
            <p class="mb-0 text-secondary-light fw-medium">Stay connected with your team and make quick decisions wherever you are.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="mw-md-sm">
            <div class="mb-4 d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success rounded-pill" style="width: 48px; height: 48px;">2</div>
            <h3 class="mb-2 font-heading fs-9 text-white">Custom analytics</h3>
            <p class="mb-0 text-secondary-light fw-medium">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="mw-md-sm">
            <div class="mb-4 d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success rounded-pill" style="width: 48px; height: 48px;">3</div>
            <h3 class="mb-2 font-heading fs-9 text-white">Team Management</h3>
            <p class="mb-0 text-secondary-light fw-medium">Our calendar lets you know what is happening with customer and projects so you</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="mw-md-sm">
            <div class="mb-4 d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success rounded-pill" style="width: 48px; height: 48px;">4</div>
            <h3 class="mb-2 font-heading fs-9 text-white">Build your website</h3>
            <p class="mb-0 text-secondary-light fw-medium">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="mw-md-sm">
            <div class="mb-4 d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success rounded-pill" style="width: 48px; height: 48px;">5</div>
            <h3 class="mb-2 font-heading fs-9 text-white">Connect multiple apps</h3>
            <p class="mb-0 text-secondary-light fw-medium">The first business platform to bring together all of your products from one place.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="mw-md-sm">
            <div class="mb-4 d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success rounded-pill" style="width: 48px; height: 48px;">6</div>
            <h3 class="mb-2 font-heading fs-9 text-white">Easy setup</h3>
            <p class="mb-0 text-secondary-light fw-medium">End to End Business Platform, Sales Management, Marketing Automation, Help Desk</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6830

<section class="position-relative pt-32 pb-24 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <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 container" style="z-index:1;">
    <div class="p-8 pt-14 pb-16 bg-white mw-xl mx-auto rounded-3 shadow-sm">
      <div class="mb-7 text-center mw-md mx-auto">
        <div class="position-absolute top-0 start-50 translate-middle-x mt-n8 d-flex align-items-center justify-content-center mx-auto bg-success rounded-3" style="width: 64px; height: 64px;">
          <img class="img-fluid" style="height: 40px;" src="flex-assets/images/sign-in/logo.svg" alt="">
        </div>
        <h2 class="font-heading mb-4 fs-7">Join our community</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary">Start your journey with our product</p>
      </div>
      <form class="mw-sm mx-auto">
        <div class="mb-4 row g-6">
          <div class="col-12">
            <div class="form-group">
              <label class="mb-1 fw-medium text-light-dark" for="signUpInput10-1">Name*</label>
              <input class="form-control text-secondary-dark shadow" id="signUpInput10-1" type="text" aria-describedby="nameHelp" value="Patryk" placeholder="Name">
            </div>
          </div>
          <div class="col-12">
            <div class="form-group">
              <label class="mb-1 fw-medium text-light-dark" for="signUpInput10-2">Email</label>
              <input class="form-control text-secondary-dark shadow" id="signUpInput10-2" type="email" aria-describedby="emailHelp" value="support@shuffle.dev" placeholder="Email">
            </div>
          </div>
          <div class="col-12">
            <div class="form-group">
              <label class="mb-1 fw-medium text-light-dark" for="signUpInput10-3">Password</label>
              <input class="form-control text-secondary-dark shadow" id="signUpInput10-3" type="password" aria-describedby="passwordHelp" value="**********************" placeholder="Password">
            </div>
          </div>
        </div>
        <div class="mb-6 row align-items-center justify-content-between g-2">
          <div class="col-auto">
            <div class="form-check">
              <input class="form-check-input shadow" id="flexCheckDefault" type="checkbox" value="">
              <label class="form-check-label fs-13 fw-medium text-light-dark" for="flexCheckDefault">Remember me</label>
            </div>
          </div>
          <div class="col-auto"><a class="fs-13 fw-medium text-success link-success" href="#">Forgot your password?</a></div>
        </div>
        <div class="mb-6 row g-4">
          <div class="col-12">
            <button class="btn btn-lg btn-success fs-11 py-3 w-100 text-success-light shadow" type="submit">Sign Up</button>
          </div>
          <div class="col-12">
            <div class="bg-white rounded">
              <a class="btn btn-lg btn-outline-light d-flex flex-wrap align-items-center justify-content-center fs-11 py-3 w-100 text-secondary shadow" href="#">
                <img class="me-2" src="flex-assets/images/sign-up/social.svg" alt="">
                <span>Sign in with Google</span>
              </a>
            </div>
          </div>
        </div>
        <p class="mb-0 fs-13 fw-medium text-light-dark text-center">
          <span>Already have an account?</span>
          <a class="text-success link-success" href="#">Sign in</a>
        </p>
      </form>
    </div>
  </div>
</section>

Bootstrap Component #6831

<section class="py-20 bg-white overflow-hidden">
  <div class="container">
    <div class="position-relative px-4 py-32 bg-secondary-dark overflow-hidden rounded-5" style="background-image: url('flex-assets/elements/pattern-dark.png')">
      <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>
      <img class="position-absolute top-0 start-0 mt-n36 ms-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
      <img class="position-absolute top-0 end-0 mt-6 me-6" src="flex-assets/elements/dots-blue.svg" alt="">
      <img class="position-absolute start-0 bottom-0 mb-6 ms-6" src="flex-assets/elements/dots-blue.svg" alt="">
      <img class="position-absolute end-0 bottom-0 mb-n36 me-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
      <div class="position-relative" style="z-index: 1;">
        <div class="mb-6 text-center mw-md-2xl mx-auto">
          <h2 class="font-heading mb-2 fs-6 text-white" style="letter-spacing: -1px;">Be the first to know when we launch</h2>
          <p class="mb-0 fs-9 fw-medium text-secondary-light">Stay in the loop with everything you need to know.</p>
        </div>
        <div class="mw-md-md mx-auto">
          <div class="mb-2 row justify-content-center g-4 g-md-6">
            <div class="col">
              <div class="form-group">
                <input class="form-control text-secondary p-3 shadow" id="newsletterInput22-1" type="email" aria-describedby="emailHelp" placeholder="Enter your email">
              </div>
            </div>
            <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success fs-11 w-100 py-3 px-4 h-100 shadow" href="#">Subscribe</a></div>
          </div>
          <p class="mb-0 fs-13 fw-medium text-secondary">
            <span>We care about your data in our</span>
            <a class="text-sucess link-success" href="#">privacy policy</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6832

<section class="position-relative py-20 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-16 text-center">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Pricing</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Flexible pricing plan for your startup</h2>
      <p class="mb-6 fs-9 fw-medium text-secondary">Pricing that scales with your business immediately.</p>
      <div class="d-inline-flex shadow"><a class="d-inline-flex px-4 py-3 fs-12 fw-medium text-success bg-white border rounded-start" href="#">Billed Monthly</a><a class="d-inline-flex px-4 py-3 fs-12 fw-medium text-secondary bg-light-light border rounded-end" href="#">Billed Annually</a></div>
    </div>
    <div class="row g-8">
      <div class="col-12 col-md-6">
        <div class="bg-white rounded shadow">
          <div class="border-bottom border-light">
            <div class="px-8 py-4">
              <div class="row justify-content-between align-items-center g-4">
                <div class="col-auto">
                  <h3 class="mb-0 fs-7 fw-semibold">Basic plan</h3>
                  <p class="mb-0 fw-medium text-secondary-light">For bigger teams</p>
                </div>
                <div class="col-auto">
                  <div class="d-flex">
                    <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                    <div class="fs-4 fw-semibold">
                      <span>99</span>
                      <span class="fs-11 text-secondary">/mo</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="border-bottom border-light">
            <div class="p-8">
              <ul class="mb-0 list-unstyled">
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Access to all features</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Assisted onboarding support</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
                </li>
                <li class="d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Program reviews 1x a month</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="p-8"><a class="btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow" href="#">Get Started Now</a></div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="bg-white rounded shadow">
          <div class="border-bottom border-light">
            <div class="px-8 py-4">
              <div class="row justify-content-between align-items-center g-4">
                <div class="col-auto">
                  <h3 class="mb-0 fs-7 fw-semibold">Lifetime</h3>
                  <p class="mb-0 fw-medium text-secondary-light">Unlimited possibilities</p>
                </div>
                <div class="col-auto">
                  <div class="d-flex">
                    <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                    <div class="fs-4 fw-semibold">
                      <span>189</span>
                      <span class="fs-11 text-secondary">/mo</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="border-bottom border-light">
            <div class="p-8">
              <ul class="mb-0 list-unstyled">
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Access to all features</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Assisted onboarding support</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
                </li>
                <li class="d-flex align-items-start">
                  <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-11 fw-medium text-secondary">Program reviews 1x a month</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="p-8"><a class="btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow" href="#">Get Started Now</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6833

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-16 text-center">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Pricing</span>
        <h2 class="font-heading mb-6 fs-5" style="letter-spacing: -1px;">Flexible pricing plan for your startup</h2>
        <div class="d-flex justify-content-center align-items-center">
          <p class="mb-0 fs-9 fw-medium text-secondary-light">Billed Monthly</p>
          <a class="mx-4" href="#">
            <div class="p-1 d-flex align-items-center justify-content-end bg-success rounded-pill" style="width: 72px; height: 36px;">
              <div class="bg-white rounded-pill" style="width: 28px; height: 28px;"></div>
            </div>
          </a>
          <p class="mb-0 fs-9 fw-medium text-light-dark">Billed Annually</p>
        </div>
      </div>
      <div class="row g-8">
        <div class="col-12 col-md-4">
          <div class="h-100 p-8 bg-white rounded shadow">
            <div class="mb-7 d-flex flex-column align-items-center">
              <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -1px;">Small</h3>
              <p class="mb-6 fw-medium text-secondary-light">For Individual Users</p>
              <div class="d-flex">
                <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                <div class="fs-3 fw-semibold">
                  <span>10</span>
                  <span class="fs-11 text-secondary">/mo</span>
                </div>
              </div>
            </div>
            <a class="mb-8 btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow shadow" href="#">Get Started Now</a>
            <ul class="mb-0 list-unstyled">
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">Complete documentation</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">Working materials in Figma</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">100GB cloud storage</p>
              </li>
              <li class="d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">500 team members</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100 p-8 bg-white rounded shadow">
            <div class="mb-7 d-flex flex-column align-items-center">
              <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -1px;">Medium</h3>
              <p class="mb-6 fw-medium text-secondary-light">For bigger teams</p>
              <div class="d-flex">
                <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                <div class="fs-3 fw-semibold">
                  <span>99</span>
                  <span class="fs-11 text-secondary">/mo</span>
                </div>
              </div>
            </div>
            <a class="mb-8 btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow shadow" href="#">Get Started Now</a>
            <ul class="mb-0 list-unstyled">
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">Complete documentation</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">Working materials in Figma</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">100GB cloud storage</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">500 team members</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">Program reviews 1x a month</p>
              </li>
              <li class="d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="h-100 p-8 bg-white rounded shadow">
            <div class="mb-7 d-flex flex-column align-items-center">
              <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -1px;">Large</h3>
              <p class="mb-6 fw-medium text-secondary-light">Unlimited possibilities</p>
              <div class="d-flex">
                <div class="fs-7 fw-bold mt-1 pe-1">$</div>
                <div class="fs-3 fw-semibold">
                  <span>799</span>
                  <span class="fs-11 text-secondary">/mo</span>
                </div>
              </div>
            </div>
            <a class="mb-8 btn btn-lg btn-success fs-10 py-4 w-100 text-success-light shadow shadow" href="#">Get Started Now</a>
            <ul class="mb-0 list-unstyled">
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">Complete documentation</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">Working materials in Figma</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">100GB cloud storage</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">500 team members</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">Program reviews 1x a month</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
              </li>
              <li class="mb-4 d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">Assisted onboarding support</p>
              </li>
              <li class="d-flex align-items-start">
                <img class="me-2" src="flex-assets/elements/checkbox-green.svg" alt="">
                <p class="mb-0 fs-11 fw-medium text-secondary">CPM Overage: Unlimited</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6834

<section class="position-relative pt-24 pb-32 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <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 container" style="z-index:1;">
    <div class="mb-20 mw-4xl">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Features</span>
      <h2 class="font-heading mb-4 fs-6 text-white" style="letter-spacing: -1px;">Gain more insight into how people use your</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary-light">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
    </div>
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="row justify-content-center justify-content-md-start">
          <div class="col-auto">
            <div class="position-relative">
              <img class="position-absolute top-0 start-0 mt-n8 ms-n8" src="flex-assets/elements/circle-orange.svg" alt="">
              <img class="position-absolute bottom-0 end-0 me-n8 mb-n9" src="flex-assets/elements/dots-blue.svg" alt="">
              <img class="img-fluid" src="flex-assets/images/features/book.png">
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="row g-10">
          <div class="col-12">
            <div class="mw-md">
              <div class="row g-6">
                <div class="col-auto">
                  <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-white bg-success rounded" style="width: 56px; height: 56px;">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_631_12694)">
                        <path d="M17 21.63H5C4.20435 21.63 3.44129 21.3139 2.87868 20.7513C2.31607 20.1887 2 19.4257 2 18.63V10.63C2 10.3648 1.89464 10.1104 1.70711 9.9229C1.51957 9.73536 1.26522 9.63 1 9.63C0.734784 9.63 0.48043 9.73536 0.292893 9.9229C0.105357 10.1104 0 10.3648 0 10.63L0 18.63C0 19.9561 0.526784 21.2279 1.46447 22.1655C2.40215 23.1032 3.67392 23.63 5 23.63H17C17.2652 23.63 17.5196 23.5246 17.7071 23.3371C17.8946 23.1496 18 22.8952 18 22.63C18 22.3648 17.8946 22.1104 17.7071 21.9229C17.5196 21.7354 17.2652 21.63 17 21.63ZM21 3.63H7C6.20435 3.63 5.44129 3.94608 4.87868 4.50868C4.31607 5.07129 4 5.83436 4 6.63V16.63C4 17.4257 4.31607 18.1887 4.87868 18.7513C5.44129 19.3139 6.20435 19.63 7 19.63H21C21.7956 19.63 22.5587 19.3139 23.1213 18.7513C23.6839 18.1887 24 17.4257 24 16.63V6.63C24 5.83436 23.6839 5.07129 23.1213 4.50868C22.5587 3.94608 21.7956 3.63 21 3.63V3.63ZM20.59 5.63L14.71 11.51C14.617 11.6037 14.5064 11.6781 14.3846 11.7289C14.2627 11.7797 14.132 11.8058 14 11.8058C13.868 11.8058 13.7373 11.7797 13.6154 11.7289C13.4936 11.6781 13.383 11.6037 13.29 11.51L7.41 5.63H20.59ZM22 16.63C22 16.8952 21.8946 17.1496 21.7071 17.3371C21.5196 17.5246 21.2652 17.63 21 17.63H7C6.73478 17.63 6.48043 17.5246 6.29289 17.3371C6.10536 17.1496 6 16.8952 6 16.63V7L11.88 12.88C12.4425 13.4418 13.205 13.7574 14 13.7574C14.795 13.7574 15.5575 13.4418 16.12 12.88L22 7V16.63Z" fill="currentColor"></path>
                      </g>
                      <defs><clippath id="clip0_631_12694"><rect width="24" height="24" fill="currentColor"></rect></clippath></defs>
                    </svg>
                  </div>
                </div>
                <div class="col">
                  <h3 class="font-heading fs-8 mb-4 mt-3 text-white">Measure your performance</h3>
                  <p class="mb-0 fw-medium text-secondary-light">Stay connected with your team and make quick decisions wherever you are.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="mw-md">
              <div class="row g-6">
                <div class="col-auto">
                  <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-white bg-success rounded" style="width: 56px; height: 56px;">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5 18H9.24C9.37161 18.0008 9.50207 17.9755 9.62391 17.9258C9.74574 17.876 9.85656 17.8027 9.95 17.71L16.87 10.78L19.71 8C19.8037 7.90704 19.8781 7.79644 19.9289 7.67458C19.9797 7.55272 20.0058 7.42201 20.0058 7.29C20.0058 7.15799 19.9797 7.02728 19.9289 6.90542C19.8781 6.78356 19.8037 6.67296 19.71 6.58L15.47 2.29C15.377 2.19627 15.2664 2.12188 15.1446 2.07111C15.0227 2.02034 14.892 1.9942 14.76 1.9942C14.628 1.9942 14.4973 2.02034 14.3754 2.07111C14.2536 2.12188 14.143 2.19627 14.05 2.29L11.23 5.12L4.29 12.05C4.19732 12.1434 4.12399 12.2543 4.07423 12.3761C4.02446 12.4979 3.99924 12.6284 4 12.76V17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18ZM14.76 4.41L17.59 7.24L16.17 8.66L13.34 5.83L14.76 4.41ZM6 13.17L11.93 7.24L14.76 10.07L8.83 16H6V13.17ZM21 20H3C2.73478 20 2.48043 20.1054 2.29289 20.2929C2.10536 20.4804 2 20.7348 2 21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
                <div class="col">
                  <h3 class="font-heading fs-8 mb-4 mt-3 text-white">Build your website</h3>
                  <p class="mb-0 fw-medium text-secondary text-secondary-light">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="mw-md">
              <div class="row g-6">
                <div class="col-auto">
                  <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-white bg-success rounded" style="width: 56px; height: 56px;">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 13H3C2.73478 13 2.48043 13.1054 2.29289 13.2929C2.10536 13.4804 2 13.7348 2 14V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H10C10.2652 22 10.5196 21.8946 10.7071 21.7071C10.8946 21.5196 11 21.2652 11 21V14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13ZM9 20H4V15H9V20ZM21 2H14C13.7348 2 13.4804 2.10536 13.2929 2.29289C13.1054 2.48043 13 2.73478 13 3V10C13 10.2652 13.1054 10.5196 13.2929 10.7071C13.4804 10.8946 13.7348 11 14 11H21C21.2652 11 21.5196 10.8946 21.7071 10.7071C21.8946 10.5196 22 10.2652 22 10V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2V2ZM20 9H15V4H20V9ZM21 13H14C13.7348 13 13.4804 13.1054 13.2929 13.2929C13.1054 13.4804 13 13.7348 13 14V21C13 21.2652 13.1054 21.5196 13.2929 21.7071C13.4804 21.8946 13.7348 22 14 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V14C22 13.7348 21.8946 13.4804 21.7071 13.2929C21.5196 13.1054 21.2652 13 21 13ZM20 20H15V15H20V20ZM10 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H10C10.2652 11 10.5196 10.8946 10.7071 10.7071C10.8946 10.5196 11 10.2652 11 10V3C11 2.73478 10.8946 2.48043 10.7071 2.29289C10.5196 2.10536 10.2652 2 10 2V2ZM9 9H4V4H9V9Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
                <div class="col">
                  <h3 class="font-heading fs-8 mb-4 mt-3 text-white">Connect multiple apps</h3>
                  <p class="mb-0 fw-medium text-secondary text-secondary-light">The first business platform to bring together all of your products from one place.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6835

<section class="position-relative py-20 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <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 container" style="z-index:1;">
    <div class="mb-16 mw-md-4xl">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Faq</span>
      <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Frequently Asked Questions</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary-light">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
    </div>
    <div class="mb-14 row g-8">
      <div class="col-12 col-md-4">
        <div class="h-100">
          <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
            <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
          </svg>
          <h3 class="mb-6 font-heading fs-9 text-white">What shipping options do you have?</h3>
          <p class="mb-0 fw-medium text-secondary-light">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="h-100">
          <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
            <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
          </svg>
          <h3 class="mb-6 font-heading fs-9 text-white">What payment methods do you accept?</h3>
          <p class="mb-0 fw-medium text-secondary-light">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="h-100">
          <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
            <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="white"></path>
          </svg>
          <h3 class="mb-6 font-heading fs-9 text-white">How long does it take to ship my order?</h3>
          <p class="mb-0 fw-medium text-secondary-light">Orders are usually shipped within 1-2 business days after placing the order.</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="h-100">
          <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
            <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="#333F51"></path>
          </svg>
          <h3 class="mb-6 font-heading fs-9 text-white">What shipping options do you have?</h3>
          <p class="mb-0 fw-medium text-secondary-light">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="h-100">
          <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
            <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="#333F51"></path>
          </svg>
          <h3 class="mb-6 font-heading fs-9 text-white">What payment methods do you accept?</h3>
          <p class="mb-0 fw-medium text-secondary-light">Any method of payments acceptable by you. For example: We accept MasterCard, Visa.</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="h-100">
          <svg class="ms-n2 mb-6 text-success" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="30" cy="30" r="27" fill="currentColor" stroke="#2A3342" stroke-width="6"></circle>
            <path d="M29.29 32.66C29.1053 32.8462 29.0011 33.0976 29 33.36C29.0003 33.494 29.0275 33.6266 29.08 33.75C29.1703 33.9619 29.3309 34.1361 29.5348 34.2433C29.7387 34.3504 29.9733 34.3839 30.1991 34.338C30.4248 34.2922 30.6278 34.1698 30.7737 33.9916C30.9196 33.8134 30.9996 33.5903 31 33.36C30.9989 33.0976 30.8947 32.8462 30.71 32.66C30.617 32.5662 30.5064 32.4918 30.3846 32.4411C30.2627 32.3903 30.132 32.3642 30 32.3642C29.868 32.3642 29.7373 32.3903 29.6154 32.4411C29.4936 32.4918 29.383 32.5662 29.29 32.66ZM37.63 21.66C37.5138 21.566 37.3781 21.4992 37.2327 21.4646C37.0873 21.43 36.9361 21.4284 36.79 21.46C35.7214 21.6839 34.6183 21.6867 33.5486 21.4683C32.4789 21.2499 31.4653 20.8149 30.57 20.19C30.4026 20.0738 30.2037 20.0116 30 20.0116C29.7963 20.0116 29.5974 20.0738 29.43 20.19C28.534 20.8132 27.52 21.2464 26.4503 21.4631C25.3806 21.6798 24.2779 21.6753 23.21 21.45C23.0639 21.4184 22.9127 21.42 22.7673 21.4546C22.6219 21.4892 22.4862 21.556 22.37 21.65C22.254 21.7441 22.1605 21.863 22.0965 21.998C22.0325 22.1329 21.9995 22.2806 22 22.43V29.88C21.9991 31.3137 22.3408 32.7269 22.9965 34.0019C23.6523 35.2769 24.6032 36.3768 25.77 37.21L29.42 39.81C29.5894 39.9305 29.7921 39.9953 30 39.9953C30.2079 39.9953 30.4106 39.9305 30.58 39.81L34.23 37.21C35.3968 36.3768 36.3477 35.2769 37.0035 34.0019C37.6592 32.7269 38.0009 31.3137 38 29.88V22.43C38.0005 22.2806 37.9675 22.1329 37.9035 21.998C37.8395 21.863 37.746 21.7441 37.63 21.65V21.66ZM36 29.88C36.0008 30.9947 35.7353 32.0935 35.2257 33.085C34.716 34.0764 33.977 34.9318 33.07 35.58L30 37.77L26.93 35.58C26.023 34.9318 25.284 34.0764 24.7744 33.085C24.2647 32.0935 23.9992 30.9947 24 29.88V23.58C26.0964 23.7594 28.196 23.273 30 22.19C31.804 23.273 33.9036 23.7594 36 23.58V29.88ZM30 25.36C29.4731 25.3596 28.9553 25.4981 28.4989 25.7614C28.0425 26.0247 27.6635 26.4036 27.4 26.86C27.2805 27.0885 27.2538 27.3544 27.3257 27.6021C27.3976 27.8498 27.5623 28.0602 27.7856 28.1892C28.0089 28.3183 28.2735 28.3561 28.524 28.2948C28.7745 28.2334 28.9916 28.0776 29.13 27.86C29.2177 27.7081 29.3438 27.5819 29.4956 27.4942C29.6474 27.4064 29.8197 27.3601 29.995 27.36C30.1704 27.3598 30.3427 27.4057 30.4947 27.4932C30.6467 27.5807 30.7731 27.7065 30.8611 27.8582C30.949 28.0099 30.9956 28.1821 30.996 28.3575C30.9965 28.5328 30.9508 28.7052 30.8635 28.8574C30.7763 29.0095 30.6506 29.136 30.499 29.2242C30.3475 29.3125 30.1754 29.3593 30 29.36C29.7348 29.36 29.4804 29.4653 29.2929 29.6528C29.1054 29.8404 29 30.0947 29 30.36C29 30.6252 29.1054 30.8795 29.2929 31.0671C29.4804 31.2546 29.7348 31.36 30 31.36C30.7957 31.36 31.5587 31.0439 32.1213 30.4813C32.6839 29.9187 33 29.1556 33 28.36C33 27.5643 32.6839 26.8012 32.1213 26.2386C31.5587 25.676 30.7957 25.36 30 25.36Z" fill="#333F51"></path>
          </svg>
          <h3 class="mb-6 font-heading fs-9 text-white">How long does it take to ship my order?</h3>
          <p class="mb-0 fw-medium text-secondary-light">Orders are usually shipped within 1-2 business days after placing the order.</p>
        </div>
      </div>
    </div>
    <div class="position-relative p-8 p-sm-16 bg-light-light overflow-hidden rounded" style="background-image: url('flex-assets/elements/pattern-light.png')">
      <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
      <div class="position-relative text-center" style="z-index: 1">
        <h2 class="mb-1 font-heading fs-5" style="letter-spacing: -1px;">Have any additional questions?</h2>
        <p class="mb-6 text-secondary-light fs-9">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</p>
        <div class="row justify-content-center">
          <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow-sm" href="#">Get in touch</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="position-absolute bottom-0 start-0 py-28 w-100 bg-light-dark"></div>
</section>

Bootstrap Component #6836

<section class="position-relative pt-24 pb-32 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-20 mw-4xl">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Features</span>
      <h2 class="font-heading mb-4 fs-6" style="letter-spacing: -1px;">Gain more insight into how people use your</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
    </div>
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="row justify-content-center justify-content-md-start">
          <div class="col-auto">
            <div class="position-relative">
              <img class="position-absolute top-0 start-0 mt-n8 ms-n8" src="flex-assets/elements/circle-orange.svg" alt="">
              <img class="position-absolute bottom-0 end-0 me-n8 mb-n9" src="flex-assets/elements/dots-blue.svg" alt="">
              <img class="img-fluid" src="flex-assets/images/features/book.png">
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="row g-10">
          <div class="col-12">
            <div class="mw-md">
              <div class="row g-6">
                <div class="col-auto">
                  <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-white bg-success rounded" style="width: 56px; height: 56px;">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g clip-path="url(#clip0_631_12694)">
                        <path d="M17 21.63H5C4.20435 21.63 3.44129 21.3139 2.87868 20.7513C2.31607 20.1887 2 19.4257 2 18.63V10.63C2 10.3648 1.89464 10.1104 1.70711 9.9229C1.51957 9.73536 1.26522 9.63 1 9.63C0.734784 9.63 0.48043 9.73536 0.292893 9.9229C0.105357 10.1104 0 10.3648 0 10.63L0 18.63C0 19.9561 0.526784 21.2279 1.46447 22.1655C2.40215 23.1032 3.67392 23.63 5 23.63H17C17.2652 23.63 17.5196 23.5246 17.7071 23.3371C17.8946 23.1496 18 22.8952 18 22.63C18 22.3648 17.8946 22.1104 17.7071 21.9229C17.5196 21.7354 17.2652 21.63 17 21.63ZM21 3.63H7C6.20435 3.63 5.44129 3.94608 4.87868 4.50868C4.31607 5.07129 4 5.83436 4 6.63V16.63C4 17.4257 4.31607 18.1887 4.87868 18.7513C5.44129 19.3139 6.20435 19.63 7 19.63H21C21.7956 19.63 22.5587 19.3139 23.1213 18.7513C23.6839 18.1887 24 17.4257 24 16.63V6.63C24 5.83436 23.6839 5.07129 23.1213 4.50868C22.5587 3.94608 21.7956 3.63 21 3.63V3.63ZM20.59 5.63L14.71 11.51C14.617 11.6037 14.5064 11.6781 14.3846 11.7289C14.2627 11.7797 14.132 11.8058 14 11.8058C13.868 11.8058 13.7373 11.7797 13.6154 11.7289C13.4936 11.6781 13.383 11.6037 13.29 11.51L7.41 5.63H20.59ZM22 16.63C22 16.8952 21.8946 17.1496 21.7071 17.3371C21.5196 17.5246 21.2652 17.63 21 17.63H7C6.73478 17.63 6.48043 17.5246 6.29289 17.3371C6.10536 17.1496 6 16.8952 6 16.63V7L11.88 12.88C12.4425 13.4418 13.205 13.7574 14 13.7574C14.795 13.7574 15.5575 13.4418 16.12 12.88L22 7V16.63Z" fill="currentColor"></path>
                      </g>
                      <defs><clippath id="clip0_631_12694"><rect width="24" height="24" fill="currentColor"></rect></clippath></defs>
                    </svg>
                  </div>
                </div>
                <div class="col">
                  <h3 class="font-heading fs-8 mb-4 mt-3">Measure your performance</h3>
                  <p class="mb-0 fw-medium text-secondary">Stay connected with your team and make quick decisions wherever you are.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="mw-md">
              <div class="row g-6">
                <div class="col-auto">
                  <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-white bg-success rounded" style="width: 56px; height: 56px;">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M5 18H9.24C9.37161 18.0008 9.50207 17.9755 9.62391 17.9258C9.74574 17.876 9.85656 17.8027 9.95 17.71L16.87 10.78L19.71 8C19.8037 7.90704 19.8781 7.79644 19.9289 7.67458C19.9797 7.55272 20.0058 7.42201 20.0058 7.29C20.0058 7.15799 19.9797 7.02728 19.9289 6.90542C19.8781 6.78356 19.8037 6.67296 19.71 6.58L15.47 2.29C15.377 2.19627 15.2664 2.12188 15.1446 2.07111C15.0227 2.02034 14.892 1.9942 14.76 1.9942C14.628 1.9942 14.4973 2.02034 14.3754 2.07111C14.2536 2.12188 14.143 2.19627 14.05 2.29L11.23 5.12L4.29 12.05C4.19732 12.1434 4.12399 12.2543 4.07423 12.3761C4.02446 12.4979 3.99924 12.6284 4 12.76V17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18ZM14.76 4.41L17.59 7.24L16.17 8.66L13.34 5.83L14.76 4.41ZM6 13.17L11.93 7.24L14.76 10.07L8.83 16H6V13.17ZM21 20H3C2.73478 20 2.48043 20.1054 2.29289 20.2929C2.10536 20.4804 2 20.7348 2 21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
                <div class="col">
                  <h3 class="font-heading fs-8 mb-4 mt-3">Build your website</h3>
                  <p class="mb-0 fw-medium text-secondary">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="mw-md">
              <div class="row g-6">
                <div class="col-auto">
                  <div class="mb-6 d-flex justify-content-center align-items-center mx-auto text-white bg-success rounded" style="width: 56px; height: 56px;">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 13H3C2.73478 13 2.48043 13.1054 2.29289 13.2929C2.10536 13.4804 2 13.7348 2 14V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H10C10.2652 22 10.5196 21.8946 10.7071 21.7071C10.8946 21.5196 11 21.2652 11 21V14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13ZM9 20H4V15H9V20ZM21 2H14C13.7348 2 13.4804 2.10536 13.2929 2.29289C13.1054 2.48043 13 2.73478 13 3V10C13 10.2652 13.1054 10.5196 13.2929 10.7071C13.4804 10.8946 13.7348 11 14 11H21C21.2652 11 21.5196 10.8946 21.7071 10.7071C21.8946 10.5196 22 10.2652 22 10V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2V2ZM20 9H15V4H20V9ZM21 13H14C13.7348 13 13.4804 13.1054 13.2929 13.2929C13.1054 13.4804 13 13.7348 13 14V21C13 21.2652 13.1054 21.5196 13.2929 21.7071C13.4804 21.8946 13.7348 22 14 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V14C22 13.7348 21.8946 13.4804 21.7071 13.2929C21.5196 13.1054 21.2652 13 21 13ZM20 20H15V15H20V20ZM10 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H10C10.2652 11 10.5196 10.8946 10.7071 10.7071C10.8946 10.5196 11 10.2652 11 10V3C11 2.73478 10.8946 2.48043 10.7071 2.29289C10.5196 2.10536 10.2652 2 10 2V2ZM9 9H4V4H9V9Z" fill="currentColor"></path>
                    </svg>
                  </div>
                </div>
                <div class="col">
                  <h3 class="font-heading fs-8 mb-4 mt-3">Connect multiple apps</h3>
                  <p class="mb-0 fw-medium text-secondary">The first business platform to bring together all of your products from one place.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6837

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative pt-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <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 container mb-6" style="z-index:1;">
      <div class="row align-items-center">
        <div class="col-12 col-md-auto">
          <a href="#">
            <img class="img-fluid" src="flex-assets/logos/flex-light-green.svg" alt="">
          </a>
        </div>
        <div class="col-12 col-md">
          <ul class="nav justify-content-md-end">
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Product</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Pricing</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Resources</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Careers</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Help</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary-light" href="#">Privacy</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="position-relative border-bottom border-light-dark" style="z-index: 1;"></div>
    <div class="position-relative container" style="z-index: 1;">
      <div class="row align-items-center justify-content-between pt-12 pb-36">
        <div class="col-auto">
          <p class="mb-0 fs-11 fw-medium text-secondary-light">&copy; 2021 Flex. All rights reserved.</p>
        </div>
        <div class="col-auto">
          <ul class="nav justify-content-md-end">
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light" href="#">
                <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                  <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                  </mask>
                  <g mask="url(#mask0_352_3312)"></g>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light" href="#">
                <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                  <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                  </mask>
                  <g mask="url(#mask0_352_3313)"></g>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light" href="#">
                <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="M7.6007 2.18182H16.3992C19.3874 2.18182 21.8184 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3874 21.8182 16.3992 21.8182H7.6007C4.61276 21.8182 2.18188 19.3873 2.18188 16.3993V7.60074C2.18188 4.61281 4.61276 2.18182 7.6007 2.18182ZM16.3993 20.0759C18.4267 20.0759 20.0761 18.4266 20.0761 16.3993H20.076V7.60074C20.076 5.57348 18.4266 3.92405 16.3992 3.92405H7.6007C5.57343 3.92405 3.92412 5.57348 3.92412 7.60074V16.3993C3.92412 18.4266 5.57343 20.0761 7.6007 20.0759H16.3993ZM6.85721 12.0001C6.85721 9.16424 9.16425 6.85714 12.0001 6.85714C14.8359 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8359 17.1429 12.0001 17.1429C9.16425 17.1429 6.85721 14.8359 6.85721 12.0001ZM8.62805 12C8.62805 13.8593 10.1408 15.3719 12.0001 15.3719C13.8593 15.3719 15.3721 13.8593 15.3721 12C15.3721 10.1406 13.8594 8.6279 12.0001 8.6279C10.1407 8.6279 8.62805 10.1406 8.62805 12Z" fill="currentcolor"></path>
                  <mask id="mask0_352_3314" style="mask-type:alpha" maskunits="userSpaceOnUse" x="2" y="2" width="20" height="20">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.6007 2.18182H16.3992C19.3874 2.18182 21.8184 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3874 21.8182 16.3992 21.8182H7.6007C4.61276 21.8182 2.18188 19.3873 2.18188 16.3993V7.60074C2.18188 4.61281 4.61276 2.18182 7.6007 2.18182ZM16.3993 20.0759C18.4267 20.0759 20.0761 18.4266 20.0761 16.3993H20.076V7.60074C20.076 5.57348 18.4266 3.92405 16.3992 3.92405H7.6007C5.57343 3.92405 3.92412 5.57348 3.92412 7.60074V16.3993C3.92412 18.4266 5.57343 20.0761 7.6007 20.0759H16.3993ZM6.85721 12.0001C6.85721 9.16424 9.16425 6.85714 12.0001 6.85714C14.8359 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8359 17.1429 12.0001 17.1429C9.16425 17.1429 6.85721 14.8359 6.85721 12.0001ZM8.62805 12C8.62805 13.8593 10.1408 15.3719 12.0001 15.3719C13.8593 15.3719 15.3721 13.8593 15.3721 12C15.3721 10.1406 13.8594 8.6279 12.0001 8.6279C10.1407 8.6279 8.62805 10.1406 8.62805 12Z" fill="white"></path>
                  </mask>
                  <g mask="url(#mask0_352_3314)"></g>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 3C7.0275 3 3 7.13211 3 12.2284C3 16.3065 5.5785 19.7648 9.15375 20.9841C9.60375 21.0709 9.76875 20.7853 9.76875 20.5403C9.76875 20.3212 9.76125 19.7405 9.7575 18.9712C7.254 19.5277 6.726 17.7332 6.726 17.7332C6.3165 16.6681 5.72475 16.3832 5.72475 16.3832C4.9095 15.8111 5.78775 15.8229 5.78775 15.8229C6.6915 15.887 7.16625 16.7737 7.16625 16.7737C7.96875 18.1847 9.273 17.777 9.7875 17.5414C9.8685 16.9443 10.1003 16.5381 10.3575 16.3073C8.35875 16.0764 6.258 15.2829 6.258 11.7471C6.258 10.7399 6.60675 9.91659 7.18425 9.27095C7.083 9.03774 6.77925 8.0994 7.263 6.82846C7.263 6.82846 8.01675 6.58116 9.738 7.77462C10.458 7.56958 11.223 7.46785 11.988 7.46315C12.753 7.46785 13.518 7.56958 14.238 7.77462C15.948 6.58116 16.7017 6.82846 16.7017 6.82846C17.1855 8.0994 16.8818 9.03774 16.7917 9.27095C17.3655 9.91659 17.7142 10.7399 17.7142 11.7471C17.7142 15.2923 15.6105 16.0725 13.608 16.2995C13.923 16.5765 14.2155 17.1423 14.2155 18.0071C14.2155 19.242 14.2043 20.2344 14.2043 20.5341C14.2043 20.7759 14.3617 21.0647 14.823 20.9723C18.4237 19.7609 21 16.3002 21 12.2284C21 7.13211 16.9703 3 12 3Z" fill="currentcolor"></path>
                </svg>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link p-4 fs-9 link-secondary-light" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19.2 3H4.8C3.81 3 3 3.81 3 4.8V19.2C3 20.19 3.81 21 4.8 21H19.2C20.19 21 21 20.19 21 19.2V4.8C21 3.81 20.19 3 19.2 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.67C6.15 8.67 5.43 7.95 5.43 7.05C5.43 6.15 6.15 5.43 7.05 5.43C7.95 5.43 8.67 6.15 8.67 7.05C8.67 7.95 7.95 8.67 7.05 8.67ZM18.3 18.3H15.6V13.53C15.6 12.81 14.97 12.18 14.25 12.18C13.53 12.18 12.9 12.81 12.9 13.53V18.3H10.2V10.2H12.9V11.28C13.35 10.56 14.34 10.02 15.15 10.02C16.86 10.02 18.3 11.46 18.3 13.17V18.3Z" fill="currentcolor"></path>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6838

<section class="position-relative py-20 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <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 container" style="z-index:1;">
    <div class="mb-16 mw-md-5xl">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Blog</span>
      <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Our mission is to make knowledge and news accessible for everyone.</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary-light">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
    </div>
    <ul class="mb-8 nav nav-pills">
      <li class="nav-item active"><a class="nav-link py-2 px-4 fs-12 fw-bold text-success link-success bg-success bg-opacity-25 shadow" href="#">All Categories</a></li>
      <li class="nav-item"><a class="nav-link py-2 px-4 fs-12 fw-bold text-secondary link-secondary-light" href="#">Technology</a></li>
      <li class="nav-item"><a class="nav-link py-2 px-4 fs-12 fw-bold text-secondary link-secondary-light" href="#">Development</a></li>
      <li class="nav-item"><a class="nav-link py-2 px-4 fs-12 fw-bold text-secondary link-secondary-light" href="#">Marketing</a></li>
      <li class="nav-item"><a class="nav-link py-2 px-4 fs-12 fw-bold text-secondary link-secondary-light" href="#">Start-up</a></li>
    </ul>
    <div class="mb-16 row g-8">
      <div class="col-12 col-lg-6">
        <div class="row g-8">
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/images/blog/news-vertical.png" alt="">
          </div>
          <div class="col">
            <div class="d-flex flex-column justify-content-between h-100 mw-lg-xs">
              <div class="mb-8 d-block">
                <a class="d-inline-block mb-4" href="#">
                  <h3 class="font-heading mb-0 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
                </a>
                <p class="mb-0 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
              </div>
              <a class="d-flex align-items-center text-success link-success" href="#">
                <span class="me-2 fw-semibold fs-10">Read Post</span>
                <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="row g-8">
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/images/blog/news2-vertical.png" alt="">
          </div>
          <div class="col">
            <div class="d-flex flex-column justify-content-between h-100 mw-lg-xs">
              <div class="mb-8 d-block">
                <a class="d-inline-block mb-4" href="#">
                  <h3 class="font-heading mb-0 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
                </a>
                <p class="mb-0 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
              </div>
              <a class="d-flex align-items-center text-success link-success" href="#">
                <span class="me-2 fw-semibold fs-10">Read Post</span>
                <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="row g-8">
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/images/blog/news3-vertical.png" alt="">
          </div>
          <div class="col">
            <div class="d-flex flex-column justify-content-between h-100 mw-lg-xs">
              <div class="mb-8 d-block">
                <a class="d-inline-block mb-4" href="#">
                  <h3 class="font-heading mb-0 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
                </a>
                <p class="mb-0 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
              </div>
              <a class="d-flex align-items-center text-success link-success" href="#">
                <span class="me-2 fw-semibold fs-10">Read Post</span>
                <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="row g-8">
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/images/blog/news4-vertical.png" alt="">
          </div>
          <div class="col">
            <div class="d-flex flex-column justify-content-between h-100 mw-lg-xs">
              <div class="mb-8 d-block">
                <a class="d-inline-block mb-4" href="#">
                  <h3 class="font-heading mb-0 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
                </a>
                <p class="mb-0 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
              </div>
              <a class="d-flex align-items-center text-success link-success" href="#">
                <span class="me-2 fw-semibold fs-10">Read Post</span>
                <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="row g-8">
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/images/blog/news5-vertical.png" alt="">
          </div>
          <div class="col">
            <div class="d-flex flex-column justify-content-between h-100 mw-lg-xs">
              <div class="mb-8 d-block">
                <a class="d-inline-block mb-4" href="#">
                  <h3 class="font-heading mb-0 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
                </a>
                <p class="mb-0 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
              </div>
              <a class="d-flex align-items-center text-success link-success" href="#">
                <span class="me-2 fw-semibold fs-10">Read Post</span>
                <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="row g-8">
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/images/blog/news6-vertical.png" alt="">
          </div>
          <div class="col">
            <div class="d-flex flex-column justify-content-between h-100 mw-lg-xs">
              <div class="mb-8 d-block">
                <a class="d-inline-block mb-4" href="#">
                  <h3 class="font-heading mb-0 fs-8 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
                </a>
                <p class="mb-0 text-secondary-light fs-10 fw-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools, and scrambling for the right data at the right time.</p>
              </div>
              <a class="d-flex align-items-center text-success link-success" href="#">
                <span class="me-2 fw-semibold fs-10">Read Post</span>
                <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9467 7.74665C11.9149 7.66481 11.8674 7.59005 11.8067 7.52665L8.47333 4.19331C8.41117 4.13116 8.33738 4.08185 8.25617 4.04821C8.17495 4.01457 8.08791 3.99725 8 3.99725C7.82246 3.99725 7.6522 4.06778 7.52667 4.19331C7.46451 4.25547 7.4152 4.32927 7.38156 4.41048C7.34792 4.4917 7.33061 4.57874 7.33061 4.66665C7.33061 4.84418 7.40113 5.01445 7.52667 5.13998L9.72667 7.33331H4.66667C4.48986 7.33331 4.32029 7.40355 4.19526 7.52858C4.07024 7.6536 4 7.82317 4 7.99998C4 8.17679 4.07024 8.34636 4.19526 8.47139C4.32029 8.59641 4.48986 8.66665 4.66667 8.66665H9.72667L7.52667 10.86C7.46418 10.922 7.41458 10.9957 7.38074 11.0769C7.34689 11.1582 7.32947 11.2453 7.32947 11.3333C7.32947 11.4213 7.34689 11.5085 7.38074 11.5897C7.41458 11.6709 7.46418 11.7447 7.52667 11.8066C7.58864 11.8691 7.66238 11.9187 7.74361 11.9526C7.82485 11.9864 7.91199 12.0038 8 12.0038C8.08801 12.0038 8.17514 11.9864 8.25638 11.9526C8.33762 11.9187 8.41136 11.8691 8.47333 11.8066L11.8067 8.47331C11.8674 8.40991 11.9149 8.33515 11.9467 8.25331C12.0133 8.09101 12.0133 7.90895 11.9467 7.74665Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <nav class="d-flex justify-content-center" aria-label="page navigation example">
      <ul class="pagination shadow">
        <li class="page-item">
          <a class="page-link d-flex align-items-center fw-medium h-100 bg-light-dark border-dark-light" href="#">
            <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.28994 5.9997L6.82994 2.4597C7.01619 2.27234 7.12074 2.01889 7.12074 1.7547C7.12074 1.49052 7.01619 1.23707 6.82994 1.0497C6.73698 0.955976 6.62638 0.881582 6.50452 0.830813C6.38266 0.780044 6.25196 0.753906 6.11994 0.753906C5.98793 0.753906 5.85723 0.780044 5.73537 0.830813C5.61351 0.881582 5.50291 0.955976 5.40994 1.0497L1.16994 5.2897C1.07622 5.38267 1.00182 5.49327 0.951053 5.61513C0.900284 5.73699 0.874146 5.86769 0.874146 5.9997C0.874146 6.13172 0.900284 6.26242 0.951053 6.38428C1.00182 6.50614 1.07622 6.61674 1.16994 6.7097L5.40994 10.9997C5.50338 11.0924 5.6142 11.1657 5.73604 11.2155C5.85787 11.2652 5.98834 11.2905 6.11994 11.2897C6.25155 11.2905 6.38201 11.2652 6.50385 11.2155C6.62569 11.1657 6.7365 11.0924 6.82994 10.9997C7.01619 10.8123 7.12074 10.5589 7.12074 10.2947C7.12074 10.0305 7.01619 9.77707 6.82994 9.5897L3.28994 5.9997Z" fill="#556987"></path>
            </svg>
          </a>
        </li>
        <li class="page-item"><a class="page-link text-secondary fw-medium bg-light-dark border-dark-light" href="#">1</a></li>
        <li class="page-item active"><a class="page-link fw-medium bg-light-dark border-dark-light" href="#">2</a></li>
        <li class="page-item"><a class="page-link text-secondary fw-medium bg-light-dark border-dark-light" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link d-flex align-items-center fw-medium h-100 bg-light-dark border-dark-light" href="#">
            <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.71006 6.0003L1.17006 9.5403C0.983805 9.72766 0.879264 9.98111 0.879264 10.2453C0.879264 10.5095 0.983805 10.7629 1.17006 10.9503C1.26302 11.044 1.37362 11.1184 1.49548 11.1692C1.61734 11.22 1.74804 11.2461 1.88006 11.2461C2.01207 11.2461 2.14277 11.22 2.26463 11.1692C2.38649 11.1184 2.49709 11.044 2.59006 10.9503L6.83006 6.7103C6.92378 6.61733 6.99818 6.50673 7.04895 6.38487C7.09972 6.26301 7.12585 6.13231 7.12585 6.0003C7.12585 5.86828 7.09972 5.73758 7.04895 5.61572C6.99818 5.49386 6.92378 5.38326 6.83006 5.2903L2.59006 1.0003C2.49662 0.907615 2.3858 0.83429 2.26396 0.784525C2.14212 0.734761 2.01166 0.709534 1.88006 0.710295C1.74845 0.709534 1.61799 0.734761 1.49615 0.784525C1.37431 0.83429 1.2635 0.907615 1.17006 1.0003C0.983805 1.18766 0.879263 1.44111 0.879263 1.7053C0.879263 1.96948 0.983805 2.22293 1.17006 2.4103L4.71006 6.0003Z" fill="#556987"></path>
            </svg>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>

Bootstrap Component #6839

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative pt-20 pb-32 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <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 container" style="z-index:1;">
      <div class="mb-16 text-center">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Team</span>
        <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Our team is the best in the business.</h2>
        <p class="mb-8 fs-9 fw-medium text-secondary-light">Highly professional and capable of running your business across all digital channels.</p>
        <div class="row justify-content-center g-4">
          <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Open Positions</a></div>
          <div class="col-12 col-md-auto">
            <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light w-100 text-light-dark shadow" href="#">About Us</a></div>
          </div>
        </div>
      </div>
      <div class="row g-8">
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Macauley Herring</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">CEO &amp; Founder</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">Dance is the hidden language of the soul.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar2.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Ivan Mathews</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">CTO</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">Everything you&rsquo;ve ever wanted is on the other side of fear.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar3.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Elen Benitez</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">CPO</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">The only way to do great work is to love what you do.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar4.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Macauley Herring</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">Customer Success</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">There are no traffic jams along the extra mile.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar5.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Alya Levine</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">Backend Developer</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">The mind is everything. What you think you become.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar6.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Rose Hernandez</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">iOS Developer</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">Whether you think you can or you think you can&rsquo;t, you&rsquo;re right.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6840

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative pt-20 pb-32 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-16 text-center">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Team</span>
        <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Our team is the best in the business.</h2>
        <p class="mb-8 fs-9 fw-medium text-secondary">Highly professional and capable of running your business across all digital channels.</p>
        <div class="row justify-content-center g-4">
          <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Open Positions</a></div>
          <div class="col-12 col-md-auto">
            <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light w-100 text-light-dark shadow" href="#">About Us</a></div>
          </div>
        </div>
      </div>
      <div class="row g-8">
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Macauley Herring</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">CEO &amp; Founder</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">Dance is the hidden language of the soul.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar2.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Ivan Mathews</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">CTO</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">Everything you&rsquo;ve ever wanted is on the other side of fear.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar3.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Elen Benitez</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">CPO</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">The only way to do great work is to love what you do.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar4.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Macauley Herring</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">Customer Success</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">There are no traffic jams along the extra mile.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar5.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Alya Levine</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">Backend Developer</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">The mind is everything. What you think you become.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="h-100 p-8 text-center bg-white rounded shadow">
            <img class="mb-6" src="flex-assets/images/team/avatar6.png" alt="">
            <h3 class="mb-2 fs-7 fw-semibold">Rose Hernandez</h3>
            <h4 class="mb-6 fs-10 fw-medium text-success">iOS Developer</h4>
            <p class="mb-4 fw-medium text-secondary mw-xs mx-auto">Whether you think you can or you think you can&rsquo;t, you&rsquo;re right.</p>
            <ul class="nav justify-content-center">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3312" style="mask-type:alpha" maskunits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3312)"></g>
                  </svg>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary-light opacity-50" href="#">
                  <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="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="currentcolor"></path>
                    <mask id="mask0_352_3313" style="mask-type:alpha" maskunits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14597C21.1356 6.44842 20.4032 6.65355 19.6336 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.2069 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4057 9.03391C9.24434 8.87512 6.44104 7.36048 4.56483 5.05894C4.23686 5.61985 4.05028 6.27342 4.05028 6.97109C4.05028 8.29106 4.72243 9.45573 5.74225 10.1371C5.11877 10.1163 4.53237 9.94476 4.01901 9.65967V9.70718C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5465 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1622 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4278 9.10416 19.4278C16.1026 19.4278 19.928 13.6312 19.928 8.60397L19.9153 8.11145C20.6627 7.57833 21.3094 6.90851 21.8181 6.14597Z" fill="white"></path>
                    </mask>
                    <g mask="url(#mask0_352_3313)"></g>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

1
...
339
340
341
342
343
344
345
...
675

The easiest way to create beautiful websites

Developer

Team License

monthly

$24/month

That's $0.80/day

annual

$99/year

That's $0.27/day

Last chance

lifetime

$249/paid once

Best value

The selected plan includes lifetimeannualmonthly access to Shuffle Editor.

A lifetime license is best for those who prefer to avoid subscriptions.

Lifetime License

Create an account

OR USE EMAIL

Pay with card

Pay with card

Pay with PayPal™

I agree to the terms of use and privacy policy.

We issue VAT invoices. Already have an account? Sign in

Why creators choose Shuffle

From idea to live website in minutes.

Shuffle pairs an AI visual editor with 80+ UI libraries, so you can design, build and export production‑ready code without starting from scratch.

13,400+ UI components

Top AI models built in

1-click code export

An AI Agent that builds with you Describe a page, watch it come to life, then fine-tune it visually or with a prompt.
Pick the best model for every task GPT-6 Astra, Claude Opus 5.5 and Gemini 3.8 in one place.
13,400+ professionally designed components Prefer building by hand? Drag in pixel-perfect sections crafted by professional designers.
Export to the stack you love Tailwind CSS, Bootstrap, Next.js, Laravel, WordPress and beyond.

“Its AI-powered features have transformed how I work! Designing and building websites has become faster, easier, and far more efficient.”

Est. 2019

Helping web builders ship since 2019 7 years of steady development.

Build websites faster with an AI Visual Editor

Products

UI Components

Extensions

Support

Company

© 2026 Shuffle. All rights reserved.