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

<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="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="mw-md-2xl">
            <h2 class="font-heading mb-4 fs-6 text-white" style="letter-spacing: -1px;">Sign up for our newsletter</h2>
            <p class="mb-0 fs-9 fw-medium text-secondary-light">Stay in the loop with everything you need to know.</p>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <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="newsletterInput14-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-light">
              <span>We care about your data in our</span>
              <a class="text-sucess link-success" href="#">privacy policy</a>
            </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 #6782

<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="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-success" 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-success" 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-success" 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-success" 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 #6783

<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;">
    <h3 class="mb-6 font-heading fs-11 text-secondary-light fw-medium text-center">Trusted by the top companies in this industry</h3>
    <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-white rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal-dark.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-white rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/symtric-normal-dark.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-white rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal-dark.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-white rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal-dark.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6784

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

<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="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="mw-md-2xl">
            <h2 class="font-heading mb-4 fs-6" style="letter-spacing: -1px;">Sign up for our newsletter</h2>
            <p class="mb-0 fs-9 fw-medium text-secondary">Stay in the loop with everything you need to know.</p>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <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="newsletterInput12-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>
  </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 #6786

<section class="bg-white 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="py-28 bg-secondary-dark">
    <div class="container">
      <div class="position-relative" style="z-index: 10;">
        <div class="row align-items-center g-16">
          <div class="col-12 col-md-6">
            <div class="mw-md-md">
              <h2 class="mb-4 fs-6 font-heading text-white" style="letter-spacing: -1px;">The fastest way from idea to live site. Period.</h2>
              <p class="mb-0 fs-9 fw-medium text-secondary-light">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company.</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-success w-100 px-7 py-4 fs-10 fw-medium text-success-light rounded shadow" href="#">Get Started</a></div>
              <div class="col-12 col-md-auto">
                <div class="bg-dark-light rounded"><a class="btn btn-dark-light w-100 px-7 py-4 fs-10 fw-medium text-light rounded shadow" href="#">Learn More</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="#2A3342"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6787

<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;">
    <h3 class="mb-6 font-heading fs-11 text-secondary-light fw-medium text-center">Trusted by the top companies in this industry</h3>
    <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-light rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal-dark.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-light rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/symtric-normal-dark.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-light rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal-dark.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-light rounded shadow">
          <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal-dark.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6788

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

Bootstrap Component #6789

<section class="py-20 bg-secondary-dark 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="newsletterInput24-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 #6790

<section class="bg-white overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative pt-20 pb-32 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
    <div class="container">
      <div class="position-relative" style="z-index: 10;">
        <div class="mb-16 mw-4xl mx-auto text-center">
          <span class="mb-4 badge bg-success text-success-light text-uppercase shadow">Get Started</span>
          <h2 class="mb-4 fs-6 font-heading text-white" style="letter-spacing: -1px;">The fastest way from idea to live site. Period.</h2>
          <p class="mb-6 fs-9 fw-medium text-secondary-light">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
          <div class="row justify-content-center">
            <div class="col col-md-auto"><a class="btn btn-success w-100 px-7 py-4 fs-10 fw-medium text-success-light rounded shadow" href="#">Get Started</a></div>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-auto">
            <div class="position-relative">
              <img class="position-absolute top-0 start-0 mt-n14 ms-n14" style="z-index: 20;" src="flex-assets/elements/circle-orange.svg" alt="">
              <img class="position-absolute bottom-0 end-0 me-n12 mb-n10" src="flex-assets/elements/dots-blue.svg" alt="">
              <img class="position-relative img-fluid" style="z-index: 10;" src="flex-assets/images/cta/work2.png" alt="">
            </div>
          </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 #6791

<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;">
    <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Quotes</span>
    <h2 class="font-heading fw-medium mb-4 fs-5 text-white" style="letter-spacing: -1px;">Testimonial from Flex app users</h2>
    <p class="mb-16 fs-9 fw-medium text-secondary-light">With Flex, you can build websites without writing code.</p>
    <div class="row g-8">
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Macauley Herring</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">CEO &amp; Founder at Flex.co</h3>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow-sm">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">I just can&apos;t get enough of Flex. I want to get a T-Shirt with Flex on it so I can show it off to everyone. I will recommend you to my colleagues.</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Ivan Mathews</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">CTO at Flex.co</h3>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">You won&apos;t regret it. We&apos;ve seen amazing results already. Thanks guys, keep up the good work!</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Elen Benitez</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">CPO at Flex.co</h3>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">Flex impressed me on multiple levels. I use Flex often. I would be lost without Flex. Flex is the real deal!</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Kacy Wade</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">Customer Success at Flex.co</h3>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow-sm">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">Flex was worth a fortune to my company. I couldn&apos;t have asked for more than this.</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Alya Levine</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">Backend Developer at Flex.co</h3>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">Thanks for the great service. Flex did exactly what you said it does. Just what I was looking for.</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Rosemary Hernandez</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">Product Designer at Flex.co</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6792

<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="#">Open Positions</a></div>
          <div class="col-12 col-md-auto">
            <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light w-100 text-light-dark shadow" href="#">About Us</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row justify-content-center g-8">
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Macauley Herring</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">CEO &amp; Founder</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square2.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Ivan Mathews</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">CTO</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square3.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Elen Benitez</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">CPO</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square4.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Macauley Herring</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">Customer Success</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square5.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Alya Levine</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">Backend Developer</h4>
      </div>
      <div class="col-12 col-sm-6 col-md-4">
        <img class="mb-8 img-fluid w-100" src="flex-assets/images/team/avatar-square6.png" alt="">
        <h3 class="mb-2 fs-6 fw-semibold" style="letter-spacing: -0.5px;">Rose Hernandez</h3>
        <h4 class="mb-0 fs-10 fw-medium text-success">iOS Developer</h4>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6793

<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;">
    <h3 class="mb-6 font-heading fs-11 text-secondary-light fw-medium text-center">Trusted by the top companies in this industry</h3>
    <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-dark.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/symtric-normal-dark.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-dark.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-dark.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6794

<section class="position-relative pb-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(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <div class="position-relative" style="z-index: 1;">
    <div class="position-relative pb-12 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" style="z-index: 1;">
        <div class="text-center mw-md-2xl mx-auto">
          <span class="text-success fw-medium">John Doe &bull; 19 Jan 2022</span>
          <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Lorem ipsum dolor sit amet</h2>
          <p class="mb-6 fs-9 fw-medium text-secondary-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="mb-0">
            <span class="badge bg-success-dark text-success text-uppercase shadow">Technology</span>
          </div>
        </div>
      </div>
    </div>
    <div class="position-relative">
      <div class="position-absolute top-0 start-0 w-100 h-50 bg-secondary-dark"></div>
      <div class="container">
        <div class="position-relative mb-10 d-flex justify-content-center" style="z-index: 1;">
          <img class="img-fluid rounded-1" src="flex-assets/images/blog-content/content.png" alt="">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="mw-md-2xl mx-auto">
        <p class="pb-10 mb-8 fs-9 text-secondary fw-medium border-bottom border-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <h3 class="mb-4 font-heading fs-7 text-light-dark fw-semibold">Header 1</h3>
        <p class="mb-6 fs-10 text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <div class="mb-6 row g-6">
          <div class="col-auto">
            <div class="bg-success h-100 rounded-pill" style="width: 2px;"></div>
          </div>
          <div class="col">
            <div class="py-7">
              <p class="mb-4 fs-8 text-light-dark fw-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</p>
              <p class="mb-0 fs-10 text-secondary-light fw-medium">&mdash; John Doe, CEO &amp; Founder</p>
            </div>
          </div>
        </div>
        <p class="mb-6 fs-10 text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <img class="mb-4 img-fluid w-100" src="flex-assets/images/blog-content/content-middle.png" alt="">
        <p class="mb-8 fs-10 text-secondary-light fw-medium">
          <span>Non massa enim vitae duis mattis. Vel in</span>
          <u><a class="link-secondary-light" href="#">ultricies</a></u>
          <span>vel fringilla.</span>
        </p>
        <h3 class="mb-4 font-heading fs-7 text-light-dark fw-semibold">Header 1</h3>
        <p class="mb-16 fs-10 text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <p class="mb-6 fs-10 text-secondary">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</p>
        <ol class="list-unstyled px-4 mb-16">
          <li class="fs-10 text-secondary">1. Lectus id duis vitae porttitor enim gravida morbi.</li>
          <li class="fs-10 text-secondary">2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
          <li class="fs-10 text-secondary">3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
        </ol>
        <p class="mb-0 fs-10 text-secondary">
          <span>Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim.</span>
          <u><a class="link-success" href="#">Vivamus id pharetra massa.</a></u>
          <span>Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</span>
        </p>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6795

<section class="position-relative py-20 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-16 text-center 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-success" 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-success" 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-success" 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-success" 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>
</section>

Bootstrap Component #6796

<section class="py-20 bg-secondary-dark overflow-hidden">
  <div class="container">
    <div class="position-relative px-4 py-32 bg-white 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(255, 255, 255, 0) 0%, #FFFFFF 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="newsletterInput23-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 #6797

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <h3 class="mb-8 font-heading fs-11 text-secondary-light fw-medium text-center">Trusted by the top companies in this industry</h3>
      <div class="row justify-content-center g-16">
        <div class="col-auto">
          <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal-dark.png" alt="">
        </div>
        <div class="col-auto">
          <img class="img-fluid" src="flex-assets/logos/brands/symtric-normal-dark.png" alt="">
        </div>
        <div class="col-auto">
          <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal-dark.png" alt="">
        </div>
        <div class="col-auto">
          <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal-dark.png" alt="">
        </div>
        <div class="col-auto">
          <img class="img-fluid" src="flex-assets/logos/brands/welytics-normal-dark.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div 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 #6798

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
    <div class="position-relative container" style="z-index: 1;">
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="mb-10 mw-md-xl">
            <span class="badge mb-4 bg-success-dark text-success shadow">Application</span>
            <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Get our Free Mobile App</h2>
            <p class="mb-6 fs-9 fw-medium text-secondary-light">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="row g-4">
              <div class="col-auto">
                <a href="#">
                  <img src="flex-assets/elements/app-store-light-dark.svg" alt="">
                </a>
              </div>
              <div class="col-auto">
                <a href="#">
                  <img src="flex-assets/elements/google-play-light-dark.svg" alt="">
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="position-relative d-flex justify-content-center">
            <img class="position-absolute start-0 top-0 ms-20 mt-n6" style="width: 30%;" src="flex-assets/elements/circle-2xl-orange.svg" alt="">
            <img class="position-absolute end-0 bottom-0 me-20 mb-12" style="width: 21%;" src="flex-assets/elements/dots-vertical-blue.svg" alt="">
            <img class="position-relative img-fluid" style="z-index: 1;" src="flex-assets/images/applications/mockup2-dark.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentcolor"></path>
    </svg>
  </div>
</section>

Bootstrap Component #6799

<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;">
    <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Quotes</span>
    <h2 class="font-heading fw-medium mb-4 fs-5" style="letter-spacing: -1px;">Testimonial from Flex app users</h2>
    <p class="mb-16 fs-9 fw-medium text-secondary">With Flex, you can build websites without writing code.</p>
    <div class="row g-8">
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Macauley Herring</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">CEO &amp; Founder at Flex.co</h3>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow-sm">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">I just can&apos;t get enough of Flex. I want to get a T-Shirt with Flex on it so I can show it off to everyone. I will recommend you to my colleagues.</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Ivan Mathews</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">CTO at Flex.co</h3>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">You won&apos;t regret it. We&apos;ve seen amazing results already. Thanks guys, keep up the good work!</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Elen Benitez</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">CPO at Flex.co</h3>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">Flex impressed me on multiple levels. I use Flex often. I would be lost without Flex. Flex is the real deal!</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Kacy Wade</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">Customer Success at Flex.co</h3>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow-sm">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">Flex was worth a fortune to my company. I couldn&apos;t have asked for more than this.</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Alya Levine</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">Backend Developer at Flex.co</h3>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="d-flex flex-column justify-content-between p-8 bg-white h-100 rounded shadow">
          <h3 class="mb-32 font-heading fs-8 fw-medium text-gray-900">Thanks for the great service. Flex did exactly what you said it does. Just what I was looking for.</h3>
          <div class="d-block">
            <h3 class="mb-1 font-heading fs-10 fw-semibold text-light-dark">Rosemary Hernandez</h3>
            <h3 class="font-heading fs-10 fw-normal text-secondary-light">Product Designer at Flex.co</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap Component #6800

<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="d-flex flex-wrap align-items-end h-100">
    <div class="container py-10">
      <div class="p-12 w-100 mw-3xl bg-light-light border rounded shadow">
        <div class="row align-items-center g-8">
          <div class="col-12 col-md-6">
            <div class="mw-md-xs">
              <p class="mb-4 text-secondary fw-medium">We use third-party cookies in order to personalise your experience</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>
          <div class="col-12 col-md-6">
            <div class="row justify-content-end g-4">
              <div class="col-12 col-md-auto">
                <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light fs-11 py-3 px-4 w-100 text-light-dark shadow" href="#">Decline</a></div>
              </div>
              <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success fs-11 py-3 px-4 w-100 text-success-light shadow" href="#">Allow</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

1
...
337
338
339
340
341
342
343
...
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.