Tailwind CSS How it works Components

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
      <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-8">
          <div class="w-full lg:w-1/2 px-8 mb-12 lg:mb-0">
            <div class="h-96 lg:h-full relative">
              <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
              <div class="h-full p-1 border border-white border-opacity-20 rounded-2xl">
                <img class="relative w-full h-full object-cover rounded-xl border border-neutral-800" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHwxfHx0ZWNofGVufDB8fHx8MTc0ODkzNjgyOHww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080" alt="">
              </div>
            </div>
          </div>
          <div class="w-full lg:w-1/2 px-8">
            <div class="max-w-xl lg:mx-auto">
              <h2 class="mb-12 text-3xl md:text-4xl md:leading-tight lg:text-5xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectetur</h2>
              <div class="flex flex-wrap -mx-4 -mb-10 lg:-mb-12">
                <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                  <span class="mb-4 flex items-center justify-center w-12 h-12 rounded-full bg-white text-neutral-950 font-medium text-2xl leading-loose transition-all duration-200 hover:shadow-lg">1</span>
                  <p class="text-lg text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                </div>
                <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                  <span class="mb-4 flex items-center justify-center w-12 h-12 rounded-full bg-white text-neutral-950 font-medium text-2xl leading-loose transition-all duration-200 hover:shadow-lg">2</span>
                  <p class="text-lg text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                </div>
                <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                  <span class="mb-4 flex items-center justify-center w-12 h-12 rounded-full bg-white text-neutral-950 font-medium text-2xl leading-loose transition-all duration-200 hover:shadow-lg">3</span>
                  <p class="text-lg text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                </div>
                <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                  <span class="mb-4 flex items-center justify-center w-12 h-12 rounded-full bg-white text-neutral-950 font-medium text-2xl leading-loose transition-all duration-200 hover:shadow-lg">4</span>
                  <p class="text-lg text-neutral-300 leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

<section class="pt-24 pb-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-28 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight md:max-w-lg">We make things easy for your business</h2>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="flex flex-wrap items-center mb-7 -m-2">
          <div class="w-auto p-2">
            <div class="relative w-14 h-14 text-2xl font-bold font-heading bg-indigo-100 rounded-full">
              <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">1</span>
            </div>
          </div>
          <div class="flex-1 p-2">
            <div class="w-full h-px bg-gray-200"></div>
          </div>
        </div>
        <h3 class="text-xl font-semibold leading-normal md:max-w-xs">A complete UI kit for building your business</h3>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="flex flex-wrap items-center mb-7 -m-2">
          <div class="w-auto p-2">
            <div class="relative w-14 h-14 text-2xl text-white font-bold bg-indigo-600 rounded-full overflow-hidden">
              <img class="absolute top-0 left-0" src="flaro-assets/images/how-it-works/gradient.svg" alt="">
              <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">2</span>
            </div>
          </div>
          <div class="flex-1 p-2">
            <div class="w-full h-px bg-gray-200"></div>
          </div>
        </div>
        <h3 class="text-xl font-semibold leading-normal md:max-w-xs">A complete UI kit for building your business</h3>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="flex flex-wrap items-center mb-7 -m-2">
          <div class="w-auto p-2">
            <div class="relative w-14 h-14 text-2xl font-bold font-heading bg-indigo-100 rounded-full">
              <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">3</span>
            </div>
          </div>
          <div class="flex-1 p-2">
            <div class="w-full h-px bg-gray-200"></div>
          </div>
        </div>
        <h3 class="text-xl font-semibold leading-normal md:max-w-xs">A complete UI kit for building your business</h3>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="flex flex-wrap items-center mb-7 -m-2">
          <div class="w-auto p-2">
            <div class="relative w-14 h-14 text-2xl font-bold font-heading bg-indigo-100 rounded-full">
              <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">4</span>
            </div>
          </div>
          <div class="flex-1 p-2">
            <div class="w-full h-px bg-gray-200"></div>
          </div>
        </div>
        <h3 class="text-xl font-semibold leading-normal md:max-w-xs">A complete UI kit for building your business</h3>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-20 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-6 mb-12">
      <div class="w-full p-6">
        <h2 class="mb-16 max-w-xl font-heading font-bold text-6xl sm:text-7xl text-white" >Three steps to get started</h2>
        <div class="flex flex-wrap -m-6">
          <div class="w-full lg:w-1/2 p-6">
            <div class="mb-11 lg:max-w-sm">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <div class="p-px max-w-max bg-gradient-cyan2 rounded-full">
                    <div class="flex justify-center items-center font-heading text-xl bg-gray-900 w-12 h-12 text-white rounded-full" >1</div>
                  </div>
                </div>
                <div class="flex-1 p-4">
                  <h3 class="mb-4 font-heading font-medium text-xl text-white" >Create A Free Account</h3>
                  <p class="text-gray-400 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
                </div>
              </div>
            </div>
            <div class="mb-11 lg:max-w-sm">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <div class="p-px max-w-max bg-gradient-cyan2 rounded-full">
                    <div class="flex justify-center items-center font-heading text-xl bg-gray-900 w-12 h-12 text-white rounded-full" >2</div>
                  </div>
                </div>
                <div class="flex-1 p-4">
                  <h3 class="mb-4 font-heading font-medium text-xl text-white" >Select Your Package</h3>
                  <p class="text-gray-400 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
                </div>
              </div>
            </div>
            <div class="mb-11 lg:max-w-sm">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">
                  <div class="p-px max-w-max bg-gradient-cyan2 rounded-full">
                    <div class="flex justify-center items-center font-heading text-xl bg-gray-900 w-12 h-12 text-white rounded-full" >3</div>
                  </div>
                </div>
                <div class="flex-1 p-4">
                  <h3 class="mb-4 font-heading font-medium text-xl text-white" >Grow Business Fast</h3>
                  <p class="mb-11 text-gray-400 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
                  <div class="group relative max-w-max">
                    <div class="absolute top-0 left-0 w-full h-full bg-gradient-green opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
                    <button class="p-1 w-full font-heading font-semibold text-xs text-gray-900 uppercase tracking-px overflow-hidden rounded-md">
                      <div class="relative p-4 px-11 bg-gradient-green overflow-hidden rounded-md">
                        <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
                        <p class="relative z-10" >Get Started now</p>
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pl-4 lg:absolute lg:bottom-0 lg:right-0 lg:w-1/2">
    <div class="relative max-w-max ml-auto"><img class="relative z-10 ml-auto" src="gradia-assets/images/how-it-works/dashboard.png" alt="">
      <div class="absolute w-full -top-16 left-32 bg-gradient-cyan h-16 rounded-tl-3xl"></div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container mx-auto px-4">
    <p class="text-center uppercase text-orange-500 text-sm font-bold font-heading mb-6">HOW IT WORKS</p>
    <h1 class="text-center text-3xl lg:text-5xl font-bold font-heading mb-24 max-w-sm lg:max-w-xl mx-auto">What steps do I need to take to join?</h1>
    <div class="px-4 lg:px-16 rounded-2xl bg-no-repeat bg-cover" style="background-image:url('solstice-assets/images/how-it-works/picture1.png')">
      <div class="w-full lg:w-1/3 rounded-b-2xl bg-white bg-opacity-30 h-6"></div>
      <div class="py-4">
        <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl mb-4">
          <div class="flex items-center gap-4 flex-wrap">
            <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center">
              <span class="text-lg text-white font-bold font-heading">1</span>
            </div>
            <h2 class="text-xl font-bold font-heading">Create Account</h2>
          </div>
        </div>
        <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl mx-auto mb-4">
          <div class="flex items-center gap-4 flex-wrap">
            <div class="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center">
              <span class="text-lg font-bold font-heading">2</span>
            </div>
            <h2 class="text-xl font-bold font-heading">Join or Create Room</h2>
          </div>
        </div>
        <div class="w-full lg:w-1/3 bg-white p-6 rounded-2xl ml-auto mb-4">
          <div class="flex items-center gap-4 flex-wrap">
            <div class="w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center">
              <span class="text-lg text-white font-bold font-heading">3</span>
            </div>
            <h2 class="text-xl font-bold font-heading">Start Learning</h2>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 rounded-t-2xl bg-white bg-opacity-30 h-6 ml-auto"></div>
    </div>
  </div>
</section>

<section class="py-24 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl text-center mx-auto mb-20">
      <h2 class="font-heading mb-5 text-6xl tracking-tighter">Master your workflow with Basko's productivity tools</h2>
      <p class="text-xl tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
    </div>
    <div class="flex flex-wrap -m-7 mb-14">
      <div class="w-full md:w-1/3 p-7">
        <div class="max-w-xs">
          <img class="mb-10" src="basko-assets/images/how-it-works/tool.svg" alt="">
          <h3 class="mb-4 text-xl font-semibold tracking-tight">Choose the right tool</h3>
          <p class="text-gray-600 tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-7">
        <div class="max-w-xs">
          <img class="mb-10" src="basko-assets/images/how-it-works/account.svg" alt="">
          <h3 class="mb-4 text-xl font-semibold tracking-tight">Set up your account</h3>
          <p class="text-gray-600 tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-7">
        <div class="max-w-xs">
          <img class="mb-10" src="basko-assets/images/how-it-works/start.svg" alt="">
          <h3 class="mb-4 text-xl font-semibold tracking-tight">Start using Basko</h3>
          <p class="text-gray-600 tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
        </div>
      </div>
    </div>
    <div class="flex flex-row justify-center"><a class="inline-block mx-auto px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
  </div>
</section>

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <h2 class="font-heading max-w-xl mb-20 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">We make things easy for your business</h2>
        <div class="flex flex-wrap -m-3">
          <div class="w-full md:w-1/2 lg:w-1/4 p-3">
            <div class="flex flex-wrap items-center -m-3 mb-2">
              <div class="w-auto p-3">
                <div class="flex items-center justify-center w-16 h-16 text-xl text-gray-100 font-black bg-gray-700 rounded-full">1</div>
              </div>
              <div class="flex-1 p-3">
                <div class="bg-gray-700 h-px"></div>
              </div>
            </div>
            <div class="md:w-3/4">
              <h3 class="font-heading mb-4 text-2xl text-gray-100 font-bold">Connect</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 p-3">
            <div class="flex flex-wrap items-center -m-3 mb-2">
              <div class="w-auto p-3">
                <div class="flex items-center justify-center w-16 h-16 text-xl text-white font-black bg-blue-500 rounded-full">2</div>
              </div>
              <div class="flex-1 p-3">
                <div class="bg-gray-700 h-px"></div>
              </div>
            </div>
            <div class="md:w-3/4">
              <h3 class="font-heading mb-4 text-2xl text-gray-100 font-bold">Store</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 p-3">
            <div class="flex flex-wrap items-center -m-3 mb-2">
              <div class="w-auto p-3">
                <div class="flex items-center justify-center w-16 h-16 text-xl text-gray-100 font-black bg-gray-700 rounded-full">3</div>
              </div>
              <div class="flex-1 p-3">
                <div class="bg-gray-700 h-px"></div>
              </div>
            </div>
            <div class="md:w-3/4">
              <h3 class="font-heading mb-4 text-2xl text-gray-100 font-bold">Ship</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 p-3">
            <div class="flex flex-wrap items-center -m-3 mb-2">
              <div class="w-auto p-3">
                <div class="flex items-center justify-center w-16 h-16 text-xl text-gray-100 font-black bg-gray-700 rounded-full">4</div>
              </div>
              <div class="flex-1 p-3">
                <div class="bg-gray-700 h-px"></div>
              </div>
            </div>
            <div class="md:w-3/4">
              <h3 class="font-heading mb-4 text-2xl text-gray-100 font-bold">Deliver</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-20">
  <img class="hidden lg:block absolute bottom-0 left-0 mb-40" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="relative w-full lg:w-1/2 px-4 order-last lg:order-first flex items-center">
        <img src="zeus-assets/images/z-picture.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
        <div class="max-w-xl">
          <h2 class="mb-10 lg:mb-24 text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectetur</h2>
          <div class="relative flex flex-wrap -mx-4 -mb-12">
            <div class="relative w-full lg:w-1/2 px-4 mb-12 lg:-mt-8">
              <img class="hidden lg:block absolute top-0 left-0 ml-24 -mt-10" src="zeus-assets/icons/line-little-top.svg" alt="">
              <span class="flex items-center justify-center w-12 h-12 mb-6 lg:mb-8 rounded-full bg-blue-400 text-white text-sm">1</span>
              <h3 class="mb-4 text-2xl font-semibold font-heading">Dolor sit amet</h3>
              <p class="text-xl text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="w-full lg:w-1/2 px-4 mb-12">
              <span class="flex items-center justify-center w-12 h-12 mb-6 lg:mb-8 rounded-full bg-red-400 text-white text-sm">2</span>
              <h3 class="mb-4 text-2xl font-semibold font-heading">Dolor sit amet</h3>
              <p class="text-xl text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="relative w-full lg:w-1/2 px-4 mb-12 lg:-mt-8">
              <img class="hidden lg:block absolute top-0 left-0 -mt-24 ml-24" src="zeus-assets/icons/line-little.svg" alt="">
              <span class="flex items-center justify-center w-12 h-12 mb-6 lg:mb-8 rounded-full bg-yellow-400 text-white text-sm">3</span>
              <h3 class="mb-4 text-2xl font-semibold font-heading">Dolor sit amet</h3>
              <p class="text-xl text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="w-full lg:w-1/2 px-4 mb-12">
              <span class="flex items-center justify-center w-12 h-12 mb-6 lg:mb-8 rounded-full bg-orange-400 text-white text-sm">4</span>
              <h3 class="mb-4 text-2xl font-semibold font-heading">Dolor sit amet</h3>
              <p class="text-xl text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pb-24">
  <div class="relative pt-24">
    <div class="hidden lg:block absolute top-0 right-0 w-1/2 pt-24 xl:pt-14">
      <img class="block ml-auto max-h-192" src="wrexa-assets/images/app-message-background-photo.png" alt="">
    </div>
    <div class="container px-4 mx-auto">
      <div class="flex items-center mb-24 sm:mb-40">
        <span class="font-heading text-xl">01</span>
        <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
        <span class="font-heading text-xl">Introduction</span>
      </div>
      <div class="max-w-md 3xl:max-w-2xl mx-auto lg:mx-0 xl:ml-24">
        <h1 class="font-heading text-5xl sm:text-6xl md:text-7xl mb-14">I’m happy my home found me</h1>
        <p class="max-w-sm font-light mb-16 sm:mb-32">The house by the pond cras ornare, some chords for a three moments, like a sense of truth that comes from within. The final game.</p>
        <a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Learn More</a>
      </div>
    </div>
    <div class="lg:hidden mt-24">
      <img class="block ml-auto max-h-192" src="wrexa-assets/images/app-message-background-photo.png" alt="">
    </div>
  </div>
  <div class="container px-4 mx-auto mt-24 lg:mt-52">
    <div class="sm:flex"><a class="inline-block w-full sm:w-auto sm:mr-24 md:mr-40 mb-2 sm:mb-0 text-gray-900 hover:text-gray-700" href="#">Download application</a><a class="inline-block w-full sm:w-auto sm:mr-auto mb-2 sm:mb-0 text-gray-900 hover:text-gray-700" href="#">Select plan</a><a class="inline-block w-full sm:w-auto text-gray-900 hover:text-gray-700" href="#">Start a conversation</a></div>
  </div>
</section>

<section class="pt-20 2xl:pt-40 pb-40 2xl:pb-80 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto mb-16 lg:mb-28 text-center">
      <span class="text-lg font-bold text-blue-500">How it works</span>
      <h2 class="mt-6 mb-12 text-6xl font-bold font-heading">Build and launch without problems</h2>
      <p class="text-lg text-gray-500">The brown fox jumps over the lazy dog.</p>
    </div>
    <div class="flex flex-wrap items-center -mx-10">
      <div class="relative w-full lg:w-1/2 px-10 mb-16 lg:mb-0">
        <div class="relative lg:max-w-md lg:ml-auto z-10">
          <img class="object-cover w-full lg:w-112 h-160" src="https://images.pexels.com/photos/7148031/pexels-photo-7148031.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=450&amp;w=940" alt="">
          <div class="absolute bottom-0 left-0 w-full px-12">
            <div class="flex pt-10 pb-16 w-full border-t border-gray-200">
              <a class="inline-flex mr-10 w-20 h-20 items-center justify-center bg-white rounded-lg" href="#">
                <svg class="-mb-2 -mr-2" width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0.791667 6.33333C0.354667 6.33333 0 5.97867 0 5.54167V3.95833C0 1.7765 1.7765 0 3.95833 0H5.54167C5.97867 0 6.33333 0.354667 6.33333 0.791667C6.33333 1.22867 5.97867 1.58333 5.54167 1.58333H3.95833C2.64892 1.58333 1.58333 2.64892 1.58333 3.95833V5.54167C1.58333 5.97867 1.22867 6.33333 0.791667 6.33333Z" fill="#1F40FF"></path>
                  <path d="M30.8747 6.33333C30.4377 6.33333 30.083 5.97867 30.083 5.54167V3.95833C30.083 2.64892 29.0174 1.58333 27.708 1.58333H26.1247C25.6877 1.58333 25.333 1.22867 25.333 0.791667C25.333 0.354667 25.6877 0 26.1247 0H27.708C29.8898 0 31.6664 1.7765 31.6664 3.95833V5.54167C31.6664 5.97867 31.3117 6.33333 30.8747 6.33333Z" fill="#1F40FF"></path>
                  <path d="M19.7914 1.58333H11.8747C11.4377 1.58333 11.083 1.22867 11.083 0.791667C11.083 0.354667 11.4377 0 11.8747 0H19.7914C20.2284 0 20.583 0.354667 20.583 0.791667C20.583 1.22867 20.2284 1.58333 19.7914 1.58333Z" fill="#1F40FF"></path>
                  <path d="M16.6247 31.6667H11.8747C11.4377 31.6667 11.083 31.312 11.083 30.875C11.083 30.438 11.4377 30.0834 11.8747 30.0834H16.6247C17.0617 30.0834 17.4163 30.438 17.4163 30.875C17.4163 31.312 17.0617 31.6667 16.6247 31.6667Z" fill="#1F40FF"></path>
                  <path d="M5.54167 31.6667H3.95833C1.7765 31.6667 0 29.8902 0 27.7084V26.125C0 25.688 0.354667 25.3334 0.791667 25.3334C1.22867 25.3334 1.58333 25.688 1.58333 26.125V27.7084C1.58333 29.0178 2.64892 30.0834 3.95833 30.0834H5.54167C5.97867 30.0834 6.33333 30.438 6.33333 30.875C6.33333 31.312 5.97867 31.6667 5.54167 31.6667Z" fill="#1F40FF"></path>
                  <path d="M0.791667 20.5833C0.354667 20.5833 0 20.2286 0 19.7916V11.8749C0 11.4379 0.354667 11.0833 0.791667 11.0833C1.22867 11.0833 1.58333 11.4379 1.58333 11.8749V19.7916C1.58333 20.2286 1.22867 20.5833 0.791667 20.5833Z" fill="#1F40FF"></path>
                  <path d="M30.8747 17.4166C30.4377 17.4166 30.083 17.0619 30.083 16.6249V11.8749C30.083 11.4379 30.4377 11.0833 30.8747 11.0833C31.3117 11.0833 31.6663 11.4379 31.6663 11.8749V16.6249C31.6663 17.0619 31.3117 17.4166 30.8747 17.4166Z" fill="#1F40FF"></path>
                  <path d="M22.0118 38C21.4418 38 20.9795 37.5377 20.9795 36.9677V15.2823C20.9795 14.7123 21.4418 14.25 22.0118 14.25C22.2873 14.25 22.547 14.3577 22.7417 14.5524L37.6773 29.488C37.8721 29.6812 37.9829 29.9472 37.9829 30.2211C37.9829 30.7911 37.5206 31.2534 36.9506 31.2534H28.9563L22.7544 37.6849C22.5533 37.8908 22.2921 38 22.0118 38ZM22.5628 16.6123V35.6044L28.0507 29.9139C28.1995 29.7587 28.4053 29.6717 28.6207 29.6717H35.6206L22.5628 16.6123ZM36.5658 30.6153H36.5817H36.5658Z" fill="#1F40FF"></path>
                </svg>
              </a>
              <div>
                <p class="mb-1 text-lg font-bold text-blue-500">Zospace</p>
                <h4 class="text-4xl font-bold text-white">How it works</h4>
              </div>
            </div>
          </div>
        </div>
        <img class="hidden lg:block absolute top-0 right-0 mt-52 -mr-40" src="zospace-assets/images/blue-eclipse.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-10">
        <div class="max-w-lg">
          <ul>
            <li class="flex pb-10 mb-8 border-b border-gray-50">
              <div class="mr-8">
                <span class="flex justify-center items-center w-14 h-14 bg-blue-50 text-lg font-bold rounded-full">1</span>
              </div>
              <div class="max-w-xs">
                <h3 class="mb-6 text-lg font-bold font-heading">Register account</h3>
                <p class="text-lg">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
              </div>
            </li>
            <li class="flex pb-10 mb-8 border-b border-gray-50">
              <div class="mr-8">
                <span class="flex justify-center items-center w-14 h-14 bg-blue-50 text-lg font-bold rounded-full">2</span>
              </div>
              <div class="max-w-xs">
                <h3 class="mb-6 text-lg font-bold font-heading">Customize tools</h3>
                <p class="text-lg">The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
              </div>
            </li>
            <li class="flex pb-10 border-b border-gray-50">
              <div class="mr-8">
                <span class="flex justify-center items-center w-14 h-14 bg-blue-50 text-lg font-bold rounded-full">3</span>
              </div>
              <div class="max-w-xs">
                <h3 class="mb-6 text-lg font-bold font-heading">Work with your team</h3>
                <p class="text-lg">The time, this accumsan augue, posuere posuere elit lorem.</p>
              </div>
            </li>
          </ul>
          <div class="mt-10 text-right">
            <a class="inline-block font-bold text-blue-500 hover:text-blue-600" href="#">
              <span>Learn more</span>
              <span class="inline-block ml-6">
                <svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.7383 1.47342L18.7383 10.9304L17.5562 10.9304L17.5562 2.89788L0.834948 19.625L0.00154682 18.7916L16.7228 2.06448L9.28125 2.06448L9.28125 0.882355L18.1472 0.882355C18.4737 0.882355 18.7383 1.14697 18.7383 1.47342Z" fill="currentColor"></path>
                </svg>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 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 -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 -right-8 -top-8 w-28 md:w-auto" src="flex-ui-assets/elements/circle3-yellow.svg" alt="">
          <img class="absolute z-10 -left-10 -bottom-8 w-28 md:w-auto" src="flex-ui-assets/elements/dots3-blue.svg" alt="">
          <img src="flex-ui-assets/images/how-it-works/stock.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">How it works</span>
        <h2 class="mb-12 text-4xl md:text-5xl leading-tight text-white font-bold tracking-tighter">Gain more insight into how people use your</h2>
        <div class="flex flex-wrap -mx-4 text-center md:text-left">
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-coolGray-900 bg-green-500 font-semibold rounded-full">1</div>
            <h3 class="mb-2 text-xl text-white font-bold">Custom analytics</h3>
            <p class="font-medium text-coolGray-400">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-coolGray-900 bg-green-500 font-semibold rounded-full">2</div>
            <h3 class="mb-2 text-xl text-white font-bold">Team Management</h3>
            <p class="font-medium text-coolGray-400">Our calendar lets you know what is happening with customer and projects so you are able to control process.</p>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-coolGray-900 bg-green-500 font-semibold rounded-full">3</div>
            <h3 class="mb-2 text-xl text-white font-bold">Easy setup</h3>
            <p class="font-medium text-coolGray-400">End to End Business Platform, Sales Management, Marketing Automation, Help Desk and many more</p>
          </div>
          <div class="w-full md:w-1/2 px-4">
            <div class="inline-flex items-center justify-center mb-4 w-12 h-12 text-xl text-coolGray-900 bg-green-500 font-semibold rounded-full">4</div>
            <h3 class="mb-2 text-xl text-white font-bold">Build your website</h3>
            <p class="font-medium text-coolGray-400">A tool that lets you build a dream website even if you know nothing about web design or programming.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 2xl:pt-40 2xl:pb-44 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-2/5 px-4 mb-20 lg:mb-0">
        <span class="block mb-9 text-xs font-medium uppercase leading-4 text-gray-300 tracking-widest">How it works</span>
        <h2 class="mb-12 text-9xl md:text-10xl xl:text-11xl font-medium font-heading leading-none">Easy to use. Really</h2>
        <p class="mb-16 lg:mb-20 text-xl lg:text-2xl leading-relaxed font-heading font-medium">Phasellus eget pretium mi, vestibulum lobortis neque. Nulla bibendum tempor velit, at hendrerit massa fringilla.</p>
        <div class="mb-12 font-heading">
          <button class="py-5 px-10 mb-4 md:mb-0 mr-0 md:mr-5 w-full md:w-auto text-xl leading-none font-medium tracking-tighter font-heading bg-gray-50 hover:bg-gray-100 focus:ring-2 focus:ring-gray-50 focus:ring-opacity-50 rounded-xl" type="button">More</button>
          <button class="py-5 px-10 w-full md:w-auto text-xl leading-none text-white font-medium tracking-tighter font-heading bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="button">Get started</button>
        </div>
        <p class="text-lg leading-6 text-darkBlueGray-400 font-normal">Explore the plaftorm right here.</p>
      </div>
      <div class="w-full lg:w-3/5 px-4">
        <div class="flex flex-wrap -mx-4 items-start">
          <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0 md:mt-40 relative">
            <div class="relative pt-16 pb-20 px-8 md:px-12 2xl:px-16 -mx-1 bg-white border border-black border-opacity-10 z-10 rounded-3xl">
              <div class="relative inline-flex items-center justify-center mb-8 w-12 h-12 leading-6 text-white bg-blue-500 rounded-full">
                <span class="text-2xl font-bold">1</span>
              </div>
              <h2 class="mb-14 text-7xl 2xl:text-8xl leading-tight font-medium font-heading">Choose application</h2>
              <p class="text-lg text-darkBlueGray-400">The nulla commodo, commodo eros a, tristique lectus.</p>
            </div>
            <div class="absolute left-1/2 -bottom-3 transform -translate-x-1/2 w-11/12 h-24 border border-black border-opacity-10 rounded-3xl"></div>
          </div>
          <div class="w-full md:w-1/2 px-4 relative">
            <div class="relative pt-16 pb-20 px-8 md:px-12 2xl:px-16 -mx-1 bg-white border border-black border-opacity-10 z-10 rounded-3xl">
              <div class="relative inline-flex items-center justify-center mb-8 w-12 h-12 leading-6 text-white bg-blue-500 rounded-full">
                <span class="text-2xl font-bold">2</span>
              </div>
              <h2 class="mb-14 text-7xl 2xl:text-8xl leading-tight font-medium font-heading">Feel free, take all</h2>
              <p class="text-lg text-darkBlueGray-400">Proin nec nunc felis. In non tellus ultricies, rutrum lacus et, pharetra elit.</p>
            </div>
            <div class="absolute left-1/2 -bottom-3 transform -translate-x-1/2 w-11/12 h-24 border border-black border-opacity-10 rounded-3xl"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <span class="text-lg font-extrabold text-gray-500">How it works</span>
        <h1 class="max-w-xl text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-16">Gain more insight into how people use your</h1>
        <div class="flex flex-wrap -mx-4 -mb-10">
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">1</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Custom analytics</h3>
              <p class="font-bold">Get a complete sales dashboard in the cloud.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">2</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Team Management</h3>
              <p class="font-bold">Our calendar lets you know what is happening with customer</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">3</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Easy setup</h3>
              <p class="font-bold">End to End Business Platform, Sales Management, Marketing</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">4</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Build your website</h3>
              <p class="font-bold">A tool that lets you build a dream website even if you know nothing</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block w-full h-128 object-cover border-3 border-indigo-900 rounded-2xl shadow-lg" src="nigodo-assets/img/photo-board.jpg" alt="">
      </div>
    </div>
  </div>
</section>

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap items-center">
        <div class="w-full lg:w-1/2 mb-12 lg:mb-0">
          <div class="max-w-md">
            <span class="text-yellow-500 font-bold">Dolor sit amet consectutar</span>
            <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">Build &amp; Launch without problems</h2>
            <div class="max-w-xs">
              <p class="text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2">
          <div class="mb-12 lg:mb-8 flex flex-wrap items-start">
            <span class="mb-4 lg:mb-0 lg:mr-6 inline-flex items-center justify-center w-16 h-16 bg-blue-800 rounded text-blue-400 text-2xl font-bold">1</span>
            <div class="w-full lg:w-3/4">
              <h3 class="mb-4 text-2xl font-bold font-heading text-white">Lorem ipsum dolor sit amet consectutar</h3>
              <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>
            </div>
          </div>
          <div class="mb-12 lg:mb-8 flex flex-wrap items-start">
            <span class="mb-4 lg:mb-0 lg:mr-6 inline-flex items-center justify-center w-16 h-16 bg-pink-800 rounded text-pink-400 text-2xl font-bold">2</span>
            <div class="w-full lg:w-3/4">
              <h3 class="mb-4 text-2xl font-bold font-heading text-white">Lorem ipsum dolor sit amet consectutar</h3>
              <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>
            </div>
          </div>
          <div class="flex flex-wrap items-start">
            <span class="mb-4 lg:mb-0 lg:mr-6 inline-flex items-center justify-center w-16 h-16 bg-purple-800 rounded text-purple-400 text-2xl font-bold">3</span>
            <div class="w-full lg:w-3/4">
              <h3 class="mb-4 text-2xl font-bold font-heading text-white">Lorem ipsum dolor sit amet consectutar</h3>
              <p class="text-gray-500 leading-loose">Fusce quam tellus, placerat eu metus ut, viverra aliquet purus. Suspendisse potenti. Nulla non nibh feugiat.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="skew skew-bottom mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-bottom ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
    </svg>
  </div>
</section>

<section class="py-24 relative">
  <div class="absolute top-0 left-0" style="background-image: url('pstls-assets/images/how-it-works/colors-right.png'); background-size: cover; background-repeat: no-repeat; background-position: center;" ></div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <h1 class="max-w-md mx-auto lg:mx-0 text-5xl lg:text-6xl font-heading" >Build and launch without problems</h1>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-2xl mx-auto py-12 px-8 md:p-12 bg-black">
          
          <div class="md:flex mb-14">
            <div class="mb-6 md:mb-0 mr-6 xl:mr-10">
              <div class="w-14 h-14 bg-indigo-300 transform rotate-45 flex items-center justify-center">
                <h2 class="text-2xl font-bold transform -rotate-45">1</h2>
              </div>
            </div>
            <div>
              <h2 class="text-3xl font-heading text-white mb-4" >Register account</h2>
              <p class="text-lg text-white" >It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</p>
            </div>
          </div>
          
          <div class="md:flex mb-14">
            <div class="mb-6 md:mb-0 mr-6 xl:mr-10">
              <div class="w-14 h-14 bg-orange-300 transform rotate-45 flex items-center justify-center">
                <h2 class="text-2xl font-bold transform -rotate-45">2</h2>
              </div>
            </div>
            <div>
              <h2 class="text-3xl font-heading text-white mb-4" >Customize tools</h2>
              <p class="text-lg text-white" >The brown me quam, sagittis porttitor lorem vel, commodo fringilla nisl.</p>
            </div>
          </div>
          
          <div class="md:flex">
            <div class="mb-6 md:mb-0 mr-6 xl:mr-10">
              <div class="w-14 h-14 bg-red-300 transform rotate-45 flex items-center justify-center">
                <h2 class="text-2xl font-bold transform -rotate-45">3</h2>
              </div>
            </div>
            <div>
              <h2 class="text-3xl font-heading text-white mb-4" >Work with your team</h2>
              <p class="text-lg text-white" >The time, this accumsan augue, posuere posuere elit lorem.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-black overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="absolute top-1/2 right-0 transform -translate-y-1/2" src="boldui-assets/elements/shadow-ellipse.svg" alt="">
    <div class="max-w-xl mx-auto mb-8 md:mb-14 text-center">
      <h2 class="mb-6 text-3xl text-white uppercase font-heading">Increase your brand's regular profit</h2>
      <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-0">
        <div class="flex flex-wrap items-center">
          <div class="relative flex items-center justify-center h-40 w-1/3">
            <img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/ellipse.svg" alt="">
            <span class="text-yellow-300">1</span>
          </div>
          <div class="w-full md:w-2/3">
            <h3 class="mb-4 text-2xl text-white font-heading">Spectacular team plan</h3>
            <p class="text-gray-500">Fairly assigning daily tasks to your employees. Take a big step forward in growing your business.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-0">
        <div class="flex flex-wrap items-center">
          <div class="relative flex items-center justify-center h-40 w-1/3">
            <img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/ellipse.svg" alt="">
            <span class="text-yellow-300">2</span>
          </div>
          <div class="w-full md:w-2/3">
            <h3 class="mb-4 text-2xl text-white font-heading">Change of access</h3>
            <p class="text-gray-500">Fairly assigning daily tasks to your employees. Take a big step forward in growing your business.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-10 md:mb-0">
        <div class="flex flex-wrap items-center">
          <div class="relative flex items-center justify-center h-40 w-1/3">
            <img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/ellipse.svg" alt="">
            <span class="text-yellow-300">3</span>
          </div>
          <div class="w-full md:w-2/3">
            <h3 class="mb-4 text-2xl text-white font-heading">List of regular users</h3>
            <p class="text-gray-500">Fairly assigning daily tasks to your employees. Take a big step forward in growing your business.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="flex flex-wrap items-center">
          <div class="relative flex items-center justify-center h-40 w-1/3">
            <img class="absolute top-0 left-0 w-full h-full" src="boldui-assets/elements/ellipse.svg" alt="">
            <span class="text-yellow-300">4</span>
          </div>
          <div class="w-full md:w-2/3">
            <h3 class="mb-4 text-2xl text-white font-heading">Frequent authentication</h3>
            <p class="text-gray-500">Fairly assigning daily tasks to your employees. Take a big step forward in growing your business.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center">
      <a class="inline-flex items-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
        <svg class="text-black mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="currentColor"></path>
        </svg>
        <span class="text-sm font-heading">Activate demo</span>
      </a>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mt-24 lg:mt-0 order-last lg:order-first">
        <img class="block mx-auto rounded" src="acros-assets/images/how-it-works/woman-man.jpg" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <h2 class="max-w-md font-heading text-3xl sm:text-4xl mb-12">Lorem Ipsum dolor sit amet boulique</h2>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-white rounded">
              <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-gray-900 bg-gray-200 rounded-full">1</div>
              <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
                <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <h3 class="font-heading text-lg font-medium mb-4">Repeat predefined</h3>
            <p class="max-w-xxs leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-white rounded">
              <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-gray-900 bg-gray-200 rounded-full">2</div>
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.0203 8.91334C15.8413 8.91334 17.3173 7.43734 17.3173 5.61634C17.3173 3.79634 15.8413 2.31934 14.0203 2.31934" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M15.5364 12.4963C16.0804 12.5333 16.6204 12.6113 17.1534 12.7293C17.8924 12.8763 18.7824 13.1793 19.0984 13.8423C19.3004 14.2673 19.3004 14.7623 19.0984 15.1873C18.7834 15.8503 17.8924 16.1533 17.1534 16.3053" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.59149 13.2063C11.2815 13.2063 14.4335 13.7653 14.4335 15.9983C14.4335 18.2323 11.3015 18.8103 7.59149 18.8103C3.90149 18.8103 0.750488 18.2523 0.750488 16.0183C0.750488 13.7843 3.88149 13.2063 7.59149 13.2063Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.59152 10.0188C5.15752 10.0188 3.20752 8.06776 3.20752 5.63376C3.20752 3.20076 5.15752 1.24976 7.59152 1.24976C10.0255 1.24976 11.9765 3.20076 11.9765 5.63376C11.9765 8.06776 10.0255 10.0188 7.59152 10.0188Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <h3 class="font-heading text-lg font-medium mb-4">Classical Latin literature</h3>
            <p class="max-w-xxs leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-12 sm:mb-0">
            <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-white rounded">
              <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-gray-900 bg-gray-200 rounded-full">3</div>
              <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
                <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <h3 class="font-heading text-lg font-medium mb-4">Lorem Ipsum passage</h3>
            <p class="max-w-xxs leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
          <div class="w-full sm:w-1/2 px-4">
            <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-white rounded">
              <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-gray-900 bg-gray-200 rounded-full">4</div>
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.0203 8.91334C15.8413 8.91334 17.3173 7.43734 17.3173 5.61634C17.3173 3.79634 15.8413 2.31934 14.0203 2.31934" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M15.5364 12.4963C16.0804 12.5333 16.6204 12.6113 17.1534 12.7293C17.8924 12.8763 18.7824 13.1793 19.0984 13.8423C19.3004 14.2673 19.3004 14.7623 19.0984 15.1873C18.7834 15.8503 17.8924 16.1533 17.1534 16.3053" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.59149 13.2063C11.2815 13.2063 14.4335 13.7653 14.4335 15.9983C14.4335 18.2323 11.3015 18.8103 7.59149 18.8103C3.90149 18.8103 0.750488 18.2523 0.750488 16.0183C0.750488 13.7843 3.88149 13.2063 7.59149 13.2063Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.59152 10.0188C5.15752 10.0188 3.20752 8.06776 3.20752 5.63376C3.20752 3.20076 5.15752 1.24976 7.59152 1.24976C10.0255 1.24976 11.9765 3.20076 11.9765 5.63376C11.9765 8.06776 10.0255 10.0188 7.59152 10.0188Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <h3 class="font-heading text-lg font-medium mb-4">Hampden-Sydney College</h3>
            <p class="max-w-xxs leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-24 bg-blue-800">
  <div class="absolute top-0 right-0">
    <svg class="mt-10" width="798" height="798" viewBox="0 0 798 798" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.1">
        <path d="M797.81 796.481L698.701 697.372C729.839 655.792 748.256 604.148 748.256 548.328C748.256 442.384 681.803 351.629 588.58 315.365L797.81 1.51892C798 1.13919 798 0.759458 797.81 0.569593C797.81 0.189864 797.43 0 797.051 0H0.949322C0.569593 0 0.189864 0.189864 0.189864 0.569593C0.189864 0.949322 0 1.13919 0.189864 1.51892L178.852 269.607L0.189864 448.08C0 448.27 0 448.46 0 448.839C0 449.219 0 449.409 0.189864 449.599C0.379729 449.789 0.569593 449.789 0.949322 449.789C1.32905 449.789 1.51892 449.789 1.70878 449.599L179.991 271.316L281.949 424.347C260.874 460.801 248.722 503.141 248.722 548.328C248.722 685.98 360.742 798 498.584 798C579.656 798 651.994 759.078 697.562 698.891L796.291 797.62C796.481 797.81 796.671 797.81 797.051 797.81C797.43 797.81 797.62 797.81 797.81 797.62C798 797.43 798 797.241 798 796.861C798 796.481 798 796.671 797.81 796.481ZM181.32 269.797L250.431 200.687C250.621 200.497 250.621 200.307 250.621 199.927C250.621 199.547 250.621 199.358 250.431 199.168C250.051 198.788 249.482 198.788 249.102 199.168L180.181 268.089L2.6581 1.89864H795.342L586.871 314.605C559.341 304.163 529.722 298.467 498.774 298.467C406.879 298.467 326.567 348.211 283.088 422.258L181.32 269.797ZM585.732 316.314L398.905 596.364L284.037 424.157C326.946 350.3 407.069 300.555 498.394 300.555C529.152 300.365 558.581 306.061 585.732 316.314ZM498.584 796.101C361.882 796.101 250.621 684.841 250.621 548.328C250.621 503.9 262.393 462.13 283.088 425.866L398.146 598.453C398.335 598.642 398.525 598.832 398.905 598.832C399.285 598.832 399.475 598.642 399.665 598.453L587.44 317.074C680.284 352.958 746.357 443.143 746.357 548.518C746.357 603.769 728.13 655.032 697.372 696.233L598.642 597.503C598.263 597.124 597.693 597.124 597.313 597.503C597.123 597.693 597.123 597.883 597.123 598.263C597.123 598.642 597.123 598.832 597.313 599.022L696.233 697.941C651.045 757.369 579.276 796.101 498.584 796.101Z" fill="white"></path>
        <path d="M175.055 572.251H0.949322C0.379729 572.251 0 572.631 0 573.201V747.306C0 747.876 0.379729 748.255 0.949322 748.255H175.055C175.625 748.255 176.004 747.876 176.004 747.306V573.201C176.004 572.631 175.625 572.251 175.055 572.251ZM174.106 746.357H1.89864V574.15H174.106V746.357Z" fill="white"></path>
        <path d="M460.612 225.749C460.801 225.939 460.991 225.939 461.181 225.939C461.371 225.939 461.561 225.939 461.751 225.749L573.771 151.132C573.961 150.942 574.15 150.752 574.15 150.373C574.15 149.993 573.961 149.803 573.771 149.613L461.751 74.9964C461.371 74.8065 460.991 74.8065 460.612 74.9964L348.592 149.613C348.402 149.803 348.212 149.993 348.212 150.373C348.212 150.752 348.402 150.942 348.592 151.132L460.612 225.749ZM461.181 76.7052L571.492 150.183L461.181 223.66L350.87 150.183L461.181 76.7052Z" fill="white"></path>
      </g>
    </svg>
  </div>
  <div class="relative container px-4 mx-auto">
    <h2 class="max-w-md mb-10 text-4xl font-bold text-white font-heading">Lorem ipsum dolor sit amet consectetur</h2>
    <div class="bg-blue-900 mb-2">
      <div class="flex flex-wrap -mx-4">
        <div class="relative w-full lg:w-1/2 px-4 order-1 lg:order-0">
          <div class="hidden lg:block lg:absolute top-0 left-0 ml-20 mt-8">
            <svg class="h-20 lg:h-auto" width="83" height="213" viewBox="0 0 83 213" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.15" d="M1.776 47.552H0.776V48.552H1.776V47.552ZM1.776 1.75999V0.759995H0.776V1.75999H1.776ZM81.552 1.75999H82.552V0.759995H81.552V1.75999ZM81.552 212V213H82.552V212H81.552ZM30.288 212H29.288V213H30.288V212ZM30.288 47.552H31.288V46.552H30.288V47.552ZM2.776 47.552V1.75999H0.776V47.552H2.776ZM1.776 2.75999H81.552V0.759995H1.776V2.75999ZM80.552 1.75999V212H82.552V1.75999H80.552ZM81.552 211H30.288V213H81.552V211ZM31.288 212V47.552H29.288V212H31.288ZM30.288 46.552H1.776V48.552H30.288V46.552Z" fill="white"></path>
            </svg>
          </div>
          <div class="max-w-md p-6 lg:pl-28 lg:pt-24">
            <h3 class="mb-2 text-lg font-semibold text-white">Making changes simple and easy</h3>
            <p class="text-base text-white leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 order-0 lg:order-1">
          <img class="h-72 w-full clip-path-left object-cover" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        </div>
      </div>
    </div>
    <div class="bg-blue-900 mb-2">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4">
          <img class="h-72 w-full clip-path-right object-cover" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        </div>
        <div class="relative w-full lg:w-1/2 px-4">
          <div class="hidden lg:block lg:absolute top-0 right-0 mr-20 mt-8">
            <svg class="h-20 lg:h-auto" width="148" height="215" viewBox="0 0 148 215" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.15" d="M2.232 176.544L1.61012 175.761L1.232 176.061V176.544H2.232ZM11.16 169.344L10.5229 168.573L11.7147 170.176L11.16 169.344ZM55.512 131.04L54.838 130.301L54.8316 130.307L55.512 131.04ZM88.92 49.248L88.149 49.8849L88.92 49.248ZM55.224 50.976L54.4273 50.3716L54.424 50.376L55.224 50.976ZM49.176 74.016V75.016H50.176V74.016H49.176ZM1.656 74.016L0.656277 73.9925L0.632194 75.016H1.656V74.016ZM12.024 33.12L11.1718 32.5967L11.1652 32.6077L12.024 33.12ZM38.232 8.92799L37.8039 8.02423L37.7977 8.02722L38.232 8.92799ZM126.072 18.72L125.359 19.4212L125.365 19.4271L126.072 18.72ZM122.616 121.824L123.396 122.45L123.399 122.446L122.616 121.824ZM69.048 173.088L68.438 172.296L66.1099 174.088H69.048V173.088ZM146.808 173.088H147.808V172.088H146.808V173.088ZM146.808 213.12V214.12H147.808V213.12H146.808ZM2.232 213.12H1.232V214.12H2.232V213.12ZM2.85388 177.327C6.11812 174.735 8.49662 172.837 9.98775 171.634C10.7317 171.034 11.2607 170.603 11.5692 170.344C11.7095 170.226 11.8406 170.114 11.9166 170.038C11.9201 170.034 11.9985 169.959 12.066 169.856C12.0855 169.826 12.1316 169.752 12.1692 169.65C12.1918 169.588 12.3023 169.283 12.1546 168.924C11.9601 168.452 11.5303 168.329 11.3264 168.309C11.1449 168.291 11.0048 168.329 10.9633 168.34C10.8598 168.368 10.7832 168.407 10.766 168.416C10.735 168.432 10.7095 168.447 10.6934 168.456C10.6606 168.476 10.6295 168.496 10.6053 168.512L11.7147 170.176C11.7265 170.168 11.7245 170.17 11.7138 170.176C11.7088 170.179 11.6926 170.189 11.6692 170.201C11.6596 170.205 11.5888 170.242 11.4895 170.269C11.4501 170.28 11.3116 170.317 11.1313 170.3C10.9285 170.28 10.4995 170.157 10.3053 169.686C10.158 169.328 10.2683 169.024 10.2904 168.964C10.3274 168.862 10.3726 168.791 10.3907 168.763C10.4307 168.702 10.468 168.66 10.4758 168.652C10.4894 168.636 10.4995 168.626 10.5024 168.623C10.5089 168.617 10.4978 168.628 10.4517 168.668C10.4111 168.704 10.3553 168.751 10.2828 168.812C9.99129 169.057 9.47631 169.478 8.73225 170.078C7.24738 171.275 4.87388 173.169 1.61012 175.761L2.85388 177.327ZM11.7971 170.115C30.6196 154.557 45.4202 141.776 56.1925 131.773L54.8316 130.307C44.0998 140.272 29.3324 153.027 10.5229 168.573L11.7971 170.115ZM56.186 131.779C67.1804 121.749 76.449 111.227 83.9853 100.213L82.3347 99.0833C74.895 109.957 65.7316 120.363 54.838 130.301L56.186 131.779ZM83.9853 100.213C91.5555 89.1486 95.392 78.2991 95.392 67.68H93.392C93.392 77.7969 89.7405 88.2594 82.3347 99.0833L83.9853 100.213ZM95.392 67.68C95.392 59.662 93.5341 53.2633 89.691 48.6111L88.149 49.8849C91.6019 54.0647 93.392 59.9539 93.392 67.68H95.392ZM89.691 48.6111C85.803 43.9047 80.0098 41.624 72.504 41.624V43.624C79.5902 43.624 84.741 45.7593 88.149 49.8849L89.691 48.6111ZM72.504 41.624C64.9112 41.624 58.8499 44.5419 54.4273 50.3716L56.0207 51.5804C60.0461 46.2741 65.5048 43.624 72.504 43.624V41.624ZM54.424 50.376C50.2127 55.991 48.176 63.9159 48.176 74.016H50.176C50.176 64.1481 52.1713 56.713 56.024 51.576L54.424 50.376ZM49.176 73.016H1.656V75.016H49.176V73.016ZM2.65572 74.0395C3.03678 57.8445 6.46459 44.3922 12.8828 33.6323L11.1652 32.6077C4.52741 43.7357 1.04322 57.5475 0.656277 73.9925L2.65572 74.0395ZM12.8762 33.6432C19.5039 22.8496 28.1001 14.9232 38.6663 9.82876L37.7977 8.02722C26.8599 13.3008 17.9841 21.5024 11.1718 32.5967L12.8762 33.6432ZM38.6601 9.83173C49.4581 4.71688 61.406 2.15199 74.52 2.15199V0.151985C61.138 0.151985 48.8939 2.7711 37.8039 8.02425L38.6601 9.83173ZM74.52 2.15199C97.2068 2.15199 114.091 7.96503 125.359 19.4212L126.785 18.0187C115.013 6.05094 97.5292 0.151985 74.52 0.151985V2.15199ZM125.365 19.4271C136.863 30.9255 142.64 45.922 142.64 64.512H144.64C144.64 45.47 138.705 29.9385 126.779 18.0129L125.365 19.4271ZM142.64 64.512C142.64 84.8079 135.723 103.697 121.833 121.202L123.399 122.446C137.541 104.623 144.64 85.3041 144.64 64.512H142.64ZM121.836 121.198C107.879 138.596 90.0843 155.63 68.438 172.296L69.6581 173.88C91.4037 157.138 109.321 139.996 123.396 122.45L121.836 121.198ZM69.048 174.088H146.808V172.088H69.048V174.088ZM145.808 173.088V213.12H147.808V173.088H145.808ZM146.808 212.12H2.232V214.12H146.808V212.12ZM3.232 213.12V176.544H1.232V213.12H3.232Z" fill="white"></path>
            </svg>
          </div>
          <div class="max-w-md p-6 lg:pl-28 lg:pt-24">
            <h3 class="mb-2 text-lg font-semibold text-white">Making changes simple and easy</h3>
            <p class="text-base text-white leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-blue-900 mb-2">
      <div class="flex flex-wrap -mx-4">
        <div class="relative w-full lg:w-1/2 px-4 order-1 lg:order-0">
          <div class="hidden lg:block lg:absolute top-0 left-0 ml-20 mt-8">
            <svg class="h-20 lg:h-auto" width="149" height="220" viewBox="0 0 149 220" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.15" d="M3.688 66.088L2.6887 66.0506L2.64992 67.088H3.688V66.088ZM23.848 18.568L24.5081 19.3192L23.848 18.568ZM112.264 9.352L111.824 10.2498L111.83 10.253L112.264 9.352ZM135.592 29.8L134.735 30.3145L134.739 30.3214L134.743 30.3283L135.592 29.8ZM134.152 89.992L134.931 90.619L134.938 90.6098L134.152 89.992ZM111.976 106.12L111.653 105.173L110.976 105.404V106.12H111.976ZM111.976 107.272H110.976V107.993L111.66 108.221L111.976 107.272ZM139.048 189.64L138.192 189.123L138.189 189.128L139.048 189.64ZM115.144 210.952L114.703 210.054L114.697 210.058L115.144 210.952ZM22.696 201.736L22.0569 202.505L22.0622 202.509L22.696 201.736ZM1.096 150.472V149.472H0.0618229L0.0965652 150.506L1.096 150.472ZM48.904 150.472L49.9037 150.449L49.8815 149.472H48.904V150.472ZM56.104 170.632L55.3692 171.31L55.3758 171.317L55.3826 171.325L56.104 170.632ZM93.544 171.496L92.8214 170.805L92.8206 170.806L93.544 171.496ZM90.952 134.344L90.3606 135.15L90.3757 135.161L90.3912 135.172L90.952 134.344ZM53.8 128.008H52.8V129.008H53.8V128.008ZM53.8 87.976V86.976H52.8V87.976H53.8ZM86.632 83.08L87.1129 83.9569L87.1223 83.9516L86.632 83.08ZM90.088 48.808L90.7951 48.1009L90.088 48.808ZM57.832 49.672L57.061 49.0351L57.0526 49.0453L57.0445 49.0557L57.832 49.672ZM51.784 66.088V67.088H52.6997L52.7801 66.1759L51.784 66.088ZM4.6873 66.1253C5.44745 45.7913 12.0863 30.2353 24.5081 19.3192L23.1879 17.8168C10.2657 29.1727 3.46455 45.2967 2.6887 66.0506L4.6873 66.1253ZM24.5081 19.3192C36.9503 8.38509 53.8756 2.86399 75.4 2.86399V0.863991C53.5324 0.863991 36.0897 6.4789 23.1879 17.8168L24.5081 19.3192ZM75.4 2.86399C89.6874 2.86399 101.817 5.34069 111.824 10.2498L112.704 8.45421C102.359 3.37929 89.9126 0.863991 75.4 0.863991V2.86399ZM111.83 10.253C122.048 15.1727 129.665 21.8648 134.735 30.3145L136.449 29.2855C131.151 20.4552 123.216 13.5153 112.698 8.451L111.83 10.253ZM134.743 30.3283C140.015 38.8006 142.656 48.3117 142.656 58.888H144.656C144.656 47.9603 141.921 38.0794 136.441 29.2717L134.743 30.3283ZM142.656 58.888C142.656 71.39 139.533 81.5246 133.366 89.3742L134.938 90.6098C141.443 82.3313 144.656 71.73 144.656 58.888H142.656ZM133.373 89.365C127.14 97.1095 119.899 102.362 111.653 105.173L112.299 107.067C120.949 104.118 128.492 98.6185 134.931 90.619L133.373 89.365ZM110.976 106.12V107.272H112.976V106.12H110.976ZM111.66 108.221C122.43 111.811 130.893 117.746 137.096 126.016L138.696 124.816C132.227 116.19 123.411 110.029 112.292 106.323L111.66 108.221ZM137.096 126.016C143.272 134.251 146.4 144.873 146.4 157.96H148.4C148.4 144.551 145.192 133.477 138.696 124.816L137.096 126.016ZM146.4 157.96C146.4 169.702 143.656 180.079 138.192 189.123L139.904 190.157C145.576 180.769 148.4 170.026 148.4 157.96H146.4ZM138.189 189.128C132.924 197.966 125.111 204.945 114.703 210.054L115.585 211.85C126.297 206.591 134.42 199.362 139.907 190.152L138.189 189.128ZM114.697 210.058C104.497 215.157 92.2736 217.728 77.992 217.728V219.728C92.5104 219.728 105.055 217.115 115.591 211.846L114.697 210.058ZM77.992 217.728C55.1152 217.728 36.9288 212.106 23.3298 200.963L22.0622 202.509C36.1112 214.022 54.7888 219.728 77.992 219.728V217.728ZM23.3351 200.967C9.98245 189.871 2.8568 173.089 2.09544 150.438L0.0965652 150.506C0.871197 173.551 8.14556 190.945 22.0569 202.505L23.3351 200.967ZM1.096 151.472H48.904V149.472H1.096V151.472ZM47.9043 150.495C48.1004 159.125 50.5585 166.099 55.3692 171.31L56.8388 169.954C52.4335 165.181 50.0916 158.715 49.9037 150.449L47.9043 150.495ZM55.3826 171.325C60.235 176.379 67.2525 178.832 76.264 178.832V176.832C67.6115 176.832 61.189 174.485 56.8254 169.939L55.3826 171.325ZM76.264 178.832C83.9439 178.832 89.997 176.66 94.2674 172.186L92.8206 170.806C89.027 174.78 83.5601 176.832 76.264 176.832V178.832ZM94.2666 172.187C98.6975 167.555 100.88 161.533 100.88 154.216H98.88C98.88 161.107 96.8385 166.605 92.8214 170.805L94.2666 172.187ZM100.88 154.216C100.88 144.773 97.8162 137.786 91.5128 133.516L90.3912 135.172C95.9918 138.966 98.88 145.227 98.88 154.216H100.88ZM91.5434 133.538C85.5214 129.122 75.9433 127.008 63.016 127.008V129.008C75.8167 129.008 84.8626 131.118 90.3606 135.15L91.5434 133.538ZM63.016 127.008H53.8V129.008H63.016V127.008ZM54.8 128.008V87.976H52.8V128.008H54.8ZM53.8 88.976H63.016V86.976H53.8V88.976ZM63.016 88.976C72.9065 88.976 80.9626 87.3295 87.1128 83.9568L86.1512 82.2032C80.3974 85.3585 72.7095 86.976 63.016 86.976V88.976ZM87.1223 83.9516C93.6568 80.2759 96.848 73.8412 96.848 64.936H94.848C94.848 73.3108 91.8952 78.9721 86.1417 82.2084L87.1223 83.9516ZM96.848 64.936C96.848 57.8347 94.8703 52.1761 90.7951 48.1009L89.3809 49.5151C92.9857 53.1199 94.848 58.2133 94.848 64.936H96.848ZM90.7951 48.1009C86.7251 44.0309 81.1665 42.048 74.248 42.048V44.048C80.7695 44.048 85.7709 45.9051 89.3809 49.5151L90.7951 48.1009ZM74.248 42.048C66.7422 42.048 60.949 44.3287 57.061 49.0351L58.603 50.3089C62.011 46.1833 67.1618 44.048 74.248 44.048V42.048ZM57.0445 49.0557C53.4504 53.6482 51.3779 59.3126 50.7879 66.0001L52.7801 66.1759C53.3421 59.8073 55.3016 54.5278 58.6195 50.2883L57.0445 49.0557ZM51.784 65.088H3.688V67.088H51.784V65.088Z" fill="white"></path>
            </svg>
          </div>
          <div class="max-w-md p-6 lg:pl-28 lg:pt-24">
            <h3 class="mb-2 text-lg font-semibold text-white">Making changes simple and easy</h3>
            <p class="text-base text-white leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4 order-0 lg:order-1">
          <img class="h-72 w-full clip-path-left object-cover" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        </div>
      </div>
    </div>
    <div class="bg-blue-900">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4">
          <img class="h-72 w-full clip-path-right object-cover" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        </div>
        <div class="relative w-full lg:w-1/2 px-4">
          <div class="hidden lg:block lg:absolute top-0 right-0 mr-20 mt-8">
            <svg width="172" height="210" viewBox="0 0 172 210" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.15" d="M1.112 171.56H0.112V172.56H1.112V171.56ZM1.112 131.816L0.292428 131.243L0.112 131.501V131.816H1.112ZM92.12 1.63999V0.639992H91.599L91.3004 1.06702L92.12 1.63999ZM147.128 1.63999H148.128V0.639992H147.128V1.63999ZM147.128 128.936H146.128V129.936H147.128V128.936ZM170.744 128.936H171.744V127.936H170.744V128.936ZM170.744 171.56V172.56H171.744V171.56H170.744ZM147.128 171.56V170.56H146.128V171.56H147.128ZM147.128 209V210H148.128V209H147.128ZM97.88 209H96.88V210H97.88V209ZM97.88 171.56H98.88V170.56H97.88V171.56ZM101.336 55.784H102.336V52.4594L100.502 55.2323L101.336 55.784ZM52.952 128.936L52.1179 128.384L51.0916 129.936H52.952V128.936ZM101.336 128.936V129.936H102.336V128.936H101.336ZM2.112 171.56V131.816H0.112V171.56H2.112ZM1.93157 132.389L92.9396 2.21297L91.3004 1.06702L0.292428 131.243L1.93157 132.389ZM92.12 2.63999H147.128V0.639992H92.12V2.63999ZM146.128 1.63999V128.936H148.128V1.63999H146.128ZM147.128 129.936H170.744V127.936H147.128V129.936ZM169.744 128.936V171.56H171.744V128.936H169.744ZM170.744 170.56H147.128V172.56H170.744V170.56ZM146.128 171.56V209H148.128V171.56H146.128ZM147.128 208H97.88V210H147.128V208ZM98.88 209V171.56H96.88V209H98.88ZM97.88 170.56H1.112V172.56H97.88V170.56ZM100.502 55.2323L52.1179 128.384L53.7861 129.488L102.17 56.3357L100.502 55.2323ZM52.952 129.936H101.336V127.936H52.952V129.936ZM102.336 128.936V55.784H100.336V128.936H102.336Z" fill="white"></path>
            </svg>
          </div>
          <div class="max-w-md p-6 lg:pl-28 lg:pt-24">
            <h3 class="mb-2 text-lg font-semibold text-white">Making changes simple and easy</h3>
            <p class="text-base text-white leading-relaxed">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-8">
      <div class="w-full lg:w-1/2 px-8">
        <div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0">
          <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.</h2>
          <p class="mb-8 leading-loose text-blueGray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus.</p>
          <a class="inline-block text-xs py-4 px-8 text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Learn More</a>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-8">
        <ul class="space-y-12">
          <li class="flex -mx-4">
            <div class="px-4">
              <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">1</span>
            </div>
            <div class="px-4">
              <h3 class="my-4 text-xl font-semibold">Key Elements</h3>
              <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
            </div>
          </li>
          <li class="flex -mx-4">
            <div class="px-4">
              <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">2</span>
            </div>
            <div class="px-4">
              <h3 class="my-4 text-xl font-semibold">Flexible Elements</h3>
              <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
            </div>
          </li>
          <li class="flex -mx-4">
            <div class="px-4">
              <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">3</span>
            </div>
            <div class="px-4">
              <h3 class="my-4 text-xl font-semibold">Flexible Software</h3>
              <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/5 px-4 mb-12 lg:mb-0">
        <img class="w-full h-full max-h-112 lg:max-h-full object-cover rounded-lg" src="mockup-assets/images/gray-500-vertical.png" alt="">
      </div>
      <div class="w-full lg:w-3/5 px-4">
        <div class="max-w-xl lg:ml-auto">
          <h2 class="mb-12 text-4xl lg:text-5xl font-bold font-heading">Lorem ipsum dolor sit amet consectetur</h2>
          <div class="flex flex-wrap -mx-4 -mb-10 lg:-mb-12">
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <span class="mb-2 flex items-center justify-center w-12 h-12 rounded-full bg-gray-500 text-gray-50 font-bold text-xl leading-loose">1</span>
              <p class="text-lg text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <span class="flex mb-2 items-center justify-center w-12 h-12 rounded-full bg-gray-500 text-gray-50 font-bold text-xl leading-loose">2</span>
              <p class="text-lg text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <span class="flex mb-2 items-center justify-center w-12 h-12 rounded-full bg-gray-500 text-gray-50 font-bold text-xl leading-loose">3</span>
              <p class="text-lg text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
              <span class="flex mb-2 items-center justify-center w-12 h-12 rounded-full bg-gray-500 text-gray-50 font-bold text-xl leading-loose">4</span>
              <p class="text-lg text-gray-500 leading-loose">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap items-center -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <div class="lg:max-w-lg relative" style="height: 536px;">
                    <img class="absolute hidden lg:block bottom-0 left-0 w-40 h-40 z-10" src="cronos-assets/elements/green-light-left.svg" alt="">
                    <img class="absolute hidden lg:block top-0 right-0 w-40 h-40 z-10 -ml-20" src="cronos-assets/elements/warning-light-small.svg" alt="">
                    <img class="w-full object-cover h-full" src="https://images.unsplash.com/photo-1542330952-bffc55e812b2?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
                </div>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="lg:max-w-lg">
                    <h1 class="font-heading text-4xl font-bold max-w-md mb-12">Lorem ipsum dolor sit amet consectutar domor at elis</h1>
                    <div class="flex flex-wrap -m-4">
                        <div class="w-full lg:w-1/2 p-4">
                            <div class="bg-gray-50 w-16 h-16 flex items-center justify-center mb-6">
                                <span class="text-xl font-bold text-black">1</span>
                            </div>
                            <h2 class="text-xl font-bold mb-3">Lorem ipsum dolor</h2>
                            <p class="text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <div class="bg-gray-50 w-16 h-16 flex items-center justify-center mb-6">
                                <span class="text-xl font-bold text-black">2</span>
                            </div>
                            <h2 class="text-xl font-bold mb-3">Lorem ipsum dolor</h2>
                            <p class="text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <div class="bg-gray-50 w-16 h-16 flex items-center justify-center mb-6">
                                <span class="text-xl font-bold text-black">3</span>
                            </div>
                            <h2 class="text-xl font-bold mb-3">Lorem ipsum dolor</h2>
                            <p class="text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                        </div>
                        <div class="w-full lg:w-1/2 p-4">
                            <div class="bg-gray-50 w-16 h-16 flex items-center justify-center mb-6">
                                <span class="text-xl font-bold text-black">4</span>
                            </div>
                            <h2 class="text-xl font-bold mb-3">Lorem ipsum dolor</h2>
                            <p class="text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>