Tailwind CSS Components

<div class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg 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>
  <section class="py-20 xl:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap justify-center text-center -mx-4">
        <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
          <h2 class="mb-2 text-4xl md:text-5xl font-bold text-white tracking-tighter">235.000</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Projects completed</p>
        </div>
        <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
          <h2 class="mb-2 font-bold text-4xl md:text-5xl text-white tracking-tighter">$10m</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">APR</p>
        </div>
        <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
          <h2 class="mb-2 font-bold text-4xl md:text-5xl text-white tracking-tighter">+50.000</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Hours Saved Annually</p>
        </div>
        <div class="w-full md:w-1/3 lg:w-1/4 px-4">
          <h2 class="mb-2 font-bold text-4xl md:text-5xl text-white tracking-tighter">3.500</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Unique Users</p>

<section class="bg-white p-8 pt-7 pb-6">
  <div class="flex flex-wrap items-center justify-between pb-5 -mx-2">
    <div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
      <div class="flex flex-wrap items-end">
        <div class="w-auto mr-3">
          <h2 class="text-lg font-semibold">Section heading title</h2>
        </div>
        <div class="relative bottom-px pb-px w-auto">
          <p class="text-xs font-medium text-coolGray-500">Small subtext</p>
        </div>
      </div>
    </div>
    <div class="w-full md:w-1/2 px-2">
      <div class="flex flex-wrap justify-end -m-2">
        <div class="w-full md:w-auto p-2">
          <button class="w-full px-4 py-2 text-sm text-coolGray-500 font-medium bg-white border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-button">Button Secondary</button>
        </div>
        <div class="w-full md:w-auto p-2">
          <button class="w-full px-4 py-2 text-sm text-white font-medium bg-green-500 hover:bg-green-600 border border-green-600 rounded-md shadow-button">Button CTA</button>
        </div>
      </div>
    </div>
  </div>
  <div class="border-b border-coolGray-100"></div>

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg 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="py-24 md:py-32 bg-coolGray-900 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap lg:items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <div class="relative mx-auto md:ml-0 max-w-max">
            <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
            <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
            <img src="flex-ui-assets/images/features/stock2.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium uppercase rounded-full shadow-sm">Features</span>
          <h1 class="mb-8 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Gain more insight into how people use your</h1>
          <p class="mb-6 text-lg md:text-xl text-coolGray-400 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
          <a class="inline-block py-4 px-5 w-full md:w-auto text-base leading-4 text-green-50 bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a>
        </div>
      </div>
    </div>

<section class="py-24 md:pt-32 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-xl mx-auto pt-14 pb-16 px-8 bg-white rounded-2xl">
      <a class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-block" href="#">
        <img class="h-16" src="flex-ui-assets/logos/flex-circle-green.svg" alt="">
      </a>
      <div class="max-w-sm mx-auto">
        <div class="mb-6 text-center">
          <h3 class="mb-4 text-2xl md:text-3xl font-bold">Join our community</h3>
          <p class="text-lg text-coolGray-500 font-medium">Start your journey with our product</p>
        </div>
        <form action="">
          <div class="mb-6">
            <label class="block mb-2 text-coolGray-800 font-medium" for="">Name*</label>
            <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="name" placeholder="Patryk">
          </div>
          <div class="mb-6">
            <label class="block mb-2 text-coolGray-800 font-medium" for="">Email*</label>
            <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="name" placeholder="dev@shuffle.dev">
          </div>
          <div class="mb-4">
            <label class="block mb-2 text-coolGray-800 font-medium" for="">Password*</label>
            <input class="appearance-none block w-full p-3 leading-5 text-coolGray-900 border border-coolGray-200 rounded-lg shadow-md placeholder-coolGray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50" type="password" placeholder="************">
          </div>

<section class="wave-top wave-bottom">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg 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="py-16 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-10">
          <div class="max-w-md">
            <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Our Clients</span>
            <h3 class="mb-8 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Trusted by the top companies in this industry</h3>
            <p class="text-lg md:text-xl text-coolGray-500 font-medium">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="flex flex-wrap justify-center -mx-4">
            <div class="w-full md:w-1/2 px-4 mb-8">
              <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-white shadow-md">
                <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo-grey.svg" alt="">
              </div>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-0">

<section class="py-20 xl:pt-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-10">
        <div class="max-w-md">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Our Clients</span>
          <h3 class="mb-8 text-4xl md:text-5xl text-white font-bold tracking-tighter">Trusted by the top companies in this industry</h3>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">The only SaaS business platform that combines CRM, marketing automation &amp; commerce.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap justify-center -mx-4">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-800 shadow-md">
              <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo-grey.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-0">
            <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-800 shadow-md">
              <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo-grey.svg" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8 lg:mb-0">
            <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-800 shadow-md">

<section class="py-24 md:py-32 bg-coolGray-50 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
        <div class="relative mx-auto md:ml-0 max-w-max">
          <img class="absolute z-10 -left-8 -top-8 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
          <img class="absolute z-10 -right-7 -bottom-8 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
          <img src="flex-ui-assets/images/features/stock2.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Features</span>
        <h1 class="mb-8 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Gain more insight into how people use your</h1>
        <p class="mb-6 text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
        <a class="inline-block py-4 px-5 w-full md:w-auto text-base leading-4 text-green-50 bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Get Started</a>
      </div>
    </div>
  </div>
</section>

<section class="bg-white p-8">
  <div class="flex flex-wrap items-center">
    <div class="w-full">
      <h2 class="font-semibold text-black text-3xl">Page heading name</h2>
    </div>
  </div>
</section>

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg 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="bg-coolGray-50 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4">
        <div class="w-full md:w-3/4 px-4">
          <a class="block mb-8 max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
          </a>
          <p class="mb-12 text-base md:text-lg text-coolGray-400 font-medium md:max-w-sm">Launch your own Software As A Service Application with Flex Solutions.</p>
          <div class="mb-12 md:mb-0 flex flex-wrap -mx-3 md:-mx-6">
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Product</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Features</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Pricing</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Resources</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Careers</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Help</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Privacy</a></div>
          </div>
        </div>

<section class="overflow-hidden min-h-full">
  <div class="relative z-50 flex items-center justify-between xl:hidden bg-white border-b border-coolGray-100 px-8 py-5 -mx-3">
    <div class="w-auto px-3">
      <a class="block max-w-max" href="#">
        <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
      </a>
    </div>
    <div class="w-auto px-3">
      <button class="navbar-burger self-center ml-auto block xl:hidden">
        <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect class="text-coolGray-100" width="32" height="32" rx="6" fill="currentColor"></rect>
          <path class="text-coolGray-400" 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>
      </button>
    </div>
  </div>
  <div class="navbar-menu z-50 fixed top-0 hidden flex xl:flex flex-col justify-between bg-white border-r border-coolGray-100 w-24 h-full overflow-y-auto">
    <div class="navbar-backdrop fixed xl:hidden inset-0 bg-coolGray-900 opacity-60"></div>
    <div class="relative bg-white">
      <a class="fixed z-50 flex justify-center w-24 p-6 bg-white mx-auto border-r border-coolGray-100" href="#">
        <img src="flex-ui-assets/logos/dashboard/flex-ui-wave-green.svg" alt="">
      </a>
      <ul class="mb-10 pt-24">
        <li class="mb-4">

<section class="wave-top wave-bottom bg-white overflow-hidden">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg 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="relative py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto mb-16 md:mb-0">
      <div class="md:w-1/2 pl-4">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
        <h3 class="mb-6 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Great work starts with your app</h3>
        <p class="mb-12 text-lg md:text-xl text-coolGray-500 font-medium">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="flex flex-wrap mb-10 text-center md:text-left">
          <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
            <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
              <svg width="21" height="21" viewbox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 18.63H5C4.20435 18.63 3.44129 18.3139 2.87868 17.7513C2.31607 17.1887 2 16.4257 2 15.63V7.63C2 7.36479 1.89464 7.11043 1.70711 6.9229C1.51957 6.73536 1.26522 6.63 1 6.63C0.734784 6.63 0.48043 6.73536 0.292893 6.9229C0.105357 7.11043 0 7.36479 0 7.63L0 15.63C0 16.9561 0.526784 18.2279 1.46447 19.1655C2.40215 20.1032 3.67392 20.63 5 20.63H17C17.2652 20.63 17.5196 20.5246 17.7071 20.3371C17.8946 20.1496 18 19.8952 18 19.63C18 19.3648 17.8946 19.1104 17.7071 18.9229C17.5196 18.7354 17.2652 18.63 17 18.63ZM21 0.630005H7C6.20435 0.630005 5.44129 0.946075 4.87868 1.50868C4.31607 2.07129 4 2.83436 4 3.63V13.63C4 14.4257 4.31607 15.1887 4.87868 15.7513C5.44129 16.3139 6.20435 16.63 7 16.63H21C21.7956 16.63 22.5587 16.3139 23.1213 15.7513C23.6839 15.1887 24 14.4257 24 13.63V3.63C24 2.83436 23.6839 2.07129 23.1213 1.50868C22.5587 0.946075 21.7956 0.630005 21 0.630005ZM20.59 2.63L14.71 8.51C14.617 8.60373 14.5064 8.67813 14.3846 8.7289C14.2627 8.77966 14.132 8.8058 14 8.8058C13.868 8.8058 13.7373 8.77966 13.6154 8.7289C13.4936 8.67813 13.383 8.60373 13.29 8.51L7.41 2.63H20.59ZM22 13.63C22 13.8952 21.8946 14.1496 21.7071 14.3371C21.5196 14.5246 21.2652 14.63 21 14.63H7C6.73478 14.63 6.48043 14.5246 6.29289 14.3371C6.10536 14.1496 6 13.8952 6 13.63V4L11.88 9.88C12.4425 10.4418 13.205 10.7574 14 10.7574C14.795 10.7574 15.5575 10.4418 16.12 9.88L22 4V13.63Z" fill="currentColor"></path>
              </svg>
            </div>
          </div>
          <div class="w-full md:flex-1 md:pt-3">
            <div class="md:max-w-sm">
              <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 font-bold">Measure your performance</h3>
              <p class="text-coolGray-500 font-medium">Stay connected with your team and make quick decisions wherever you are.</p>

<section class="wave-top wave-bottom bg-white overflow-hidden">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg 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="relative py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto mb-16 md:mb-0">
      <div class="md:w-1/2 pl-4">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-900 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
        <h3 class="mb-6 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Great work starts with your app</h3>
        <p class="mb-12 text-lg md:text-xl text-coolGray-400 font-medium">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="flex flex-wrap mb-10 text-center md:text-left">
          <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
            <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-coolGray-900 bg-green-500 rounded-lg">
              <svg width="21" height="21" viewbox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 18.63H5C4.20435 18.63 3.44129 18.3139 2.87868 17.7513C2.31607 17.1887 2 16.4257 2 15.63V7.63C2 7.36479 1.89464 7.11043 1.70711 6.9229C1.51957 6.73536 1.26522 6.63 1 6.63C0.734784 6.63 0.48043 6.73536 0.292893 6.9229C0.105357 7.11043 0 7.36479 0 7.63L0 15.63C0 16.9561 0.526784 18.2279 1.46447 19.1655C2.40215 20.1032 3.67392 20.63 5 20.63H17C17.2652 20.63 17.5196 20.5246 17.7071 20.3371C17.8946 20.1496 18 19.8952 18 19.63C18 19.3648 17.8946 19.1104 17.7071 18.9229C17.5196 18.7354 17.2652 18.63 17 18.63ZM21 0.630005H7C6.20435 0.630005 5.44129 0.946075 4.87868 1.50868C4.31607 2.07129 4 2.83436 4 3.63V13.63C4 14.4257 4.31607 15.1887 4.87868 15.7513C5.44129 16.3139 6.20435 16.63 7 16.63H21C21.7956 16.63 22.5587 16.3139 23.1213 15.7513C23.6839 15.1887 24 14.4257 24 13.63V3.63C24 2.83436 23.6839 2.07129 23.1213 1.50868C22.5587 0.946075 21.7956 0.630005 21 0.630005ZM20.59 2.63L14.71 8.51C14.617 8.60373 14.5064 8.67813 14.3846 8.7289C14.2627 8.77966 14.132 8.8058 14 8.8058C13.868 8.8058 13.7373 8.77966 13.6154 8.7289C13.4936 8.67813 13.383 8.60373 13.29 8.51L7.41 2.63H20.59ZM22 13.63C22 13.8952 21.8946 14.1496 21.7071 14.3371C21.5196 14.5246 21.2652 14.63 21 14.63H7C6.73478 14.63 6.48043 14.5246 6.29289 14.3371C6.10536 14.1496 6 13.8952 6 13.63V4L11.88 9.88C12.4425 10.4418 13.205 10.7574 14 10.7574C14.795 10.7574 15.5575 10.4418 16.12 9.88L22 4V13.63Z" fill="currentColor"></path>
              </svg>
            </div>
          </div>
          <div class="w-full md:flex-1 md:pt-3">
            <div class="md:max-w-sm">
              <h3 class="mb-4 text-xl md:text-2xl leading-tight text-white font-bold">Measure your performance</h3>
              <p class="text-coolGray-400 font-medium">Stay connected with your team and make quick decisions wherever you are.</p>

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-900">
    <svg 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="py-24 md:pb-32 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark2.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="md:max-w-4xl mb-12 mx-auto text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Features</span>
        <h1 class="mb-4 text-3xl md:text-4xl leading-tight text-white font-bold tracking-tighter">Gain more insight into how people use your</h1>
        <p class="text-lg md:text-xl text-coolGray-400 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="p-8 text-center hover:bg-coolGray-700 rounded-md hover:shadow-xl transition duration-200">
            <div class="inline-flex h-16 w-16 mb-6 mx-auto items-center justify-center text-coolGray-800 bg-green-500 rounded-lg">
              <svg width="24" height="21" viewbox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 18.63H5C4.20435 18.63 3.44129 18.3139 2.87868 17.7513C2.31607 17.1887 2 16.4257 2 15.63V7.63C2 7.36479 1.89464 7.11043 1.70711 6.9229C1.51957 6.73536 1.26522 6.63 1 6.63C0.734784 6.63 0.48043 6.73536 0.292893 6.9229C0.105357 7.11043 0 7.36479 0 7.63L0 15.63C0 16.9561 0.526784 18.2279 1.46447 19.1655C2.40215 20.1032 3.67392 20.63 5 20.63H17C17.2652 20.63 17.5196 20.5246 17.7071 20.3371C17.8946 20.1496 18 19.8952 18 19.63C18 19.3648 17.8946 19.1104 17.7071 18.9229C17.5196 18.7354 17.2652 18.63 17 18.63ZM21 0.630005H7C6.20435 0.630005 5.44129 0.946075 4.87868 1.50868C4.31607 2.07129 4 2.83436 4 3.63V13.63C4 14.4257 4.31607 15.1887 4.87868 15.7513C5.44129 16.3139 6.20435 16.63 7 16.63H21C21.7956 16.63 22.5587 16.3139 23.1213 15.7513C23.6839 15.1887 24 14.4257 24 13.63V3.63C24 2.83436 23.6839 2.07129 23.1213 1.50868C22.5587 0.946075 21.7956 0.630005 21 0.630005ZM20.59 2.63L14.71 8.51C14.617 8.60373 14.5064 8.67813 14.3846 8.7289C14.2627 8.77966 14.132 8.8058 14 8.8058C13.868 8.8058 13.7373 8.77966 13.6154 8.7289C13.4936 8.67813 13.383 8.60373 13.29 8.51L7.41 2.63H20.59ZM22 13.63C22 13.8952 21.8946 14.1496 21.7071 14.3371C21.5196 14.5246 21.2652 14.63 21 14.63H7C6.73478 14.63 6.48043 14.5246 6.29289 14.3371C6.10536 14.1496 6 13.8952 6 13.63V4L11.88 9.88C12.4425 10.4418 13.205 10.7574 14 10.7574C14.795 10.7574 15.5575 10.4418 16.12 9.88L22 4V13.63Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-4 text-xl md:text-2xl leading-tight text-white font-bold">Measure your performance</h3>
            <p class="text-coolGray-400 font-medium">Stay connected with your team and make quick decisions wherever you are.</p>
          </div>

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg 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="py-24 md:pb-32 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="md:max-w-4xl mb-12 mx-auto text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Features</span>
        <h1 class="mb-4 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Gain more insight into how people use your</h1>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4">
          <div class="p-8 text-center hover:bg-white rounded-md hover:shadow-xl transition duration-200">
            <div class="inline-flex h-16 w-16 mb-6 mx-auto items-center justify-center text-white bg-green-500 rounded-lg">
              <svg width="24" height="21" viewbox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 18.63H5C4.20435 18.63 3.44129 18.3139 2.87868 17.7513C2.31607 17.1887 2 16.4257 2 15.63V7.63C2 7.36479 1.89464 7.11043 1.70711 6.9229C1.51957 6.73536 1.26522 6.63 1 6.63C0.734784 6.63 0.48043 6.73536 0.292893 6.9229C0.105357 7.11043 0 7.36479 0 7.63L0 15.63C0 16.9561 0.526784 18.2279 1.46447 19.1655C2.40215 20.1032 3.67392 20.63 5 20.63H17C17.2652 20.63 17.5196 20.5246 17.7071 20.3371C17.8946 20.1496 18 19.8952 18 19.63C18 19.3648 17.8946 19.1104 17.7071 18.9229C17.5196 18.7354 17.2652 18.63 17 18.63ZM21 0.630005H7C6.20435 0.630005 5.44129 0.946075 4.87868 1.50868C4.31607 2.07129 4 2.83436 4 3.63V13.63C4 14.4257 4.31607 15.1887 4.87868 15.7513C5.44129 16.3139 6.20435 16.63 7 16.63H21C21.7956 16.63 22.5587 16.3139 23.1213 15.7513C23.6839 15.1887 24 14.4257 24 13.63V3.63C24 2.83436 23.6839 2.07129 23.1213 1.50868C22.5587 0.946075 21.7956 0.630005 21 0.630005ZM20.59 2.63L14.71 8.51C14.617 8.60373 14.5064 8.67813 14.3846 8.7289C14.2627 8.77966 14.132 8.8058 14 8.8058C13.868 8.8058 13.7373 8.77966 13.6154 8.7289C13.4936 8.67813 13.383 8.60373 13.29 8.51L7.41 2.63H20.59ZM22 13.63C22 13.8952 21.8946 14.1496 21.7071 14.3371C21.5196 14.5246 21.2652 14.63 21 14.63H7C6.73478 14.63 6.48043 14.5246 6.29289 14.3371C6.10536 14.1496 6 13.8952 6 13.63V4L11.88 9.88C12.4425 10.4418 13.205 10.7574 14 10.7574C14.795 10.7574 15.5575 10.4418 16.12 9.88L22 4V13.63Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-4 text-xl md:text-2xl leading-tight font-bold">Measure your performance</h3>
            <p class="text-coolGray-500 font-medium">Stay connected with your team and make quick decisions wherever you are.</p>
          </div>

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg 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="bg-coolGray-900 overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4">
        <div class="w-full md:w-3/4 px-4">
          <a class="block mb-8 max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
          </a>
          <p class="mb-12 text-base md:text-lg text-white font-medium md:max-w-sm">Launch your own Software As A Service Application with Flex Solutions.</p>
          <div class="mb-12 md:mb-0 flex flex-wrap -mx-3 md:-mx-6">
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Product</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Features</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Pricing</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Resources</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Careers</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Help</a></div>
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Privacy</a></div>
          </div>
        </div>

<section class="py-16 md:py-24 lg:pb-52 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-repeat: no-repeat; background-position: center top;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center mb-16">
      <div class="w-full md:w-3/4 mb-8 md:mb-0">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-full shadow-sm">Blog</span>
        <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Blog posts</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      </div>
      <div class="w-full md:w-1/4"><a class="flex items-center justify-center py-2 px-4 ml-auto text-sm leading-5 text-green-50 font-medium bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 md:max-w-max rounded-md" href="#">View All Posts</a></div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/room.jpg" alt="">
        </a>
        <p class="mb-2 text-coolGray-500 font-medium">John Doe &bull; 19 Jan 2022</p>
        <a class="inline-block mb-4 text-2xl leading-tight text-coolGray-800 hover:text-coolGray-900 font-bold hover:underline" href="#">A small business is only as good as its tools and it is totally true.</a>
        <p class="mb-4 text-base md:text-lg text-coolGray-400 font-medium">We&apos;ve all experienced the chaos of multiple spreadsheets, tracking and insight tools...</p>
        <a class="inline-block py-1 px-3 text-xs leading-5 text-green-500 hover:text-green-600 font-medium uppercase bg-green-100 hover:bg-green-200 rounded-full shadow-sm" href="#">Technology</a>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/effect5.jpg" alt="">
        </a>

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="mx-auto p-6 pb-1 border border-coolGray-100 bg-white rounded-md shadow-dashboard">
      <div class="flex flex-wrap items-center justify-between mb-1 -m-2">
        <div class="w-auto p-2">
          <h2 class="text-lg font-semibold text-coolGray-900">Latest files</h2>
          <p class="text-xs text-coolGray-500 font-medium">Your subtitle text about files goes here</p>
        </div>
        <div class="w-auto p-2"><a class="text-sm text-green-500 hover:text-green-600 font-semibold" href="#">See all</a></div>
      </div>
      <div class="flex flex-wrap">
        <div class="w-full border-b border-coolGray-100">
          <div class="flex flex-wrap items-center justify-between py-4 -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-auto p-2">
                  <div class="flex items-center justify-center w-12 h-12 bg-yellow-50 rounded-md">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM5 18C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V14.58L7.3 11.29C7.48693 11.1068 7.73825 11.0041 8 11.0041C8.26175 11.0041 8.51307 11.1068 8.7 11.29L15.41 18H5ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H18.23L14.42 14.17L15.3 13.29C15.4869 13.1068 15.7382 13.0041 16 13.0041C16.2618 13.0041 16.5131 13.1068 16.7 13.29L20 16.58V17ZM20 13.76L18.12 11.89C17.5501 11.3424 16.7904 11.0366 16 11.0366C15.2096 11.0366 14.4499 11.3424 13.88 11.89L13 12.77L10.12 9.89C9.55006 9.34243 8.79036 9.03663 8 9.03663C7.20964 9.03663 6.44994 9.34243 5.88 9.89L4 11.76V7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7V13.76Z" fill="#F59E0B"></path>
                    </svg>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <h2 class="text-sm font-medium text-coolGray-900">Images</h2>

<div class="bg-white">
  <div class="wave-top w-full text-coolGray-900">
    <svg 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>
  <section class="py-20 xl:py-24 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap justify-center text-center -mx-4">
        <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
          <h2 class="mb-2 text-4xl md:text-5xl font-bold text-green-600 tracking-tighter">235.000</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Projects completed</p>
        </div>
        <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
          <h2 class="mb-2 font-bold text-4xl md:text-5xl text-green-600 tracking-tighter">$10m</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">APR</p>
        </div>
        <div class="w-full md:w-1/3 lg:w-1/4 px-4 mb-8 lg:mb-0">
          <h2 class="mb-2 font-bold text-4xl md:text-5xl text-green-600 tracking-tighter">+50.000</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Hours Saved Annually</p>
        </div>
        <div class="w-full md:w-1/3 lg:w-1/4 px-4">
          <h2 class="mb-2 font-bold text-4xl md:text-5xl text-green-600 tracking-tighter">3.500</h2>
          <p class="text-lg md:text-xl text-coolGray-400 font-medium">Unique Users</p>

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg 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="pt-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl mb-16">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">FAQ</span>
        <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Frequently Asked Questions</h2>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      </div>
      <div class="flex flex-wrap pb-16 -mx-4">
        <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
          <div class="md:max-w-xs">
            <div class="inline-flex mb-6 items-center justify-center w-12 h-12 rounded-full bg-green-500">
              <img src="flex-ui-assets/elements/faq/shield-icon.svg" alt="">
            </div>
            <h3 class="mb-6 text-xl text-coolGray-900 font-bold">What shipping options do you have?</h3>
            <p class="text-coolGray-500 font-medium">For USA domestic orders we offer FedEx and USPS shipping. Contact us via email to learn more.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white rounded-md shadow-lg">
      <div class="flex flex-wrap items-center justify-between mb-6 -mx-2">
        <div class="w-auto px-2">
          <h2 class="text-lg text-coolGray-900 font-semibold">Card heading title</h2>
          <p class="text-xs text-coolGray-500 font-medium">Card heading subtitle</p>
        </div>
        <div class="w-auto px-2">
          <a href="#">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="#D5DAE1"></path>
            </svg>
          </a>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</section>