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 #6881

<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 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 text-center mw-md-4xl mx-auto">
        <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Numbers</span>
        <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">We believe in the power of data</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary-light">Flex is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      </div>
      <div class="row g-16">
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5 text-white" style="letter-spacing: -1px;">235.000</h2>
            <p class="mb-0 fs-9 text-secondary-light fw-medium">Projects completed</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5 text-white" style="letter-spacing: -1px;">$10m</h2>
            <p class="mb-0 fs-9 text-secondary-light fw-medium">APR</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5 text-white" style="letter-spacing: -1px;">+50.000</h2>
            <p class="mb-0 fs-9 text-secondary-light fw-medium">Hours Saved Annually</p>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="text-center">
            <h2 class="mb-2 font-heading fs-5 text-white" style="letter-spacing: -1px;">3.500</h2>
            <p class="mb-0 fs-9 text-secondary-light fw-medium">Unique Users</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="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 #6882

<section class="position-relative pb-32 pb-md-0 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 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="">
  <div class="position-relative" style="z-index: 1;">
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="d-flex justify-content-center justify-content-md-start">
          <img class="img-fluid" src="flex-assets/images/http-codes/error-code3.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="p-4 mw-md-xl">
          <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;">Oh no! Error 404</h2>
          <p class="mb-12 fs-9 text-secondary">Something went wrong, so this page is broken.</p>
          <div class="row 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>
    </div>
  </div>
</section>

Bootstrap Component #6883

<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="#">We are hiring</a></div>
          <div class="col-12 col-md-auto">
            <div class="col-12 col-md-auto"><a class="btn btn-lg btn-dark-light w-100 text-success-light shadow" href="#">Sign Up</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="mb-8 row g-8">
      <div class="col-12 col-md-8">
        <div class="position-relative">
          <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow.png" alt="">
          <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
            <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>
      </div>
      <div class="col-12 col-md-4">
        <div class="row g-8">
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow2.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow3.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
        </div>
      </div>
    </div>
    <div class="row g-8">
      <div class="col-12 col-md-4">
        <div class="row g-8">
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow4.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow5.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-8">
        <div class="position-relative">
          <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow6.png" alt="">
          <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
            <h3 class="mb-2 fs-6 fw-semibold text-white" style="letter-spacing: -0.5px;">Rosemary Hernandez</h3>
            <h4 class="mb-0 fs-10 fw-medium text-success">iOS Developer</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6884

<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 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="#">We are hiring</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="#">Our Culture</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="mb-8 row g-8">
      <div class="col-12 col-md-8">
        <div class="position-relative">
          <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow.png" alt="">
          <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
            <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>
      </div>
      <div class="col-12 col-md-4">
        <div class="row g-8">
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow2.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow3.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
        </div>
      </div>
    </div>
    <div class="row g-8">
      <div class="col-12 col-md-4">
        <div class="row g-8">
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow4.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow5.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-8">
        <div class="position-relative">
          <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow6.png" alt="">
          <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
            <h3 class="mb-2 fs-6 fw-semibold text-white" style="letter-spacing: -0.5px;">Rosemary Hernandez</h3>
            <h4 class="mb-0 fs-10 fw-medium text-success">iOS Developer</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6885

<section class="py-20 bg-white overflow-hidden">
  <div class="container">
    <div class="position-relative px-4 py-32 bg-light-light overflow-hidden rounded-5" 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>
      <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" style="letter-spacing: -1px;">Be the first to know when we launch</h2>
          <p class="mb-0 fs-9 fw-medium text-secondary">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="newsletterInput25-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 #6886

<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="#">We are hiring</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="#">Our Culture</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="mb-8 row g-8">
      <div class="col-12 col-md-8">
        <div class="position-relative">
          <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow.png" alt="">
          <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
            <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>
      </div>
      <div class="col-12 col-md-4">
        <div class="row g-8">
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow2.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow3.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
        </div>
      </div>
    </div>
    <div class="row g-8">
      <div class="col-12 col-md-4">
        <div class="row g-8">
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow4.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
          <div class="col-12">
            <div class="position-relative">
              <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow5.png" alt="">
              <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
                <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>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-8">
        <div class="position-relative">
          <img class="img-fluid w-100" src="flex-assets/images/team/avatar-square-shadow6.png" alt="">
          <div class="position-absolute bottom-0 start-0 mb-10 ms-10">
            <h3 class="mb-2 fs-6 fw-semibold text-white" style="letter-spacing: -0.5px;">Rosemary Hernandez</h3>
            <h4 class="mb-0 fs-10 fw-medium text-success">iOS Developer</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6887

<section class="overflow-hidden">
  <nav class="navbar navbar-dark navbar-expand-lg bg-white py-5 py-lg-1">
    <div class="container-fluid">
      <div class="row align-items-center g-0 w-100">
        <div class="d-none d-lg-block col-lg-4">
          <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
              <li class="nav-item p-6"><a class="nav-link link-secondary-dark p-0" href="#">Product</a></li>
              <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Features</a></li>
              <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Pricing</a></li>
              <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Resources</a></li>
            </ul>
          </div>
        </div>
        <div class="col-6 col-lg-4 d-lg-flex justify-content-center">
          <a class="navbar-brand" href="#">
            <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
          </a>
        </div>
        <div class="col-6 col-lg-4 d-flex justify-content-end">
          <div class="d-none d-lg-block">
            <div class="row align-items-center g-6">
              <div class="col-auto"><a class="fs-11 text-secondary fw-medium" href="#">Log In</a></div>
              <div class="col-auto"><a class="btn btn-sm btn-success text-success-light shadow" href="#">Sign Up</a></div>
            </div>
          </div>
          <div class="d-lg-none">
            <a class="btn navbar-burger p-0" href="#">
              <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect class="text-light-light" width="32" height="32" rx="6" fill="currentColor"></rect>
                <path class="text-secondary" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
    <div class="navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between p-6 bg-white overflow-auto">
      <div class="d-flex align-items-center">
        <a class="me-auto h4 mb-0 text-decoration-none" href="#">
          <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
        </a>
        <a class="navbar-close text-secondary" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
      <div class="py-16">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item"><a class="nav-link link-secondary-dark bg-light-light" href="#">Product</a></li>
          <li class="nav-item"><a class="nav-link link-secondary" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link link-secondary" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link link-secondary" href="#">Resources</a></li>
        </ul>
      </div>
      <div class="row align-items-center g-6">
        <div class="col-12"><a class="fs-11 d-block w-100 link-secondary text-center fw-medium" href="#">Log In</a></div>
        <div class="col-12"><a class="btn btn-sm btn-success w-100 text-success-light shadow" href="#">Sign Up</a></div>
      </div>
    </nav>
  </div>
</section>

Bootstrap Component #6888

<section class="position-fixed bottom-0 start-0 bg-white bg-opacity-50 h-100 w-100 overflow-auto" style="z-index: 50;">
  <div class="container py-12">
    <div class="p-10 mw-3xl mx-auto bg-secondary-dark border rounded shadow">
      <div class="row align-items-center g-6">
        <div class="col-12">
          <h3 class="font-heading fw-semibold fs-9 text-white mb-4">Cookie Policy</h3>
          <p class="mb-4 text-secondary-light fw-medium">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners.</p>
          <a class="d-flex flex-wrap align-items-center text-success link-success" href="#">
            <span class="me-2 fw-medium">Read our cookie policy</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.71 12.71C15.801 12.6149 15.8724 12.5028 15.92 12.38C16.02 12.1365 16.02 11.8635 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L12.71 8.29C12.5217 8.1017 12.2663 7.99591 12 7.99591C11.7337 7.99591 11.4783 8.1017 11.29 8.29C11.1017 8.4783 10.9959 8.7337 10.9959 9C10.9959 9.2663 11.1017 9.5217 11.29 9.71L12.59 11L9 11C8.73479 11 8.48043 11.1054 8.2929 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.2929 12.7071C8.48043 12.8946 8.73479 13 9 13L12.59 13L11.29 14.29C11.1963 14.383 11.1219 14.4936 11.0711 14.6154C11.0203 14.7373 10.9942 14.868 10.9942 15C10.9942 15.132 11.0203 15.2627 11.0711 15.3846C11.1219 15.5064 11.1963 15.617 11.29 15.71C11.383 15.8037 11.4936 15.8781 11.6154 15.9289C11.7373 15.9797 11.868 16.0058 12 16.0058C12.132 16.0058 12.2627 15.9797 12.3846 15.9289C12.5064 15.8781 12.617 15.8037 12.71 15.71L15.71 12.71ZM22 12C22 10.0222 21.4135 8.08879 20.3147 6.4443C19.2159 4.79981 17.6541 3.51808 15.8268 2.7612C13.9996 2.00433 11.9889 1.80629 10.0491 2.19215C8.10929 2.578 6.32746 3.53041 4.92894 4.92893C3.53041 6.32746 2.578 8.10929 2.19215 10.0491C1.8063 11.9889 2.00433 13.9996 2.76121 15.8268C3.51809 17.6541 4.79981 19.2159 6.4443 20.3147C8.08879 21.4135 10.0222 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C19.9997 18.1425 20.7363 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12ZM4 12C4 10.4177 4.4692 8.87103 5.34825 7.55544C6.2273 6.23985 7.47673 5.21446 8.93854 4.60896C10.4003 4.00346 12.0089 3.84504 13.5607 4.15372C15.1126 4.4624 16.538 5.22433 17.6569 6.34315C18.7757 7.46197 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5823 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84286 16.1566 4 14.1217 4 12Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <div class="col-12">
          <div class="row g-4">
            <div class="col-12"><a class="btn btn-lg btn-success fs-11 py-3 px-4 w-100 text-success-light shadow" href="#">Allow</a></div>
            <div class="col-12"><a class="btn btn-lg btn-dark-light fs-11 py-3 px-4 w-100 text-success-light shadow" href="#">Decline</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6889

<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 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-10 row align-items-center g-16">
        <div class="col-12 col-md-6">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Rich text</span>
          <h2 class="font-heading mb-6 fs-6" style="letter-spacing: -1px;">Flex is a simple, beautiful tool that helps you work sanely</h2>
          <p class="mb-0 fs-9 fw-semibold text-secondary">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
        </div>
        <div class="col-12 col-md-6">
          <div class="row justify-content-end 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-sm" href="#">Get Started</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-secondary border-0 shadow-sm" href="#">Learn More</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="row align-items-center g-8">
        <div class="col-12 col-md-6">
          <p class="mb-6 fs-10 fw-medium text-secondary">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
          <h3 class="mb-4 font-heading fs-7 fw-semibold text-light-dark">Header 1</h3>
          <p class="mb-6 fs-10 fw-medium text-secondary">Flex integrates customer data and marketing tools:</p>
          <ul class="list-unstyled">
            <li class="fs-10 fw-medium text-secondary">1.Enterprise software for startups</li>
            <li class="fs-10 fw-medium text-secondary">2.Time is money. Stop jumping from tool to tool with all the hassle of integrations.</li>
            <li class="fs-10 fw-medium text-secondary">3.Now you can manage your entire business on one platform.</li>
          </ul>
          <p class="mb-0 fs-10 fw-medium text-secondary">With a single point of view, Flex integrates customer data and marketing tools in one flexible cloud platform that lets you get business results wherever they show up.</p>
        </div>
        <div class="col-12 col-md-6">
          <div class="d-flex justify-content-center justify-content-md-end">
            <img class="img-fluid" src="flex-assets/images/rich-text/avatar.png" alt="">
          </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>

Bootstrap Component #6890

<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-8 text-center">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Our clients</span>
      <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Trusted by the top companies in this industry</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary-light">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
    </div>
    <div class="row justify-content-center g-8">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-light-dark rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal-light.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-light-dark rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/symetric-normal-light.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-light-dark rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal-light.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="d-flex justify-content-center align-items-center p-12 h-100 bg-light-dark rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal-light.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6891

<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 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-24 text-center mw-md-5xl mx-auto">
        <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" 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 your business in one secure platform.</p>
      </div>
      <div class="mw-md-6xl mx-auto">
        <div class="row g-8">
          <div class="mb-8 col-12 col-md-4">
            <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">1</div>
              </div>
              <h3 class="mb-4 font-heading fs-9">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 class="mb-8 col-12 col-md-4">
            <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">2</div>
              </div>
              <h3 class="mb-4 font-heading fs-9">Custom analytics</h3>
              <p class="mb-0 fw-medium text-secondary">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
            </div>
          </div>
          <div class="mb-8 col-12 col-md-4">
            <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">3</div>
              </div>
              <h3 class="mb-4 font-heading fs-9">Team Management</h3>
              <p class="mb-0 fw-medium text-secondary">Our calendar lets you know what is happening with customer and projects to control process.</p>
            </div>
          </div>
          <div class="mb-8 mb-md-0 col-12 col-md-4">
            <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">4</div>
              </div>
              <h3 class="mb-4 font-heading fs-9">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 class="mb-8 mb-md-0 col-12 col-md-4">
            <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">5</div>
              </div>
              <h3 class="mb-4 font-heading fs-9">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 class="col-12 col-md-4">
            <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">6</div>
              </div>
              <h3 class="mb-4 font-heading fs-9">Easy setup for your project</h3>
              <p class="mb-0 fw-medium text-secondary">End to End Business Platform, Sales Management, Marketing Automation, Help Desk</p>
            </div>
          </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>

Bootstrap Component #6892

<section class="position-relative pt-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-8 text-center mw-md-3xl mx-auto">
      <span class="badge mb-4 bg-success-dark text-success shadow">Application</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Get our Free Mobile App</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="mb-16 row justify-content-center g-4">
      <div class="col-auto">
        <a href="#">
          <img src="flex-assets/elements/app-store.svg" alt="">
        </a>
      </div>
      <div class="col-auto">
        <a href="#">
          <img src="flex-assets/elements/google-play.svg" alt="">
        </a>
      </div>
    </div>
    <div class="d-flex justify-content-center">
      <img class="img-fluid" src="flex-assets/images/applications/mockups.png" alt="">
    </div>
  </div>
</section>

Bootstrap Component #6893

<section class="position-relative pt-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 pb-12" style="z-index:1;">
    <div class="row g-16">
      <div class="col-12 col-md-8">
        <div class="d-flex mb-6">
          <a href="#">
            <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
          </a>
        </div>
        <ul class="nav ms-n6">
          <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Product</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Resources</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Careers</a></li>
        </ul>
      </div>
      <div class="col-12 col-md-4">
        <div class="mw-md-sm ms-auto">
          <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="footerInput29-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 border-bottom border-light" 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-20 g-4">
      <div class="col-auto">
        <p class="mb-0 fs-11 fw-medium text-center text-secondary-light">&copy; 2021 Flex. All rights reserved.</p>
      </div>
      <div class="col-auto">
        <ul class="nav ms-n6">
          <li class="nav-item"><a class="nav-link p-4 fs-11 link-secondary-light" href="#">Terms</a></li>
          <li class="nav-item"><a class="nav-link p-4 fs-11 link-secondary-light" href="#">Privacy</a></li>
          <li class="nav-item"><a class="nav-link p-4 fs-11 link-secondary-light" href="#">Cookies</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6894

<section class="position-relative pt-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 pb-12" style="z-index:1;">
    <div class="row g-16">
      <div class="col-12 col-md-8">
        <div class="d-flex mb-6">
          <a href="#">
            <img class="img-fluid" src="flex-assets/logos/flex-light-green.svg" alt="">
          </a>
        </div>
        <ul class="nav ms-n6">
          <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Product</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Resources</a></li>
          <li class="nav-item"><a class="nav-link p-6 fs-11 link-secondary-light" href="#">Careers</a></li>
        </ul>
      </div>
      <div class="col-12 col-md-4">
        <div class="mw-md-sm ms-auto">
          <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="footerInput31-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 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-20 g-4">
      <div class="col-auto">
        <p class="mb-0 fs-11 fw-medium text-center text-secondary-light">&copy; 2021 Flex. All rights reserved.</p>
      </div>
      <div class="col-auto">
        <ul class="nav ms-n6">
          <li class="nav-item"><a class="nav-link p-4 fs-11 link-secondary-light" href="#">Terms</a></li>
          <li class="nav-item"><a class="nav-link p-4 fs-11 link-secondary-light" href="#">Privacy</a></li>
          <li class="nav-item"><a class="nav-link p-4 fs-11 link-secondary-light" href="#">Cookies</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6895

<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 py-28 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="row align-items-center g-16">
        <div class="col-auto">
          <a class="text-dark-light link-dark-light" href="#">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="24" cy="24" r="24" fill="currentColor"></circle>
              <path d="M28.9999 23H21.4099L24.7099 19.71C24.8982 19.5217 25.004 19.2663 25.004 19C25.004 18.7337 24.8982 18.4783 24.7099 18.29C24.5216 18.1017 24.2662 17.9959 23.9999 17.9959C23.7336 17.9959 23.4782 18.1017 23.2899 18.29L18.2899 23.29C18.1989 23.3851 18.1275 23.4973 18.0799 23.62C17.9799 23.8635 17.9799 24.1365 18.0799 24.38C18.1275 24.5028 18.1989 24.6149 18.2899 24.71L23.2899 29.71C23.3829 29.8037 23.4935 29.8781 23.6153 29.9289C23.7372 29.9797 23.8679 30.0058 23.9999 30.0058C24.1319 30.0058 24.2626 29.9797 24.3845 29.9289C24.5063 29.8781 24.6169 29.8037 24.7099 29.71C24.8036 29.617 24.878 29.5064 24.9288 29.3846C24.9796 29.2627 25.0057 29.132 25.0057 29C25.0057 28.868 24.9796 28.7373 24.9288 28.6154C24.878 28.4936 24.8036 28.383 24.7099 28.29L21.4099 25H28.9999C29.2651 25 29.5195 24.8946 29.707 24.7071C29.8945 24.5196 29.9999 24.2652 29.9999 24C29.9999 23.7348 29.8945 23.4804 29.707 23.2929C29.5195 23.1054 29.2651 23 28.9999 23Z" fill="#D5DAE1"></path>
            </svg>
          </a>
        </div>
        <div class="col">
          <div class="row g-16">
            <div class="col-12 col-md-6">
              <div class="row align-items-center g-6">
                <div class="col-auto">
                  <img class="img-fluid" src="flex-assets/images/testimonials/avatar.png" alt="">
                </div>
                <div class="col">
                  <h3 class="mb-2 fs-8 fw-semibold text-white">Darren Dunlap</h3>
                  <p class="mb-0 fs-10 text-secondary-light fw-medium">CEO &amp; Founder at Flex.co</p>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="position-relative mw-md-md ms-md-auto">
                <h2 class="position-relative mb-0 font-heading fs-8 fw-semibold text-white" style="z-index: 1; letter-spacing: -1px;">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h2>
                <img class="position-absolute top-0 start-0 mt-n6 ms-n7" src="flex-assets/elements/quote-top-dark.svg" alt="">
                <img class="position-absolute bottom-0 end-0 mb-n6 me-n7" src="flex-assets/elements/quote-down-dark.svg" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="col-auto">
          <a class="text-dark-light link-dark-light" href="#">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="24" cy="24" r="24" fill="currentColor"></circle>
              <path d="M29.92 23.62C29.8724 23.4973 29.801 23.3851 29.71 23.29L24.71 18.29C24.6168 18.1968 24.5061 18.1228 24.3842 18.0723C24.2624 18.0219 24.1319 17.9959 24 17.9959C23.7337 17.9959 23.4783 18.1017 23.29 18.29C23.1968 18.3832 23.1228 18.4939 23.0723 18.6158C23.0219 18.7376 22.9959 18.8681 22.9959 19C22.9959 19.2663 23.1017 19.5217 23.29 19.71L26.59 23H19C18.7348 23 18.4804 23.1054 18.2929 23.2929C18.1054 23.4804 18 23.7348 18 24C18 24.2652 18.1054 24.5196 18.2929 24.7071C18.4804 24.8946 18.7348 25 19 25H26.59L23.29 28.29C23.1963 28.383 23.1219 28.4936 23.0711 28.6154C23.0203 28.7373 22.9942 28.868 22.9942 29C22.9942 29.132 23.0203 29.2627 23.0711 29.3846C23.1219 29.5064 23.1963 29.617 23.29 29.71C23.383 29.8037 23.4936 29.8781 23.6154 29.9289C23.7373 29.9797 23.868 30.0058 24 30.0058C24.132 30.0058 24.2627 29.9797 24.3846 29.9289C24.5064 29.8781 24.617 29.8037 24.71 29.71L29.71 24.71C29.801 24.6149 29.8724 24.5028 29.92 24.38C30.02 24.1365 30.02 23.8635 29.92 23.62Z" fill="#D5DAE1"></path>
            </svg>
          </a>
        </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="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 #6896

<section class="position-relative pb-32 pb-md-0 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 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="">
  <div class="position-relative" style="z-index: 1;">
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="d-flex justify-content-center justify-content-md-start">
          <img class="img-fluid" src="flex-assets/images/http-codes/error-code3.png" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="p-4 mw-md-xl">
          <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;">Oh no! Error 404</h2>
          <p class="mb-12 fs-9 text-secondary-light">Something went wrong, so this page is broken.</p>
          <div class="row 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>
    </div>
  </div>
</section>

Bootstrap Component #6897

<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 mw-lg-xs h-100">
              <a class="d-inline-block mb-8" href="#">
                <h3 class="font-heading mb-0 fs-7 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
              </a>
              <a class="d-inline-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 mw-lg-xs h-100">
              <a class="d-inline-block mb-8" href="#">
                <h3 class="font-heading mb-0 fs-7 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
              </a>
              <a class="d-inline-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 mw-lg-xs h-100">
              <a class="d-inline-block mb-8" href="#">
                <h3 class="font-heading mb-0 fs-7 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
              </a>
              <a class="d-inline-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 mw-lg-xs h-100">
              <a class="d-inline-block mb-8" href="#">
                <h3 class="font-heading mb-0 fs-7 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
              </a>
              <a class="d-inline-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 mw-lg-xs h-100">
              <a class="d-inline-block mb-8" href="#">
                <h3 class="font-heading mb-0 fs-7 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
              </a>
              <a class="d-inline-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 mw-lg-xs h-100">
              <a class="d-inline-block mb-8" href="#">
                <h3 class="font-heading mb-0 fs-7 text-white link-white">A small business is only as good as its tools and it is totally true.</h3>
              </a>
              <a class="d-inline-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 #6898

<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="#2A3342"></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 #6899

<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 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="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 #6900

<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 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-dark-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" href="#">Product</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Pricing</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Resources</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Careers</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Help</a></li>
            <li class="nav-item"><a class="nav-link p-6 fs-9 link-secondary" href="#">Privacy</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="position-relative border-bottom border-light" 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 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-4 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>
            <li class="nav-item">
              <a class="nav-link p-4 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="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 opacity-50" 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 opacity-50" 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>

1
...
342
343
344
345
346
347
348
...
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.