UI Components – Flex Library

<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="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="pt-20 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 mx-auto mb-16 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-9xl">Contact</span>
        <h3 class="mb-4 text-4xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Let&rsquo;s stay connected</h3>
        <p class="text-lg md:text-xl text-coolGray-500 font-medium">It&apos;s never been easier to get in touch with Flex. Call us, use our live chat widget or email and we&apos;ll get back to you as soon as possible!</p>
      </div>
      <div class="flex flex-wrap -mx-4 pb-16">
        <div class="w-full md:w-1/3 px-4 mb-10 md:mb-0">
          <div class="max-w-xs mx-auto text-center">
            <div class="inline-flex mb-6 items-center justify-center w-12 h-12 bg-green-500 rounded-full">
              <svg class="h-6 text-white" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.21 8.82L14 2.78C13.474 2.27986 12.7759 2.00095 12.05 2.00095C11.3241 2.00095 10.626 2.27986 10.1 2.78L3.89 8.78C3.61408 9.02087 3.39216 9.31731 3.23879 9.64991C3.08541 9.98251 3.00404 10.3438 3 10.71V19.29C3.01054 20.0176 3.30904 20.7114 3.83012 21.2193C4.35119 21.7273 5.05235 22.008 5.78 22H18.22C18.9476 22.008 19.6488 21.7273 20.1699 21.2193C20.691 20.7114 20.9895 20.0176 21 19.29V10.71C20.9992 10.3585 20.929 10.0106 20.7935 9.68623C20.6579 9.36189 20.4596 9.06752 20.21 8.82V8.82ZM11.44 4.22C11.593 4.08016 11.7927 4.00262 12 4.00262C12.2073 4.00262 12.407 4.08016 12.56 4.22L18 9.5L12.53 14.78C12.377 14.9198 12.1773 14.9974 11.97 14.9974C11.7627 14.9974 11.563 14.9198 11.41 14.78L6 9.5L11.44 4.22ZM19 19.29C18.9871 19.4863 18.8987 19.6699 18.7532 19.8023C18.6078 19.9347 18.4166 20.0056 18.22 20H5.78C5.58338 20.0056 5.39225 19.9347 5.24678 19.8023C5.10132 19.6699 5.01286 19.4863 5 19.29V11.35L9.05 15.25L7.39 16.85C7.20375 17.0374 7.09921 17.2908 7.09921 17.555C7.09921 17.8192 7.20375 18.0726 7.39 18.26C7.48295 18.3575 7.59463 18.4352 7.71836 18.4885C7.84208 18.5418 7.97529 18.5695 8.11 18.57C8.36747 18.569 8.61462 18.4687 8.8 18.29L10.57 16.59C11.0096 16.8586 11.5148 17.0008 12.03 17.0008C12.5452 17.0008 13.0504 16.8586 13.49 16.59L15.26 18.29C15.4454 18.4687 15.6925 18.569 15.95 18.57C16.0847 18.5695 16.2179 18.5418 16.3416 18.4885C16.4654 18.4352 16.5771 18.3575 16.67 18.26C16.8563 18.0726 16.9608 17.8192 16.9608 17.555C16.9608 17.2908 16.8563 17.0374 16.67 16.85L15 15.25L19 11.35V19.29Z" fill="currentColor"></path>
              </svg>
            </div>
            <h3 class="mb-2 text-2xl md:text-3xl leading-9 text-coolGray-800 font-bold">Email</h3>
            <a class="text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="mailto:#">contact@flex.co</a>
          </div>

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-3 mb-3">
      <div class="w-full md:w-1/4 p-3">
        <h2 class="text-coolGray-900 text-lg font-semibold">Personal info</h2>
        <p class="text-xs text-coolGray-500 font-medium">Lorem ipsum dolor sit amet</p>
      </div>
      <div class="w-full md:w-3/4 p-3">
        <div class="p-6 h-full border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
          <div class="flex flex-wrap pb-3 -m-3">
            <div class="w-full md:w-1/2 p-3">
              <p class="mb-1.5 font-medium text-base text-coolGray-800">First name</p>
              <input class="w-full px-4 py-2.5 text-base text-coolGray-900 font-normal outline-none focus:border-green-500 border border-coolGray-200 rounded-lg shadow-input" type="text" placeholder="John">
            </div>
            <div class="w-full md:w-1/2 p-3">
              <p class="mb-1.5 font-medium text-base text-coolGray-800">Last name</p>
              <input class="w-full px-4 py-2.5 text-base text-coolGray-900 font-normal outline-none focus:border-green-500 border border-coolGray-200 rounded-lg shadow-input" type="text" placeholder="Doe">
            </div>
            <div class="w-full md:w-1/2 p-3">
              <p class="mb-1.5 font-medium text-base text-coolGray-800">Email</p>
              <input class="w-full px-4 py-2.5 text-base text-coolGray-900 font-normal outline-none focus:border-green-500 border border-coolGray-200 rounded-lg shadow-input" type="text" placeholder="johndoe@flex.co">
            </div>
            <div class="w-full md:w-1/2 p-3">
              <p class="mb-1.5 font-medium text-base text-coolGray-800">Phone number</p>

<section class="py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="xl: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 lg:w-1/3 px-4 lg:pt-6 mb-8 lg:mb-0">
        <div class="p-8 lg:mb-6 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>
        <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="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5 18H9.24C9.37161 18.0008 9.50207 17.9755 9.62391 17.9258C9.74574 17.876 9.85656 17.8027 9.95 17.71L16.87 10.78L19.71 8C19.8037 7.90704 19.8781 7.79644 19.9289 7.67458C19.9797 7.55272 20.0058 7.42201 20.0058 7.29C20.0058 7.15799 19.9797 7.02728 19.9289 6.90542C19.8781 6.78356 19.8037 6.67296 19.71 6.58L15.47 2.29C15.377 2.19627 15.2664 2.12188 15.1446 2.07111C15.0227 2.02034 14.892 1.9942 14.76 1.9942C14.628 1.9942 14.4973 2.02034 14.3754 2.07111C14.2536 2.12188 14.143 2.19627 14.05 2.29L11.23 5.12L4.29 12.05C4.19732 12.1434 4.12399 12.2543 4.07423 12.3761C4.02446 12.4979 3.99924 12.6284 4 12.76V17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18ZM14.76 4.41L17.59 7.24L16.17 8.66L13.34 5.83L14.76 4.41ZM6 13.17L11.93 7.24L14.76 10.07L8.83 16H6V13.17ZM21 20H3C2.73478 20 2.48043 20.1054 2.29289 20.2929C2.10536 20.4804 2 20.7348 2 21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20Z" fill="currentColor"></path>
            </svg>
          </div>

<section class="relative py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="md:absolute md:top-28 lg:top-1/2 md:-left-96 xl:-left-80 md:-ml-56 lg:-ml-20 xl:-ml-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">
    <div class="relative max-w-max">
      <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="flex-ui-assets/elements/dashboard.png" alt="">
      <img class="relative z-10" src="flex-ui-assets/elements/applications/macbook.png" alt="">
      <img class="absolute -top-24 left-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots2-blue.svg">
      <img class="absolute -bottom-24 right-0 md:mt-px md:left-96 md:ml-52 lg:ml-16 xl:-ml-20 w-28 md:w-auto text-red-500" src="flex-ui-assets/elements/dots2-red.svg">
      <img class="absolute right-0 top-1/2 transform -translate-y-1/2 w-28 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle2-yellow.svg">
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="md:w-1/2 md:ml-auto 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">

<section class="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">
    <div class="xl: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-900 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 lg:w-1/3 px-4 lg:pt-6 mb-8 lg:mb-0">
        <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-900 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>
        <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-900 bg-green-500 rounded-lg">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5 18H9.24C9.37161 18.0008 9.50207 17.9755 9.62391 17.9258C9.74574 17.876 9.85656 17.8027 9.95 17.71L16.87 10.78L19.71 8C19.8037 7.90704 19.8781 7.79644 19.9289 7.67458C19.9797 7.55272 20.0058 7.42201 20.0058 7.29C20.0058 7.15799 19.9797 7.02728 19.9289 6.90542C19.8781 6.78356 19.8037 6.67296 19.71 6.58L15.47 2.29C15.377 2.19627 15.2664 2.12188 15.1446 2.07111C15.0227 2.02034 14.892 1.9942 14.76 1.9942C14.628 1.9942 14.4973 2.02034 14.3754 2.07111C14.2536 2.12188 14.143 2.19627 14.05 2.29L11.23 5.12L4.29 12.05C4.19732 12.1434 4.12399 12.2543 4.07423 12.3761C4.02446 12.4979 3.99924 12.6284 4 12.76V17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18ZM14.76 4.41L17.59 7.24L16.17 8.66L13.34 5.83L14.76 4.41ZM6 13.17L11.93 7.24L14.76 10.07L8.83 16H6V13.17ZM21 20H3C2.73478 20 2.48043 20.1054 2.29289 20.2929C2.10536 20.4804 2 20.7348 2 21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21C22 20.7348 21.8946 20.4804 21.7071 20.2929C21.5196 20.1054 21.2652 20 21 20Z" fill="currentColor"></path>
            </svg>
          </div>

<section class="wave-top wave-bottom">
  <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 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 -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-20 md:mb-0">
          <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 rounded-full shadow-sm">FAQ</span>
            <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Frequently Asked Questions</h2>
            <p class="text-lg md:text-xl text-coolGray-400 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>
        <div class="w-full md:w-1/2 px-4">
          <div class="flex flex-wrap w-full mb-10 text-left cursor-pointer" x-on:click="accordion = !accordion" x-data="{ accordion: false }">
            <div class="flex items-center justify-between w-full pb-4">
                <h3 class="text-xl text-white font-bold">How long does it take to ship my order?</h3>
                <span class="text-green-500 transition duration-200 transform" x-on:click="accordion = !accordion" :class="{'rotate-0': accordion, 'rotate-180': !accordion }">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.71 8.29C12.6149 8.19896 12.5028 8.12759 12.38 8.08C12.1365 7.97998 11.8635 7.97998 11.62 8.08C11.4972 8.12759 11.3851 8.19896 11.29 8.29L8.29 11.29C8.1017 11.4783 7.99591 11.7337 7.99591 12C7.99591 12.2663 8.1017 12.5217 8.29 12.71C8.4783 12.8983 8.7337 13.0041 9 13.0041C9.2663 13.0041 9.5217 12.8983 9.71 12.71L11 11.41L11 15C11 15.2652 11.1054 15.5196 11.2929 15.7071C11.4804 15.8946 11.7348 16 12 16C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15L13 11.41L14.29 12.71C14.383 12.8037 14.4936 12.8781 14.6154 12.9289C14.7373 12.9797 14.868 13.0058 15 13.0058C15.132 13.0058 15.2627 12.9797 15.3846 12.9289C15.5064 12.8781 15.617 12.8037 15.71 12.71C15.8037 12.617 15.8781 12.5064 15.9289 12.3846C15.9797 12.2627 16.0058 12.132 16.0058 12C16.0058 11.868 15.9797 11.7373 15.9289 11.6154C15.8781 11.4936 15.8037 11.383 15.71 11.29L12.71 8.29ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51808 6.3459 2.7612 8.17316C2.00433 10.0004 1.80629 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92893 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 9.34783 20.9464 6.80429 19.0711 4.92893C18.1425 4.00034 17.0401 3.26375 15.8268 2.7612C14.6136 2.25865 13.3132 2 12 2ZM12 20C10.4177 20 8.87103 19.5308 7.55544 18.6518C6.23984 17.7727 5.21446 16.5233 4.60896 15.0615C4.00346 13.5997 3.84503 11.9911 4.15372 10.4393C4.4624 8.88743 5.22432 7.46196 6.34314 6.34314C7.46196 5.22432 8.88743 4.4624 10.4393 4.15371C11.9911 3.84503 13.5997 4.00346 15.0615 4.60896C16.5233 5.21446 17.7727 6.23984 18.6518 7.55543C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z" fill="currentColor"></path>
                    </svg>

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-3">
      <div class="w-full lg:w-1/2 xl:w-3/4 p-3">
        <div class="p-6 h-full border border-coolGray-100 overflow-hidden bg-white rounded-md shadow-dashboard">
          <h2 class="mb-6 text-coolGray-900 text-lg font-semibold">Visitors Overview</h2>
          <div class="flex flex-wrap justify-between -m-2 mb-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-1.5">
                <div class="w-auto p-1.5">
                  <h2 class="font-semibold text-2xl text-coolGray-900">24.7k</h2>
                </div>
                <div class="w-auto p-1.5">
                  <p class="flex items-center p-1 px-2 text-xs text-green-500 font-medium bg-green-100 rounded-full shadow-sm">
                    <svg class="mr-0.5" width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.855 5.64499L6.355 3.14499C6.30745 3.09947 6.25138 3.06379 6.19 3.03999C6.06827 2.98998 5.93173 2.98998 5.81 3.03999C5.74863 3.06379 5.69255 3.09947 5.645 3.14499L3.145 5.64499C3.09838 5.69161 3.0614 5.74696 3.03617 5.80787C3.01094 5.86878 2.99796 5.93406 2.99796 5.99999C2.99796 6.13315 3.05085 6.26084 3.145 6.35499C3.23915 6.44915 3.36685 6.50204 3.5 6.50204C3.63315 6.50204 3.76085 6.44915 3.855 6.35499L5.5 4.70499V8.49999C5.5 8.6326 5.55268 8.75978 5.64645 8.85355C5.74022 8.94732 5.86739 8.99999 6 8.99999C6.13261 8.99999 6.25979 8.94732 6.35355 8.85355C6.44732 8.75978 6.5 8.6326 6.5 8.49999V4.70499L8.145 6.35499C8.19148 6.40186 8.24678 6.43906 8.30771 6.46444C8.36864 6.48982 8.434 6.50289 8.5 6.50289C8.56601 6.50289 8.63136 6.48982 8.69229 6.46444C8.75322 6.43906 8.80852 6.40186 8.855 6.35499C8.90186 6.30851 8.93906 6.25321 8.96445 6.19228C8.98983 6.13135 9.0029 6.066 9.0029 5.99999C9.0029 5.93399 8.98983 5.86864 8.96445 5.80771C8.93906 5.74678 8.90186 5.69148 8.855 5.64499Z" fill="#22C55E"></path>
                    </svg>
                    <span>23%</span>
                  </p>
                </div>
              </div>
              <p class="font-medium text-xs text-coolGray-500">Unique visitors</p>
            </div>
            <div class="w-auto p-2">

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
      <img class="absolute z-10 left-4 top-4" src="flex-ui-assets/elements/dashboard/banners/dots-purple.svg" alt="">
      <img class="absolute z-10 right-4 bottom-4" src="flex-ui-assets/elements/dashboard/banners/dots-red.svg" alt="">
      <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="flex-ui-assets/elements/dashboard/banners/wave.svg" alt="">
      <div class="relative z-20 flex flex-wrap items-center -m-3">
        <div class="w-full md:w-1/2 p-3">
          <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Ideal banner asset for your dashboard project</h2>
          <ul class="flex flex-wrap">
            <li class="flex items-center mr-6 text-sm text-coolGray-300 font-semibold">
              <img class="relative top-px mr-2" src="flex-ui-assets/elements/dashboard/banners/checkbox-red.svg">
              <span>Benefit number one</span>
            </li>
            <li class="flex items-center mr-6 text-sm text-coolGray-300 font-semibold">
              <img class="relative top-px mr-2" src="flex-ui-assets/elements/dashboard/banners/checkbox-red.svg">
              <span>Benefit number two</span>
            </li>
            <li class="flex items-center mr-6 text-sm text-coolGray-300 font-semibold">
              <img class="relative top-px mr-2" src="flex-ui-assets/elements/dashboard/banners/checkbox-red.svg">
              <span>Benefit number three</span>
            </li>
          </ul>
        </div>

<section class="py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-repeat: no-repeat; background-position: left top;">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-5xl mx-auto mb-16 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">Blog</span>
      <h3 class="mb-4 text-3xl md:text-5xl leading-tight text-darkCoolGray-900 font-bold tracking-tighter">Our mission is to make knowledge and news accessible for everyone.</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="flex flex-wrap -mx-4 mb-12 md:mb-20">
      <div class="w-full md:w-1/2 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/effect.jpg" alt="">
        </a>
        <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, and scrambling for the right data at the right time.</p>
        <a class="inline-flex items-center text-base md:text-lg text-green-500 hover:text-green-600 font-semibold" href="#">
          <span class="mr-3">Read Post</span>
          <svg width="8" height="10" viewbox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.94667 4.74665C7.91494 4.66481 7.86736 4.59005 7.80666 4.52665L4.47333 1.19331C4.41117 1.13116 4.33738 1.08185 4.25617 1.04821C4.17495 1.01457 4.08791 0.997253 4 0.997253C3.82246 0.997253 3.6522 1.06778 3.52667 1.19331C3.46451 1.25547 3.4152 1.32927 3.38156 1.41048C3.34792 1.4917 3.33061 1.57874 3.33061 1.66665C3.33061 1.84418 3.40113 2.01445 3.52667 2.13998L5.72667 4.33331H0.666667C0.489856 4.33331 0.320286 4.40355 0.195262 4.52858C0.070238 4.6536 0 4.82317 0 4.99998C0 5.17679 0.070238 5.34636 0.195262 5.47138C0.320286 5.59641 0.489856 5.66665 0.666667 5.66665H5.72667L3.52667 7.85998C3.46418 7.92196 3.41458 7.99569 3.38074 8.07693C3.34689 8.15817 3.32947 8.24531 3.32947 8.33331C3.32947 8.42132 3.34689 8.50846 3.38074 8.5897C3.41458 8.67094 3.46418 8.74467 3.52667 8.80665C3.58864 8.86913 3.66238 8.91873 3.74361 8.95257C3.82485 8.98642 3.91199 9.00385 4 9.00385C4.08801 9.00385 4.17514 8.98642 4.25638 8.95257C4.33762 8.91873 4.41136 8.86913 4.47333 8.80665L7.80666 5.47331C7.86736 5.40991 7.91494 5.33515 7.94667 5.25331C8.01334 5.09101 8.01334 4.90895 7.94667 4.74665Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-8">
        <a class="block mb-6 overflow-hidden rounded-md" href="#">
          <img class="w-full" src="flex-ui-assets/images/blog/work.jpg" alt="">

<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="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="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-1/4 lg:w-auto px-4">
          <a class="block mb-5 md:mb-0 max-w-max" href="#">
            <img class="h-8" src="flex-ui-assets/logos/flex-ui-green.svg" alt="">
          </a>
        </div>
        <div class="w-full md:w-3/4 lg:flex-1 px-4">
          <div class="flex flex-wrap justify-end -mx-3 lg:-mx-6">
            <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl 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-lg md:text-xl 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-lg md:text-xl 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-lg md:text-xl 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-lg md:text-xl 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-lg md:text-xl 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-lg md:text-xl text-coolGray-400 hover:text-coolGray-500 font-medium" href="#">Privacy</a></div>
          </div>

<section 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-1/4 lg:w-auto px-4">
        <a class="block mb-5 md:mb-0 max-w-max" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
        </a>
      </div>
      <div class="w-full md:w-3/4 lg:flex-1 px-4">
        <div class="flex flex-wrap justify-end -mx-3 lg:-mx-6">
          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-lg md:text-xl 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-lg md:text-xl 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-lg md:text-xl 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-lg md:text-xl 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-lg md:text-xl 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-lg md:text-xl 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-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Privacy</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="border-b border-coolGray-100"></div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center py-12 md:pb-32">

<section class="py-20 xl:pt-24 xl: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="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-9xl">Numbers</span>
      <h3 class="mb-4 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">We believe in the power of data</h3>
      <p class="mb-16 xl:mb-24 mx-auto text-lg md:text-xl text-coolGray-500 font-medium max-w-4xl">Flex is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      <div class="flex flex-wrap justify-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 text-coolGray-900 font-bold tracking-tighter">235.000</h2>
          <p class="text-lg md:text-xl text-coolGray-500 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 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">$10m</h2>
          <p class="text-lg md:text-xl text-coolGray-500 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 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">+50.000</h2>
          <p class="text-lg md:text-xl text-coolGray-500 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 text-4xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">3.500</h2>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">Unique Users</p>
        </div>
      </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="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 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 -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 lg: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">We are hiring</span>
          <h3 class="mb-4 text-3xl md:text-4xl leading-tight font-medium font-bold tracking-tighter">Join our team</h3>
          <p class="text-lg md:text-xl text-coolGray-500 font-medium">Our philosophy is simple &mdash; hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <a class="block p-10 mb-8 bg-white hover:bg-coolGray-100 border border-transparent hover:border-coolGray-200 rounded-md shadow-md transition duration-200" href="#">
            <span class="inline-block py-px px-2 mb-2 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">Software Development</span>
            <h3 class="mb-2 text-lg md:text-xl text-coolGray-800 font-semibold">Front-end Developer</h3>
            <p class="mb-4 max-w-sm text-coolGray-500 font-medium">We&rsquo;re looking for a mid-level Front-end Developer to join our team.</p>
            <div class="inline-flex mr-6 items-center">
              <svg class="text-coolGray-300" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.9999 4.48003C16.4086 2.88873 14.2504 1.99475 11.9999 1.99475C9.74949 1.99475 7.59123 2.88873 5.99993 4.48003C4.40863 6.07133 3.51465 8.2296 3.51465 10.48C3.51465 12.7305 4.40863 14.8887 5.99993 16.48L11.2699 21.76C11.3629 21.8538 11.4735 21.9282 11.5954 21.9789C11.7172 22.0297 11.8479 22.0558 11.9799 22.0558C12.1119 22.0558 12.2426 22.0297 12.3645 21.9789C12.4864 21.9282 12.597 21.8538 12.6899 21.76L17.9999 16.43C19.5846 14.8454 20.4748 12.6961 20.4748 10.455C20.4748 8.21398 19.5846 6.06471 17.9999 4.48003ZM16.5699 15L11.9999 19.59L7.42993 15C6.52707 14.0963 5.91241 12.9453 5.66362 11.6923C5.41484 10.4394 5.54312 9.14078 6.03223 7.96071C6.52135 6.78065 7.34935 5.77208 8.41156 5.06251C9.47377 4.35294 10.7225 3.97421 11.9999 3.97421C13.2773 3.97421 14.5261 4.35294 15.5883 5.06251C16.6505 5.77208 17.4785 6.78065 17.9676 7.96071C18.4567 9.14078 18.585 10.4394 18.3362 11.6923C18.0875 12.9453 17.4728 14.0963 16.5699 15ZM8.99993 7.41003C8.19264 8.2198 7.73932 9.3166 7.73932 10.46C7.73932 11.6035 8.19264 12.7003 8.99993 13.51C9.59969 14.1108 10.3635 14.5211 11.1956 14.6894C12.0276 14.8578 12.8909 14.7766 13.677 14.4562C14.4631 14.1358 15.1371 13.5903 15.6144 12.8883C16.0917 12.1863 16.3511 11.3589 16.3599 10.51C16.3644 9.94324 16.2553 9.38129 16.0388 8.85742C15.8224 8.33355 15.5032 7.85839 15.0999 7.46003C14.7036 7.05461 14.231 6.73157 13.7094 6.5095C13.1877 6.28743 12.6273 6.17071 12.0603 6.16606C11.4934 6.16141 10.9311 6.26893 10.4059 6.48242C9.88067 6.69591 9.40285 7.01116 8.99993 7.41003ZM13.6899 12.09C13.311 12.4748 12.8101 12.7159 12.2731 12.7723C11.736 12.8286 11.196 12.6967 10.7454 12.399C10.2949 12.1012 9.96173 11.6563 9.80294 11.1401C9.64415 10.624 9.66958 10.0687 9.87489 9.56919C10.0802 9.06971 10.4526 8.65705 10.9285 8.40177C11.4044 8.14649 11.9542 8.06444 12.4839 8.16965C13.0135 8.27486 13.4902 8.56079 13.8324 8.97856C14.1746 9.39634 14.3611 9.92 14.3599 10.46C14.3454 11.0773 14.0864 11.6636 13.6399 12.09H13.6899Z" fill="currentColor"></path>
              </svg>
              <span class="ml-2 text-coolGray-500 font-medium">Remote friendly</span>

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-green-100 border border-green-200 rounded-md">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              <svg class="relative top-0.5" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.4732 4.80667C12.4112 4.74418 12.3375 4.69458 12.2563 4.66074C12.175 4.62689 12.0879 4.60947 11.9999 4.60947C11.9119 4.60947 11.8247 4.62689 11.7435 4.66074C11.6623 4.69458 11.5885 4.74418 11.5266 4.80667L6.55989 9.78L4.47322 7.68667C4.40887 7.62451 4.33291 7.57563 4.24967 7.54283C4.16644 7.51003 4.07755 7.49394 3.9881 7.49549C3.89865 7.49703 3.81037 7.51619 3.72832 7.55185C3.64627 7.58751 3.57204 7.63898 3.50989 7.70333C3.44773 7.76768 3.39885 7.84364 3.36605 7.92688C3.33324 8.01011 3.31716 8.099 3.31871 8.18845C3.32025 8.2779 3.3394 8.36618 3.37507 8.44823C3.41073 8.53028 3.4622 8.60451 3.52655 8.66667L6.08655 11.2267C6.14853 11.2892 6.22226 11.3387 6.3035 11.3726C6.38474 11.4064 6.47188 11.4239 6.55989 11.4239C6.64789 11.4239 6.73503 11.4064 6.81627 11.3726C6.89751 11.3387 6.97124 11.2892 7.03322 11.2267L12.4732 5.78667C12.5409 5.72424 12.5949 5.64847 12.6318 5.56414C12.6688 5.4798 12.6878 5.38873 12.6878 5.29667C12.6878 5.2046 12.6688 5.11353 12.6318 5.02919C12.5949 4.94486 12.5409 4.86909 12.4732 4.80667Z" fill="#2AD168"></path>
              </svg>
            </div>
            <div class="flex-1 p-1">
              <h3 class="mb-2 font-medium text-sm text-green-900">Success alert example</h3>
              <p class="mb-4 font-medium text-sm text-green-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              <div class="flex flex-wrap -m-3">
                <div class="w-auto p-3"><a class="font-medium text-sm text-green-900 hover:text-green-800" href="#">View more</a></div>
                <div class="w-auto p-3"><a class="font-medium text-sm text-green-900 hover:text-green-800" href="#">Dismiss</a></div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <a href="#">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

<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="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="relative py-24 md:py-40 lg:py-72 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 mb-16 md:mb-0">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4">
          <div class="md:max-w-md mx-auto">
            <h3 class="mb-6 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Be the first to know when we launch</h3>
            <p class="mb-8 text-lg md:text-xl leading-relaxed text-coolGray-500 font-medium max-w-5xl">Stay in the loop with everything you need to know.</p>
            <div class="md:max-w-md">
              <div class="flex flex-wrap mb-1">
                <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
                  <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
                </div>
                <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
              </div>
              <span class="text-xs text-coolGray-500 font-medium">
                <span>We care about your data in our</span>
                <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>
              </span>

<section class="fixed top-0 left-0 right-0 bottom-0 flex items-center w-full h-full p-4 bg-coolGray-800 bg-opacity-80 overflow-y-auto">
  <div class="max-w-lg w-full m-auto p-8 bg-white rounded-md">
    <div class="flex items-center justify-center w-10 h-10 mb-4 bg-red-100 rounded-md">
      <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M10.4734 5.52667C10.4114 5.46418 10.3377 5.41458 10.2564 5.38074C10.1752 5.34689 10.0881 5.32947 10.0001 5.32947C9.91205 5.32947 9.82491 5.34689 9.74367 5.38074C9.66243 5.41458 9.58869 5.46418 9.52672 5.52667L8.00005 7.06L6.47339 5.52667C6.34785 5.40113 6.17759 5.3306 6.00005 5.3306C5.82252 5.3306 5.65226 5.40113 5.52672 5.52667C5.40118 5.6522 5.33066 5.82247 5.33066 6C5.33066 6.17753 5.40118 6.3478 5.52672 6.47333L7.06005 8L5.52672 9.52667C5.46423 9.58864 5.41464 9.66238 5.38079 9.74362C5.34695 9.82485 5.32952 9.91199 5.32952 10C5.32952 10.088 5.34695 10.1751 5.38079 10.2564C5.41464 10.3376 5.46423 10.4114 5.52672 10.4733C5.58869 10.5358 5.66243 10.5854 5.74367 10.6193C5.82491 10.6531 5.91204 10.6705 6.00005 10.6705C6.08806 10.6705 6.1752 10.6531 6.25644 10.6193C6.33768 10.5854 6.41141 10.5358 6.47339 10.4733L8.00005 8.94L9.52672 10.4733C9.58869 10.5358 9.66243 10.5854 9.74367 10.6193C9.82491 10.6531 9.91205 10.6705 10.0001 10.6705C10.0881 10.6705 10.1752 10.6531 10.2564 10.6193C10.3377 10.5854 10.4114 10.5358 10.4734 10.4733C10.5359 10.4114 10.5855 10.3376 10.6193 10.2564C10.6532 10.1751 10.6706 10.088 10.6706 10C10.6706 9.91199 10.6532 9.82485 10.6193 9.74362C10.5855 9.66238 10.5359 9.58864 10.4734 9.52667L8.94005 8L10.4734 6.47333C10.5359 6.41136 10.5855 6.33762 10.6193 6.25638C10.6532 6.17514 10.6706 6.08801 10.6706 6C10.6706 5.91199 10.6532 5.82485 10.6193 5.74361C10.5855 5.66238 10.5359 5.58864 10.4734 5.52667V5.52667ZM12.7134 3.28667C12.0984 2.64993 11.3628 2.14205 10.5494 1.79266C9.73606 1.44326 8.86126 1.25936 7.97606 1.25166C7.09087 1.24397 6.213 1.41265 5.39369 1.74786C4.57438 2.08306 3.83004 2.57808 3.20409 3.20403C2.57814 3.82998 2.08311 4.57433 1.74791 5.39364C1.4127 6.21295 1.24402 7.09081 1.25172 7.97601C1.25941 8.8612 1.44332 9.736 1.79271 10.5494C2.1421 11.3627 2.64998 12.0984 3.28672 12.7133C3.9017 13.3501 4.63733 13.8579 5.45069 14.2073C6.26405 14.5567 7.13885 14.7406 8.02404 14.7483C8.90924 14.756 9.7871 14.5874 10.6064 14.2521C11.4257 13.9169 12.1701 13.4219 12.796 12.796C13.422 12.17 13.917 11.4257 14.2522 10.6064C14.5874 9.78705 14.7561 8.90919 14.7484 8.02399C14.7407 7.1388 14.5568 6.264 14.2074 5.45064C13.858 4.63728 13.3501 3.90165 12.7134 3.28667V3.28667ZM11.7734 11.7733C10.9014 12.6463 9.75375 13.1899 8.52592 13.3115C7.29809 13.4332 6.06606 13.1254 5.03973 12.4405C4.01341 11.7557 3.25629 10.7361 2.89737 9.55566C2.53844 8.37517 2.59992 7.10676 3.07133 5.96652C3.54273 4.82628 4.3949 3.88476 5.48265 3.30237C6.57039 2.71998 7.82642 2.53275 9.03672 2.77258C10.247 3.01241 11.3368 3.66446 12.1202 4.61764C12.9037 5.57082 13.3324 6.76616 13.3334 8C13.3358 8.70086 13.1991 9.39523 12.9313 10.0429C12.6636 10.6906 12.27 11.2788 11.7734 11.7733V11.7733Z" fill="#EF5944"></path>
      </svg>
    </div>
    <h3 class="mb-2 text-2xl font-semibold text-coolGray-900">Delete section?</h3>
    <p class="mb-6 font-medium text-sm text-coolGray-500">Are you sure you want to delete this section? This action cannot be undone.</p>
    <div class="flex flex-wrap justify-end -m-2">
      <div class="w-full md:w-1/2 p-2">
        <button class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-white font-medium text-base text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 rounded-md shadow-button">
          <p>Cancel</p>
        </button>
      </div>
      <div class="w-full md:w-1/2 p-2">
        <button class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-coolGray-800 hover:bg-coolGray-900 font-medium text-base text-white border border-coolGray-900 rounded-md shadow-button">
          <p>Delete</p>
        </button>
      </div>
    </div>
  </div>
</section>

<section class="relative py-24 md:py-40 lg:py-72 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 mb-16 md:mb-0">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 px-4">
        <div class="md:max-w-md mx-auto">
          <h3 class="mb-6 text-3xl md:text-4xl leading-tight text-white font-bold tracking-tighter">Be the first to know when we launch</h3>
          <p class="mb-8 text-lg md:text-xl leading-relaxed text-coolGray-400 font-medium max-w-5xl">Stay in the loop with everything you need to know.</p>
          <div class="md:max-w-md">
            <div class="flex flex-wrap mb-1">
              <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
                <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
              </div>
              <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
            </div>
            <span class="text-xs text-coolGray-500 font-medium">
              <span>We care about your data in our</span>
              <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="md:absolute md:top-28 lg:top-1/2 md:-right-96 xl:-right-64 md:-mr-56 lg:-mr-20 xl:-mr-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">

<section class="pb-16 md:pb-24 bg-white">
  <div class="pt-16 md:pt-24 pb-12 bg-coolGray-900" style="background-image: url('flex-ui-assets/elements/pattern-dark.svg'); background-repeat: no-repeat; background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="md:max-w-2xl mx-auto text-center">
        <div class="flex items-center justify-center">
          <p class="inline-block text-green-500 font-medium">John Doe</p>
          <span class="mx-1 text-green-500">&bull;</span>
          <p class="inline-block text-green-500 font-medium">19 Jan 2022</p>
        </div>
        <h2 class="mb-4 text-3xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Lorem ipsum dolor sit amet</h2>
        <p class="mb-6 text-lg md:text-xl font-medium text-coolGray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="inline-block py-1 px-3 text-xs leading-5 text-green-900 font-medium uppercase bg-green-100 rounded-full shadow-sm">Technology</div>
      </div>
    </div>
  </div>
  <div class="relative">
    <div class="absolute w-full h-1/2 bg-coolGray-900"></div>
    <div class="container relative px-4 mx-auto">
      <div class="mb-10 mx-auto max-w-max overflow-hidden rounded-lg">
        <img src="flex-ui-assets/images/blog-content/content-photo1.jpg" alt="">
      </div>
    </div>
  </div>
  <div class="container px-4 mx-auto">

<section class="relative py-24 md:py-40 lg:py-72 bg-white overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto mb-16 md:mb-0">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 px-4">
        <div class="md:max-w-md mx-auto">
          <h3 class="mb-6 text-3xl md:text-4xl leading-tight font-bold tracking-tighter">Be the first to know when we launch</h3>
          <p class="mb-8 text-lg md:text-xl leading-relaxed text-coolGray-500 font-medium max-w-5xl">Stay in the loop with everything you need to know.</p>
          <div class="md:max-w-md">
            <div class="flex flex-wrap mb-1">
              <div class="w-full md:flex-1 mb-3 md:mb-0 md:mr-6">
                <input class="w-full py-3 px-4 text-coolGray-500 leading-tight placeholder-coolGray-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-coolGray-200 rounded-lg shadow-xsm" type="text" placeholder="Enter your email">
              </div>
              <div class="w-full md:w-auto"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Subscribe</a></div>
            </div>
            <span class="text-xs text-coolGray-500 font-medium">
              <span>We care about your data in our</span>
              <a class="text-green-500 hover:text-green-600" href="#">privacy policy</a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="md:absolute md:top-28 lg:top-1/2 md:-right-96 xl:-right-64 md:-mr-56 lg:-mr-20 xl:-mr-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">

<section class="py-20 xl:pt-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <h3 class="mb-8 text-center font-medium leading-6 text-coolGray-300">Trusted by the top companies in this industry</h3>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 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-50 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/jiggle-logo.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 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-50 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/symtric-logo.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 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-50 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/wishelp-logo.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8 md:mb-0">
        <div class="flex items-center h-32 md:h-36 px-4 md:px-8 rounded-md bg-coolGray-50 shadow-md">
          <img class="mx-auto" src="flex-ui-assets/brands/logo-clouds/resecurb-logo.svg" alt="">
        </div>
      </div>