UI Components by Shuffle

<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-grey.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-grey.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-grey.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-grey.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<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;">
      <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-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>
  </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>

<section class="position-fixed bottom-0 start-0 bg-secondary-dark 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-white border rounded shadow">
      <div class="row align-items-center g-6">
        <div class="col-12">
          <h3 class="font-heading fw-semibold fs-9 mb-4">Cookie Policy</h3>
          <p class="mb-4 text-secondary 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">
              <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>
        </div>
      </div>
    </div>
  </div>
</section>

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

<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-12 mw-md-3xl">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Numbers</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">We believe in the power of data</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary">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 align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="row g-8">
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">235.000</h2>
              <p class="mb-2 fs-9 text-light-dark fw-bold">Projects completed</p>
              <p class="mb-0 text-secondary fw-medium mw-xs mx-auto">No need to hire specialists for each channel.</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">$10m</h2>
              <p class="mb-2 fs-9 text-light-dark fw-bold">APR</p>
              <p class="mb-0 text-secondary fw-medium mw-xs mx-auto">Track how much money a company just in case</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">+50.000</h2>
              <p class="mb-2 fs-9 text-light-dark fw-bold">Hours Saved Annually</p>
              <p class="mb-0 text-secondary fw-medium mw-xs mx-auto">Manage many companies, even with different languages.</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">3.500</h2>
              <p class="mb-2 fs-9 text-light-dark fw-bold">Unique Users</p>
              <p class="mb-0 text-secondary fw-medium mw-xs mx-auto">Everyone works the way they want to, on their own schedule.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="d-flex justify-content-center">
          <img class="img-fluid" src="flex-assets/images/numbers/work.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<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 py-md-44 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" style="z-index: 1;">
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="p-4 mw-md-md mx-md-auto">
            <h2 class="font-heading mb-6 fs-6 text-white" style="letter-spacing: -1px;">Be the first to know when we launch</h2>
            <p class="mb-8 fs-9 fw-medium text-secondary-light">Stay in the loop with everything you need to know.</p>
            <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="newsletterInput21-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 class="col-12 col-md-6">
          <div class="d-flex justify-content-end ps-4 ps-md-0">
            <div class="position-relative">
              <img class="position-absolute end-0 top-0 mt-n24" src="flex-assets/elements/dots-horizontal-blue.svg" alt="">
              <img class="position-absolute end-0 bottom-0 mb-n24" src="flex-assets/elements/dots-horizontal-blue.svg" alt="">
              <img class="position-absolute start-0 top-50 translate-middle-y" style="width: 41%;" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
              <img class="position-relative img-fluid" style="z-index: 1;" src="flex-assets/images/newsletter/mockup-right-dark.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="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>

<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-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.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/symetric-normal.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.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.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="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>

<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-28 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="row align-items-center g-16">
        <div class="col-auto">
          <a class="text-white link-white" 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="#404F65"></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-light-dark">Darren Dunlap</h3>
                  <p class="mb-0 fs-10 text-secondary 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-light-dark" 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-green.svg" alt="">
                <img class="position-absolute bottom-0 end-0 mb-n6 me-n7" src="flex-assets/elements/quote-down-green.svg" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="col-auto">
          <a class="text-white link-white" 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="#404F65"></path>
            </svg>
          </a>
        </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>

<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-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 text-white" style="letter-spacing: -1px;">Gain more insight into how people use your</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary-light">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
      <div 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-light-dark rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-secondary-dark overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success" style="width: 48px; height: 48px;">1</div>
              </div>
              <h3 class="mb-4 font-heading fs-9 text-white">Measure your performance</h3>
              <p class="mb-0 fw-medium text-secondary-light">Stay connected with your team and make quick decisions wherever you are.</p>
            </div>
          </div>
          <div class="mb-8 col-12 col-md-4">
            <div class="position-relative p-8 pt-14 h-100 bg-light-dark rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-secondary-dark overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success" style="width: 48px; height: 48px;">2</div>
              </div>
              <h3 class="mb-4 font-heading fs-9 text-white">Custom analytics</h3>
              <p class="mb-0 fw-medium text-secondary-light">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-light-dark rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-secondary-dark overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success" style="width: 48px; height: 48px;">3</div>
              </div>
              <h3 class="mb-4 font-heading fs-9 text-white">Team Management</h3>
              <p class="mb-0 fw-medium text-secondary-light">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-light-dark rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-secondary-dark overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success" style="width: 48px; height: 48px;">4</div>
              </div>
              <h3 class="mb-4 font-heading fs-9 text-white">Build your website</h3>
              <p class="mb-0 fw-medium text-secondary-light">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
            </div>
          </div>
          <div class="mb-8 mb-md-0 col-12 col-md-4">
            <div class="position-relative p-8 pt-14 h-100 bg-light-dark rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-secondary-dark overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success" style="width: 48px; height: 48px;">5</div>
              </div>
              <h3 class="mb-4 font-heading fs-9 text-white">Connect multiple apps</h3>
              <p class="mb-0 fw-medium text-secondary-light">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-light-dark rounded shadow">
              <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-secondary-dark overflow-hidden rounded-pill">
                <div class="d-flex justify-content-center align-items-center fs-9 text-secondary-dark fw-semibold bg-success" style="width: 48px; height: 48px;">6</div>
              </div>
              <h3 class="mb-4 font-heading fs-9 text-white">Easy setup for your project</h3>
              <p class="mb-0 fw-medium text-secondary-light">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-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>

<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-12 mw-md-3xl">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Numbers</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">We believe in the power of data</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary">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 align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="row g-8">
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">235.000</h2>
              <p class="mb-2 fs-9 text-light-dark fw-bold">Projects completed</p>
              <p class="mb-0 text-secondary fw-medium mw-xs mx-auto">No need to hire specialists for each channel.</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">$10m</h2>
              <p class="mb-2 fs-9 text-light-dark fw-bold">APR</p>
              <p class="mb-0 text-secondary fw-medium mw-xs mx-auto">Track how much money a company just in case</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">+50.000</h2>
              <p class="mb-2 fs-9 text-light-dark fw-bold">Hours Saved Annually</p>
              <p class="mb-0 text-secondary fw-medium mw-xs mx-auto">Manage many companies, even with different languages.</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">3.500</h2>
              <p class="mb-2 fs-9 text-light-dark fw-bold">Unique Users</p>
              <p class="mb-0 text-secondary fw-medium mw-xs mx-auto">Everyone works the way they want to, on their own schedule.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="d-flex justify-content-center">
          <img class="img-fluid" src="flex-assets/images/numbers/work.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-32 pt-md-0 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>
  <img class="position-absolute top-0 start-0 ms-n36 mt-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute bottom-0 start-0 ms-6 mb-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="p-4 mw-md-xl mx-auto">
          <span class="badge mb-4 bg-success-dark text-success shadow">Error 404</span>
          <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">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 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/http-codes/error-code3.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<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-10 w-100 mw-sm bg-light-light border rounded shadow">
        <div class="row align-items-center g-6">
          <div class="col-12">
            <div class="mw-md-xs">
              <h3 class="font-heading fw-semibold fs-9 mb-4">Cookie Policy</h3>
              <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">
            <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">
                <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>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-light-light">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-16 text-center 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" style="letter-spacing: -1px;">We believe in the power of data</h2>
        <p class="mb-0 fs-9 fw-medium text-secondary">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" style="letter-spacing: -1px;">235.000</h2>
            <p class="mb-0 fs-9 text-secondary 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" style="letter-spacing: -1px;">$10m</h2>
            <p class="mb-0 fs-9 text-secondary 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" style="letter-spacing: -1px;">+50.000</h2>
            <p class="mb-0 fs-9 text-secondary 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" style="letter-spacing: -1px;">3.500</h2>
            <p class="mb-0 fs-9 text-secondary fw-medium">Unique Users</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>

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

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

<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-12 mw-md-3xl">
      <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 align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="row g-8">
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">235.000</h2>
              <p class="mb-2 fs-9 text-light fw-bold">Projects completed</p>
              <p class="mb-0 text-secondary-light fw-medium mw-xs mx-auto">No need to hire specialists for each channel.</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">$10m</h2>
              <p class="mb-2 fs-9 text-light fw-bold">APR</p>
              <p class="mb-0 text-secondary-light fw-medium mw-xs mx-auto">Track how much money a company just in case</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">+50.000</h2>
              <p class="mb-2 fs-9 text-light fw-bold">Hours Saved Annually</p>
              <p class="mb-0 text-secondary-light fw-medium mw-xs mx-auto">Manage many companies, even with different languages.</p>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="text-center">
              <h2 class="mb-4 font-heading fs-5 text-success" style="letter-spacing: -1px;">3.500</h2>
              <p class="mb-2 fs-9 text-light fw-bold">Unique Users</p>
              <p class="mb-0 text-secondary-light fw-medium mw-xs mx-auto">Everyone works the way they want to, on their own schedule.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="d-flex justify-content-center">
          <img class="img-fluid" src="flex-assets/images/numbers/work.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<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 py-md-44 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" style="z-index: 1;">
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="p-4 mw-md-md mx-md-auto">
            <h2 class="font-heading mb-6 fs-6" style="letter-spacing: -1px;">Be the first to know when we launch</h2>
            <p class="mb-8 fs-9 fw-medium text-secondary">Stay in the loop with everything you need to know.</p>
            <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="newsletterInput19-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 class="col-12 col-md-6">
          <div class="d-flex justify-content-end ps-4 ps-md-0">
            <div class="position-relative">
              <img class="position-absolute end-0 top-0 mt-n24" src="flex-assets/elements/dots-horizontal-blue.svg" alt="">
              <img class="position-absolute end-0 bottom-0 mb-n24" src="flex-assets/elements/dots-horizontal-blue.svg" alt="">
              <img class="position-absolute start-0 top-50 translate-middle-y" style="width: 41%;" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
              <img class="position-relative img-fluid" style="z-index: 1;" src="flex-assets/images/newsletter/mockup-right.png" alt="">
            </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>

<section class="position-relative pt-32 pt-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 top-0 start-0 ms-n36 mt-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute bottom-0 start-0 ms-6 mb-6" src="flex-assets/elements/dots-blue.svg" alt="">
  <div class="position-relative" style="z-index: 1;">
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="p-4 mw-md-xl mx-auto">
          <span class="badge mb-4 bg-success-dark text-success shadow">Error 404</span>
          <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">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 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/http-codes/error-code3.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="mb-16 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="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>

<section class="position-relative pt-32 pt-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 top-0 start-0 ms-n36 mt-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute bottom-0 start-0 ms-6 mb-6" src="flex-assets/elements/dots-blue.svg" alt="">
  <div class="position-relative" style="z-index: 1;">
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="p-4 mw-md-xl mx-auto">
          <span class="badge mb-4 bg-success-dark text-success shadow">Error 404</span>
          <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">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">
              <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 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/http-codes/error-code3.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>