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-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 text-white" 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-light">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"><a class="btn btn-lg btn-dark-light w-100 text-white shadow-sm" href="#">Learn More</a></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-light">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-white">Header 1</h3>
        <p class="mb-6 fs-10 fw-medium text-secondary-light">Flex integrates customer data and marketing tools:</p>
        <ul class="list-unstyled">
          <li class="fs-10 fw-medium text-secondary-light">1.Enterprise software for startups</li>
          <li class="fs-10 fw-medium text-secondary-light">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-light">3.Now you can manage your entire business on one platform.</li>
        </ul>
        <p class="mb-0 fs-10 fw-medium text-secondary-light">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>
</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="overflow-hidden">
    <div class="position-relative py-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
      <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
      <div class="position-relative container" style="z-index:1;">
        <h3 class="mb-8 font-heading fs-11 text-secondary fw-medium text-center">Trusted by the top companies in this industry</h3>
        <div class="row justify-content-center g-16">
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal-dark.png" alt="">
          </div>
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/logos/brands/symtric-normal-dark.png" alt="">
          </div>
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal-dark.png" alt="">
          </div>
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal-dark.png" alt="">
          </div>
          <div class="col-auto">
            <img class="img-fluid" src="flex-assets/logos/brands/welytics-normal-dark.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="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="bg-white 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-32 bg-light-light" style="background-image: url('flex-assets/elements/pattern-light.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
    <div class="container">
      <div class="position-relative" style="z-index: 10;">
        <div class="row align-items-xl-center g-16">
          <div class="col-12 col-md-6">
            <div class="mw-md-md">
              <h2 class="mb-8 fs-5 font-heading" style="letter-spacing: -1px;">Join 6,000+ startups growing with Flex</h2>
              <ul class="mb-8 list-unstyled">
                <li class="mb-4 d-flex align-items-start">
                  <img class="mt-1 me-3" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-9 fw-medium text-secondary">Mauris pellentesque congue libero nec</p>
                </li>
                <li class="mb-4 d-flex align-items-start">
                  <img class="mt-1 me-3" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-9 fw-medium text-secondary">Suspendisse mollis tincidunt</p>
                </li>
                <li class="d-flex align-items-start">
                  <img class="mt-1 me-3" src="flex-assets/elements/checkbox-green.svg" alt="">
                  <p class="mb-0 fs-9 fw-medium text-secondary">Praesent varius justo vel justo pulvinar</p>
                </li>
              </ul>
              <div class="row g-4">
                <div class="col-12 col-md-auto">
                  <div class="bg-white rounded"><a class="btn btn-outline-light w-100 px-7 py-4 fs-10 fw-medium text-dark border rounded shadow" href="#">Learn More</a></div>
                </div>
                <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>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <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" src="flex-assets/images/cta/work.png" alt="z-index: 10;">
                </div>
              </div>
            </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 py-20 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-16 text-center 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>
</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-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>
</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 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 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>
          <p class="mb-6 fs-10 fw-medium text-secondary">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. 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>
          <p class="mb-0 fs-10 fw-medium text-secondary">Flex is the only saas business platform that lets you run your business on one platform. Flex is the only saas business platform that lets you run your business on one platform.</p>
        </div>
        <div class="col-12 col-md-6">
          <p class="mb-6 fs-10 fw-medium text-secondary">With Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. 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>
          <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 Flex, you can run your business on one platform, seamlessly across all digital channels&mdash;and grow it anywhere. 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>
    </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="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="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="newsletterInput13-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="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-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-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>
</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;">
    <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>
</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="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="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-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 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="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;">
      <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 text-uppercase shadow">Application</span>
            <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Get our Free Mobile App</h2>
            <p class="mb-6 fs-9 fw-medium text-secondary">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
            <div class="row g-4">
              <div class="col-auto">
                <a href="#">
                  <img src="flex-assets/elements/app-store.svg" alt="">
                </a>
              </div>
              <div class="col-auto">
                <a href="#">
                  <img src="flex-assets/elements/google-play.svg" alt="">
                </a>
              </div>
            </div>
          </div>
        </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.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-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-24 text-center mw-md-5xl mx-auto">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">How it works</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Gain more insight into how people use your</h2>
      <p class="mb-0 fs-9 fw-medium text-secondary">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
    </div>
    <div class="mw-md-6xl mx-auto">
      <div class="row g-8">
        <div class="mb-8 col-12 col-md-4">
          <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
            <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
              <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">1</div>
            </div>
            <h3 class="mb-4 font-heading fs-9">Measure your performance</h3>
            <p class="mb-0 fw-medium text-secondary">Stay connected with your team and make quick decisions wherever you are.</p>
          </div>
        </div>
        <div class="mb-8 col-12 col-md-4">
          <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
            <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
              <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">2</div>
            </div>
            <h3 class="mb-4 font-heading fs-9">Custom analytics</h3>
            <p class="mb-0 fw-medium text-secondary">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
          </div>
        </div>
        <div class="mb-8 col-12 col-md-4">
          <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
            <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
              <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">3</div>
            </div>
            <h3 class="mb-4 font-heading fs-9">Team Management</h3>
            <p class="mb-0 fw-medium text-secondary">Our calendar lets you know what is happening with customer and projects to control process.</p>
          </div>
        </div>
        <div class="mb-8 mb-md-0 col-12 col-md-4">
          <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
            <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
              <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">4</div>
            </div>
            <h3 class="mb-4 font-heading fs-9">Build your website</h3>
            <p class="mb-0 fw-medium text-secondary">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
          </div>
        </div>
        <div class="mb-8 mb-md-0 col-12 col-md-4">
          <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
            <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
              <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">5</div>
            </div>
            <h3 class="mb-4 font-heading fs-9">Connect multiple apps</h3>
            <p class="mb-0 fw-medium text-secondary">The first business platform to bring together all of your products from one place.</p>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="position-relative p-8 pt-14 h-100 bg-white rounded shadow">
            <div class="position-absolute top-0 start-50 translate-middle-x mt-n7 border border-5 border-light-light overflow-hidden rounded-pill">
              <div class="d-flex justify-content-center align-items-center fs-9 text-white fw-semibold bg-success" style="width: 48px; height: 48px;">6</div>
            </div>
            <h3 class="mb-4 font-heading fs-9">Easy setup for your project</h3>
            <p class="mb-0 fw-medium text-secondary">End to End Business Platform, Sales Management, Marketing Automation, Help Desk</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

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

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

<section class="overflow-hidden">
  <nav class="navbar navbar-dark navbar-expand-lg bg-white py-5 py-lg-1">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
      </a>
      <div class="collapse navbar-collapse justify-content-end me-6">
        <ul class="navbar-nav">
          <li class="nav-item p-6"><a class="nav-link link-secondary-dark p-0" href="#">Product</a></li>
          <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Features</a></li>
          <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Pricing</a></li>
          <li class="nav-item p-6"><a class="nav-link link-secondary p-0" href="#">Resources</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block">
        <div class="row align-items-center">
          <div class="col-auto"><a class="btn btn-sm btn-secondary text-success-light shadow" href="#">Contact Us</a></div>
        </div>
      </div>
      <div class="d-lg-none">
        <a class="btn navbar-burger p-0" href="#">
          <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect class="text-light-light" width="32" height="32" rx="6" fill="currentColor"></rect>
            <path class="text-secondary" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
    <div class="navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between p-6 bg-white overflow-auto">
      <div class="d-flex align-items-center">
        <a class="me-auto h4 mb-0 text-decoration-none" href="#">
          <img class="img-fluid" src="flex-assets/logos/flex-dark-green.svg" alt="">
        </a>
        <a class="navbar-close text-secondary" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
      <div class="py-16">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item"><a class="nav-link link-secondary-dark bg-light-light" href="#">Product</a></li>
          <li class="nav-item"><a class="nav-link link-secondary" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link link-secondary" href="#">Pricing</a></li>
          <li class="nav-item"><a class="nav-link link-secondary" href="#">Resources</a></li>
        </ul>
      </div>
      <div class="row align-items-center g-6">
        <div class="col-12"><a class="btn btn-sm btn-secondary w-100 text-success-light" href="#">Contact Us</a></div>
      </div>
    </nav>
  </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="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="newsletterInput11-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="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 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>
  <div class="position-relative row align-items-center g-16" style="z-index:1;">
    <div class="col-12 col-md-6">
      <div class="mb-7 px-4 text-center mw-md mx-auto">
        <div class="mb-6 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="px-4 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="signUpInput7-1">Name*</label>
              <input class="form-control text-secondary-dark shadow" id="signUpInput7-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="signUpInput7-2">Email</label>
              <input class="form-control text-secondary-dark shadow" id="signUpInput7-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="signUpInput7-3">Password</label>
              <input class="form-control text-secondary-dark shadow" id="signUpInput7-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 class="col-12 col-md-6">
      <div class="py-48 px-4 bg-light-light h-100">
        <div class="text-center mw-md-xl mx-auto">
          <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Quotes</span>
          <div class="mb-20 position-relative">
            <h2 class="position-relative font-heading fs-7 fw-medium text-light-dark" style="z-index: 1;">Love the simplicity of the service and the prompt customer support. We can&rsquo;t imagine working without it.</h2>
            <img class="position-absolute top-0 start-0 ms-n12 mt-n10" src="flex-assets/images/sign-in/quote-top.svg" alt="">
            <img class="position-absolute bottom-0 end-0 me-n10 mb-n16" src="flex-assets/images/sign-in/quote-down.svg" alt="">
          </div>
          <img class="mb-6 img-fluid" src="flex-assets/images/sign-in/avatar.png" alt="">
          <h3 class="font-heading mb-1 fs-10 fw-semibold text-light-dark">John Doe</h3>
          <p class="mb-8 fs-10 text-secondary-light">CEO &amp; Founder at Flex.co</p>
          <div class="row justify-content-center g-3">
            <div class="col-auto"><a class="d-inline-block rounded-pill bg-light" style="width: 12px; height: 12px;" href="#"></a></div>
            <div class="col-auto"><a class="d-inline-block rounded-pill bg-success" style="width: 12px; height: 12px;" href="#"></a></div>
            <div class="col-auto"><a class="d-inline-block rounded-pill bg-light" style="width: 12px; height: 12px;" href="#"></a></div>
          </div>
        </div>
      </div>
    </div>
  </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-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>
</section>