Shuffle Components in Shopal library

<section class="relative pb-32 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 6 }">
  <nav class="relative z-10">
    <div class="flex h-20 py-6 px-6 items-center justify-between bg-transparent relative">
      <a class="inline-block text-2xl font-bold mr-10" href="#">
        <img src="shopal-assets/logos/shopal-logo.svg" alt="">
      </a>
      <ul class="hidden lg:flex items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Category</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow">
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a>
              </div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Collection</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow">
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a>
              </div>
            </div>
          </button>
        </li>
        <li class="mr-6"><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Story</a></li>
        <li><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Brand</a></li>
      </ul>
      <div class="inline-flex items-center">
        <div class="hidden lg:flex">
          <a class="inline-block mr-6 text-green-500 hover:text-orange-500 transition duration-200" href="#">
            <svg width="20" height="24" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.44 0.100006C12.63 0.100006 11.01 0.980006 10 2.33001C8.99 0.980006 7.37 0.100006 5.56 0.100006C2.49 0.100006 0 2.60001 0 5.69001C0 6.88001 0.19 7.98001 0.52 9.00001C2.1 14 6.97 16.99 9.38 17.81C9.72 17.93 10.28 17.93 10.62 17.81C13.03 16.99 17.9 14 19.48 9.00001C19.81 7.98001 20 6.88001 20 5.69001C20 2.60001 17.51 0.100006 14.44 0.100006Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-block mr-6 text-green-500 hover:text-orange-500 transition duration-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.24 5.58H18.84L15.46 2.2C15.19 1.93 14.75 1.93 14.47 2.2C14.2 2.47 14.2 2.91 14.47 3.19L16.86 5.58H7.14L9.53 3.19C9.8 2.92 9.8 2.48 9.53 2.2C9.26 1.93 8.82 1.93 8.54 2.2L5.17 5.58H4.77C3.87 5.58 2 5.58 2 8.14C2 9.11 2.2 9.75 2.62 10.17C2.86 10.42 3.15 10.55 3.46 10.62C3.75 10.69 4.06 10.7 4.36 10.7H19.64C19.95 10.7 20.24 10.68 20.52 10.62C21.36 10.42 22 9.82 22 8.14C22 5.58 20.13 5.58 19.24 5.58Z" fill="currentColor"></path>
              <path d="M19.0499 12H4.86991C4.24991 12 3.77991 12.55 3.87991 13.16L4.71991 18.3C4.99991 20.02 5.74991 22 9.07991 22H14.6899C18.0599 22 18.6599 20.31 19.0199 18.42L20.0299 13.19C20.1499 12.57 19.6799 12 19.0499 12ZM10.6099 18.45C10.6099 18.84 10.2999 19.15 9.91991 19.15C9.52991 19.15 9.21991 18.84 9.21991 18.45V15.15C9.21991 14.77 9.52991 14.45 9.91991 14.45C10.2999 14.45 10.6099 14.77 10.6099 15.15V18.45ZM14.8899 18.45C14.8899 18.84 14.5799 19.15 14.1899 19.15C13.8099 19.15 13.4899 18.84 13.4899 18.45V15.15C13.4899 14.77 13.8099 14.45 14.1899 14.45C14.5799 14.45 14.8899 14.77 14.8899 15.15V18.45Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-block mr-6 text-green-500 hover:text-orange-500 transition duration-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.01 20.02C15.9861 20.02 20.02 15.9861 20.02 11.01C20.02 6.03391 15.9861 2 11.01 2C6.03391 2 2 6.03391 2 11.01C2 15.9861 6.03391 20.02 11.01 20.02Z" fill="currentColor"></path>
              <path d="M21.9901 18.95C21.6601 18.34 20.9601 18 20.0201 18C19.3101 18 18.7001 18.29 18.3401 18.79C17.9801 19.29 17.9001 19.96 18.1201 20.63C18.5501 21.93 19.3001 22.22 19.7101 22.27C19.7701 22.28 19.8301 22.28 19.9001 22.28C20.3401 22.28 21.0201 22.09 21.6801 21.1C22.2101 20.33 22.3101 19.56 21.9901 18.95Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-block mr-6 text-green-500 hover:text-orange-500 transition duration-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" fill="currentColor"></path>
              <path d="M11.9999 14.5C6.98991 14.5 2.90991 17.86 2.90991 22C2.90991 22.28 3.12991 22.5 3.40991 22.5H20.5899C20.8699 22.5 21.0899 22.28 21.0899 22C21.0899 17.86 17.0099 14.5 11.9999 14.5Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex p-1 items-center lg:text-green-500 hover:text-orange-500">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="hidden lg:block absolute bottom-0 left-0 max-w-2xs lg:max-w-sm">
    <img class="relative img-fluid w-64 xl:w-96 2xl:w-112" src="shopal-assets/background/purple-bg-shape2.png" alt="">
    <img class="absolute top-0 left-0 w-64 2xl:w-80 -mt-16 ml-6 img-fluid" src="shopal-assets/images/placeholder-photo1.png" alt="">
  </div>
  <div class="hidden lg:block max-w-2xs lg:max-w-md absolute top-0 right-0">
    <img class="relative img-fluid w-72 xl:w-96 2xl:w-112" src="shopal-assets/background/purple-bg-shape.png" alt="">
    <img class="absolute bottom-0 right-0 w-64 2xl:w-88 mr-6 -mb-24 img-fluid" src="shopal-assets/images/placeholder-photo2.png" alt="">
  </div>
  <div class="container px-4 pt-20 lg:pt-40 mx-auto relative">
    <div class="max-w-md xl:max-w-lg 2xl:max-w-xl mx-auto text-center">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Take care of your performance every day.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Elevating Your Brand Every Day.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Crafting a Memorable Brand Identity Through Daily Dedication and Sustained Effort, Building Trust and Resonance with Your Audience Over Time.</p>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Cultivating Excellence in Performance.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Harnessing Daily Efforts to Nurture a Brand That Captivates, Infusing Each Interaction with Authenticity and Quality to Forge Lasting Connections.</p>
                </div>
                <div x-ref="slide4" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Daily Practices for Brand Development.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Sculpting a Resonant Brand Image through Consistent Effort, Fostering Growth and Recognition Through Daily Refinement and Attention to Detail.</p>
                </div>
                <div x-ref="slide5" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Sustaining Excellence.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Nurturing Your Brand’s Reputation Through Daily Commitment, Cultivating a Culture of Excellence and Reliability to Inspire Loyalty and Confidence.</p>
                </div>
                <div x-ref="slide6" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">The Path to a Beloved Brand.</h1>
                    <p class="max-w-md mx-auto text-lg font-bold mb-12">Embracing Daily Rituals to Cultivate an Exceptional Brand Experience, Infusing Every Interaction with Care and Purpose to Build Lasting Relationships and Recognition.</p>
                </div>
            </div>
        </div>
      <div class="sm:flex mb-24 items-center justify-center">
        <a class="group relative inline-block h-12 w-full sm:w-48 mb-2 sm:mb-0 sm:mr-6 bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
              <span class="text-base font-black text-black">Check our Catalog</span>
            </div>
          </div>
        </a>
        <a class="group relative inline-block h-12 w-full sm:w-36 bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-orange-500 border-2 border-black rounded-md">
              <span class="text-base font-black text-white">Start Buying</span>
            </div>
          </div>
        </a>
      </div>
      <div class="flex items-center justify-center">
        <button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full bg-green-500 hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 0 }"></button>
        <button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 1 }"></button>
        <button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 2 }"></button>
        <button x-on:click="activeSlide = 3, slideWidth = $refs['slide4'].offsetWidth * 3" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 3 }"></button>
        <button x-on:click="activeSlide = 4, slideWidth = $refs['slide5'].offsetWidth * 4" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 4 }"></button>
        <button x-on:click="activeSlide = 5, slideWidth = $refs['slide6'].offsetWidth * 5" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 5 }"></button>
      </div>
    </div>
  </div>
  <div class="lg:hidden flex flex-wrap justify-between mt-32">
    <div class="w-full md:w-1/2 lg:w-1/3 mb-8 sm:mb-0">
      <div class="relative max-w-xs">
        <img class="relative img-fluid w-full" src="shopal-assets/background/purple-bg-shape2.png" alt="">
        <img class="absolute top-0 left-0 -mt-16 px-4 md:ml-6 img-fluid" src="shopal-assets/images/placeholder-photo1.png" alt="">
      </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/3">
      <div class="relative max-w-xs ml-auto">
        <img class="relative img-fluid w-full" src="shopal-assets/background/purple-bg-shape.png" alt="">
        <img class="absolute bottom-0 right-0 px-4 md:mr-6 -mb-24 img-fluid" src="shopal-assets/images/placeholder-photo2.png" alt="">
      </div>
    </div>
  </div>
  <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="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
          <li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
          <button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="p-6" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="relative pb-32 md:pb-52 px-4 sm:px-8 rounded-md shadow overflow-hidden">
    <img class="absolute top-0 left-0 w-full h-full object-cover" src="shopal-assets/background/background-office.png" alt="">
    <nav class="mb-24 md:mb-32">
      <div class="flex py-8 items-center justify-between bg-transparent relative">
        <a class="inline-block text-2xl font-bold mr-10" href="#">
          <img src="shopal-assets/logos/shopal-logo-white.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <li class="mr-6">
            <button class="relative group inline-flex items-center text-left text-base font-bold text-white hover:text-green-500">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
                <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
              </div>
            </button>
          </li>
          <li class="mr-6">
            <button class="relative group inline-flex items-center text-left text-base font-bold text-white hover:text-green-500">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
                <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
              </div>
            </button>
          </li>
          <li class="mr-6"><a class="inline-block font-bold text-white hover:text-green-500" href="#">Story</a></li>
          <li><a class="inline-block font-bold text-white hover:text-green-500" href="#">Brand</a></li>
        </ul>
        <div class="inline-flex items-center">
          <div class="hidden lg:flex">
            <a class="inline-block mr-6 text-green-500 hover:text-indigo-500 transition duration-200" href="#">
              <svg width="20" height="24" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.44 0.100006C12.63 0.100006 11.01 0.980006 10 2.33001C8.99 0.980006 7.37 0.100006 5.56 0.100006C2.49 0.100006 0 2.60001 0 5.69001C0 6.88001 0.19 7.98001 0.52 9.00001C2.1 14 6.97 16.99 9.38 17.81C9.72 17.93 10.28 17.93 10.62 17.81C13.03 16.99 17.9 14 19.48 9.00001C19.81 7.98001 20 6.88001 20 5.69001C20 2.60001 17.51 0.100006 14.44 0.100006Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block mr-6 text-green-500 hover:text-indigo-500 transition duration-200" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.24 5.58H18.84L15.46 2.2C15.19 1.93 14.75 1.93 14.47 2.2C14.2 2.47 14.2 2.91 14.47 3.19L16.86 5.58H7.14L9.53 3.19C9.8 2.92 9.8 2.48 9.53 2.2C9.26 1.93 8.82 1.93 8.54 2.2L5.17 5.58H4.77C3.87 5.58 2 5.58 2 8.14C2 9.11 2.2 9.75 2.62 10.17C2.86 10.42 3.15 10.55 3.46 10.62C3.75 10.69 4.06 10.7 4.36 10.7H19.64C19.95 10.7 20.24 10.68 20.52 10.62C21.36 10.42 22 9.82 22 8.14C22 5.58 20.13 5.58 19.24 5.58Z" fill="currentColor"></path>
                <path d="M19.0499 12H4.86991C4.24991 12 3.77991 12.55 3.87991 13.16L4.71991 18.3C4.99991 20.02 5.74991 22 9.07991 22H14.6899C18.0599 22 18.6599 20.31 19.0199 18.42L20.0299 13.19C20.1499 12.57 19.6799 12 19.0499 12ZM10.6099 18.45C10.6099 18.84 10.2999 19.15 9.91991 19.15C9.52991 19.15 9.21991 18.84 9.21991 18.45V15.15C9.21991 14.77 9.52991 14.45 9.91991 14.45C10.2999 14.45 10.6099 14.77 10.6099 15.15V18.45ZM14.8899 18.45C14.8899 18.84 14.5799 19.15 14.1899 19.15C13.8099 19.15 13.4899 18.84 13.4899 18.45V15.15C13.4899 14.77 13.8099 14.45 14.1899 14.45C14.5799 14.45 14.8899 14.77 14.8899 15.15V18.45Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block mr-6 text-green-500 hover:text-indigo-500 transition duration-200" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.01 20.02C15.9861 20.02 20.02 15.9861 20.02 11.01C20.02 6.03391 15.9861 2 11.01 2C6.03391 2 2 6.03391 2 11.01C2 15.9861 6.03391 20.02 11.01 20.02Z" fill="currentColor"></path>
                <path d="M21.9901 18.95C21.6601 18.34 20.9601 18 20.0201 18C19.3101 18 18.7001 18.29 18.3401 18.79C17.9801 19.29 17.9001 19.96 18.1201 20.63C18.5501 21.93 19.3001 22.22 19.7101 22.27C19.7701 22.28 19.8301 22.28 19.9001 22.28C20.3401 22.28 21.0201 22.09 21.6801 21.1C22.2101 20.33 22.3101 19.56 21.9901 18.95Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block mr-6 text-green-500 hover:text-indigo-500 transition duration-200" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" fill="currentColor"></path>
                <path d="M11.9999 14.5C6.98991 14.5 2.90991 17.86 2.90991 22C2.90991 22.28 3.12991 22.5 3.40991 22.5H20.5899C20.8699 22.5 21.0899 22.28 21.0899 22C21.0899 17.86 17.0099 14.5 11.9999 14.5Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex p-1 items-center text-green-500 hover:text-indigo-500">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </nav>
    <div class="container px-4 mx-auto relative">
      <div class="flex flex-wrap -mx-4 items-center justify-center md:justify-between">
        <div class="w-auto px-4 order-last md:order-first">
          <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block text-orange-500 hover:text-orange-600">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 0C8.96 0 0 8.96 0 20C0 31.04 8.96 40 20 40C31.04 40 40 31.04 40 20C40 8.96 31.04 0 20 0ZM27 21.5H16.62L20.06 24.94C20.64 25.52 20.64 26.48 20.06 27.06C19.76 27.36 19.38 27.5 19 27.5C18.62 27.5 18.24 27.36 17.94 27.06L11.94 21.06C11.36 20.48 11.36 19.52 11.94 18.94L17.94 12.94C18.52 12.36 19.48 12.36 20.06 12.94C20.64 13.52 20.64 14.48 20.06 15.06L16.62 18.5H27C27.82 18.5 28.5 19.18 28.5 20C28.5 20.82 27.82 21.5 27 21.5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="w-full md:w-2/3 lg:w-1/2 px-4 mb-24 md:mb-0">
          <div class="max-w-lg md:max-w-xl mx-auto text-center">
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                    <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                        <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black text-white mb-6">Take care of your performance every day.</h1>
                        <p class="max-w-md mx-auto text-lg font-bold text-white mb-12">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
                    </div>
                    <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                        <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black text-white mb-6">Elevating Your Brand Every Day.</h1>
                        <p class="max-w-md mx-auto text-lg font-bold text-white mb-12">Crafting a Memorable Brand Identity Through Daily Dedication and Sustained Effort, Building Trust and Resonance with Your Audience Over Time.</p>
                    </div>
                    <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                        <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black text-white mb-6">Cultivating Excellence in Performance.</h1>
                        <p class="max-w-md mx-auto text-lg font-bold text-white mb-12">Harnessing Daily Efforts to Nurture a Brand That Captivates, Infusing Each Interaction with Authenticity and Quality to Forge Lasting Connections.</p>
                    </div>
                </div>
            </div>
            <div class="sm:flex items-center justify-center">
              <a class="group relative inline-block h-12 w-full sm:w-48 mb-2 sm:mb-0 sm:mr-6 bg-blueGray-900 rounded-md" href="#">
                <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                  <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                    <span class="text-base font-black text-black">Check our Catalog</span>
                  </div>
                </div>
              </a>
              <a class="group relative inline-block h-12 w-full sm:w-36 bg-blueGray-900 rounded-md" href="#">
                <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                  <div class="flex h-full w-full items-center justify-center bg-orange-500 border-2 border-black rounded-md">
                    <span class="text-base font-black text-white">Start Buying</span>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="w-auto px-4 order-last md:order-none">
          <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block text-orange-500 hover:text-orange-600">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 0C31.04 0 40 8.96 40 20C40 31.04 31.04 40 20 40C8.96 40 0 31.04 0 20C0 8.96 8.96 0 20 0ZM13 21.5H23.38L19.94 24.94C19.36 25.52 19.36 26.48 19.94 27.06C20.24 27.36 20.62 27.5 21 27.5C21.38 27.5 21.76 27.36 22.06 27.06L28.06 21.06C28.64 20.48 28.64 19.52 28.06 18.94L22.06 12.94C21.48 12.36 20.52 12.36 19.94 12.94C19.36 13.52 19.36 14.48 19.94 15.06L23.38 18.5H13C12.18 18.5 11.5 19.18 11.5 20C11.5 20.82 12.18 21.5 13 21.5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <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="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
          <li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
          <button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="relative overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 6 }">
  <nav class="flex h-20 px-6 items-center justify-between bg-white relative z-10">
    <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-block text-2xl font-bold" href="#">
      <img src="shopal-assets/logos/shopal-logo.svg" alt="">
    </a>
    <div class="hidden lg:inline-flex items-center">
      <ul class="flex items-center">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Category</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Collection</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6"><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Story</a></li>
        <li><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Brand</a></li>
      </ul>
    </div>
    <div class="hidden lg:block w-auto">
      <a class="group inline-flex mr-8 items-center" href="#">
        <span class="text-green-500 transition duration-200">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.17496 16.6833C13.3217 16.6833 16.6833 13.3217 16.6833 9.17499C16.6833 5.02825 13.3217 1.66666 9.17496 1.66666C5.02822 1.66666 1.66663 5.02825 1.66663 9.17499C1.66663 13.3217 5.02822 16.6833 9.17496 16.6833Z" fill="currentColor"></path>
            <path d="M18.325 15.7917C18.05 15.2833 17.4666 15 16.6833 15C16.0916 15 15.5833 15.2417 15.2833 15.6583C14.9833 16.075 14.9166 16.6333 15.1 17.1917C15.4583 18.275 16.0833 18.5167 16.425 18.5583C16.475 18.5667 16.525 18.5667 16.5833 18.5667C16.95 18.5667 17.5166 18.4083 18.0666 17.5833C18.5083 16.9417 18.5916 16.3 18.325 15.7917Z" fill="currentColor"></path>
          </svg>
        </span>
        <span class="ml-2 font-bold text-gray-900 group-hover:text-indigo-500 transition duration-200">Search</span>
      </a>
      <a class="group inline-flex mr-8 items-center" href="#">
        <span class="text-green-500 transition duration-200">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0333 4.65H15.7L12.8833 1.83333C12.6583 1.60833 12.2916 1.60833 12.0583 1.83333C11.8333 2.05833 11.8333 2.425 12.0583 2.65833L14.05 4.65H5.94996L7.94163 2.65833C8.16663 2.43333 8.16663 2.06666 7.94163 1.83333C7.71663 1.60833 7.34996 1.60833 7.11663 1.83333L4.30829 4.65H3.97496C3.22496 4.65 1.66663 4.65 1.66663 6.78333C1.66663 7.59166 1.83329 8.125 2.18329 8.475C2.38329 8.68333 2.62496 8.79166 2.88329 8.85C3.12496 8.90833 3.38329 8.91666 3.63329 8.91666H16.3666C16.625 8.91666 16.8666 8.9 17.1 8.85C17.8 8.68333 18.3333 8.18333 18.3333 6.78333C18.3333 4.65 16.775 4.65 16.0333 4.65Z" fill="currentColor"></path>
            <path d="M15.875 10H4.05838C3.54171 10 3.15005 10.4583 3.23338 10.9667L3.93338 15.25C4.16671 16.6833 4.79171 18.3333 7.56671 18.3333H12.2417C15.05 18.3333 15.55 16.925 15.85 15.35L16.6917 10.9917C16.7917 10.475 16.4 10 15.875 10ZM8.84171 15.375C8.84171 15.7 8.58338 15.9583 8.26671 15.9583C7.94171 15.9583 7.68338 15.7 7.68338 15.375V12.625C7.68338 12.3083 7.94171 12.0417 8.26671 12.0417C8.58338 12.0417 8.84171 12.3083 8.84171 12.625V15.375ZM12.4084 15.375C12.4084 15.7 12.15 15.9583 11.825 15.9583C11.5084 15.9583 11.2417 15.7 11.2417 15.375V12.625C11.2417 12.3083 11.5084 12.0417 11.825 12.0417C12.15 12.0417 12.4084 12.3083 12.4084 12.625V15.375Z" fill="currentColor"></path>
          </svg>
        </span>
        <span class="ml-2 font-bold text-gray-900 group-hover:text-indigo-500 transition duration-200">My cart</span>
      </a>
      <a class="group inline-flex items-center" href="#">
        <span class="text-green-500 transition duration-200">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.99992 9.99999C12.3011 9.99999 14.1666 8.13451 14.1666 5.83332C14.1666 3.53214 12.3011 1.66666 9.99992 1.66666C7.69873 1.66666 5.83325 3.53214 5.83325 5.83332C5.83325 8.13451 7.69873 9.99999 9.99992 9.99999Z" fill="currentColor"></path>
            <path d="M10 12.0833C5.82505 12.0833 2.42505 14.8833 2.42505 18.3333C2.42505 18.5667 2.60838 18.75 2.84172 18.75H17.1584C17.3917 18.75 17.575 18.5667 17.575 18.3333C17.575 14.8833 14.175 12.0833 10 12.0833Z" fill="currentColor"></path>
          </svg>
        </span>
        <span class="ml-2 font-bold text-gray-900 group-hover:text-indigo-500 transition duration-200">Login</span>
      </a>
    </div>
    <div class="lg:hidden ml-auto">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <img class="hidden lg:block absolute top-0 right-0 img-fluid w-full max-w-xl xl:max-w-3xl mt-12 xl:mt-0" src="shopal-assets/images/placeholder-with-shape-headphones.png" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-md xl:max-w-lg 2xl:max-w-xl mx-auto lg:mx-0 pt-20 xl:pt-32 lg:pb-44">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Take care of your performance every day.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Elevating Your Brand Every Day.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Crafting a Memorable Brand Identity Through Daily Dedication and Sustained Effort, Building Trust and Resonance with Your Audience Over Time.</p>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Cultivating Excellence in Performance.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Harnessing Daily Efforts to Nurture a Brand That Captivates, Infusing Each Interaction with Authenticity and Quality to Forge Lasting Connections.</p>
                </div>
                <div x-ref="slide4" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Daily Practices for Brand Development.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Sculpting a Resonant Brand Image through Consistent Effort, Fostering Growth and Recognition Through Daily Refinement and Attention to Detail.</p>
                </div>
                <div x-ref="slide5" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Sustaining Excellence.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Nurturing Your Brand’s Reputation Through Daily Commitment, Cultivating a Culture of Excellence and Reliability to Inspire Loyalty and Confidence.</p>
                </div>
                <div x-ref="slide6" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">The Path to a Beloved Brand.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Embracing Daily Rituals to Cultivate an Exceptional Brand Experience, Infusing Every Interaction with Care and Purpose to Build Lasting Relationships and Recognition.</p>
                </div>
            </div>
        </div>
      <div class="sm:flex mb-24 items-center">
        <a class="group relative inline-block h-12 w-full sm:w-48 mb-2 sm:mb-0 sm:mr-6 bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
              <span class="text-base font-black text-black">Check our Catalog</span>
            </div>
          </div>
        </a>
        <a class="group relative inline-block h-12 w-full sm:w-36 bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-orange-500 border-2 border-black rounded-md">
              <span class="text-base font-black text-white">Start Buying</span>
            </div>
          </div>
        </a>
      </div>
      <div class="flex items-center">
        <button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full bg-green-500 hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 0 }"></button>
        <button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 1 }"></button>
        <button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 2 }"></button>
        <button x-on:click="activeSlide = 3, slideWidth = $refs['slide4'].offsetWidth * 3" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 3 }"></button>
        <button x-on:click="activeSlide = 4, slideWidth = $refs['slide5'].offsetWidth * 4" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 4 }"></button>
        <button x-on:click="activeSlide = 5, slideWidth = $refs['slide6'].offsetWidth * 5" class="inline-block mr-3 w-2 h-2 border-2 border-black rounded-full hover:bg-green-500" :class="{ 'bg-green-500': activeSlide == 5 }"></button>
      </div>
    </div>
  </div>
  <img class="lg:hidden img-fluid ml-auto mt-12" src="shopal-assets/images/placeholder-with-shape-headphones.png" alt="">
  <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="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
          <li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
          <button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="relative overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 6 }">
  <nav class="flex h-20 px-6 items-center justify-between bg-white relative z-10">
    <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-block text-2xl font-bold" href="#">
      <img src="shopal-assets/logos/shopal-logo.svg" alt="">
    </a>
    <div class="hidden lg:inline-flex items-center">
      <ul class="flex items-center">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Category</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Collection</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6"><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Story</a></li>
        <li><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Brand</a></li>
      </ul>
    </div>
    <div class="hidden lg:block w-auto">
      <a class="group inline-flex mr-8 items-center" href="#">
        <span class="text-green-500 transition duration-200">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.17496 16.6833C13.3217 16.6833 16.6833 13.3217 16.6833 9.17499C16.6833 5.02825 13.3217 1.66666 9.17496 1.66666C5.02822 1.66666 1.66663 5.02825 1.66663 9.17499C1.66663 13.3217 5.02822 16.6833 9.17496 16.6833Z" fill="currentColor"></path>
            <path d="M18.325 15.7917C18.05 15.2833 17.4666 15 16.6833 15C16.0916 15 15.5833 15.2417 15.2833 15.6583C14.9833 16.075 14.9166 16.6333 15.1 17.1917C15.4583 18.275 16.0833 18.5167 16.425 18.5583C16.475 18.5667 16.525 18.5667 16.5833 18.5667C16.95 18.5667 17.5166 18.4083 18.0666 17.5833C18.5083 16.9417 18.5916 16.3 18.325 15.7917Z" fill="currentColor"></path>
          </svg>
        </span>
        <span class="ml-2 font-bold text-gray-900 group-hover:text-indigo-500 transition duration-200">Search</span>
      </a>
      <a class="group inline-flex mr-8 items-center" href="#">
        <span class="text-green-500 transition duration-200">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0333 4.65H15.7L12.8833 1.83333C12.6583 1.60833 12.2916 1.60833 12.0583 1.83333C11.8333 2.05833 11.8333 2.425 12.0583 2.65833L14.05 4.65H5.94996L7.94163 2.65833C8.16663 2.43333 8.16663 2.06666 7.94163 1.83333C7.71663 1.60833 7.34996 1.60833 7.11663 1.83333L4.30829 4.65H3.97496C3.22496 4.65 1.66663 4.65 1.66663 6.78333C1.66663 7.59166 1.83329 8.125 2.18329 8.475C2.38329 8.68333 2.62496 8.79166 2.88329 8.85C3.12496 8.90833 3.38329 8.91666 3.63329 8.91666H16.3666C16.625 8.91666 16.8666 8.9 17.1 8.85C17.8 8.68333 18.3333 8.18333 18.3333 6.78333C18.3333 4.65 16.775 4.65 16.0333 4.65Z" fill="currentColor"></path>
            <path d="M15.875 10H4.05838C3.54171 10 3.15005 10.4583 3.23338 10.9667L3.93338 15.25C4.16671 16.6833 4.79171 18.3333 7.56671 18.3333H12.2417C15.05 18.3333 15.55 16.925 15.85 15.35L16.6917 10.9917C16.7917 10.475 16.4 10 15.875 10ZM8.84171 15.375C8.84171 15.7 8.58338 15.9583 8.26671 15.9583C7.94171 15.9583 7.68338 15.7 7.68338 15.375V12.625C7.68338 12.3083 7.94171 12.0417 8.26671 12.0417C8.58338 12.0417 8.84171 12.3083 8.84171 12.625V15.375ZM12.4084 15.375C12.4084 15.7 12.15 15.9583 11.825 15.9583C11.5084 15.9583 11.2417 15.7 11.2417 15.375V12.625C11.2417 12.3083 11.5084 12.0417 11.825 12.0417C12.15 12.0417 12.4084 12.3083 12.4084 12.625V15.375Z" fill="currentColor"></path>
          </svg>
        </span>
        <span class="ml-2 font-bold text-gray-900 group-hover:text-indigo-500 transition duration-200">My cart</span>
      </a>
      <a class="group inline-flex items-center" href="#">
        <span class="text-green-500 transition duration-200">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.99992 9.99999C12.3011 9.99999 14.1666 8.13451 14.1666 5.83332C14.1666 3.53214 12.3011 1.66666 9.99992 1.66666C7.69873 1.66666 5.83325 3.53214 5.83325 5.83332C5.83325 8.13451 7.69873 9.99999 9.99992 9.99999Z" fill="currentColor"></path>
            <path d="M10 12.0833C5.82505 12.0833 2.42505 14.8833 2.42505 18.3333C2.42505 18.5667 2.60838 18.75 2.84172 18.75H17.1584C17.3917 18.75 17.575 18.5667 17.575 18.3333C17.575 14.8833 14.175 12.0833 10 12.0833Z" fill="currentColor"></path>
          </svg>
        </span>
        <span class="ml-2 font-bold text-gray-900 group-hover:text-indigo-500 transition duration-200">Login</span>
      </a>
    </div>
    <div class="lg:hidden ml-auto">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <img class="hidden lg:block absolute top-0 right-0 img-fluid max-w-xl mt-32 xl:max-w-none" src="shopal-assets/images/shapes-with-photos.png" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-md xl:max-w-lg 2xl:max-w-xl mx-auto lg:mx-0 pt-20 lg:pt-32 lg:pb-44">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Take care of your performance every day.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Elevating Your Brand Every Day.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Crafting a Memorable Brand Identity Through Daily Dedication and Sustained Effort, Building Trust and Resonance with Your Audience Over Time.</p>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Cultivating Excellence in Performance.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Harnessing Daily Efforts to Nurture a Brand That Captivates, Infusing Each Interaction with Authenticity and Quality to Forge Lasting Connections.</p>
                </div>
                <div x-ref="slide4" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Daily Practices for Brand Development.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Sculpting a Resonant Brand Image through Consistent Effort, Fostering Growth and Recognition Through Daily Refinement and Attention to Detail.</p>
                </div>
                <div x-ref="slide5" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Sustaining Excellence.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Nurturing Your Brand’s Reputation Through Daily Commitment, Cultivating a Culture of Excellence and Reliability to Inspire Loyalty and Confidence.</p>
                </div>
                <div x-ref="slide6" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">The Path to a Beloved Brand.</h1>
                    <p class="max-w-md text-lg font-bold mb-12">Embracing Daily Rituals to Cultivate an Exceptional Brand Experience, Infusing Every Interaction with Care and Purpose to Build Lasting Relationships and Recognition.</p>
                </div>
            </div>
        </div>
      <div class="sm:flex mb-24 items-center">
        <a class="group relative inline-block h-12 w-full sm:w-48 mb-2 sm:mb-0 sm:mr-6 bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
              <span class="text-base font-black text-black">Check our Catalog</span>
            </div>
          </div>
        </a>
        <a class="group relative inline-block h-12 w-full sm:w-36 bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-indigo-500 border-2 border-black rounded-md">
              <span class="text-base font-black text-white">Start Buying</span>
            </div>
          </div>
        </a>
      </div>
      <div class="flex items-center">
        <button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="inline-block mr-3 w-2 h-2 border-2 rounded-full bg-green-500 border-green-500 hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 0, 'border-black': activeSlide != 0 }"></button>
        <button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="inline-block mr-3 w-2 h-2 border-2 rounded-full border-black hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 1, 'border-black': activeSlide != 1 }"></button>
        <button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="inline-block mr-3 w-2 h-2 border-2 rounded-full border-black hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 2, 'border-black': activeSlide != 2 }"></button>
        <button x-on:click="activeSlide = 3, slideWidth = $refs['slide4'].offsetWidth * 3" class="inline-block mr-3 w-2 h-2 border-2 rounded-full border-black hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 3, 'border-black': activeSlide != 3 }"></button>
        <button x-on:click="activeSlide = 4, slideWidth = $refs['slide5'].offsetWidth * 4" class="inline-block mr-3 w-2 h-2 border-2 rounded-full border-black hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 4, 'border-black': activeSlide != 4 }"></button>
        <button x-on:click="activeSlide = 5, slideWidth = $refs['slide6'].offsetWidth * 5" class="inline-block mr-3 w-2 h-2 border-2 rounded-full border-black hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 5, 'border-black': activeSlide != 5 }"></button>
      </div>
    </div>
  </div>
  <img class="lg:hidden img-fluid pl-5 ml-auto mt-24" src="shopal-assets/images/shapes-with-photos.png" alt="">
  <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="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
          <li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
          <button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="relative pb-24 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 6 }">
  <nav class="flex h-20 px-6 items-center justify-between bg-white relative">
    <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-block text-2xl font-bold" href="#">
      <img src="shopal-assets/logos/shopal-logo.svg" alt="">
    </a>
    <div class="hidden lg:inline-flex items-center">
      <ul class="flex items-center">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Category</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Collection</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6"><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Story</a></li>
        <li><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Brand</a></li>
      </ul>
    </div>
    <div class="hidden lg:block w-auto">
      <a class="inline-block mr-8 text-gray-900 hover:text-indigo-500 transition duration-150" href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19.24 5.58006H18.84L15.46 2.20006C15.19 1.93006 14.75 1.93006 14.47 2.20006C14.2 2.47006 14.2 2.91006 14.47 3.19006L16.86 5.58006H7.14L9.53 3.19006C9.8 2.92006 9.8 2.48006 9.53 2.20006C9.26 1.93006 8.82 1.93006 8.54 2.20006L5.17 5.58006H4.77C3.87 5.58006 2 5.58006 2 8.14006C2 9.11006 2.2 9.75006 2.62 10.1701C2.86 10.4201 3.15 10.5501 3.46 10.6201C3.75 10.6901 4.06 10.7001 4.36 10.7001H19.64C19.95 10.7001 20.24 10.6801 20.52 10.6201C21.36 10.4201 22 9.82006 22 8.14006C22 5.58006 20.13 5.58006 19.24 5.58006Z" fill="currentColor"></path>
          <path d="M19.0502 12H4.87016C4.25016 12 3.78016 12.55 3.88016 13.16L4.72016 18.3C5.00016 20.02 5.75015 22 9.08015 22H14.6902C18.0602 22 18.6602 20.31 19.0202 18.42L20.0302 13.19C20.1502 12.57 19.6802 12 19.0502 12ZM10.6102 18.45C10.6102 18.84 10.3002 19.15 9.92016 19.15C9.53016 19.15 9.22016 18.84 9.22016 18.45V15.15C9.22016 14.77 9.53016 14.45 9.92016 14.45C10.3002 14.45 10.6102 14.77 10.6102 15.15V18.45ZM14.8902 18.45C14.8902 18.84 14.5802 19.15 14.1902 19.15C13.8102 19.15 13.4902 18.84 13.4902 18.45V15.15C13.4902 14.77 13.8102 14.45 14.1902 14.45C14.5802 14.45 14.8902 14.77 14.8902 15.15V18.45Z" fill="currentColor"></path>
        </svg>
      </a>
      <a class="inline-block text-gray-900 hover:text-indigo-500 transition duration-150" href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" fill="currentColor"></path>
          <path d="M12.0002 14.5C6.99016 14.5 2.91016 17.86 2.91016 22C2.91016 22.28 3.13016 22.5 3.41016 22.5H20.5902C20.8702 22.5 21.0902 22.28 21.0902 22C21.0902 17.86 17.0102 14.5 12.0002 14.5Z" fill="currentColor"></path>
        </svg>
      </a>
    </div>
    <div class="lg:hidden ml-auto">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center justify-between">
      <div class="w-full xl:w-2/5 px-4 mb-18 xl:mb-0 pt-20 xl:pt-32 xl:pb-44">
        <div class="max-w-md xl:max-w-lg 2xl:max-w-xl mx-auto">
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                    <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                        <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Take care of your performance every day.</h1>
                        <p class="max-w-md text-lg font-bold mb-12">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
                    </div>
                    <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                        <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Elevating Your Brand Every Day.</h1>
                        <p class="max-w-md text-lg font-bold mb-12">Crafting a Memorable Brand Identity Through Daily Dedication and Sustained Effort, Building Trust and Resonance with Your Audience Over Time.</p>
                    </div>
                    <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                        <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Cultivating Excellence in Performance.</h1>
                        <p class="max-w-md text-lg font-bold mb-12">Harnessing Daily Efforts to Nurture a Brand That Captivates, Infusing Each Interaction with Authenticity and Quality to Forge Lasting Connections.</p>
                    </div>
                    <div x-ref="slide4" class="flex-shrink-0 w-full p-3">
                        <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Daily Practices for Brand Development.</h1>
                        <p class="max-w-md text-lg font-bold mb-12">Sculpting a Resonant Brand Image through Consistent Effort, Fostering Growth and Recognition Through Daily Refinement and Attention to Detail.</p>
                    </div>
                    <div x-ref="slide5" class="flex-shrink-0 w-full p-3">
                        <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">Sustaining Excellence.</h1>
                        <p class="max-w-md text-lg font-bold mb-12">Nurturing Your Brand’s Reputation Through Daily Commitment, Cultivating a Culture of Excellence and Reliability to Inspire Loyalty and Confidence.</p>
                    </div>
                    <div x-ref="slide6" class="flex-shrink-0 w-full p-3">
                        <h1 class="font-heading text-3xl xs:text-4xl 2xl:text-5xl font-black mb-6">The Path to a Beloved Brand.</h1>
                        <p class="max-w-md text-lg font-bold mb-12">Embracing Daily Rituals to Cultivate an Exceptional Brand Experience, Infusing Every Interaction with Care and Purpose to Build Lasting Relationships and Recognition.</p>
                    </div>
                </div>
            </div>
          <div class="sm:flex mb-24 items-center">
            <a class="group relative inline-block h-12 w-full sm:w-48 mb-2 sm:mb-0 sm:mr-6 bg-blueGray-900 rounded-md" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                  <span class="text-base font-black text-black">Check our Catalog</span>
                </div>
              </div>
            </a>
            <a class="group relative inline-block h-12 w-full sm:w-36 bg-blueGray-900 rounded-md" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-indigo-500 border-2 border-black rounded-md">
                  <span class="text-base font-black text-white">Start Buying</span>
                </div>
              </div>
            </a>
          </div>
          <div class="flex items-center">
            <button x-on:click="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="inline-block mr-3 w-2 h-2 border-2 rounded-full bg-green-500 border-green-500 hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 0, 'border-black': activeSlide != 0 }"></button>
            <button x-on:click="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="inline-block mr-3 w-2 h-2 border-2 rounded-full border-black hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 1, 'border-black': activeSlide != 1 }"></button>
            <button x-on:click="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="inline-block mr-3 w-2 h-2 border-2 rounded-full border-black hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 2, 'border-black': activeSlide != 2 }"></button>
            <button x-on:click="activeSlide = 3, slideWidth = $refs['slide4'].offsetWidth * 3" class="inline-block mr-3 w-2 h-2 border-2 rounded-full border-black hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 3, 'border-black': activeSlide != 3 }"></button>
            <button x-on:click="activeSlide = 4, slideWidth = $refs['slide5'].offsetWidth * 4" class="inline-block mr-3 w-2 h-2 border-2 rounded-full border-black hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 4, 'border-black': activeSlide != 4 }"></button>
            <button x-on:click="activeSlide = 5, slideWidth = $refs['slide6'].offsetWidth * 5" class="inline-block mr-3 w-2 h-2 border-2 rounded-full border-black hover:bg-green-500 hover:border-green-500" :class="{ 'bg-green-500 border-green-500': activeSlide == 5, 'border-black': activeSlide != 5 }"></button>
          </div>
        </div>
      </div>
      <div class="w-full xl:w-3/5 px-4">
        <img class="img-fluid w-full max-w-md xl:max-w-xl 2xl:max-w-2xl mx-auto xl:mr-0" src="shopal-assets/images/four-photos-with-shapes.png" alt="">
      </div>
    </div>
  </div>
  <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="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
          <li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
          <button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative z-50">
    <div class="flex h-20 py-3 px-6 items-center bg-black">
      <a class="inline-block text-2xl font-bold mr-8" href="#">
        <img src="shopal-assets/logos/shopal-logo-white.svg" alt="">
      </a>
      <div class="hidden md:inline-flex h-10 px-4 py-2 items-center border-2 border-white rounded-md">
        <input class="text-white text-sm font-bold placeholder-white outline-none bg-transparent" type="search" placeholder="Search now...">
        <button class="inline-block" type="submit">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M18.9299 20.6898C19.4599 22.2898 20.6699 22.4498 21.5999 21.0498C22.4499 19.7698 21.8899 18.7198 20.3499 18.7198C19.2099 18.7098 18.5699 19.5998 18.9299 20.6898Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="hidden md:block w-auto ml-auto">
        <a class="group inline-flex mr-8 items-center" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0332 4.65H15.6998L12.8832 1.83333C12.6582 1.60833 12.2915 1.60833 12.0582 1.83333C11.8332 2.05833 11.8332 2.425 12.0582 2.65833L14.0498 4.65H5.94984L7.9415 2.65833C8.1665 2.43333 8.1665 2.06666 7.9415 1.83333C7.7165 1.60833 7.34984 1.60833 7.1165 1.83333L4.30817 4.65H3.97484C3.22484 4.65 1.6665 4.65 1.6665 6.78333C1.6665 7.59166 1.83317 8.125 2.18317 8.475C2.38317 8.68333 2.62484 8.79166 2.88317 8.85C3.12484 8.90833 3.38317 8.91666 3.63317 8.91666H16.3665C16.6248 8.91666 16.8665 8.9 17.0998 8.85C17.7998 8.68333 18.3332 8.18333 18.3332 6.78333C18.3332 4.65 16.7748 4.65 16.0332 4.65Z" fill="#AFFF0F"></path>
            <path d="M15.875 10H4.05838C3.54171 10 3.15005 10.4583 3.23338 10.9667L3.93338 15.25C4.16671 16.6833 4.79171 18.3333 7.56671 18.3333H12.2417C15.05 18.3333 15.55 16.925 15.85 15.35L16.6917 10.9917C16.7917 10.475 16.4 10 15.875 10ZM8.84171 15.375C8.84171 15.7 8.58338 15.9583 8.26671 15.9583C7.94171 15.9583 7.68338 15.7 7.68338 15.375V12.625C7.68338 12.3083 7.94171 12.0417 8.26671 12.0417C8.58338 12.0417 8.84171 12.3083 8.84171 12.625V15.375ZM12.4084 15.375C12.4084 15.7 12.15 15.9583 11.825 15.9583C11.5084 15.9583 11.2417 15.7 11.2417 15.375V12.625C11.2417 12.3083 11.5084 12.0417 11.825 12.0417C12.15 12.0417 12.4084 12.3083 12.4084 12.625V15.375Z" fill="#AFFF0F"></path>
          </svg>
          <span class="ml-2 text-white group-hover:text-green-500 font-bold">My cart</span>
        </a>
        <a class="group inline-flex mr-8 items-center" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.0002 9.99999C12.3013 9.99999 14.1668 8.13451 14.1668 5.83332C14.1668 3.53214 12.3013 1.66666 10.0002 1.66666C7.69898 1.66666 5.8335 3.53214 5.8335 5.83332C5.8335 8.13451 7.69898 9.99999 10.0002 9.99999Z" fill="#AFFF0F"></path>
            <path d="M9.9998 12.0833C5.8248 12.0833 2.4248 14.8833 2.4248 18.3333C2.4248 18.5667 2.60814 18.75 2.84147 18.75H17.1581C17.3915 18.75 17.5748 18.5667 17.5748 18.3333C17.5748 14.8833 14.1748 12.0833 9.9998 12.0833Z" fill="#AFFF0F"></path>
          </svg>
          <span class="ml-2 text-white group-hover:text-green-500 font-bold">Login</span>
        </a>
      </div>
    </div>
    <div class="flex h-12 py-6 px-6 items-center justify-between bg-green-500 relative">
      <ul class="hidden md:flex items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Home</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow">
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a>
              </div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Pages</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow">
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a>
              </div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Products</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6"><a class="inline-block font-bold text-black hover:text-indigo-500" href="#">Blog</a></li>
        <li class="mr-6"><a class="inline-block font-bold text-black hover:text-indigo-500" href="#">Shop</a></li>
        <li><a class="inline-block font-bold text-black hover:text-indigo-500" href="#">Contact</a></li>
      </ul>
      <div class="md:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="relative py-24">
    <img class="absolute top-0 left-0 w-full h-full img-fluid object-cover" src="shopal-assets/background/background-office.png" alt="">
    <div class="container px-4 mx-auto relative">
      <div class="max-w-sm md:max-w-xl mx-auto mb-24 text-center">
        <h1 class="font-heading text-3xl sm:text-4xl xl:text-5xl text-white font-black mb-5">Take care of your performance every day.</h1>
        <div class="xs:flex mb-24 items-center justify-center">
          <a class="group relative inline-block h-12 w-full xs:w-48 mb-2 xs:mb-0 xs:mr-6 bg-blueGray-900 rounded-md" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                <span class="text-base font-black text-black">Check our Catalog</span>
              </div>
            </div>
          </a>
          <a class="group relative inline-block h-12 w-full xs:w-36 bg-blueGray-900 rounded-md" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-orange-500 border-2 border-black rounded-md">
                <span class="text-base font-black text-white">Start Buying</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="sm:max-w-xl xl:max-w-6xl mx-auto">
        <h3 class="text-center font-black text-white mb-4">TOP PRODUCTS</h3>
        <div class="flex flex-wrap -mx-3 -mb-6 justify-center items-center">
          <div class="w-full xs:w-1/2 sm:w-1/3 xl:w-1/5 px-3 mb-6">
            <a class="flex w-full max-w-2xs mx-auto items-center p-2 bg-white hover:bg-indigo-500 rounded-md shadow transition duration-200 ease-out" href="#">
              <img class="w-20 h-20 rounded-md" src="shopal-assets/images/item-photo1.png" alt="">
              <div class="pl-3">
                <h4 class="text-sm font-black mb-1">Item Name 1</h4>
                <span class="font-bold text-green-700">$59.99</span>
              </div>
            </a>
          </div>
          <div class="w-full xs:w-1/2 sm:w-1/3 xl:w-1/5 px-3 mb-6">
            <a class="flex w-full max-w-2xs mx-auto items-center p-2 bg-white hover:bg-indigo-500 rounded-md shadow transition duration-200 ease-out" href="#">
              <img class="w-20 h-20 rounded-md" src="shopal-assets/images/item-photo1.png" alt="">
              <div class="pl-3">
                <h4 class="text-sm font-black mb-1">Item Name 1</h4>
                <span class="font-bold text-green-700">$59.99</span>
              </div>
            </a>
          </div>
          <div class="w-full xs:w-1/2 sm:w-1/3 xl:w-1/5 px-3 mb-6">
            <a class="flex w-full max-w-2xs mx-auto items-center p-2 bg-white hover:bg-indigo-500 rounded-md shadow transition duration-200 ease-out" href="#">
              <img class="w-20 h-20 rounded-md" src="shopal-assets/images/item-photo1.png" alt="">
              <div class="pl-3">
                <h4 class="text-sm font-black mb-1">Item Name 1</h4>
                <span class="font-bold text-green-700">$59.99</span>
              </div>
            </a>
          </div>
          <div class="w-full xs:w-1/2 sm:w-1/3 xl:w-1/5 px-3 mb-6">
            <a class="flex w-full max-w-2xs mx-auto items-center p-2 bg-white hover:bg-indigo-500 rounded-md shadow transition duration-200 ease-out" href="#">
              <img class="w-20 h-20 rounded-md" src="shopal-assets/images/item-photo1.png" alt="">
              <div class="pl-3">
                <h4 class="text-sm font-black mb-1">Item Name 1</h4>
                <span class="font-bold text-green-700">$59.99</span>
              </div>
            </a>
          </div>
          <div class="w-full xs:w-1/2 sm:w-1/3 xl:w-1/5 px-3 mb-6">
            <a class="flex w-full max-w-2xs mx-auto items-center p-2 bg-white hover:bg-indigo-500 rounded-md shadow transition duration-200 ease-out" href="#">
              <img class="w-20 h-20 rounded-md" src="shopal-assets/images/item-photo1.png" alt="">
              <div class="pl-3">
                <h4 class="text-sm font-black mb-1">Item Name 1</h4>
                <span class="font-bold text-green-700">$59.99</span>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <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="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2">
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a>
                <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a>
              </div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
          <li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
          <button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="relative pb-12 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <nav>
    <div class="flex h-20 py-3 px-6 items-center bg-white relative">
      <a class="inline-block text-2xl font-bold" href="#">
        <img src="shopal-assets/logos/shopal-logo.svg" alt="">
      </a>
      <div class="hidden lg:inline-flex h-10 w-full max-w-sm px-4 py-2 items-center justify-between border-2 border-black rounded-md absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <input class="text-black text-sm font-bold placeholder-black outline-none bg-transparent" type="search" placeholder="Search now...">
        <button class="inline-block" type="submit">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M18.9299 20.6898C19.4599 22.2898 20.6699 22.4498 21.5999 21.0498C22.4499 19.7698 21.8899 18.7198 20.3499 18.7198C19.2099 18.7098 18.5699 19.5998 18.9299 20.6898Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="w-auto ml-auto">
        <div class="inline-flex items-center">
          <div class="hidden md:flex">
            <a class="inline-block mr-6 text-gray-900 hover:text-indigo-500 transition duration-300" href="#">
              <svg width="20" height="24" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.44 0.100006C12.63 0.100006 11.01 0.980006 10 2.33001C8.99 0.980006 7.37 0.100006 5.56 0.100006C2.49 0.100006 0 2.60001 0 5.69001C0 6.88001 0.19 7.98001 0.52 9.00001C2.1 14 6.97 16.99 9.38 17.81C9.72 17.93 10.28 17.93 10.62 17.81C13.03 16.99 17.9 14 19.48 9.00001C19.81 7.98001 20 6.88001 20 5.69001C20 2.60001 17.51 0.100006 14.44 0.100006Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block mr-6 text-gray-900 hover:text-indigo-500 transition duration-300" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.24 5.58H18.84L15.46 2.2C15.19 1.93 14.75 1.93 14.47 2.2C14.2 2.47 14.2 2.91 14.47 3.19L16.86 5.58H7.14L9.53 3.19C9.8 2.92 9.8 2.48 9.53 2.2C9.26 1.93 8.82 1.93 8.54 2.2L5.17 5.58H4.77C3.87 5.58 2 5.58 2 8.14C2 9.11 2.2 9.75 2.62 10.17C2.86 10.42 3.15 10.55 3.46 10.62C3.75 10.69 4.06 10.7 4.36 10.7H19.64C19.95 10.7 20.24 10.68 20.52 10.62C21.36 10.42 22 9.82 22 8.14C22 5.58 20.13 5.58 19.24 5.58Z" fill="currentColor"></path>
                <path d="M19.0499 12H4.86991C4.24991 12 3.77991 12.55 3.87991 13.16L4.71991 18.3C4.99991 20.02 5.74991 22 9.07991 22H14.6899C18.0599 22 18.6599 20.31 19.0199 18.42L20.0299 13.19C20.1499 12.57 19.6799 12 19.0499 12ZM10.6099 18.45C10.6099 18.84 10.2999 19.15 9.91991 19.15C9.52991 19.15 9.21991 18.84 9.21991 18.45V15.15C9.21991 14.77 9.52991 14.45 9.91991 14.45C10.2999 14.45 10.6099 14.77 10.6099 15.15V18.45ZM14.8899 18.45C14.8899 18.84 14.5799 19.15 14.1899 19.15C13.8099 19.15 13.4899 18.84 13.4899 18.45V15.15C13.4899 14.77 13.8099 14.45 14.1899 14.45C14.5799 14.45 14.8899 14.77 14.8899 15.15V18.45Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block mr-6 text-gray-900 hover:text-indigo-500 transition duration-300" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.01 20.02C15.9861 20.02 20.02 15.9861 20.02 11.01C20.02 6.03391 15.9861 2 11.01 2C6.03391 2 2 6.03391 2 11.01C2 15.9861 6.03391 20.02 11.01 20.02Z" fill="currentColor"></path>
                <path d="M21.9901 18.95C21.6601 18.34 20.9601 18 20.0201 18C19.3101 18 18.7001 18.29 18.3401 18.79C17.9801 19.29 17.9001 19.96 18.1201 20.63C18.5501 21.93 19.3001 22.22 19.7101 22.27C19.7701 22.28 19.8301 22.28 19.9001 22.28C20.3401 22.28 21.0201 22.09 21.6801 21.1C22.2101 20.33 22.3101 19.56 21.9901 18.95Z" fill="currentColor"></path>
              </svg>
            </a>
            <a class="inline-block mr-6 text-gray-900 hover:text-indigo-500 transition duration-300" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" fill="currentColor"></path>
                <path d="M11.9999 14.5C6.98991 14.5 2.90991 17.86 2.90991 22C2.90991 22.28 3.12991 22.5 3.40991 22.5H20.5899C20.8699 22.5 21.0899 22.28 21.0899 22C21.0899 17.86 17.0099 14.5 11.9999 14.5Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex p-1 items-center text-gray-900 hover:text-indigo-500 transition duration-300">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="bg-green-500">
      <div class="container px-4 md:px-10 mx-auto">
        <div class="flex h-12 py-6 items-center justify-between">
          <a class="hidden sm:inline-flex mr-6 h-9 px-12 items-center justify-center font-bold text-sm text-white bg-black hover:bg-white hover:text-black rounded-md transition duration-300" href="#">
            <span class="mr-2">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.6667 5.68004V2.65337C14.6667 1.71337 14.24 1.33337 13.18 1.33337H10.4867C9.42667 1.33337 9 1.71337 9 2.65337V5.67337C9 6.62004 9.42667 6.99337 10.4867 6.99337H13.18C14.24 7.00004 14.6667 6.62004 14.6667 5.68004Z" fill="#C6FF53"></path>
                <path d="M14.6667 13.18V10.4867C14.6667 9.42667 14.24 9 13.18 9H10.4867C9.42667 9 9 9.42667 9 10.4867V13.18C9 14.24 9.42667 14.6667 10.4867 14.6667H13.18C14.24 14.6667 14.6667 14.24 14.6667 13.18Z" fill="#C6FF53"></path>
                <path d="M6.99967 5.68004V2.65337C6.99967 1.71337 6.57301 1.33337 5.51301 1.33337H2.81967C1.75967 1.33337 1.33301 1.71337 1.33301 2.65337V5.67337C1.33301 6.62004 1.75967 6.99337 2.81967 6.99337H5.51301C6.57301 7.00004 6.99967 6.62004 6.99967 5.68004Z" fill="#C6FF53"></path>
                <path d="M6.99967 13.18V10.4867C6.99967 9.42667 6.57301 9 5.51301 9H2.81967C1.75967 9 1.33301 9.42667 1.33301 10.4867V13.18C1.33301 14.24 1.75967 14.6667 2.81967 14.6667H5.51301C6.57301 14.6667 6.99967 14.24 6.99967 13.18Z" fill="#C6FF53"></path>
              </svg>
            </span>
            <span>All Categories</span>
          </a>
          <ul class="hidden lg:flex items-center">
            <li class="mr-6">
              <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
                <span class="mr-2">Category</span>
                <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
                </svg>
                <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
                  <div class="p-2 bg-white border-2 border-black rounded-md shadow">
                    <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a>
                    <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a>
                    <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a>
                  </div>
                </div>
              </button>
            </li>
            <li class="mr-6">
              <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
                <span class="mr-2">Collection</span>
                <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
                </svg>
                <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
                  <div class="p-2 bg-white border-2 border-black rounded-md shadow">
                    <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a>
                    <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a>
                    <a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a>
                  </div>
                </div>
              </button>
            </li>
            <li class="mr-6"><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Story</a></li>
            <li><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Brand</a></li>
          </ul>
          <a class="inline-flex ml-auto h-9 px-12 items-center justify-center font-bold text-sm text-white bg-indigo-500 hover:bg-indigo-600 rounded-md transition duration-200" href="#">
            <span class="mr-2">
              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.71297 8.85331H8.77297V13.6533C8.77297 14.36 9.65297 14.6933 10.1196 14.16L15.1663 8.42665C15.6063 7.92665 15.253 7.14665 14.5863 7.14665H12.5263V2.34665C12.5263 1.63998 11.6463 1.30665 11.1796 1.83998L6.13297 7.57331C5.69963 8.07331 6.05297 8.85331 6.71297 8.85331Z" fill="#C6FF53"></path>
                <path d="M6.16667 3.16663H1.5C1.22667 3.16663 1 2.93996 1 2.66663C1 2.39329 1.22667 2.16663 1.5 2.16663H6.16667C6.44 2.16663 6.66667 2.39329 6.66667 2.66663C6.66667 2.93996 6.44 3.16663 6.16667 3.16663Z" fill="#C6FF53"></path>
                <path d="M5.5 13.8334H1.5C1.22667 13.8334 1 13.6067 1 13.3334C1 13.06 1.22667 12.8334 1.5 12.8334H5.5C5.77333 12.8334 6 13.06 6 13.3334C6 13.6067 5.77333 13.8334 5.5 13.8334Z" fill="#C6FF53"></path>
                <path d="M3.5 8.5H1.5C1.22667 8.5 1 8.27333 1 8C1 7.72667 1.22667 7.5 1.5 7.5H3.5C3.77333 7.5 4 7.72667 4 8C4 8.27333 3.77333 8.5 3.5 8.5Z" fill="#C6FF53"></path>
              </svg>
            </span>
            <span>Hot offers</span>
          </a>
        </div>
      </div>
    </div>
  </nav>
  <div class="relative pt-6 pb-10">
    <div class="flex justify-center">
      <div class="flex-shrink-0 container px-4 md:px-10 md:mx-6 2xl:mx-10 mx-auto">
        <div class="relative">
          <div class="hidden lg:block absolute top-1/2 left-0 transform -translate-y-1/2 -ml-6 z-10">
            <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="group flex items-center justify-center transform -translate-y-1 -translate-x-1 transition duration-500 h-16 w-16 rounded-full bg-gray-900">
              <div class="inline-flex z-10 items-center justify-center absolute top-0 left-0 h-16 w-16 transform -translate-y-1 -translate-x-1 group-hover:-translate-y-0 group-hover:-translate-x-0 bg-indigo-500 rounded-full transition-all duration-300">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM13.5 10.75H8.31L10.03 12.47C10.32 12.76 10.32 13.24 10.03 13.53C9.88 13.68 9.69 13.75 9.5 13.75C9.31 13.75 9.12 13.68 8.97 13.53L5.97 10.53C5.68 10.24 5.68 9.76 5.97 9.47L8.97 6.47C9.26 6.18 9.74 6.18 10.03 6.47C10.32 6.76 10.32 7.24 10.03 7.53L8.31 9.25H13.5C13.91 9.25 14.25 9.59 14.25 10C14.25 10.41 13.91 10.75 13.5 10.75Z" fill="white"></path>
                </svg>
              </div>
            </button>
          </div>
          <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-10">
            <div x-ref="slide1" class="flex-shrink-0 w-full p-10">
              <div class="relative md:h-118 border-2 border-black rounded-md shadow">
                <img class="absolute top-0 left-0 img-fluid h-full w-full object-cover" src="shopal-assets/images/slider-photos-bg.png" alt="">
                <div class="relative px-6 md:pl-24 pt-12 lg:pt-18 pb-20 md:pb-10">
                  <div class="max-w-xs sm:max-w-md mx-auto md:mx-0">
                    <span class="inline-flex h-8 px-1 mb-3 items-center justify-center text-sm font-black uppercase bg-orange-500 border border-black rounded-md shadow-sm">Label</span>
                    <h1 class="font-heading text-3xl md:text-4xl font-black text-white mb-2">Take care of your performance every day.</h1>
                    <p class="text-lg font-bold text-white mb-6">Build a well-presented brand that everyone will love.</p>
                    <span class="block text-4xl md:text-5xl font-black text-white mb-7">$499.00</span>
                    <a class="group relative inline-block h-12 w-full sm:w-48 mb-2 sm:mb-0 sm:mr-6 bg-blueGray-900 rounded-md" href="#">
                      <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                        <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                          <span class="text-base font-black text-black">Check our Catalog</span>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div x-ref="slide2" class="flex-shrink-0 w-full p-10">
              <div class="relative md:h-118 border-2 border-black rounded-md shadow">
                <img class="absolute top-0 left-0 img-fluid h-full w-full object-cover" src="shopal-assets/images/slider-photos-bg.png" alt="">
                <div class="relative px-6 md:pl-24 pt-12 lg:pt-18 pb-20 md:pb-10">
                  <div class="max-w-xs sm:max-w-md mx-auto md:mx-0">
                    <span class="inline-flex h-8 px-1 mb-3 items-center justify-center text-sm font-black uppercase bg-orange-500 border border-black rounded-md shadow-sm">Label</span>
                    <h1 class="font-heading text-3xl md:text-4xl font-black text-white mb-2">Enhance Your Daily Performance.</h1>
                    <p class="text-lg font-bold text-white mb-6">Craft a standout brand that captures everyone's heart.</p>
                    <span class="block text-4xl md:text-5xl font-black text-white mb-7">$320.00</span>
                    <a class="group relative inline-block h-12 w-full sm:w-48 mb-2 sm:mb-0 sm:mr-6 bg-blueGray-900 rounded-md" href="#">
                      <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                        <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                          <span class="text-base font-black text-black">Check our Catalog</span>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div x-ref="slide3" class="flex-shrink-0 w-full p-10">
              <div class="relative md:h-118 border-2 border-black rounded-md shadow">
                <img class="absolute top-0 left-0 img-fluid h-full w-full object-cover" src="shopal-assets/images/slider-photos-bg.png" alt="">
                <div class="relative px-6 md:pl-24 pt-12 lg:pt-18 pb-20 md:pb-10">
                  <div class="max-w-xs sm:max-w-md mx-auto md:mx-0">
                    <span class="inline-flex h-8 px-1 mb-3 items-center justify-center text-sm font-black uppercase bg-orange-500 border border-black rounded-md shadow-sm">Label</span>
                    <h1 class="font-heading text-3xl md:text-4xl font-black text-white mb-2">Elevate Your Daily Success.</h1>
                    <p class="text-lg font-bold text-white mb-6">Develop a compelling brand that everyone admires.</p>
                    <span class="block text-4xl md:text-5xl font-black text-white mb-7">$549.00</span>
                    <a class="group relative inline-block h-12 w-full sm:w-48 mb-2 sm:mb-0 sm:mr-6 bg-blueGray-900 rounded-md" href="#">
                      <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                        <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                          <span class="text-base font-black text-black">Check our Catalog</span>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="hidden lg:block absolute top-1/2 right-0 transform -translate-y-1/2 -mr-7 z-10">
            <button x-on:click="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="group flex items-center justify-center transform -translate-y-1 -translate-x-1 transition duration-500 h-16 w-16 rounded-full bg-gray-900">
              <div class="inline-flex z-10 items-center justify-center absolute top-0 left-0 h-16 w-16 transform -translate-y-1 -translate-x-1 group-hover:-translate-y-0 group-hover:-translate-x-0 bg-indigo-500 rounded-full transition-all duration-300">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 3.91654e-07 10 8.74228e-07C4.48 1.3568e-06 -1.3568e-06 4.48 -8.74228e-07 10C-3.91654e-07 15.52 4.48 20 10 20ZM6.5 9.25L11.69 9.25L9.97 7.53C9.68 7.24 9.68 6.76 9.97 6.47C10.12 6.32 10.31 6.25 10.5 6.25C10.69 6.25 10.88 6.32 11.03 6.47L14.03 9.47C14.32 9.76 14.32 10.24 14.03 10.53L11.03 13.53C10.74 13.82 10.26 13.82 9.97 13.53C9.68 13.24 9.68 12.76 9.97 12.47L11.69 10.75L6.5 10.75C6.09 10.75 5.75 10.41 5.75 10C5.75 9.59 6.09 9.25 6.5 9.25Z" fill="white"></path>
                </svg>
              </div>
            </button>
          </div>
        </div>
        <div class="lg:hidden relative flex items-center justify-center -mt-8">
          <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="group flex mr-4 items-center justify-center transform -translate-y-1 -translate-x-1 transition duration-500 h-14 w-14 rounded-full bg-gray-900">
            <div class="inline-flex z-10 items-center justify-center absolute top-0 left-0 h-14 w-14 transform -translate-y-1 -translate-x-1 group-hover:-translate-y-0 group-hover:-translate-x-0 bg-indigo-500 rounded-full transition-all duration-300">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM13.5 10.75H8.31L10.03 12.47C10.32 12.76 10.32 13.24 10.03 13.53C9.88 13.68 9.69 13.75 9.5 13.75C9.31 13.75 9.12 13.68 8.97 13.53L5.97 10.53C5.68 10.24 5.68 9.76 5.97 9.47L8.97 6.47C9.26 6.18 9.74 6.18 10.03 6.47C10.32 6.76 10.32 7.24 10.03 7.53L8.31 9.25H13.5C13.91 9.25 14.25 9.59 14.25 10C14.25 10.41 13.91 10.75 13.5 10.75Z" fill="white"></path>
              </svg>
            </div>
          </button>
          <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="group flex items-center justify-center transform -translate-y-1 -translate-x-1 transition duration-500 h-14 w-14 rounded-full bg-gray-900">
            <div class="inline-flex z-10 items-center justify-center absolute top-0 left-0 h-14 w-14 transform -translate-y-1 -translate-x-1 group-hover:-translate-y-0 group-hover:-translate-x-0 bg-indigo-500 rounded-full transition-all duration-300">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 3.91654e-07 10 8.74228e-07C4.48 1.3568e-06 -1.3568e-06 4.48 -8.74228e-07 10C-3.91654e-07 15.52 4.48 20 10 20ZM6.5 9.25L11.69 9.25L9.97 7.53C9.68 7.24 9.68 6.76 9.97 6.47C10.12 6.32 10.31 6.25 10.5 6.25C10.69 6.25 10.88 6.32 11.03 6.47L14.03 9.47C14.32 9.76 14.32 10.24 14.03 10.53L11.03 13.53C10.74 13.82 10.26 13.82 9.97 13.53C9.68 13.24 9.68 12.76 9.97 12.47L11.69 10.75L6.5 10.75C6.09 10.75 5.75 10.41 5.75 10C5.75 9.59 6.09 9.25 6.5 9.25Z" fill="white"></path>
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="container px-4 md:px-10 mx-auto">
    <div class="flex flex-wrap items-center justify-center -mx-4 -mb-6">
      <div class="w-full sm:w-1/2 xl:w-1/4 px-4 mb-6">
        <div class="flex max-w-xs mx-auto">
          <div class="flex mr-6 items-center justify-center w-12 h-12 rounded-full bg-gray-900">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.2102 7.81994L12.5102 12.2799C12.2002 12.4599 11.8102 12.4599 11.4902 12.2799L3.79021 7.81994C3.24021 7.49994 3.10021 6.74994 3.52021 6.27994C3.81021 5.94994 4.14021 5.67994 4.49021 5.48994L9.91021 2.48994C11.0702 1.83994 12.9502 1.83994 14.1102 2.48994L19.5302 5.48994C19.8802 5.67994 20.2102 5.95994 20.5002 6.27994C20.9002 6.74994 20.7602 7.49994 20.2102 7.81994Z" fill="#C6FF53"></path>
              <path d="M11.4305 14.1399V20.9599C11.4305 21.7199 10.6605 22.2199 9.98047 21.8899C7.92047 20.8799 4.45047 18.9899 4.45047 18.9899C3.23047 18.2999 2.23047 16.5599 2.23047 15.1299V9.96988C2.23047 9.17988 3.06047 8.67988 3.74047 9.06988L10.9305 13.2399C11.2305 13.4299 11.4305 13.7699 11.4305 14.1399Z" fill="#C6FF53"></path>
              <path d="M12.5703 14.1399V20.9599C12.5703 21.7199 13.3403 22.2199 14.0203 21.8899C16.0803 20.8799 19.5503 18.9899 19.5503 18.9899C20.7703 18.2999 21.7703 16.5599 21.7703 15.1299V9.96988C21.7703 9.17988 20.9403 8.67988 20.2603 9.06988L13.0703 13.2399C12.7703 13.4299 12.5703 13.7699 12.5703 14.1399Z" fill="#C6FF53"></path>
            </svg>
          </div>
          <div class="pt-1">
            <h4 class="text-xl font-bold text-indigo-500">Free Shipping</h4>
            <span class="text-lg font-bold text-gray-900">From 99$</span>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 xl:w-1/4 px-4 mb-6">
        <div class="flex max-w-xs mx-auto">
          <div class="flex mr-6 items-center justify-center w-12 h-12 rounded-full bg-gray-900">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.0002 22.75C14.7302 22.75 14.4802 22.6 14.3502 22.37C14.2202 22.13 14.2202 21.85 14.3602 21.61L15.4102 19.86C15.6202 19.51 16.0802 19.39 16.4402 19.6C16.8002 19.81 16.9102 20.27 16.7002 20.63L16.4302 21.08C19.1902 20.43 21.2602 17.95 21.2602 14.99C21.2602 14.58 21.6002 14.24 22.0102 14.24C22.4202 14.24 22.7602 14.58 22.7602 14.99C22.7502 19.27 19.2702 22.75 15.0002 22.75Z" fill="#C6FF53"></path>
              <path d="M2 9.75C1.59 9.75 1.25 9.41 1.25 9C1.25 4.73 4.73 1.25 9 1.25C9.27 1.25 9.52 1.4 9.65 1.63C9.78 1.87 9.78 2.15 9.64 2.39L8.59 4.14C8.38 4.49 7.92 4.61 7.56 4.39C7.21 4.18 7.09 3.72 7.31 3.36L7.58 2.91C4.81 3.56 2.75 6.04 2.75 9C2.75 9.41 2.41 9.75 2 9.75Z" fill="#C6FF53"></path>
              <path d="M16.4002 8.20996L12.6402 6.17996C12.2402 5.96996 11.7702 5.96996 11.3702 6.17996L7.60016 8.20996C7.33016 8.35996 7.16016 8.64996 7.16016 8.96996C7.16016 9.29996 7.33016 9.58996 7.60016 9.73996L11.3602 11.77C11.5602 11.88 11.7802 11.93 12.0002 11.93C12.2202 11.93 12.4402 11.88 12.6402 11.77L16.4002 9.73996C16.6702 9.58996 16.8402 9.29996 16.8402 8.96996C16.8402 8.64996 16.6702 8.35996 16.4002 8.20996Z" fill="#C6FF53"></path>
              <path d="M10.74 12.4699L7.24 10.7199C6.97 10.5899 6.66 10.5999 6.4 10.7599C6.15 10.9199 6 11.1899 6 11.4899V14.7999C6 15.3699 6.32 15.8899 6.83 16.1399L10.33 17.8899C10.45 17.9499 10.58 17.9799 10.72 17.9799C10.88 17.9799 11.03 17.9399 11.17 17.8499C11.43 17.6899 11.58 17.4199 11.58 17.1199V13.8099C11.57 13.2399 11.26 12.7299 10.74 12.4699Z" fill="#C6FF53"></path>
              <path d="M17.5899 10.7599C17.3299 10.5999 17.0199 10.5899 16.7499 10.7199L13.2499 12.4699C12.7399 12.7299 12.4199 13.2399 12.4199 13.8099V17.1199C12.4199 17.4199 12.5699 17.6899 12.8299 17.8499C12.9699 17.9399 13.1199 17.9799 13.2799 17.9799C13.4099 17.9799 13.5399 17.9499 13.6699 17.8899L17.1699 16.1399C17.6799 15.8799 17.9999 15.3699 17.9999 14.7999V11.4899C17.9999 11.1899 17.8499 10.9199 17.5899 10.7599Z" fill="#C6FF53"></path>
            </svg>
          </div>
          <div class="pt-1">
            <h4 class="text-xl font-bold text-indigo-500">365 Days</h4>
            <span class="text-lg font-bold text-gray-900">For free return</span>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 xl:w-1/4 px-4 mb-6">
        <div class="flex max-w-xs mx-auto">
          <div class="flex mr-6 items-center justify-center w-12 h-12 rounded-full bg-gray-900">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.62 10.7501C17.19 10.7501 16.85 10.4001 16.85 9.9801C16.85 9.6101 16.48 8.8401 15.86 8.1701C15.25 7.5201 14.58 7.1401 14.02 7.1401C13.59 7.1401 13.25 6.7901 13.25 6.3701C13.25 5.9501 13.6 5.6001 14.02 5.6001C15.02 5.6001 16.07 6.1401 16.99 7.1101C17.85 8.0201 18.4 9.1501 18.4 9.9701C18.4 10.4001 18.05 10.7501 17.62 10.7501Z" fill="#C6FF53"></path>
              <path d="M21.2298 10.75C20.7998 10.75 20.4598 10.4 20.4598 9.98C20.4598 6.43 17.5698 3.55 14.0298 3.55C13.5998 3.55 13.2598 3.2 13.2598 2.78C13.2598 2.36 13.5998 2 14.0198 2C18.4198 2 21.9998 5.58 21.9998 9.98C21.9998 10.4 21.6498 10.75 21.2298 10.75Z" fill="#C6FF53"></path>
              <path d="M11.05 14.95L9.2 16.8C8.81 17.19 8.19 17.19 7.79 16.81C7.68 16.7 7.57 16.6 7.46 16.49C6.43 15.45 5.5 14.36 4.67 13.22C3.85 12.08 3.19 10.94 2.71 9.81C2.24 8.67 2 7.58 2 6.54C2 5.86 2.12 5.21 2.36 4.61C2.6 4 2.98 3.44 3.51 2.94C4.15 2.31 4.85 2 5.59 2C5.87 2 6.15 2.06 6.4 2.18C6.66 2.3 6.89 2.48 7.07 2.74L9.39 6.01C9.57 6.26 9.7 6.49 9.79 6.71C9.88 6.92 9.93 7.13 9.93 7.32C9.93 7.56 9.86 7.8 9.72 8.03C9.59 8.26 9.4 8.5 9.16 8.74L8.4 9.53C8.29 9.64 8.24 9.77 8.24 9.93C8.24 10.01 8.25 10.08 8.27 10.16C8.3 10.24 8.33 10.3 8.35 10.36C8.53 10.69 8.84 11.12 9.28 11.64C9.73 12.16 10.21 12.69 10.73 13.22C10.83 13.32 10.94 13.42 11.04 13.52C11.44 13.91 11.45 14.55 11.05 14.95Z" fill="#C6FF53"></path>
              <path d="M21.9696 18.33C21.9696 18.61 21.9196 18.9 21.8196 19.18C21.7896 19.26 21.7596 19.34 21.7196 19.42C21.5496 19.78 21.3296 20.12 21.0396 20.44C20.5496 20.98 20.0096 21.37 19.3996 21.62C19.3896 21.62 19.3796 21.63 19.3696 21.63C18.7796 21.87 18.1396 22 17.4496 22C16.4296 22 15.3396 21.76 14.1896 21.27C13.0396 20.78 11.8896 20.12 10.7496 19.29C10.3596 19 9.96961 18.71 9.59961 18.4L12.8696 15.13C13.1496 15.34 13.3996 15.5 13.6096 15.61C13.6596 15.63 13.7196 15.66 13.7896 15.69C13.8696 15.72 13.9496 15.73 14.0396 15.73C14.2096 15.73 14.3396 15.67 14.4496 15.56L15.2096 14.81C15.4596 14.56 15.6996 14.37 15.9296 14.25C16.1596 14.11 16.3896 14.04 16.6396 14.04C16.8296 14.04 17.0296 14.08 17.2496 14.17C17.4696 14.26 17.6996 14.39 17.9496 14.56L21.2596 16.91C21.5196 17.09 21.6996 17.3 21.8096 17.55C21.9096 17.8 21.9696 18.05 21.9696 18.33Z" fill="#C6FF53"></path>
            </svg>
          </div>
          <div class="pt-1">
            <h4 class="text-xl font-bold text-indigo-500">Suppport</h4>
            <span class="text-lg font-bold text-gray-900">Online support 24/7</span>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 xl:w-1/4 px-4 mb-6">
        <div class="flex max-w-xs mx-auto">
          <div class="flex mr-6 items-center justify-center w-12 h-12 rounded-full bg-gray-900">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.38965 18.49V8.32998C8.38965 7.92998 8.50965 7.53998 8.72965 7.20998L11.4596 3.14998C11.8896 2.49998 12.9596 2.03998 13.8696 2.37998C14.8496 2.70998 15.4996 3.80997 15.2896 4.78997L14.7696 8.05998C14.7296 8.35998 14.8096 8.62998 14.9796 8.83998C15.1496 9.02998 15.3996 9.14997 15.6696 9.14997H19.7796C20.5696 9.14997 21.2496 9.46997 21.6496 10.03C22.0296 10.57 22.0996 11.27 21.8496 11.98L19.3896 19.47C19.0796 20.71 17.7296 21.72 16.3896 21.72H12.4896C11.8196 21.72 10.8796 21.49 10.4496 21.06L9.16965 20.07C8.67965 19.7 8.38965 19.11 8.38965 18.49Z" fill="#C6FF53"></path>
              <path d="M5.21 6.37988H4.18C2.63 6.37988 2 6.97988 2 8.45988V18.5199C2 19.9999 2.63 20.5999 4.18 20.5999H5.21C6.76 20.5999 7.39 19.9999 7.39 18.5199V8.45988C7.39 6.97988 6.76 6.37988 5.21 6.37988Z" fill="#C6FF53"></path>
            </svg>
          </div>
          <div class="pt-1">
            <h4 class="text-xl font-bold text-indigo-500">99% Positive</h4>
            <span class="text-lg font-bold text-gray-900">Feedback</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <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="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
          <li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
          <button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="relative pb-20 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <nav class="relative z-10">
    <div class="flex h-20 py-6 px-6 items-center justify-between bg-white relative">
      <a class="inline-block text-2xl font-bold mr-10" href="#">
        <img src="shopal-assets/logos/shopal-logo.svg" alt="">
      </a>
      <ul class="hidden lg:flex items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Category</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Collection</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6"><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Story</a></li>
        <li><a class="inline-block font-bold text-gray-900 hover:text-indigo-500" href="#">Brand</a></li>
      </ul>
      <div class="inline-flex items-center">
        <div class="hidden lg:flex">
          <a class="inline-block mr-6 text-gray-900 hover:text-indigo-500 transition duration-200" href="#">
            <svg width="20" height="24" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.44 0.100006C12.63 0.100006 11.01 0.980006 10 2.33001C8.99 0.980006 7.37 0.100006 5.56 0.100006C2.49 0.100006 0 2.60001 0 5.69001C0 6.88001 0.19 7.98001 0.52 9.00001C2.1 14 6.97 16.99 9.38 17.81C9.72 17.93 10.28 17.93 10.62 17.81C13.03 16.99 17.9 14 19.48 9.00001C19.81 7.98001 20 6.88001 20 5.69001C20 2.60001 17.51 0.100006 14.44 0.100006Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-block mr-6 text-gray-900 hover:text-indigo-500 transition duration-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.24 5.58H18.84L15.46 2.2C15.19 1.93 14.75 1.93 14.47 2.2C14.2 2.47 14.2 2.91 14.47 3.19L16.86 5.58H7.14L9.53 3.19C9.8 2.92 9.8 2.48 9.53 2.2C9.26 1.93 8.82 1.93 8.54 2.2L5.17 5.58H4.77C3.87 5.58 2 5.58 2 8.14C2 9.11 2.2 9.75 2.62 10.17C2.86 10.42 3.15 10.55 3.46 10.62C3.75 10.69 4.06 10.7 4.36 10.7H19.64C19.95 10.7 20.24 10.68 20.52 10.62C21.36 10.42 22 9.82 22 8.14C22 5.58 20.13 5.58 19.24 5.58Z" fill="currentColor"></path>
              <path d="M19.0499 12H4.86991C4.24991 12 3.77991 12.55 3.87991 13.16L4.71991 18.3C4.99991 20.02 5.74991 22 9.07991 22H14.6899C18.0599 22 18.6599 20.31 19.0199 18.42L20.0299 13.19C20.1499 12.57 19.6799 12 19.0499 12ZM10.6099 18.45C10.6099 18.84 10.2999 19.15 9.91991 19.15C9.52991 19.15 9.21991 18.84 9.21991 18.45V15.15C9.21991 14.77 9.52991 14.45 9.91991 14.45C10.2999 14.45 10.6099 14.77 10.6099 15.15V18.45ZM14.8899 18.45C14.8899 18.84 14.5799 19.15 14.1899 19.15C13.8099 19.15 13.4899 18.84 13.4899 18.45V15.15C13.4899 14.77 13.8099 14.45 14.1899 14.45C14.5799 14.45 14.8899 14.77 14.8899 15.15V18.45Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-block mr-6 text-gray-900 hover:text-indigo-500 transition duration-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.01 20.02C15.9861 20.02 20.02 15.9861 20.02 11.01C20.02 6.03391 15.9861 2 11.01 2C6.03391 2 2 6.03391 2 11.01C2 15.9861 6.03391 20.02 11.01 20.02Z" fill="currentColor"></path>
              <path d="M21.9901 18.95C21.6601 18.34 20.9601 18 20.0201 18C19.3101 18 18.7001 18.29 18.3401 18.79C17.9801 19.29 17.9001 19.96 18.1201 20.63C18.5501 21.93 19.3001 22.22 19.7101 22.27C19.7701 22.28 19.8301 22.28 19.9001 22.28C20.3401 22.28 21.0201 22.09 21.6801 21.1C22.2101 20.33 22.3101 19.56 21.9901 18.95Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="inline-block mr-6 text-gray-900 hover:text-indigo-500 transition duration-200" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" fill="currentColor"></path>
              <path d="M11.9999 14.5C6.98991 14.5 2.90991 17.86 2.90991 22C2.90991 22.28 3.12991 22.5 3.40991 22.5H20.5899C20.8699 22.5 21.0899 22.28 21.0899 22C21.0899 17.86 17.0099 14.5 11.9999 14.5Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex p-1 items-center text-gray-900 hover:text-indigo-500 transition duration-200">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="relative mx-6 pt-28 pb-40 md:pb-56 border-2 border-black rounded-md overflow-hidden shadow">
    <img class="absolute top-0 left-0 w-full h-full img-fluid object-cover" src="shopal-assets/background/background-office2.png" alt="">
    <div class="hidden lg:block absolute top-0 left-0 mt-44 ml-4 lg:ml-12 z-10">
      <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="group flex items-center justify-center transform -translate-y-1 -translate-x-1 transition duration-500 h-16 w-16 rounded-full bg-gray-900">
        <div class="inline-flex z-10 items-center justify-center absolute top-0 left-0 h-16 w-16 transform -translate-y-1 -translate-x-1 group-hover:-translate-y-0 group-hover:-translate-x-0 bg-indigo-500 rounded-full transition-all duration-300">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM13.5 10.75H8.31L10.03 12.47C10.32 12.76 10.32 13.24 10.03 13.53C9.88 13.68 9.69 13.75 9.5 13.75C9.31 13.75 9.12 13.68 8.97 13.53L5.97 10.53C5.68 10.24 5.68 9.76 5.97 9.47L8.97 6.47C9.26 6.18 9.74 6.18 10.03 6.47C10.32 6.76 10.32 7.24 10.03 7.53L8.31 9.25H13.5C13.91 9.25 14.25 9.59 14.25 10C14.25 10.41 13.91 10.75 13.5 10.75Z" fill="white"></path>
          </svg>
        </div>
      </button>
    </div>
    <div class="hidden lg:block absolute top-0 right-0 mt-44 mr-4 lg:mr-12 z-10">
      <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="group flex items-center justify-center transform -translate-y-1 -translate-x-1 transition duration-500 h-16 w-16 rounded-full bg-gray-900">
        <div class="inline-flex z-10 items-center justify-center absolute top-0 left-0 h-16 w-16 transform -translate-y-1 -translate-x-1 group-hover:-translate-y-0 group-hover:-translate-x-0 bg-indigo-500 rounded-full transition-all duration-300">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 3.91654e-07 10 8.74228e-07C4.48 1.3568e-06 -1.3568e-06 4.48 -8.74228e-07 10C-3.91654e-07 15.52 4.48 20 10 20ZM6.5 9.25L11.69 9.25L9.97 7.53C9.68 7.24 9.68 6.76 9.97 6.47C10.12 6.32 10.31 6.25 10.5 6.25C10.69 6.25 10.88 6.32 11.03 6.47L14.03 9.47C14.32 9.76 14.32 10.24 14.03 10.53L11.03 13.53C10.74 13.82 10.26 13.82 9.97 13.53C9.68 13.24 9.68 12.76 9.97 12.47L11.69 10.75L6.5 10.75C6.09 10.75 5.75 10.41 5.75 10C5.75 9.59 6.09 9.25 6.5 9.25Z" fill="white"></path>
          </svg>
        </div>
      </button>
    </div>
    <div class="container px-4 mx-auto relative">
      <div class="max-w-xs md:max-w-md mx-auto xl:ml-44">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-4xl font-black text-white mb-7">Take care of your performance every day.</h1>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-4xl font-black text-white mb-7">Elevating Your Brand Every Day.</h1>
                </div>
                <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                    <h1 class="font-heading text-4xl font-black text-white mb-7">Cultivating Excellence in Performance.</h1>
                </div>
            </div>
        </div>
        <a class="group relative inline-block h-12 w-full sm:w-48 mb-2 bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
              <span class="text-base font-black text-black">Check our Catalog</span>
            </div>
          </div>
        </a>
        <div class="sm:hidden flex items-center justify-center mt-12">
          <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-flex items-center justify-center mr-4 h-16 w-16 rounded-full bg-indigo-500 shadow hover:shadow-md transition-all hover:bg-indigo-600 duration-300">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM13.5 10.75H8.31L10.03 12.47C10.32 12.76 10.32 13.24 10.03 13.53C9.88 13.68 9.69 13.75 9.5 13.75C9.31 13.75 9.12 13.68 8.97 13.53L5.97 10.53C5.68 10.24 5.68 9.76 5.97 9.47L8.97 6.47C9.26 6.18 9.74 6.18 10.03 6.47C10.32 6.76 10.32 7.24 10.03 7.53L8.31 9.25H13.5C13.91 9.25 14.25 9.59 14.25 10C14.25 10.41 13.91 10.75 13.5 10.75Z" fill="white"></path>
            </svg>
          </button>
          <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-flex items-center justify-center h-16 w-16 rounded-full bg-indigo-500 shadow hover:shadow-md transition-all hover:bg-indigo-600 duration-300">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 3.91654e-07 10 8.74228e-07C4.48 1.3568e-06 -1.3568e-06 4.48 -8.74228e-07 10C-3.91654e-07 15.52 4.48 20 10 20ZM6.5 9.25L11.69 9.25L9.97 7.53C9.68 7.24 9.68 6.76 9.97 6.47C10.12 6.32 10.31 6.25 10.5 6.25C10.69 6.25 10.88 6.32 11.03 6.47L14.03 9.47C14.32 9.76 14.32 10.24 14.03 10.53L11.03 13.53C10.74 13.82 10.26 13.82 9.97 13.53C9.68 13.24 9.68 12.76 9.97 12.47L11.69 10.75L6.5 10.75C6.09 10.75 5.75 10.41 5.75 10C5.75 9.59 6.09 9.25 6.5 9.25Z" fill="white"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="container px-4 mx-auto -mt-24 relative">
    <div class="max-w-xs md:max-w-lg lg:max-w-3xl xl:max-w-4xl mx-auto 2xl:max-w-6xl">
      <div class="flex flex-wrap xs:-mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
          <a class="group relative h-56 block rounded-md bg-blueGray-900" href="#">
            <div class="h-full w-full transform -translate-y-1 -translate-x-1 group-hover:translate-y-0 group-hover:translate-x-0 rounded-md border-2 border-black transition duration-300">
              <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/header-product2.png" alt="">
              <div class="absolute bottom-0 left-0 pl-10 pr-5 py-10">
                <span class="inline-flex h-8 px-1 mb-3 items-center justify-center text-sm font-black bg-orange-500 border border-black rounded-md shadow-sm">5 Products</span>
                <h3 class="font-heading text-2xl font-black text-white">Collection Name</h3>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <a class="group relative h-56 block rounded-md bg-blueGray-900" href="#">
            <div class="h-full w-full transform -translate-y-1 -translate-x-1 group-hover:translate-y-0 group-hover:translate-x-0 rounded-md border-2 border-black transition duration-300">
              <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/header-product1.png" alt="">
              <div class="absolute bottom-0 left-0 pl-10 pr-5 py-10">
                <span class="inline-flex h-8 px-1 mb-3 items-center justify-center text-sm font-black bg-orange-500 border border-black rounded-md shadow-sm">5 Products</span>
                <h3 class="font-heading text-2xl font-black text-white">Collection Name</h3>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <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="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
          <li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
          <button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="py-16" x-data="{ price: 250, showContent: false, grid: 3, size: 38 }" x-init="size = $refs.size1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center justify-between mb-10">
        <h2 class="text-2xl sm:text-3xl font-bold">
          <span class="text-black">Found 420 results for</span>
          <span class="text-green-600">Lorem Ipsum</span>
        </h2>
        <div class="w-full lg:w-auto inline-flex items-center mt-6 lg:mt-0">
          <div class="group relative h-12 w-52 mr-6 border-2 border-black rounded-md overflow-hidden">
            <select class="w-full h-full px-4 text-sm font-bold appearance-none outline-none" name="" id="">
              <option value="1">Sort by Newest</option>
              <option value="1">Sort by Oldest</option>
              <option value="1">Sort by Price</option>
            </select>
            <span class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 text-black group-hover:text-indigo-500">
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.94667 0.453308H4.79333H1.05333C0.413333 0.453308 0.0933335 1.22664 0.546667 1.67997L4 5.13331C4.55333 5.68664 5.45333 5.68664 6.00667 5.13331L7.32 3.81997L9.46 1.67997C9.90667 1.22664 9.58667 0.453308 8.94667 0.453308Z" fill="currentColor"></path>
              </svg>
            </span>
          </div>
          <div class="inline-flex h-12 border-2 border-black rounded-md overflow-hidden">
            <a x-on:click.prevent="grid = 3" class="inline-flex items-center justify-center w-12 h-full border-r border-black bg-green-500 hover:bg-green-500 transition duration-300" :class="{ 'bg-green-500': grid == 3, 'bg-white': grid != 3 }" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.75 2V7.8H2C2 4.19 4.15 2.02 7.75 2Z" fill="black"></path>
                <path d="M22 7.8H16.25V2C19.85 2.02 22 4.19 22 7.8Z" fill="black"></path>
                <path d="M22 16.3C21.96 19.85 19.82 21.98 16.25 22V16.3H22Z" fill="black"></path>
                <path d="M7.75 16.3V22C4.18 21.98 2.04 19.85 2 16.3H7.75Z" fill="black"></path>
                <path d="M7.75 9.30005H2V14.8H7.75V9.30005Z" fill="black"></path>
                <path d="M22 9.30005H16.25V14.8H22V9.30005Z" fill="black"></path>
                <path d="M14.75 9.30005H9.25V14.8H14.75V9.30005Z" fill="black"></path>
                <path d="M14.75 2H9.25V7.8H14.75V2Z" fill="black"></path>
                <path d="M14.75 16.3H9.25V22H14.75V16.3Z" fill="black"></path>
              </svg>
            </a>
            <a x-on:click.prevent="grid = 4" class="inline-flex items-center justify-center w-12 h-full border-l border-black bg-white hover:bg-green-500 transition duration-300" :class="{ 'bg-green-500': grid == 4, 'bg-white': grid != 4 }" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 6.52V1.98C20 0.57 19.36 0 17.77 0H13.73C12.14 0 11.5 0.57 11.5 1.98V6.51C11.5 7.93 12.14 8.49 13.73 8.49H17.77C19.36 8.5 20 7.93 20 6.52Z" fill="black"></path>
                <path d="M20 17.77V13.73C20 12.14 19.36 11.5 17.77 11.5H13.73C12.14 11.5 11.5 12.14 11.5 13.73V17.77C11.5 19.36 12.14 20 13.73 20H17.77C19.36 20 20 19.36 20 17.77Z" fill="black"></path>
                <path d="M8.5 6.52V1.98C8.5 0.57 7.86 0 6.27 0H2.23C0.64 0 0 0.57 0 1.98V6.51C0 7.93 0.64 8.49 2.23 8.49H6.27C7.86 8.5 8.5 7.93 8.5 6.52Z" fill="black"></path>
                <path d="M8.5 17.77V13.73C8.5 12.14 7.86 11.5 6.27 11.5H2.23C0.64 11.5 0 12.14 0 13.73V17.77C0 19.36 0.64 20 2.23 20H6.27C7.86 20 8.5 19.36 8.5 17.77Z" fill="black"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/4 px-4 mb-12 lg:mb-0">
          <div class="flex flex-wrap -mx-4 -mb-8">
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-4">Category</h4>
              <ul>
                <li class="mb-4"><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Lorem ipsum dolor sit</a></li>
                <li class="mb-4"><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Sed dignissim enim</a></li>
                <li class="mb-4"><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Duis nunc diam</a></li>
                <li class="mb-4"><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Morbi id purus</a></li>
                <li class="mb-4"><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Duis quam lacus</a></li>
                <li><a class="inline-block font-medium text-black hover:text-indigo-500" href="#">Vestibulum magna</a></li>
              </ul>
            </div>
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-4">Color</h4>
              <div class="flex flex-wrap -mb-2">
                <button class="inline-block w-6 h-6 bg-emerald-500 mb-2 mr-4 rounded-full border border-white hover:border-black"></button>
                <button class="inline-block w-6 h-6 bg-green-500 mb-2 mr-4 rounded-full border border-white hover:border-black"></button>
                <button class="inline-block w-6 h-6 bg-indigo-500 mb-2 mr-4 rounded-full border border-white hover:border-black"></button>
                <button class="inline-block w-6 h-6 bg-orange-500 mb-2 mr-4 rounded-full border border-white hover:border-black"></button>
                <button class="inline-block w-6 h-6 bg-red-500 mb-2 mr-4 rounded-full border border-white hover:border-black"></button>
                <button class="inline-block w-6 h-6 bg-blue-500 rounded-full border border-white hover:border-black"></button>
              </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-4">Delivery method</h4>
              <div class="flex items-center mb-4">
                <input class="mr-2" type="checkbox" value="" id="">
                <label class="font-medium" for="">Lorem ipsum dolor sit</label>
              </div>
              <div class="flex items-center mb-4">
                <input class="mr-2" type="checkbox" value="" id="">
                <label class="font-medium" for="">Duis nunc diam</label>
              </div>
              <div class="flex items-center mb-4">
                <input class="mr-2" type="checkbox" value="" id="">
                <label class="font-medium" for="">Morbi id purus</label>
              </div>
              <div class="flex items-center mb-4">
                <input class="mr-2" type="checkbox" value="" id="">
                <label class="font-medium" for="">Duis quam lacus</label>
              </div>
              <div class="flex items-center">
                <input class="mr-2" type="checkbox" value="" id="">
                <label class="font-medium" for="">Vestibulum magna</label>
              </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-4">Price</h4>
              <div class="relative h-4 mb-2">
                <div class="absolute top-1/2 left-0 w-full h-1 transform -translate-y-1/2">
                  <div class="h-1/2 w-full bg-black"></div>
                </div>
                <input class="relative w-full bg-transparent appearance-none cursor-pointer" id="rangeInput1" x-model="price" type="range" min="10" max="500">
              </div>
              <div class="flex items-center justify-between mb-8">
                <span x-text="'$' + price" class="font-medium">$250</span>
                <span class="font-medium" id="numberRange"></span>
              </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-3">Size</h4>
              <div class="flex flex-wrap -mx-1 -mb-1">
                <div class="p-1">
                  <button x-ref="size1" x-on:click="size = $refs.size1.textContent" :class="{ 'bg-green-500': size == $refs.size1.textContent, 'bg-transparent': size != $refs.size1.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold bg-green-500 border-2 border-black hover:bg-green-500 rounded-md">38</button>
                </div>
                <div class="p-1">
                  <button x-ref="size2" x-on:click="size = $refs.size2.textContent" :class="{ 'bg-green-500': size == $refs.size2.textContent, 'bg-transparent': size != $refs.size2.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">39</button>
                </div>
                <div class="p-1">
                  <button x-ref="size3" x-on:click="size = $refs.size3.textContent" :class="{ 'bg-green-500': size == $refs.size3.textContent, 'bg-transparent': size != $refs.size3.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">40</button>
                </div>
                <div class="p-1">
                  <button x-ref="size4" x-on:click="size = $refs.size4.textContent" :class="{ 'bg-green-500': size == $refs.size4.textContent, 'bg-transparent': size != $refs.size4.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">41</button>
                </div>
                <div class="p-1">
                  <button x-ref="size5" x-on:click="size = $refs.size5.textContent" :class="{ 'bg-green-500': size == $refs.size5.textContent, 'bg-transparent': size != $refs.size5.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">42</button>
                </div>
                <div class="p-1">
                  <button x-ref="size6" x-on:click="size = $refs.size6.textContent" :class="{ 'bg-green-500': size == $refs.size6.textContent, 'bg-transparent': size != $refs.size6.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">43</button>
                </div>
                <div class="p-1">
                  <button x-ref="size7" x-on:click="size = $refs.size7.textContent" :class="{ 'bg-green-500': size == $refs.size7.textContent, 'bg-transparent': size != $refs.size7.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">44</button>
                </div>
                <div class="p-1">
                  <button x-ref="size8" x-on:click="size = $refs.size8.textContent" :class="{ 'bg-green-500': size == $refs.size8.textContent, 'bg-transparent': size != $refs.size8.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">45</button>
                </div>
                <div class="p-1">
                  <button x-ref="size9" x-on:click="size = $refs.size9.textContent" :class="{ 'bg-green-500': size == $refs.size9.textContent, 'bg-transparent': size != $refs.size9.textContent }" class="flex w-10 h-9 items-center justify-around text-sm font-bold border-2 border-black hover:bg-green-500 rounded-md">46</button>
                </div>
              </div>
            </div>
            <div class="w-full sm:w-1/2 lg:w-full px-4 mb-8">
              <h4 class="text-2xl font-bold mb-4">Localization</h4>
              <input class="h-12 w-full px-4 py-2 mb-4 text-sm focus:outline-indigo placeholder-black font-bold border-2 border-black rounded-md" type="text" placeholder="City">
              <div class="group relative h-12 border-2 border-black rounded-md overflow-hidden">
                <select class="w-full h-full px-4 text-sm font-bold appearance-none outline-none" name="" id="">
                  <option value="1">Region</option>
                  <option value="1">South</option>
                  <option value="1">North</option>
                </select>
                <span class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 text-black group-hover:text-indigo-500">
                  <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.94667 0.453308H4.79333H1.05333C0.413333 0.453308 0.0933335 1.22664 0.546667 1.67997L4 5.13331C4.55333 5.68664 5.45333 5.68664 6.00667 5.13331L7.32 3.81997L9.46 1.67997C9.90667 1.22664 9.58667 0.453308 8.94667 0.453308Z" fill="currentColor"></path>
                  </svg>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-3/4 px-4">
          <div class="flex flex-wrap -mx-4 -mb-8">
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square3.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square4.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square5.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square6.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square2.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square3.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square4.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square5.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4 }">
              <a class="group block text-center" href="#">
                <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square6.png" alt="">
                </div>
                <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                <span class="text-sm font-bold text-green-500">$ 199.00</span>
              </a>
            </div>
            <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8 hidden" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4, 'hidden': !showContent }">
                <a class="group block text-center" href="#">
                  <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                    <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                  </div>
                  <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                  <span class="text-sm font-bold text-green-500">$ 199.00</span>
                </a>
              </div>
              <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8 hidden" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4, 'hidden': !showContent }">
                <a class="group block text-center" href="#">
                  <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                    <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                  </div>
                  <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                  <span class="text-sm font-bold text-green-500">$ 199.00</span>
                </a>
              </div>
              <div class="w-full sm:w-1/2 xl:w-1/3 px-4 mb-8 hidden" :class="{ 'xl:w-1/3': grid == 3, 'xl:w-1/4': grid == 4, 'hidden': !showContent }">
                <a class="group block text-center" href="#">
                  <div class="h-64 mb-4 bg-blueGray-900 rounded-md">
                    <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-square3.png" alt="">
                  </div>
                  <h4 class="font-bold text-black group-hover:text-indigo-500 mb-1">Product title</h4>
                  <span class="text-sm font-bold text-green-500">$ 199.00</span>
                </a>
              </div>
          </div>
          <div class="mt-6 text-center">
            <a x-on:click.prevent="showContent=true" :class="{ 'hidden': showContent }" class="group relative inline-block h-12 w-full xs:w-64 bg-blueGray-900 rounded-md" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                  <span class="text-base font-black text-black">Show more</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-6xl mx-auto">
      <h3 class="text-3xl font-bold mb-6">Billing address</h3>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-2/3 px-4 mb-12 lg:mb-0">
          <form action="">
            <div class="flex flex-wrap -mx-4 mb-6">
              <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
                <label class="block text-sm font-bold mb-2" for="">First Name</label>
                <input class="w-full h-12 py-3 px-4 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Lorem Ipsum dolor sit amet">
              </div>
              <div class="w-full md:w-1/2 px-4">
                <label class="block text-sm font-bold mb-2" for="">Last Name</label>
                <input class="w-full h-12 py-3 px-4 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Lorem Ipsum dolor sit amet">
              </div>
            </div>
            <div class="mb-6">
              <label class="block text-sm font-bold mb-2" for="">Username</label>
              <div class="relative">
                <div class="absolute top-0 left-0 flex w-12 h-full items-center justify-center bg-green-500 rounded-l-md border-r-2 border-black">
                  <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.668 7.85C3.668 9.068 4.522 9.81 5.936 9.81C6.944 9.81 7.854 9.32 8.134 8.62C8.33 9.39 8.946 9.81 9.912 9.81C11.522 9.81 12.558 8.396 12.558 6.24C12.558 2.964 10.08 0.584 6.664 0.584C3.234 0.584 0.658 3.146 0.658 6.576C0.658 10.02 3.22 12.582 6.664 12.582C7.91 12.582 9.086 12.218 10.066 11.518L9.576 10.566C8.694 11.182 7.672 11.532 6.664 11.532C3.864 11.532 1.792 9.418 1.792 6.576C1.792 3.748 3.864 1.634 6.664 1.634C9.45 1.634 11.424 3.552 11.424 6.24C11.424 7.752 10.906 8.774 10.136 8.774C9.66 8.774 9.422 8.522 9.422 7.99V5.82C9.422 4.126 8.428 3.16 6.678 3.16C4.956 3.16 3.85 4.056 3.85 5.414H5.166C5.166 4.742 5.684 4.364 6.608 4.364C7.462 4.364 7.91 4.77 7.91 5.568V5.708L6.02 5.862C4.48 5.974 3.668 6.73 3.668 7.85ZM5.25 7.794C5.25 7.248 5.642 6.968 6.594 6.884L7.924 6.772V7.108C7.924 8.06 7.322 8.634 6.342 8.634C5.614 8.634 5.25 8.354 5.25 7.794Z" fill="black"></path>
                  </svg>
                </div>
                <input class="relative w-full h-full py-3 pl-16 pr-4 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo bg-transparent" type="text" placeholder="First Name">
              </div>
            </div>
            <div class="mb-6">
              <label class="block text-sm font-bold mb-2" for="">Address</label>
              <input class="w-full h-12 py-3 px-4 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Lorem Ipsum dolor sit amet">
            </div>
            <div class="mb-6">
              <label class="block text-sm font-bold mb-2" for="">Address 2</label>
              <input class="w-full h-12 py-3 px-4 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Lorem Ipsum dolor sit amet">
            </div>
            <div class="flex flex-wrap -mx-4 mb-6">
              <div class="w-full md:w-1/3 px-4 mb-6 md:mb-0">
                <label class="block text-sm font-bold mb-2" for="">Country</label>
                <div class="group relative h-12 w-full border-2 border-black rounded-md overflow-hidden">
                  <select class="w-full h-full px-4 text-sm font-bold appearance-none outline-none" name="" id="">
                    <option value="1">Lorem Ipsum dolor sit amet</option>
                    <option value="1">Lorem Ipsum dolor sit amet</option>
                    <option value="1">Lorem Ipsum dolor sit amet</option>
                  </select>
                  <span class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 text-black group-hover:text-indigo-500">
                    <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.94667 0.453308H4.79333H1.05333C0.413333 0.453308 0.0933335 1.22664 0.546667 1.67997L4 5.13331C4.55333 5.68664 5.45333 5.68664 6.00667 5.13331L7.32 3.81997L9.46 1.67997C9.90667 1.22664 9.58667 0.453308 8.94667 0.453308Z" fill="currentColor"></path>
                    </svg>
                  </span>
                </div>
              </div>
              <div class="w-full md:w-1/3 px-4 mb-6 md:mb-0">
                <label class="block text-sm font-bold mb-2" for="">State</label>
                <div class="group relative h-12 w-full border-2 border-black rounded-md overflow-hidden">
                  <select class="w-full h-full px-4 text-sm font-bold appearance-none outline-none" name="" id="">
                    <option value="1">Lorem Ipsum dolor sit amet</option>
                    <option value="1">Lorem Ipsum dolor sit amet</option>
                    <option value="1">Lorem Ipsum dolor sit amet</option>
                  </select>
                  <span class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 text-black group-hover:text-indigo-500">
                    <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.94667 0.453308H4.79333H1.05333C0.413333 0.453308 0.0933335 1.22664 0.546667 1.67997L4 5.13331C4.55333 5.68664 5.45333 5.68664 6.00667 5.13331L7.32 3.81997L9.46 1.67997C9.90667 1.22664 9.58667 0.453308 8.94667 0.453308Z" fill="currentColor"></path>
                    </svg>
                  </span>
                </div>
              </div>
              <div class="w-full md:w-1/3 px-4">
                <label class="block text-sm font-bold mb-2" for="">Zip Code</label>
                <input class="w-full h-12 py-3 px-4 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="XX-XXX">
              </div>
            </div>
            <div class="mb-6">
              <div class="mb-4">
                <input type="checkbox" value="" id="">
                <label class="ml-2 font-bold" for="">Shipping address is the same as my billing address</label>
              </div>
              <div>
                <input type="checkbox" value="" id="">
                <label class="ml-2 font-bold" for="">Save this information for next time</label>
              </div>
            </div>
            <div class="mb-6">
              <label class="block text-sm font-bold mb-2" for="">Payment</label>
              <div class="mb-4">
                <input type="checkbox" value="" id="">
                <label class="ml-2 font-bold" for="">Credit card</label>
              </div>
              <div class="mb-4">
                <input type="checkbox" value="" id="">
                <label class="ml-2 font-bold" for="">Debit card</label>
              </div>
              <div>
                <input type="checkbox" value="" id="">
                <label class="ml-2 font-bold" for="">PayPal</label>
              </div>
            </div>
            <div class="flex flex-wrap -mx-4 mb-6">
              <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
                <label class="block text-sm font-bold mb-2" for="">Name on card</label>
                <input class="w-full h-12 py-3 px-4 mb-2 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Lorem Ipsum dolor sit amet">
                <span class="text-sm font-bold text-gray-700">Full name as displayed on card</span>
              </div>
              <div class="w-full md:w-1/2 px-4">
                <label class="block text-sm font-bold mb-2" for="">Credit card number</label>
                <input class="w-full h-12 py-3 px-4 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Lorem Ipsum dolor sit amet">
              </div>
            </div>
            <div class="flex -mx-4 mb-6">
              <div class="w-full md:w-1/2 px-4">
                <div class="flex -mx-2">
                  <div class="px-2">
                    <label class="block text-sm font-bold mb-2" for="">Expiration</label>
                    <input class="w-full h-12 py-3 px-4 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text">
                  </div>
                  <div class="px-2">
                    <label class="block text-sm font-bold mb-2" for="">CVV</label>
                    <input class="w-full h-12 py-3 px-4 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text">
                  </div>
                </div>
              </div>
            </div>
            <button class="group relative inline-block h-12 w-full bg-blueGray-900 rounded-md" type="submit">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                  <span class="text-base font-black text-black">Continue to Checkout</span>
                </div>
              </div>
            </button>
          </form>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="bg-green-500 border-2 border-black rounded-md shadow">
            <div class="pt-8 pb-6 px-6 border-b-2 border-black">
              <h4 class="font-bold mb-3">ORDER SUMMARY</h4>
              <p class="text-sm font-bold mb-5">Shipping and additional costs are calculated based on values you have entered.</p>
              <div class="border-2 border-black bg-white rounded-md">
                <div class="relative flex px-5 pt-5 pb-6 items-center justify-between">
                  <span class="text-sm font-bold">Order Subtotal</span>
                  <span class="text-sm font-black">$390.00</span>
                  <div class="absolute bottom-0 left-0 py-px bg-black w-11/12"></div>
                </div>
                <div class="relative flex px-5 pt-5 pb-6 items-center justify-between">
                  <span class="text-sm font-bold">Shipping and handling</span>
                  <span class="text-sm font-black">$10.00</span>
                  <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 py-px bg-black w-10/12"></div>
                </div>
                <div class="relative flex px-5 pt-5 pb-6 items-center justify-between">
                  <span class="text-sm font-bold">Tax</span>
                  <span class="text-sm font-black">$0.00</span>
                  <div class="absolute bottom-0 left-0 py-px bg-black w-full"></div>
                </div>
                <div class="flex px-5 py-5 items-center justify-between">
                  <span class="text-lg font-bold">Total</span>
                  <span class="text-lg font-black text-green-600">$400.00</span>
                </div>
              </div>
            </div>
            <div class="p-6">
              <label class="block text-sm font-bold mb-2" for="">Enter Promo Code</label>
              <div class="relative flex items-center">
                <input class="h-12 w-full py-3 pl-4 pr-24 text-sm font-bold outline-none placeholder-black border-2 border-black rounded-md" type="text" placeholder="EASDDGFHGE5423">
                <button class="group -ml-20 relative inline-block h-8 w-17 bg-black rounded-md" type="submit">
                  <div class="absolute top-0 left-0 transform -translate-y-px -translate-x-px w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                    <div class="flex h-full w-full items-center justify-center bg-orange-500 border-2 border-black rounded-md">
                      <span class="uppercase text-sm font-black text-black">Submit</span>
                    </div>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4 -mb-12">
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12">
          <div class="text-center">
            <span class="inline-block mb-2">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M28.6667 20.6667C29.04 20.6667 29.3333 20.9601 29.3333 21.3334V22.6667C29.3333 24.8801 27.5467 26.6667 25.3333 26.6667C25.3333 24.4667 23.5333 22.6667 21.3333 22.6667C19.1333 22.6667 17.3333 24.4667 17.3333 26.6667H14.6667C14.6667 24.4667 12.8667 22.6667 10.6667 22.6667C8.46666 22.6667 6.66666 24.4667 6.66666 26.6667C4.45333 26.6667 2.66666 24.8801 2.66666 22.6667V20.0001C2.66666 19.2667 3.26666 18.6667 4 18.6667H16.6667C18.5067 18.6667 20 17.1734 20 15.3334V8.00008C20 7.26675 20.6 6.66675 21.3333 6.66675H22.4533C23.4133 6.66675 24.2933 7.18675 24.7733 8.01342L25.6267 9.50675C25.7467 9.72008 25.5867 10.0001 25.3333 10.0001C23.4933 10.0001 22 11.4934 22 13.3334V17.3334C22 19.1734 23.4933 20.6667 25.3333 20.6667H28.6667Z" fill="#C6FF53"></path>
                <path d="M10.6667 29.3333C12.1394 29.3333 13.3333 28.1394 13.3333 26.6667C13.3333 25.1939 12.1394 24 10.6667 24C9.19391 24 8 25.1939 8 26.6667C8 28.1394 9.19391 29.3333 10.6667 29.3333Z" fill="#C6FF53"></path>
                <path d="M21.3333 29.3333C22.8061 29.3333 24 28.1394 24 26.6667C24 25.1939 22.8061 24 21.3333 24C19.8606 24 18.6667 25.1939 18.6667 26.6667C18.6667 28.1394 19.8606 29.3333 21.3333 29.3333Z" fill="#C6FF53"></path>
                <path d="M29.3333 16.7067V18.6667H25.3333C24.6 18.6667 24 18.0667 24 17.3333V13.3333C24 12.6 24.6 12 25.3333 12H27.0533L28.9867 15.3867C29.2133 15.7867 29.3333 16.24 29.3333 16.7067Z" fill="#C6FF53"></path>
                <path d="M17.44 2.66675H7.58666C4.86666 2.66675 2.66666 4.86675 2.66666 7.58675V16.0934C2.66666 16.8267 3.26666 17.4267 4 17.4267H16.2C17.56 17.4267 18.6667 16.3201 18.6667 14.9601V3.89341C18.6667 3.21341 18.12 2.66675 17.44 2.66675ZM13.4267 9.42675L10.64 12.1201C10.44 12.3067 10.1867 12.4001 9.94666 12.4001C9.69333 12.4001 9.44 12.3067 9.25333 12.1201L7.90666 10.8401C7.50666 10.4534 7.49333 9.81341 7.88 9.41341C8.25333 9.01341 8.89333 9.01341 9.29333 9.38675L9.94666 10.0134L12.04 7.98675C12.44 7.60008 13.0667 7.61341 13.4533 8.01341C13.84 8.41341 13.8267 9.04008 13.4267 9.42675Z" fill="#C6FF53"></path>
              </svg>
            </span>
            <h4 class="font-bold">Free Standard Shipping</h4>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12">
          <div class="text-center">
            <span class="inline-block mb-2">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M25 10.6667V13.4667C24.4133 13.3867 23.7467 13.3467 23 13.3334V10.6667C23 6.46675 21.8133 3.66675 16 3.66675C10.1867 3.66675 9 6.46675 9 10.6667V13.3334C8.25333 13.3467 7.58667 13.3867 7 13.4667V10.6667C7 6.80008 7.93333 1.66675 16 1.66675C24.0667 1.66675 25 6.80008 25 10.6667Z" fill="#C6FF53"></path>
                <path d="M25 13.4666C24.4133 13.3866 23.7467 13.3466 23 13.3333H8.99999C8.25332 13.3466 7.58666 13.3866 6.99999 13.4666C3.59999 13.8799 2.66666 15.5466 2.66666 19.9999V22.6666C2.66666 27.9999 3.99999 29.3333 9.33332 29.3333H22.6667C28 29.3333 29.3333 27.9999 29.3333 22.6666V19.9999C29.3333 15.5466 28.4 13.8799 25 13.4666ZM11.6133 22.2799C11.36 22.5199 11.0133 22.6666 10.6667 22.6666C10.4933 22.6666 10.32 22.6266 10.16 22.5599C9.98666 22.4933 9.85332 22.3999 9.71999 22.2799C9.47999 22.0266 9.33332 21.6799 9.33332 21.3333C9.33332 21.1599 9.37332 20.9866 9.43999 20.8266C9.50666 20.6666 9.59999 20.5199 9.71999 20.3866C9.85332 20.2666 9.98666 20.1733 10.16 20.1066C10.6533 19.8933 11.24 20.0133 11.6133 20.3866C11.7333 20.5199 11.8267 20.6666 11.8933 20.8266C11.96 20.9866 12 21.1599 12 21.3333C12 21.6799 11.8533 22.0266 11.6133 22.2799ZM17.2267 21.8399C17.16 21.9999 17.0667 22.1466 16.9467 22.2799C16.6933 22.5199 16.3467 22.6666 16 22.6666C15.64 22.6666 15.3067 22.5199 15.0533 22.2799C14.9333 22.1466 14.84 21.9999 14.7733 21.8399C14.7067 21.6799 14.6667 21.5066 14.6667 21.3333C14.6667 20.9733 14.8133 20.6399 15.0533 20.3866C15.5467 19.8933 16.44 19.8933 16.9467 20.3866C17.1867 20.6399 17.3333 20.9733 17.3333 21.3333C17.3333 21.5066 17.2933 21.6799 17.2267 21.8399ZM22.28 22.2799C22.0267 22.5199 21.68 22.6666 21.3333 22.6666C20.9867 22.6666 20.64 22.5199 20.3867 22.2799C20.1467 22.0266 20 21.6933 20 21.3333C20 20.9733 20.1467 20.6399 20.3867 20.3866C20.8933 19.8933 21.7867 19.8933 22.28 20.3866C22.3333 20.4533 22.3867 20.5199 22.44 20.5999C22.4933 20.6666 22.5333 20.7466 22.56 20.8266C22.6 20.9066 22.6267 20.9866 22.64 21.0666C22.6533 21.1599 22.6667 21.2533 22.6667 21.3333C22.6667 21.6799 22.52 22.0266 22.28 22.2799Z" fill="#C6FF53"></path>
              </svg>
            </span>
            <h4 class="font-bold">Secure Shopping Guarantee</h4>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12">
          <div class="text-center">
            <span class="inline-block mb-2">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.1866 24.6532V11.1066C11.1866 10.5732 11.3466 10.0532 11.64 9.61322L15.28 4.19989C15.8533 3.33322 17.28 2.71989 18.4933 3.17322C19.8 3.61322 20.6666 5.07989 20.3866 6.38655L19.6933 10.7466C19.64 11.1466 19.7466 11.5066 19.9733 11.7866C20.2 12.0399 20.5333 12.1999 20.8933 12.1999H26.3733C27.4266 12.1999 28.3333 12.6266 28.8666 13.3732C29.3733 14.0932 29.4666 15.0266 29.1333 15.9732L25.8533 25.9599C25.44 27.6132 23.64 28.9599 21.8533 28.9599H16.6533C15.76 28.9599 14.5066 28.6532 13.9333 28.0799L12.2266 26.7599C11.5733 26.2666 11.1866 25.4799 11.1866 24.6532Z" fill="#C6FF53"></path>
                <path d="M6.94669 8.50659H5.57335C3.50669 8.50659 2.66669 9.30659 2.66669 11.2799V24.6933C2.66669 26.6666 3.50669 27.4666 5.57335 27.4666H6.94669C9.01335 27.4666 9.85335 26.6666 9.85335 24.6933V11.2799C9.85335 9.30659 9.01335 8.50659 6.94669 8.50659Z" fill="#C6FF53"></path>
              </svg>
            </span>
            <h4 class="font-bold">100% Customer Satisfaction</h4>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12">
          <div class="text-center">
            <span class="inline-block mb-2">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16 2.66675C8.65335 2.66675 2.66669 8.65341 2.66669 16.0001C2.66669 23.3467 8.65335 29.3334 16 29.3334C23.3467 29.3334 29.3334 23.3467 29.3334 16.0001C29.3334 8.65341 23.3467 2.66675 16 2.66675ZM22.3734 12.9334L14.8134 20.4934C14.6267 20.6801 14.3734 20.7867 14.1067 20.7867C13.84 20.7867 13.5867 20.6801 13.4 20.4934L9.62669 16.7201C9.24002 16.3334 9.24002 15.6934 9.62669 15.3067C10.0134 14.9201 10.6534 14.9201 11.04 15.3067L14.1067 18.3734L20.96 11.5201C21.3467 11.1334 21.9867 11.1334 22.3734 11.5201C22.76 11.9067 22.76 12.5334 22.3734 12.9334Z" fill="#AFFF0F"></path>
              </svg>
            </span>
            <h4 class="font-bold">Product Guarantee</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <h3 class="text-3xl font-bold mb-2">Order history</h3>
      <p class="text-sm font-bold mb-8">Recent Orders dolor sit amet consectutar</p>
      <div class="border-2 border-black rounded-md shadow">
        <div class="flex items-center py-9 px-8 border-b-2 border-black">
          <div class="mr-10">
            <span class="block mb-2 text-sm font-bold">ORDER NUMBER</span>
            <span class="text-2xl font-bold">XYZ0864395</span>
          </div>
          <div>
            <span class="block mb-2 text-sm font-bold">DATE</span>
            <span class="text-2xl font-bold">September 20, 2022</span>
          </div>
          <div class="w-auto ml-auto">
            <a class="group relative inline-block h-12 w-full sm:w-34 bg-blueGray-900 rounded-md" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center text-black group-hover:text-white bg-white group-hover:bg-black border-2 border-black rounded-md transition-colors duration-500">
                  <span class="text-base font-black">View Invoice</span>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="py-8 px-8">
          <div class="flex -mx-4">
            <div class="w-full sm:w-auto px-4">
              <img class="w-56 h-52 border-2 border-black rounded-md shadow" src="shopal-assets/products/product-square1.png" alt="">
            </div>
            <div class="w-full sm:w-auto flex-grow pt-3 pb-4 px-4">
              <div class="flex mb-20 items-center justify-between">
                <div>
                  <h4 class="text-xl font-black">Product title</h4>
                  <span class="block text-sm font-bold mb-2">Small description about product dolor sit amet</span>
                </div>
                <div>
                  <span class="text-xl font-black text-green-600">$ 199.00</span>
                </div>
              </div>
              <div class="flex flex-wrap items-center justify-between">
                <div class="w-full lg:w-auto mb-6 lg:mb-0">
                  <div class="inline-block mr-16">
                    <span class="block mb-2 text-sm font-bold text-gray-600">Ordered On</span>
                    <span class="text-sm font-bold">07/17/2022</span>
                  </div>
                  <div class="inline-block">
                    <span class="block mb-2 text-sm font-bold text-gray-600">Delivered</span>
                    <span class="text-sm font-bold">07/23/2022</span>
                  </div>
                </div>
                <div class="w-full lg:w-auto flex flex-col sm:flex-row">
                  <a class="group relative inline-block mb-4 sm:mb-0 sm:mr-6 h-12 w-full sm:w-34 bg-blueGray-900 rounded-md" href="#">
                    <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                      <div class="flex h-full w-full items-center justify-center text-black group-hover:text-white bg-white group-hover:bg-black border-2 border-black rounded-md transition-colors duration-500">
                        <span class="text-base font-black">View Invoice</span>
                      </div>
                    </div>
                  </a>
                  <a class="group relative inline-block h-12 w-full sm:w-28 bg-blueGray-900 rounded-md" href="#">
                    <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                      <div class="flex h-full w-full items-center justify-center bg-indigo-500 border-2 border-black rounded-md transition-colors duration-500">
                        <span class="text-base font-black text-white">Buy Again</span>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-6 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4 -mb-8">
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/slack-logo.svg" alt="">
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/dropbox-logo.svg" alt="">
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/spotify-logo.svg" alt="">
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/stripe-logo.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative bg-indigo-500 overflow-hidden">
  <img class="hidden md:block absolute top-1/2 right-0 2xl:mr-32 w-40 lg:w-52 xl:w-auto transform -translate-y-1/2 img-fluid z-10" src="shopal-assets/background/orange-waves-large.svg" alt="">
  <img class="hidden lg:block absolute bottom-0 left-0 mb-10 ml-6 img-fluid" src="shopal-assets/background/dots-blue-vertical.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-6xl py-24 md:py-32 px-4 mx-auto bg-white">
      <img class="hidden sm:block absolute top-0 left-0 h-full transform -translate-x-1/2 img-fluid" src="shopal-assets/background/green-lines.svg" alt="">
      <div class="sm:max-w-sm lg:max-w-lg xl:max-w-xl mx-auto text-center">
        <h3 class="text-3xl md:text-4xl font-black mb-6">Sign-up for our Newsletter</h3>
        <p class="text-base md:text-lg font-bold mb-6">Receive our latest updates about our products and promotions.</p>
        <div class="flex flex-wrap items-center justify-center -mx-3">
          <div class="w-full lg:w-2/3 px-3 mb-3 lg:mb-0">
            <input class="h-full w-full px-5 py-3 placeholder-black text-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Search now...">
          </div>
          <div class="w-full lg:w-auto px-3">
            <a class="group relative inline-block h-12 w-full lg:w-32 -mb-2 bg-blueGray-900 rounded-md" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                  <span class="text-base font-black text-black">Subscribe</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto text-center">
      <span class="inline-block mx-auto mb-6">
        <svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M26.9999 0.333374C12.3066 0.333374 0.333252 12.3067 0.333252 27C0.333252 41.6934 12.3066 53.6667 26.9999 53.6667C41.6933 53.6667 53.6666 41.6934 53.6666 27C53.6666 12.3067 41.6933 0.333374 26.9999 0.333374ZM39.7466 20.8667L24.6266 35.9867C24.2532 36.36 23.7466 36.5734 23.2133 36.5734C22.6799 36.5734 22.1733 36.36 21.7999 35.9867L14.2533 28.44C13.4799 27.6667 13.4799 26.3867 14.2533 25.6134C15.0266 24.84 16.3066 24.84 17.0799 25.6134L23.2133 31.7467L36.9199 18.04C37.6933 17.2667 38.9733 17.2667 39.7466 18.04C40.5199 18.8134 40.5199 20.0667 39.7466 20.8667Z" fill="#AFFF0F"></path>
        </svg>
      </span>
      <span class="block mb-1 text-sm font-bold text-indigo-500">SUCCESS</span>
      <h3 class="text-2xl font-black mb-5">Your order has been placed</h3>
      <p class="text-lg font-bold mb-12">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
      <a class="group relative inline-block h-12 w-full xs:w-60 bg-blueGray-900 rounded-md" href="#">
        <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
          <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
            <span class="text-base font-black text-black">Continue Shopping</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>

<section>
  <div class="bg-gray-900">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap xs:h-16 py-4 items-center">
        <div class="w-full xs:w-auto mb-2 xs:mb-0 xs:mr-2">
          <div class="flex h-6 w-6 items-center justify-center bg-green-500 border-2 border-black rounded-md shadow-sm">
            <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.02 2.40997L7.14 0.394969C6.355 -0.155031 5.15 -0.125031 4.395 0.459969L1.89 2.41497C1.39 2.80497 0.994995 3.60497 0.994995 4.23497V7.68497C0.994995 8.95997 2.03 9.99997 3.305 9.99997H8.69499C9.96999 9.99997 11.005 8.96497 11.005 7.68997V4.29997C11.005 3.62497 10.57 2.79497 10.02 2.40997ZM6.375 7.99997C6.375 8.20497 6.205 8.37497 6 8.37497C5.795 8.37497 5.625 8.20497 5.625 7.99997V6.49997C5.625 6.29497 5.795 6.12497 6 6.12497C6.205 6.12497 6.375 6.29497 6.375 6.49997V7.99997Z" fill="black"></path>
            </svg>
          </div>
        </div>
        <a class="inline-block text-sm text-white font-bold" href="#">Homepage</a>
        <span class="mx-3">
          <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.453338 1.05338L0.453338 5.20671L0.453339 8.94671C0.453339 9.58671 1.22667 9.90671 1.68001 9.45338L5.13334 6.00005C5.68667 5.44671 5.68667 4.54671 5.13334 3.99338L3.82 2.68005L1.68001 0.540046C1.22667 0.093379 0.453338 0.41338 0.453338 1.05338Z" fill="white"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-white font-bold" href="#">Catalogue</a>
        <span class="mx-3">
          <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.453338 1.05338L0.453338 5.20671L0.453339 8.94671C0.453339 9.58671 1.22667 9.90671 1.68001 9.45338L5.13334 6.00005C5.68667 5.44671 5.68667 4.54671 5.13334 3.99338L3.82 2.68005L1.68001 0.540046C1.22667 0.093379 0.453338 0.41338 0.453338 1.05338Z" fill="white"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-green-500 font-bold" href="#">Product</a>
      </div>
    </div>
  </div>
</section>

<section class="py-12 bg-green-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="text-center">
        <h3 class="text-2xl font-black mb-2">#SHOPAL on Instagram</h3>
        <p class="text-lg font-bold mb-6">Phasellus lorem malesuada ligula pulvinar commodo maecenas</p>
        <div class="max-w-md md:max-w-none mx-auto mb-10">
          <div class="rounded-md border-2 border-black shadow overflow-hidden">
            <div class="flex flex-wrap items-center">
              <div class="w-1/2 md:w-1/3 xl:w-1/6 border-b-2 xl:border-b-0 border-r-2 border-black">
                <img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta6.png" alt="">
              </div>
              <div class="w-1/2 md:w-1/3 xl:w-1/6 border-b-2 xl:border-b-0 md:border-r-2 border-black">
                <img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta5.png" alt="">
              </div>
              <div class="w-1/2 md:w-1/3 xl:w-1/6 border-b-2 xl:border-b-0 border-r-2 border-black">
                <img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta4.png" alt="">
              </div>
              <div class="w-1/2 md:w-1/3 xl:w-1/6 border-b-2 md:border-b-0 md:border-r-2 border-black">
                <img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta3.png" alt="">
              </div>
              <div class="w-1/2 md:w-1/3 xl:w-1/6 border-r-2 border-black">
                <img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta2.png" alt="">
              </div>
              <div class="w-1/2 md:w-1/3 xl:w-1/6">
                <img class="h-44 w-full img-fluid object-cover" src="shopal-assets/images/product-photo-insta1.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <a class="group relative inline-block h-12 w-full sm:w-64 bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-indigo-500 border-2 border-black rounded-md">
              <span class="text-base font-black text-white">Check our Instagram</span>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

<section class="py-24 bg-gray-900" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <h1 class="font-heading text-4xl font-black text-white">New arrivals</h1>
    </div>
    <div class="max-w-sm md:max-w-2xl xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product1.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product2.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product3.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product4.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product5.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product6.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product7.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product8.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 hidden" :class="{ 'hidden': !showContent }">
            <a class="group block relative" href="#">
              <div class="relative h-72 mb-3">
                <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
                <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product1.png" alt="">
              </div>
              <div class="text-center">
                <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
                <span class="text-sm text-green-500 font-bold">$ 199.00</span>
              </div>
            </a>
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 px-4 hidden" :class="{ 'hidden': !showContent }">
            <a class="group block relative" href="#">
              <div class="relative h-72 mb-3">
                <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
                <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product2.png" alt="">
              </div>
              <div class="text-center">
                <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
                <span class="text-sm text-green-500 font-bold">$ 199.00</span>
              </div>
            </a>
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 px-4 hidden" :class="{ 'hidden': !showContent }">
            <a class="group block relative" href="#">
              <div class="relative h-72 mb-3">
                <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
                <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product3.png" alt="">
              </div>
              <div class="text-center">
                <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
                <span class="text-sm text-green-500 font-bold">$ 199.00</span>
              </div>
            </a>
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 px-4 hidden" :class="{ 'hidden': !showContent }">
            <a class="group block relative" href="#">
              <div class="relative h-72 mb-3">
                <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
                <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product4.png" alt="">
              </div>
              <div class="text-center">
                <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
                <span class="text-sm text-green-500 font-bold">$ 199.00</span>
              </div>
            </a>
          </div>
      </div>
    </div>
    <div class="mt-14 text-center">
      <a x-on:click.prevent="showContent=true" :class="{ 'hidden': showContent }" class="group relative inline-block h-12 max-w-sm w-full md:w-34 bg-blueGray-900 rounded-md" href="#">
        <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
          <div class="flex h-full w-full items-center justify-center bg-indigo-500 border-2 border-black rounded-md">
            <span class="text-base font-black text-white">Show more</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</section>

<section class="py-12 md:py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-6xl mx-auto">
      <h3 class="text-2xl font-bold">Cart</h3>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-2/3 px-4 mb-12 lg:mb-0">
          <div class="pt-12">
            <div class="overflow-x-scroll mb-6">
              <table class="w-full min-w-max table-auto border-b-2 border-black">
                <thead>
                  <tr class="border-b-2 border-black"><th class="pb-5 text-sm font-bold text-left">Product</th><th class="px-8 pb-5 text-sm font-bold text-left">Price</th><th class="px-8 pb-5 text-sm font-bold text-left">Quantity</th><th class="pb-5 text-sm font-bold text-right">Subtotal</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="h-28 pt-6 pr-8">
                      <div class="flex h-full items-center -mx-3">
                        <div class="w-auto px-3">
                          <img class="img-fluid w-20 h-20 border-2 border-black rounded-md" src="shopal-assets/products/product-square1.png" alt="">
                        </div>
                        <div class="w-auto flex-grow px-3">
                          <h4 class="text-base font-bold leading-none">Main Name for Product</h4>
                          <span class="text-sm font-bold">Small description</span>
                        </div>
                      </div>
                    </td>
                    <td class="h-28 pt-6 px-8">
                      <div class="flex h-full items-center text-base font-bold">$66.00</div>
                    </td>
                    <td class="h-28 pt-6 px-8">
                      <div class="flex h-full items-center">
                        <div class="flex h-12 w-24 px-2 items-center justify-between bg-white border-2 border-black rounded-md" x-data="{ quantity: 1 }">
                          <button x-on:click="quantity > 1 ? quantity-- : quantity" class="flex w-3.5 h-3.5 px-px items-center justify-center bg-black hover:bg-indigo-500 rounded transition duration-100">
                            <div class="h-px mx-px w-full bg-white"></div>
                          </button>
                          <input x-model="quantity" class="w-10 text-center text-sm font-bold placeholder-black text-black outline-none" type="number">
                          <button x-on:click="quantity++" class="relative flex w-3.5 h-3.5 px-px py-px items-center justify-center bg-black hover:bg-indigo-500 rounded transition duration-100">
                            <div class="relative h-full w-full py-px">
                              <div class="absolute top-1/2 left-0 h-px w-full bg-white"></div>
                              <div class="inline-block max-w-max mx-auto h-full bg-white">
                                <div class="inline-block px-px"></div>
                              </div>
                            </div>
                          </button>
                        </div>
                      </div>
                    </td>
                    <td class="h-28 pt-6 pl-8">
                      <div class="flex h-full items-center text-base font-bold">$132.00</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="h-28 pr-8">
                      <div class="flex h-full items-center -mx-3">
                        <div class="w-auto px-3">
                          <img class="img-fluid w-20 h-20 border-2 border-black rounded-md" src="shopal-assets/products/product-square2.png" alt="">
                        </div>
                        <div class="w-auto flex-grow px-3">
                          <h4 class="text-base font-bold leading-none">Main Name for Product</h4>
                          <span class="text-sm font-bold">Small description</span>
                        </div>
                      </div>
                    </td>
                    <td class="h-28 px-8">
                      <div class="flex h-full items-center text-base font-bold">$66.00</div>
                    </td>
                    <td class="h-28 px-8">
                      <div class="flex h-full items-center">
                        <div class="flex h-12 w-24 px-2 items-center justify-between bg-white border-2 border-black rounded-md" x-data="{ quantity: 1 }">
                            <button x-on:click="quantity > 1 ? quantity-- : quantity" class="flex w-3.5 h-3.5 px-px items-center justify-center bg-black hover:bg-indigo-500 rounded transition duration-100">
                              <div class="h-px mx-px w-full bg-white"></div>
                            </button>
                            <input x-model="quantity" class="w-10 text-center text-sm font-bold placeholder-black text-black outline-none" type="number">
                            <button x-on:click="quantity++" class="relative flex w-3.5 h-3.5 px-px py-px items-center justify-center bg-black hover:bg-indigo-500 rounded transition duration-100">
                              <div class="relative h-full w-full py-px">
                                <div class="absolute top-1/2 left-0 h-px w-full bg-white"></div>
                                <div class="inline-block max-w-max mx-auto h-full bg-white">
                                  <div class="inline-block px-px"></div>
                                </div>
                              </div>
                            </button>
                          </div>
                      </div>
                    </td>
                    <td class="h-28 pl-8">
                      <div class="flex h-full items-center text-base font-bold">$132.00</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="max-w-sm">
              <label class="block text-sm font-bold mb-2" for="">Enter Promo Code</label>
              <div class="flex">
                <input class="h-12 w-full py-3 px-4 mr-2 text-sm font-bold placeholder-black border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="EASDDGFHGE5423">
                <button class="flex-shrink-0 group relative inline-block h-12 w-24 bg-blueGray-900 rounded-md" type="submit">
                  <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                    <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                      <span class="text-base font-black text-black">Apply</span>
                    </div>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="pt-8 pb-6 px-6 bg-green-500 border-2 border-black rounded-md shadow">
            <h4 class="font-bold mb-3">Cart totals</h4>
            <p class="text-sm font-bold mb-5">Shipping and additional costs are calculated based on values you have entered.</p>
            <div class="mb-6 border-2 border-black bg-white rounded-md">
              <div class="relative flex px-5 pt-5 pb-6 items-center justify-between">
                <span class="text-sm font-bold">Order Subtotal</span>
                <span class="text-sm font-black">$390.00</span>
                <div class="absolute bottom-0 left-0 py-px bg-black w-11/12"></div>
              </div>
              <div class="relative flex px-5 pt-5 pb-6 items-center justify-between">
                <span class="text-sm font-bold">Shipping and handling</span>
                <span class="text-sm font-black">$10.00</span>
                <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 py-px bg-black w-10/12"></div>
              </div>
              <div class="relative flex px-5 pt-5 pb-6 items-center justify-between">
                <span class="text-sm font-bold">Tax</span>
                <span class="text-sm font-black">$0.00</span>
                <div class="absolute bottom-0 left-0 py-px bg-black w-full"></div>
              </div>
              <div class="flex px-5 py-5 items-center justify-between">
                <span class="text-lg font-bold">Total</span>
                <span class="text-lg font-black text-green-600">$400.00</span>
              </div>
            </div>
            <button class="group relative inline-block h-12 w-full bg-blueGray-900 rounded-md">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-black hover:bg-indigo-500 border-2 border-black rounded-md transition duration-300">
                  <span class="text-base font-black text-white">Go to Checkout</span>
                </div>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pb-24 md:pb-0 bg-white">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
          <div class="relative py-16 pl-12 sm:pl-20">
            <img class="absolute top-0 h-full left-0 ml-28" src="shopal-assets/background/green-lines.svg" alt="">
            <img class="absolute top-1/2 w-10 sm:w-auto transform -translate-y-1/2 left-0 img-fluid" src="shopal-assets/background/circle-orange-green-part.svg" alt="">
            <img class="relative img-fluid h-80 sm:h-100 border-2 border-black shadow rounded-md object-cover" src="shopal-assets/images/photo-men.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="max-w-lg mx-auto">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M30.0001 11.6667L25.0001 11.6667L21.6667 18.3334L21.6667 28.3334L31.6667 28.3334L31.6667 18.3334L26.6667 18.3334L30.0001 11.6667ZM16.6667 11.6667L11.6667 11.6667L8.33341 18.3334L8.33341 28.3334L18.3334 28.3334L18.3334 18.3334L13.3334 18.3334L16.6667 11.6667Z" fill="black"></path>
              <defs><rect width="40" height="40" fill="white" transform="translate(40 40) rotate(-180)"></rect></defs>
            </svg>
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-black mt-7 mb-6">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
            <p class="text-lg font-bold mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <h5 class="text-xl font-black mb-1">Danny Bailey</h5>
            <span class="font-bold">CEO &amp; Founder</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>