Shuffle Components in Acros library

<section class="relative py-16 bg-gray-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-16">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-lg mx-auto">
          <span class="text-sm font-semibold uppercase">
            <span>Develop your</span>
            <span class="text-green-500">skills</span>
          </span>
          <h2 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">See what this extension tool looks like</h2>
          <p class="max-w-xl mx-auto text-lg leading-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block mx-auto" src="acros-assets/images/applications/macbook-mobile.png" alt="">
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-10 lg:mb-0">
        <div class="max-w-sm mx-auto">
          <div class="flex items-center justify-center w-12 h-12 mb-6 bg-green-50 rounded">
            <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>
          <h4 class="text-lg font-medium mb-2">Frequent authentication</h4>
          <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-10 lg:mb-0">
        <div class="max-w-sm mx-auto">
          <div class="flex items-center justify-center w-12 h-12 mb-6 bg-green-50 rounded">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.02 10.9133C17.841 10.9133 19.317 9.43734 19.317 7.61634C19.317 5.79634 17.841 4.31934 16.02 4.31934" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M17.5361 14.4963C18.0801 14.5333 18.6201 14.6113 19.1531 14.7293C19.8921 14.8763 20.7821 15.1793 21.0981 15.8423C21.3001 16.2673 21.3001 16.7623 21.0981 17.1873C20.7831 17.8503 19.8921 18.1533 19.1531 18.3053" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.59137 15.2063C13.2814 15.2063 16.4334 15.7653 16.4334 17.9983C16.4334 20.2323 13.3014 20.8103 9.59137 20.8103C5.90137 20.8103 2.75037 20.2523 2.75037 18.0183C2.75037 15.7843 5.88137 15.2063 9.59137 15.2063Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5914 12.0188C7.1574 12.0188 5.2074 10.0678 5.2074 7.63376C5.2074 5.20076 7.1574 3.24976 9.5914 3.24976C12.0254 3.24976 13.9764 5.20076 13.9764 7.63376C13.9764 10.0678 12.0254 12.0188 9.5914 12.0188Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h4 class="text-lg font-medium mb-2">List of regular users</h4>
          <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4">
        <div class="max-w-sm mx-auto">
          <div class="flex items-center justify-center w-12 h-12 mb-6 bg-green-50 rounded">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_189_4034)">
                <path d="M12.5438 9.53998V10.7466C12.5438 11.1299 12.6204 11.4514 12.7714 11.7019C12.9798 12.0476 13.3219 12.2457 13.7102 12.2457C14.0907 12.2457 14.4688 12.0604 14.8339 11.6953L18.8194 7.70984C19.6945 6.83478 19.6945 5.41095 18.8194 4.53589L14.8339 0.550415C14.4688 0.18512 14.0907 0 13.7102 0C13.1296 0 12.5438 0.463623 12.5438 1.49908V2.59497C6.88552 2.92914 2.20132 7.27148 1.50515 12.9567C1.46615 13.2742 1.64669 13.5782 1.94424 13.6959C2.02846 13.7292 2.11617 13.7454 2.20278 13.7454C2.42214 13.7454 2.63491 13.6426 2.77041 13.4575C4.63772 10.9061 7.63589 9.38287 10.7904 9.38287C11.3749 9.38287 11.9627 9.43561 12.5438 9.53998Z" fill="#00CBA6"></path>
                <path d="M22.0432 10.3041C21.7456 10.1862 21.4061 10.2843 21.217 10.5427C19.3499 13.0939 16.3517 14.6172 13.1972 14.6172C12.6127 14.6172 12.0249 14.5644 11.4437 14.4601V13.2534C11.4437 12.2179 10.8578 11.7543 10.2774 11.7543C9.89686 11.7543 9.51875 11.9396 9.15345 12.3049L5.16798 16.2902C4.2931 17.1652 4.2931 18.5891 5.16816 19.4643L9.15345 23.4496C9.51875 23.8149 9.89686 24 10.2774 24C10.8578 24 11.4437 23.5364 11.4437 22.5009V21.4051C17.1022 21.0709 21.7863 16.7285 22.4824 11.0435C22.5214 10.7258 22.3409 10.4218 22.0432 10.3041Z" fill="#00CBA6"></path>
              </g>
              <defs><rect width="24" height="24" fill="white"></rect></defs>
            </svg>
          </div>
          <h4 class="text-lg font-medium mb-2">Change of access</h4>
          <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap md:flex-nowrap justify-center md:justify-between items-center -mx-4">
      <div class="w-auto px-4">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-flex w-16 h-16 items-center justify-center bg-green-50 hover:bg-green-100 rounded-full">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.33331 10.6666L1.66665 5.99996L6.33331 1.33329" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="w-full md:w-2/3 xl:w-auto px-4 mb-12 md:mb-0 order-first md:order-none">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                    <div class="max-w-3xl text-center mx-auto">
                      <span class="inline-block mx-auto">
                        <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M0.959999 16C2.41067 14.72 3.62667 13.3973 4.608 12.032C5.58933 10.624 6.22933 9.30133 6.528 8.064H6.4C5.20533 8.064 4.288 7.68 3.648 6.912C3.008 6.144 2.688 5.26933 2.688 4.288V3.904C2.688 2.79467 3.05067 1.87733 3.776 1.152C4.50133 0.384 5.46133 0 6.656 0C7.89333 0 8.85333 0.405333 9.536 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77067 8.704 9.30133 9.728 8.704 10.752C8.14933 11.776 7.46667 12.736 6.656 13.632C5.888 14.528 5.056 15.3173 4.16 16H0.959999ZM13.376 16C14.8267 14.72 16.0427 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4667 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1867 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8827 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
                        </svg>
                      </span>
                      <h3 class="font-heading text-2xl md:text-3xl mt-2 mb-8">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"</h3>
                      <div class="max-w-max mx-auto">
                        <img class="h-12 w-12 mb-2 mx-auto rounded-full" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                        <div>
                          <h4 class="font-heading text-lg font-medium mb-1">Denny Bailey</h4>
                          <span class="text-gray-300">CEO &amp; Founder</span>
                        </div>
                      </div>
                    </div>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
                    <div class="max-w-3xl text-center mx-auto">
                      <span class="inline-block mx-auto">
                        <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M0.959999 16C2.41067 14.72 3.62667 13.3973 4.608 12.032C5.58933 10.624 6.22933 9.30133 6.528 8.064H6.4C5.20533 8.064 4.288 7.68 3.648 6.912C3.008 6.144 2.688 5.26933 2.688 4.288V3.904C2.688 2.79467 3.05067 1.87733 3.776 1.152C4.50133 0.384 5.46133 0 6.656 0C7.89333 0 8.85333 0.405333 9.536 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77067 8.704 9.30133 9.728 8.704 10.752C8.14933 11.776 7.46667 12.736 6.656 13.632C5.888 14.528 5.056 15.3173 4.16 16H0.959999ZM13.376 16C14.8267 14.72 16.0427 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4667 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1867 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8827 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
                        </svg>
                      </span>
                      <h3 class="font-heading text-2xl md:text-3xl mt-2 mb-8">In his blue gardens men and girls came and went like moths among the whisperings and the champagne and the stars</h3>
                      <div class="max-w-max mx-auto">
                        <img class="h-12 w-12 mb-2 mx-auto rounded-full" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                        <div>
                          <h4 class="font-heading text-lg font-medium mb-1">Emily Chen</h4>
                          <span class="text-gray-300">Marketing Strategist</span>
                        </div>
                      </div>
                    </div>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-5">
                    <div class="max-w-3xl text-center mx-auto">
                      <span class="inline-block mx-auto">
                        <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M0.959999 16C2.41067 14.72 3.62667 13.3973 4.608 12.032C5.58933 10.624 6.22933 9.30133 6.528 8.064H6.4C5.20533 8.064 4.288 7.68 3.648 6.912C3.008 6.144 2.688 5.26933 2.688 4.288V3.904C2.688 2.79467 3.05067 1.87733 3.776 1.152C4.50133 0.384 5.46133 0 6.656 0C7.89333 0 8.85333 0.405333 9.536 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77067 8.704 9.30133 9.728 8.704 10.752C8.14933 11.776 7.46667 12.736 6.656 13.632C5.888 14.528 5.056 15.3173 4.16 16H0.959999ZM13.376 16C14.8267 14.72 16.0427 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4667 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1867 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8827 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
                        </svg>
                      </span>
                      <h3 class="font-heading text-2xl md:text-3xl mt-2 mb-8">Mockingbirds don't do one thing but make music for us to enjoy. They don't eat up people's gardens, don't nest in corncribs.</h3>
                      <div class="max-w-max mx-auto">
                        <img class="h-12 w-12 mb-2 mx-auto rounded-full" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                        <div>
                          <h4 class="font-heading text-lg font-medium mb-1">Alex Rodriguez</h4>
                          <span class="text-gray-300">Creative Director</span>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <div class="w-auto px-4">
        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-flex w-16 h-16 items-center justify-center bg-green-50 hover:bg-green-100 rounded-full">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.66669 1.33337L6.33336 6.00004L1.66669 10.6667" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</section>

<section class="py-16" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-12">
      <div class="w-full xl:w-2/3 px-4 mb-8 xl:mb-0">
        <div class="max-w-xl">
          <div class="text-sm mb-2 font-semibold text-gray-900 uppercase">
            <span>Develop your</span>
            <span class="text-green-500">skills</span>
          </div>
          <h2 class="font-heading text-3xl sm:text-4xl mb-6">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="text-lg leading-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="w-full xl:w-auto ml-auto px-4 xl:text-right"><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Check all posts</a></div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/work-man-445x318.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/woman-445x264.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/robot-540x540.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="hidden w-full lg:w-1/3 px-4 mb-12" :class="{ 'hidden': !showContent }">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/work-man-445x318.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">Unveiling the Layers of Lorem Ipsum</h3>
          <p class="leading-7 mb-4">Unveiling the Layers of Lorem Ipsum.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="hidden w-full lg:w-1/3 px-4 mb-12" :class="{ 'hidden': !showContent }">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/woman-445x264.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">Unveiling the Layers of Lorem Ipsum</h3>
          <p class="leading-7 mb-4">Unveiling the Layers of Lorem Ipsum.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="hidden w-full lg:w-1/3 px-4 mb-12" :class="{ 'hidden': !showContent }">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/robot-540x540.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">Unveiling the Layers of Lorem Ipsum</h3>
          <p class="leading-7 mb-4">Unveiling the Layers of Lorem Ipsum.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="py-16 px-8 bg-green-50 bg-contain bg-no-repeat bg-center rounded-md" style="background-image: url('acros-assets/images/call-to-action/cta-8-bg.png');">
      <div class="max-w-lg mx-auto text-center">
        <h1 class="font-heading text-3xl sm:text-4xl mb-6">Ready to get started?</h1>
        <p class="text-lg leading-8 mb-10">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="sm:flex items-center justify-center"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Try demo</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Share with friends</a></div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="px-4 sm:px-10 py-4 bg-white">
    <div class="flex items-center justify-between">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14">
            <a class="inline-block" href="#">
              <img src="acros-assets/logo/logo-acros-black.svg" alt="">
            </a>
          </div>
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center">
              <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">About</a></li>
              <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Company</a></li>
              <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Services</a></li>
              <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Testimonials</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap">
          <div class="w-auto hidden lg:block">
            <div class="relative">
              <a class="absolute right-5 top-1/2 transform -translate-y-1/2" href="#">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.8 13.8L17 17M15.9333 8.46667C15.9333 12.5904 12.5904 15.9333 8.46667 15.9333C4.34294 15.9333 1 12.5904 1 8.46667C1 4.34294 4.34294 1 8.46667 1C12.5904 1 15.9333 4.34294 15.9333 8.46667Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
              <input class="px-4 pr-12 w-72 h-14 text-gray-300 placeholder-gray-300 bg-gray-50 outline-none" type="text" placeholder="Search here">
            </div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-50 hover:bg-gray-100 rounded-full">
              <svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 9H1M19 1H1" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
    <nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li><a class="font-heading block text-base font-medium py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Home</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">About</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Company</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Services</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Testimonials</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <a class="block w-full py-4 px-4 mb-4 text-center font-heading font-medium text-base hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-200" href="#">Log in</a><a class="block w-full py-4 px-4 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full xl:w-1/2 px-4 order-last xl:order-first">
        <img class="block max-w-md h-112 mx-auto rounded object-cover" src="acros-assets/images/features/woman-man-smilling.jpg" alt="">
      </div>
      <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
        <div class="max-w-md">
          <h2 class="font-heading text-3xl sm:text-4xl mb-6">Lorem Ipsum dolor sit amet boulique</h2>
          <p class="leading-7 mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
        </div>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="max-w-xs mx-auto lg:mx-0">
              <div class="flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
                <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">Frequent authentication</h3>
              <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="max-w-xs mx-auto lg:mx-0">
              <div class="flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9998 11.4782C14.0169 11.4782 15.652 9.84306 15.652 7.82602C15.652 5.80897 14.0169 4.17383 11.9998 4.17383C9.98279 4.17383 8.34766 5.80897 8.34766 7.82602C8.34766 9.84306 9.98279 11.4782 11.9998 11.4782Z" fill="#00CBA6"></path>
                  <path d="M19.3045 13.565C20.7452 13.565 21.9132 12.3971 21.9132 10.9563C21.9132 9.5156 20.7452 8.34766 19.3045 8.34766C17.8637 8.34766 16.6958 9.5156 16.6958 10.9563C16.6958 12.3971 17.8637 13.565 19.3045 13.565Z" fill="#00CBA6"></path>
                  <path d="M4.76957 13.565C6.2103 13.565 7.37825 12.3971 7.37825 10.9563C7.37825 9.5156 6.2103 8.34766 4.76957 8.34766C3.32883 8.34766 2.16089 9.5156 2.16089 10.9563C2.16089 12.3971 3.32883 13.565 4.76957 13.565Z" fill="#00CBA6"></path>
                  <path d="M11.9999 12.522C8.26007 12.522 5.21729 15.5647 5.21729 19.3046C5.21729 19.5926 5.45104 19.8263 5.73904 19.8263H18.2608C18.5488 19.8263 18.7825 19.5926 18.7825 19.3046C18.7825 15.5647 15.7397 12.522 11.9999 12.522Z" fill="#00CBA6"></path>
                  <path d="M5.66921 14.7216C5.34991 14.6537 5.02537 14.6089 4.69565 14.6089C2.10678 14.6089 0 16.7157 0 19.3045C0 19.5925 0.233755 19.8263 0.521755 19.8263H4.26991C4.21146 19.6625 4.17389 19.4882 4.17389 19.3045C4.17389 17.5922 4.73321 16.0113 5.66921 14.7216Z" fill="#00CBA6"></path>
                  <path d="M19.3041 14.6089C18.9744 14.6089 18.6499 14.6537 18.3306 14.7216C19.2666 16.0113 19.8259 17.5922 19.8259 19.3045C19.8259 19.4882 19.7883 19.6624 19.7299 19.8263H23.478C23.766 19.8263 23.9998 19.5925 23.9998 19.3045C23.9998 16.7157 21.893 14.6089 19.3041 14.6089Z" fill="#00CBA6"></path>
                </svg>
              </div>
              <h3 class="font-heading text-lg font-medium mb-4">List of regular users</h3>
              <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto pl-6 border-l-4 border-green-500">
      <p class="font-heading text-xl sm:text-2xl mb-4">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the “excessive” amount of work behind building something new.</p>
      <div class="flex items-center">
        <img class="w-8 h-8 rounded-full mr-2" src="acros-assets/images/blog-content/man-32x32.png" alt="">
        <div>
          <span class="block text-sm leading-5 font-medium">Denny Bailey</span>
          <span class="text-sm leading-5 text-gray-300">CEO &amp; Founder at Wireframes</span>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mb-10">
      <span class="text-sm font-semibold uppercase">
        <span>Our</span>
        <span class="text-green-500">clients</span>
      </span>
      <h4 class="font-heading text-3xl sm:text-4xl mt-2">Trusted by brands all over the world</h4>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full sm:w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center border-r border-transparent md:border-gray-100">
          <img class="block" src="acros-assets/logo/slack.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center border-r border-transparent md:border-gray-100">
          <img class="block" src="acros-assets/logo/google.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center border-r border-transparent xl:border-gray-100">
          <img class="block" src="acros-assets/logo/coca-cola.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center border-r border-transparent md:border-gray-100">
          <img class="block" src="acros-assets/logo/adidas.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center border-r border-transparent md:border-gray-100">
          <img class="block" src="acros-assets/logo/audi.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center">
          <img class="block" src="acros-assets/logo/tinder.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-end -mx-4 mb-12">
      <div class="w-full lg:w-2/3 xl:w-1/2 px-4 mb-16 lg:mb-0">
        <div>
          <div class="text-sm mb-2 font-semibold text-gray-900 uppercase">
            <span>Our</span>
            <span class="text-green-500">testimonials</span>
          </div>
          <h1 class="font-heading text-3xl sm:text-4xl">What people says about us</h1>
        </div>
      </div>
      <div class="w-full lg:w-1/3 xl:w-1/2 px-4">
        <div class="flex items-center justify-end">
            <a x-on:click.prevent="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="group inline-flex items-center justify-center w-4 h-4 mr-2 rounded-full border border-gray-900" :class="{ 'border-gray-900': activeSlide == 0, 'border-transparent': activeSlide != 0 }" href="#">
                <div class="w-1 h-1 rounded-full" :class="{ 'bg-transparent': activeSlide == 1, 'bg-gray-900': activeSlide != 0 }"></div>
            </a>
            <a x-on:click.prevent="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="group inline-flex items-center justify-center w-4 h-4 mr-2 rounded-full border border-transparent" :class="{ 'border-gray-900': activeSlide == 1, 'border-transparent': activeSlide != 1 }" href="#">
                <div class="w-1 h-1 rounded-full bg-gray-900" :class="{ 'bg-transparent': activeSlide == 2, 'bg-gray-900': activeSlide != 1 }"></div>
            </a>
            <a x-on:click.prevent="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="group inline-flex items-center justify-center w-4 h-4 mr-2 rounded-full border border-transparent" :class="{ 'border-gray-900': activeSlide == 2, 'border-transparent': activeSlide != 2 }" href="#">
                <div class="w-1 h-1 rounded-full bg-gray-900" :class="{ 'bg-transparent': activeSlide == 3, 'bg-gray-900': activeSlide != 2 }"></div>
            </a>
            <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block ml-12">
                <svg width="15" height="26" viewBox="0 0 15 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.66663 1.33325L13.3333 12.9999L1.66663 24.6666" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </button>
        </div>
      </div>
    </div>
    <div class="max-w-md md:max-w-5xl mx-auto">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                    <div class="flex flex-wrap -mx-4">
                      <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
                        <div class="p-10 pb-6 bg-gray-50 rounded-md">
                          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
                          </svg>
                          <h3 class="font-heading text-lg mt-2 mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
                          <div class="flex items-center mb-6 sm:mb-0">
                            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                            <div>
                              <h4 class="text-sm font-medium">Denny Bailey</h4>
                              <span class="text-sm text-gray-300">CEO &amp; Founder</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="w-full md:w-1/2 px-4">
                        <div class="p-10 pb-6 bg-gray-50 rounded-md">
                          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
                          </svg>
                          <h3 class="font-heading text-lg mt-2 mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
                          <div class="flex items-center mb-6 sm:mb-0">
                            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                            <div>
                              <h4 class="text-sm font-medium">Denny Bailey</h4>
                              <span class="text-sm text-gray-300">CEO &amp; Founder</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
                    <div class="flex flex-wrap -mx-4">
                      <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
                        <div class="p-10 pb-6 bg-gray-50 rounded-md">
                          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
                          </svg>
                          <h3 class="font-heading text-lg mt-2 mb-6">Unlocking Creativity in Design: How to Break Free from Repetition and Inject Humor into Your Work</h3>
                          <div class="flex items-center mb-6 sm:mb-0">
                            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                            <div>
                              <h4 class="text-sm font-medium">Jenna Larson</h4>
                              <span class="text-sm text-gray-300">Creative Director</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="w-full md:w-1/2 px-4">
                        <div class="p-10 pb-6 bg-gray-50 rounded-md">
                          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
                          </svg>
                          <h3 class="font-heading text-lg mt-2 mb-6">Unlocking Creativity in Design: How to Break Free from Repetition and Inject Humor into Your Work</h3>
                          <div class="flex items-center mb-6 sm:mb-0">
                            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                            <div>
                              <h4 class="text-sm font-medium">Jenna Larson</h4>
                              <span class="text-sm text-gray-300">Creative Director</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-5">
                    <div class="flex flex-wrap -mx-4">
                      <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
                        <div class="p-10 pb-6 bg-gray-50 rounded-md">
                          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
                          </svg>
                          <h3 class="font-heading text-lg mt-2 mb-6">Crafting Authentic Brand Voice: Strategies to Avoid Non-Characteristic Language and Infuse Humor into Your Messaging</h3>
                          <div class="flex items-center mb-6 sm:mb-0">
                            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                            <div>
                              <h4 class="text-sm font-medium">Alex Chen</h4>
                              <span class="text-sm text-gray-300">Marketing Manager</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="w-full md:w-1/2 px-4">
                        <div class="p-10 pb-6 bg-gray-50 rounded-md">
                          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
                          </svg>
                          <h3 class="font-heading text-lg mt-2 mb-6">Crafting Authentic Brand Voice: Strategies to Avoid Non-Characteristic Language and Infuse Humor into Your Messaging</h3>
                          <div class="flex items-center mb-6 sm:mb-0">
                            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                            <div>
                              <h4 class="text-sm font-medium">Alex Chen</h4>
                              <span class="text-sm text-gray-300">Marketing Manager</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</section>

<section class="py-16" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-12">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/work-man-445x318.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-12">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/woman-445x264.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-12">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/robot-540x540.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-12">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/work-man-445x318.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-12">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/woman-445x264.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-4 mb-12">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/robot-540x540.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="hidden w-full md:w-1/2 xl:w-1/3 px-4 mb-12" :class="{ 'hidden': !showContent }">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/work-man-445x318.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">Unveiling the Layers of Lorem Ipsum</h3>
          <p class="leading-7 mb-4">Unveiling the Layers of Lorem Ipsum.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="hidden w-full md:w-1/2 xl:w-1/3 px-4 mb-12" :class="{ 'hidden': !showContent }">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/woman-445x264.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">Unveiling the Layers of Lorem Ipsum</h3>
          <p class="leading-7 mb-4">Unveiling the Layers of Lorem Ipsum.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="hidden w-full md:w-1/2 xl:w-1/3 px-4 mb-12" :class="{ 'hidden': !showContent }">
        <div class="max-w-sm mx-auto">
          <img class="block w-full h-64 mb-6 object-cover" src="acros-assets/images/blog/robot-540x540.jpg" alt="">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">Unveiling the Layers of Lorem Ipsum</h3>
          <p class="leading-7 mb-4">Unveiling the Layers of Lorem Ipsum.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="mt-12 text-center"><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Check all posts</a></div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="px-4 sm:px-10 py-4 bg-white">
    <div class="relative flex items-center justify-between">
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <a class="inline-block" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" alt="">
        </a>
      </div>
      <div class="w-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-50 hover:bg-gray-100 rounded-full">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.8 13.8L17 17M15.9333 8.46667C15.9333 12.5904 12.5904 15.9333 8.46667 15.9333C4.34294 15.9333 1 12.5904 1 8.46667C1 4.34294 4.34294 1 8.46667 1C12.5904 1 15.9333 4.34294 15.9333 8.46667Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="w-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-50 hover:bg-gray-100 rounded-full">
          <svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 9H1M19 1H1" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
    <nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li><a class="font-heading block text-base font-medium py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Home</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">About</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Company</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Services</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Testimonials</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <a class="block w-full py-4 px-4 mb-4 text-center font-heading font-medium text-base hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-200" href="#">Log in</a><a class="block w-full py-4 px-4 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="pt-12 pb-14">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
      <h3 class="font-heading text-2xl font-medium mb-8">When I was a developer, I often had a hundred questions when</h3>
      <p class="text-lg leading-8 mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <img class="block w-full rounded-md mb-2" src="acros-assets/images/blog-content/work-730x400.jpg" alt="">
      <div class="mb-6">
        <span class="text-sm text-gray-200">Source:</span>
        <a class="text-sm font-medium hover:underline" href="#">unsplash.com</a>
      </div>
      <p class="text-lg leading-8 mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="text-lg leading-8">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="py-16 px-8 bg-gray-900 bg-contain bg-no-repeat bg-center rounded-md" style="background-image: url('acros-assets/images/call-to-action/cta-10-bg.png');">
      <div class="max-w-lg mx-auto text-center">
        <h1 class="font-heading text-3xl sm:text-4xl text-white mb-6">Ready to get started?</h1>
        <p class="text-lg leading-8 text-white mb-10">If you have ever wondered how to develop your brand, this is the place for you.</p>
        <div class="sm:flex items-center justify-center"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Try demo</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-white hover:text-green-500 border border-white hover:border-green-500 rounded-sm transition duration-150" href="#">Learn more</a></div>
      </div>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-md">
          <span class="text-sm font-semibold uppercase">
            <span>Our</span>
            <span class="text-green-500">clients</span>
          </span>
          <h4 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">Trusted by brands all over the world</h4>
          <p class="leading-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap -mx-4 -mb-8">
          <div class="w-1/2 sm:w-1/3 px-4 mb-8">
            <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
              <img class="block" src="acros-assets/logo/slack.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3 px-4 mb-8">
            <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
              <img class="block" src="acros-assets/logo/google.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3 px-4 mb-8">
            <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
              <img class="block" src="acros-assets/logo/coca-cola.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3 px-4 mb-8">
            <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
              <img class="block" src="acros-assets/logo/adidas.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3 px-4 mb-8">
            <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
              <img class="block" src="acros-assets/logo/audi.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3 px-4 mb-8">
            <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
              <img class="block" src="acros-assets/logo/tinder.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3 px-4 mb-8">
            <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
              <img class="block" src="acros-assets/logo/tinder.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3 px-4 mb-8">
            <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
              <img class="block" src="acros-assets/logo/coca-cola.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3 px-4 mb-8">
            <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
              <img class="block" src="acros-assets/logo/google.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full xl:w-1/2 px-4 order-last xl:order-first">
        <img class="block max-w-md h-112 mx-auto rounded object-cover" src="acros-assets/images/features/meditation.png" alt="">
      </div>
      <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
        <div class="max-w-md">
          <h2 class="font-heading text-3xl sm:text-4xl mb-6">Lorem Ipsum dolor sit amet boulique</h2>
          <p class="leading-7 mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
        </div>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="max-w-xs mx-auto lg:mx-0">
              <div class="flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
                <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">Frequent authentication</h3>
              <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="max-w-xs mx-auto lg:mx-0">
              <div class="flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9998 11.4782C14.0169 11.4782 15.652 9.84306 15.652 7.82602C15.652 5.80897 14.0169 4.17383 11.9998 4.17383C9.98279 4.17383 8.34766 5.80897 8.34766 7.82602C8.34766 9.84306 9.98279 11.4782 11.9998 11.4782Z" fill="#00CBA6"></path>
                  <path d="M19.3045 13.565C20.7452 13.565 21.9132 12.3971 21.9132 10.9563C21.9132 9.5156 20.7452 8.34766 19.3045 8.34766C17.8637 8.34766 16.6958 9.5156 16.6958 10.9563C16.6958 12.3971 17.8637 13.565 19.3045 13.565Z" fill="#00CBA6"></path>
                  <path d="M4.76957 13.565C6.2103 13.565 7.37825 12.3971 7.37825 10.9563C7.37825 9.5156 6.2103 8.34766 4.76957 8.34766C3.32883 8.34766 2.16089 9.5156 2.16089 10.9563C2.16089 12.3971 3.32883 13.565 4.76957 13.565Z" fill="#00CBA6"></path>
                  <path d="M11.9999 12.522C8.26007 12.522 5.21729 15.5647 5.21729 19.3046C5.21729 19.5926 5.45104 19.8263 5.73904 19.8263H18.2608C18.5488 19.8263 18.7825 19.5926 18.7825 19.3046C18.7825 15.5647 15.7397 12.522 11.9999 12.522Z" fill="#00CBA6"></path>
                  <path d="M5.66921 14.7216C5.34991 14.6537 5.02537 14.6089 4.69565 14.6089C2.10678 14.6089 0 16.7157 0 19.3045C0 19.5925 0.233755 19.8263 0.521755 19.8263H4.26991C4.21146 19.6625 4.17389 19.4882 4.17389 19.3045C4.17389 17.5922 4.73321 16.0113 5.66921 14.7216Z" fill="#00CBA6"></path>
                  <path d="M19.3041 14.6089C18.9744 14.6089 18.6499 14.6537 18.3306 14.7216C19.2666 16.0113 19.8259 17.5922 19.8259 19.3045C19.8259 19.4882 19.7883 19.6624 19.7299 19.8263H23.478C23.766 19.8263 23.9998 19.5925 23.9998 19.3045C23.9998 16.7157 21.893 14.6089 19.3041 14.6089Z" fill="#00CBA6"></path>
                </svg>
              </div>
              <h3 class="font-heading text-lg font-medium mb-4">List of regular users</h3>
              <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mb-12">
      <div class="text-sm mb-2 font-semibold text-gray-900 uppercase">
        <span>Our</span>
        <span class="text-green-500">testimonials</span>
      </div>
      <h1 class="font-heading text-3xl sm:text-4xl">What people says about us</h1>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="max-w-sm mx-auto p-10 pb-6 bg-gray-50 rounded-md">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-lg mt-2 mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <div class="flex items-center">
            <img class="h-8 w-8 rounded-full mr-4" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="text-sm font-medium">Denny Bailey</h4>
              <span class="text-sm text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="max-w-sm mx-auto p-10 pb-6 bg-gray-50 rounded-md">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-lg mt-2 mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <div class="flex items-center">
            <img class="h-8 w-8 rounded-full mr-4" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="text-sm font-medium">Denny Bailey</h4>
              <span class="text-sm text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4">
        <div class="max-w-sm mx-auto p-10 pb-6 bg-gray-50 rounded-md">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-lg mt-2 mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <div class="flex items-center">
            <img class="h-8 w-8 rounded-full mr-4" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="text-sm font-medium">Denny Bailey</h4>
              <span class="text-sm text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-16 lg:pb-16 bg-gray-50 overflow-hidden">
  <img class="hidden lg:block absolute top-0 right-0 h-full w-1/2 object-cover" src="acros-assets/images/features/woman-man-smilling.jpg" alt="">
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/2">
      <div class="max-w-md xl:max-w-lg">
        <h2 class="font-heading text-3xl sm:text-4xl mb-6">Lorem Ipsum dolor sit amet boulique</h2>
        <p class="max-w-md text-lg leading-8 mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
        <div class="flex items-center mb-4">
          <div class="flex items-center justify-center w-12 h-12 p-3 mr-6 bg-white rounded">
            <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>
          <span class="font-heading font-medium">Lorem Ipsum dolor</span>
        </div>
        <div class="flex items-center mb-4">
          <div class="flex items-center justify-center w-12 h-12 p-3 mr-6 bg-white rounded">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3345 0.75H5.66549C2.64449 0.75 0.750488 2.889 0.750488 5.916V14.084C0.750488 17.111 2.63549 19.25 5.66549 19.25H14.3335C17.3645 19.25 19.2505 17.111 19.2505 14.084V5.916C19.2505 2.889 17.3645 0.75 14.3345 0.75Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.6925 9.99995C8.6925 11.0219 7.8635 11.8519 6.8405 11.8519C5.8185 11.8519 4.9895 11.0219 4.9895 9.99995C4.9895 8.97795 5.8185 8.14795 6.8405 8.14795C7.8635 8.14795 8.6925 8.97795 8.6925 9.99995Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.69238 10H15.0104V11.852" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12.1816 11.8515V9.99951" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <span class="font-heading font-medium">Phasellus sit amet blandit ligula</span>
        </div>
        <div class="flex items-center">
          <div class="flex items-center justify-center w-12 h-12 p-3 mr-6 bg-white rounded">
            <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M15.8572 17.417C17.7322 17.417 19.2502 15.898 19.2502 14.024V11.324C18.0102 11.324 17.0102 10.324 17.0102 9.085C17.0102 7.845 18.0102 6.846 19.2502 6.846L19.2482 4.143C19.2482 2.269 17.7302 0.75 15.8562 0.75H4.14424C2.27024 0.75 0.751244 2.269 0.751244 4.143L0.750244 6.933C1.98924 6.933 2.98924 7.845 2.98924 9.085C2.98924 10.324 1.98924 11.324 0.750244 11.324V14.024C0.750244 15.898 2.26824 17.417 4.14224 17.417H15.8572Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99981 10.8545L11.7398 11.7695C11.9028 11.8545 12.0938 11.7165 12.0628 11.5355L11.7298 9.59653L13.1388 8.22553C13.2708 8.09653 13.1978 7.87353 13.0158 7.84653L11.0698 7.56353L10.1988 5.79953C10.1178 5.63453 9.88281 5.63453 9.80081 5.79953L8.92981 7.56353L6.98481 7.84653C6.80281 7.87353 6.72981 8.09653 6.86181 8.22553L8.26981 9.59653L7.93681 11.5355C7.90581 11.7165 8.09681 11.8545 8.25981 11.7695L9.99981 10.8545Z" fill="white" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <span class="font-heading font-medium">Donec sodales nibh</span>
        </div>
      </div>
    </div>
  </div>
  <img class="block w-full lg:hidden mt-16 object-cover" src="acros-assets/images/features/woman-man-smilling.jpg" alt="">
</section>

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-md">
          <span class="text-sm font-semibold uppercase">
            <span>Our</span>
            <span class="text-green-500">clients</span>
          </span>
          <h4 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">Trusted by brands all over the world</h4>
          <p class="leading-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap -mx-4">
          <div class="w-1/2 sm:w-1/3">
            <div class="flex h-34 p-4 items-center justify-center border-r border-b border-gray-100">
              <img class="block" src="acros-assets/logo/slack.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3">
            <div class="flex h-34 p-4 items-center justify-center border-b border-r border-gray-100">
              <img class="block" src="acros-assets/logo/google.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3">
            <div class="flex h-34 p-4 items-center justify-center border-b border-r sm:border-r-0 border-gray-100">
              <img class="block" src="acros-assets/logo/coca-cola.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3">
            <div class="flex h-34 p-4 items-center justify-center border-r border-b border-gray-100">
              <img class="block" src="acros-assets/logo/adidas.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3">
            <div class="flex h-34 p-4 items-center justify-center border-r border-b border-gray-100">
              <img class="block" src="acros-assets/logo/audi.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3">
            <div class="flex h-34 p-4 items-center justify-center border-b border-gray-100">
              <img class="block" src="acros-assets/logo/tinder.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3">
            <div class="flex h-34 p-4 items-center justify-center border-r border-gray-100">
              <img class="block" src="acros-assets/logo/tinder.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3">
            <div class="flex h-34 p-4 items-center justify-center border-b sm:border-b-0 border-r border-gray-100">
              <img class="block" src="acros-assets/logo/coca-cola.svg" alt="">
            </div>
          </div>
          <div class="w-1/2 sm:w-1/3">
            <div class="flex h-34 p-4 items-center justify-center border-t border-r border-gray-100 sm:border-0 bg-white rounded-md">
              <img class="block" src="acros-assets/logo/google.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-16 overflow-hidden">
  <img class="absolute top-0 left-0 mt-20 object-contain" src="acros-assets/images/call-to-action/cta-10-bg.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-md lg:max-w-xl py-8 mx-auto">
          <div class="text-sm mb-2 font-semibold text-gray-900 uppercase">
            <span>Lorem</span>
            <span class="text-green-500">ipsum</span>
          </div>
          <h1 class="font-heading text-3xl sm:text-4xl mb-6">The latest version of this excellent product is waiting to&nbsp;deploy</h1>
          <p class="max-w-md text-lg leading-8 mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
          <div class="sm:flex items-center"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Active demo</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Share with friends</a></div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block mx-auto" src="acros-assets/images/call-to-action/cta-11-people.jpg" alt="">
      </div>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="px-4 sm:px-10 py-4 bg-white">
    <div class="flex items-center justify-between">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14">
            <a class="inline-block" href="#">
              <img src="acros-assets/logo/logo-acros-black.svg" alt="">
            </a>
          </div>
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center">
              <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">About</a></li>
              <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Company</a></li>
              <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Services</a></li>
              <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Testimonials</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="w-auto hidden lg:flex items-center"><a class="inline-block mr-12 font-heading font-medium text-base text-gray-900" href="#">Log in</a><a class="inline-block py-4 px-8 font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a></div>
      <div class="w-auto lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-50 hover:bg-gray-100 rounded-full">
          <svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 9H1M19 1H1" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
    <nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li><a class="font-heading block text-base font-medium py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Home</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">About</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Company</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Services</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Testimonials</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <a class="block w-full py-4 px-4 mb-4 text-center font-heading font-medium text-base hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-200" href="#">Log in</a><a class="block w-full py-4 px-4 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>