UI Components – Shopal Library

<section class="py-6 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="bg-green-500 border-2 border-black rounded-md shadow">
        <div class="flex flex-wrap items-center -mx-3">
          <div class="w-full sm:w-1/2 lg:w-1/4 px-3">
            <div class="px-4 py-12 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.46667 22.6667 6.66667 24.4667 6.66667 26.6667C4.45334 26.6667 2.66667 24.8801 2.66667 22.6667V20.0001C2.66667 19.2667 3.26667 18.6667 4.00001 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="#474BC5"></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="#474BC5"></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="#474BC5"></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="#474BC5"></path>
                  <path d="M17.44 2.66675H7.58667C4.86667 2.66675 2.66667 4.86675 2.66667 7.58675V16.0934C2.66667 16.8267 3.26667 17.4267 4.00001 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.94667 12.4001C9.69334 12.4001 9.44001 12.3067 9.25334 12.1201L7.90667 10.8401C7.50667 10.4534 7.49334 9.81341 7.88 9.41341C8.25334 9.01341 8.89334 9.01341 9.29334 9.38675L9.94667 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="#474BC5"></path>
                </svg>
              </span>
              <h4 class="font-bold">Free Standard Shipping</h4>
            </div>
          </div>
          <div class="w-full sm:w-1/2 lg:w-1/4 px-3">
            <div class="px-4 py-12 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="#474BC5"></path>

<section class="relative py-24 overflow-hidden">
  <img class="hidden sm:block absolute top-0 left-0 h-full transform -translate-x-12 xl:-translate-x-0 img-fluid" src="shopal-assets/background/green-lines.svg" alt="">
  <img class="hidden sm:block absolute top-0 right-0 h-full transform translate-x-96 lg:translate-x-72 xl:translate-x-60 2xl:translate-x-44 img-fluid" src="shopal-assets/background/orange-waves-large.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-4xl 2xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="sm:max-w-sm 2xl:max-w-none mx-auto">
            <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">Receive our latest updates about our products and promotions.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="sm:max-w-sm 2xl:max-w-none mx-auto">
            <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-1/3 px-3">
                <a class="group relative inline-block h-12 w-full lg:w-32 -mb-2 bg-black 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>

<section class="py-14 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">Our products</h1>
    </div>
    <div class="max-w-sm md:max-w-2xl lg:max-w-none mx-auto">
      <div class="flex flex-wrap -mx-4 -mb-6">
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-6">
          <a class="relative group block" href="#">
            <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
            <div class="relative transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 border-2 border-black rounded-md overflow-hidden transition duration-500">
              <span class="absolute top-0 left-0 m-5 inline-flex h-8 px-1 items-center justify-center text-sm font-black uppercase bg-orange-500 border border-black rounded-md shadow-sm">Label</span>
              <img class="img-fluid w-full h-72 object-cover" src="shopal-assets/products/product-gradient-shadow1.png" alt="">
              <div class="absolute bottom-0 left-0 mb-8 w-full text-center">
                <h3 class="text-white font-black mb-1">Product title</h3>
                <span class="text-sm text-green-500 font-black">$45.99</span>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-6">
          <a class="relative group block" href="#">
            <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
            <div class="relative transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 border-2 border-black rounded-md overflow-hidden transition duration-500">

<section class="pt-16 pb-14" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center justify-between -mx-4">
        <div class="hidden lg:block w-auto px-4">
          <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="w-full lg:w-2/3 px-4">
          <div class="max-w-3xl mx-auto text-center">
            <span class="inline-block mb-5 text-sm font-black text-indigo-500">Lorem ipsum</span>
            <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">
                        <h2 class="text-2xl sm:text-3xl md:text-4xl font-black mb-8">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
                        <p class="max-w-lg mx-auto text-base sm:text-lg font-bold mb-9">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim quam ultricies, placerat tellus sed, laoreet orci. Duis luctus quam ac metus gravida sodales. Sed a ex accumsan, pellentesque sem eget, scelerisque dolor.</p>
                        <div>
                          <img class="w-16 h-16 mb-6 mx-auto rounded-full border-2 border-black shadow img-fluid" src="shopal-assets/images/avatar-men.png" alt="">
                          <h5 class="text-xl font-black mb-1">Danny Bailey</h5>

<section>
  <div class="bg-gray-900">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap h-16 py-4 items-center">
        <a class="inline-block text-sm text-white font-bold" href="#">Homepage</a>
        <span class="mx-2">
          <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.694 11L5.698 0.78H3.99L0 11H1.694Z" fill="white"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-white font-bold" href="#">Catalogue</a>
        <span class="mx-2">
          <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.694 11L5.698 0.78H3.99L0 11H1.694Z" 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="relative py-24 bg-indigo-500 overflow-hidden">
  <img class="hidden sm:block absolute top-0 left-0 h-full transform -translate-x-12 xl:-translate-x-0 img-fluid" src="shopal-assets/background/green-lines.svg" alt="">
  <img class="hidden sm:block absolute top-0 right-0 h-full transform translate-x-96 lg:translate-x-72 xl:translate-x-60 2xl:translate-x-44 img-fluid" src="shopal-assets/background/orange-waves-large.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-4xl 2xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="sm:max-w-sm 2xl:max-w-none mx-auto">
            <h3 class="text-3xl md:text-4xl font-black text-white mb-6">Sign-up for our Newsletter</h3>
            <p class="text-base md:text-lg font-bold text-white">Receive our latest updates about our products and promotions.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="sm:max-w-sm 2xl:max-w-none mx-auto">
            <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-green" type="text" placeholder="Search now...">
              </div>
              <div class="w-full lg:w-1/3 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>

<section class="py-20 lg:py-24">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-sm mx-auto">
      <div class="text-center mb-8">
        <span class="block text-sm font-bold uppercase text-indigo-500">Sign In</span>
        <h3 class="text-2xl font-bold">Join our community</h3>
      </div>
      <form action="">
        <input class="w-full mb-4 py-3 px-6 h-12 text-sm font-bold placeholder-black border-2 border-black rounded-md focus:outline-indigo" type="email" placeholder="Email address">
        <input class="w-full mb-4 py-3 px-6 h-12 text-sm font-bold placeholder-black border-2 border-black rounded-md focus:outline-indigo" type="password" placeholder="Password">
        <button class="group relative inline-block h-12 mb-4 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-indigo-500 border-2 border-black rounded-md transition duration-300">
              <span class="text-base font-black text-white">Get Started</span>
            </div>
          </div>
        </button>
        <div class="text-center mb-5"><a class="inline-block text-sm font-bold hover:underline" href="#">Forgot password?</a></div>
        <a class="group relative inline-block h-12 mb-2 w-full 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-blue-500 border-2 border-black rounded-md transition duration-300">
              <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.13469 17.7272V9.766H8.85806L9.26664 6.66243H6.13469V4.68126C6.13469 3.78299 6.38796 3.17083 7.70273 3.17083L9.37687 3.17015V0.394215C9.08735 0.357312 8.09354 0.272705 6.93684 0.272705C4.52146 0.272705 2.86785 1.71878 2.86785 4.37389V6.66243H0.13623V9.766H2.86785V17.7272H6.13469Z" fill="white"></path>
              </svg>

<section class="pt-16 pb-18">
  <div class="container mx-auto px-4 mb-12 md:mb-20">
    <div class="max-w-xl mx-auto text-center">
      <a class="inline-block mb-6" href="#">
        <img src="shopal-assets/logos/shopal-logo.svg" alt="">
      </a>
      <ul class="flex flex-col md:flex-row mb-8 items-center justify-center">
        <li class="mb-6 md:mb-0 md:mr-6"><a class="inline-block text-sm font-bold text-black hover:text-indigo-500" href="#">Category</a></li>
        <li class="mb-6 md:mb-0 md:mr-6"><a class="inline-block text-sm font-bold text-black hover:text-indigo-500" href="#">Collection</a></li>
        <li class="mb-6 md:mb-0 md:mr-6"><a class="inline-block text-sm font-bold text-black hover:text-indigo-500" href="#">Story</a></li>
        <li><a class="inline-block text-sm font-bold text-black hover:text-indigo-500" href="#">Brand</a></li>
      </ul>
      <div class="flex flex-col xs:flex-row items-center justify-center mb-6">
        <a class="inline-block text-green-500 hover:text-indigo-500 mb-6 xs:mb-0 xs:mr-6" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="currentColor"></path>
            <mask id="mask0_601_10113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="white"></path>
            </mask>
          </svg>
        </a>
        <a class="inline-block text-green-500 hover:text-indigo-500 mb-6 xs:mb-0 xs:mr-6" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="currentColor"></path>

<section class="py-16 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="shadow rounded-md relative overflow-hidden">
      <img class="img-fluid w-full h-80 border-2 border-black rounded-md object-cover" src="shopal-assets/images/banner1.png" alt="">
      <div class="absolute top-1/2 left-0 sm:pl-20 p-6 w-full transform -translate-y-1/2">
        <h4 class="text-3xl font-black text-white mb-6">Banner Hero</h4>
        <a class="group relative inline-block h-12 w-full xs:w-34 text-center 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">Start Buying</span>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

<section class="py-6 bg-blue-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="px-6 bg-white border-2 border-black rounded-md shadow">
        <div class="flex flex-wrap items-center justify-between -mx-3">
          <div class="w-full md:w-1/2 xl:w-auto px-3">
            <div class="flex py-5 items-center">
              <span class="inline-block mr-3">
                <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.46667 22.6667 6.66667 24.4667 6.66667 26.6667C4.45333 26.6667 2.66667 24.8801 2.66667 22.6667V20.0001C2.66667 19.2667 3.26667 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.58667C4.86667 2.66675 2.66667 4.86675 2.66667 7.58675V16.0934C2.66667 16.8267 3.26667 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.94667 12.4001C9.69334 12.4001 9.44 12.3067 9.25333 12.1201L7.90667 10.8401C7.50667 10.4534 7.49333 9.81341 7.88 9.41341C8.25333 9.01341 8.89333 9.01341 9.29333 9.38675L9.94667 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 xl:w-auto px-3">
            <div class="flex py-5 items-center">
              <span class="inline-block mr-3">
                <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>

<section class="py-14 bg-orange-500" 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-black">Our products</h1>
    </div>
    <div class="flex flex-wrap -mx-3 -mb-6">
      <div class="w-full md:w-1/2 xl:w-1/3 px-3 mb-6">
        <a class="relative group block" href="#">
          <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
          <div class="relative transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 border-2 border-black rounded-md overflow-hidden transition duration-500">
            <span class="absolute top-0 left-0 m-5 inline-flex h-8 px-1 items-center justify-center text-sm font-black uppercase bg-indigo-500 border border-black rounded-md shadow-sm">Label</span>
            <img class="img-fluid w-full h-112 object-cover" src="shopal-assets/products/product-gradient-shadow1.png" alt="">
            <div class="absolute bottom-0 left-0 mb-8 w-full text-center">
              <h3 class="text-2xl text-white font-black mb-1">Product title</h3>
              <span class="text-green-500 font-black">$45.99</span>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 px-3 mb-6">
        <a class="relative group block" href="#">
          <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
          <div class="relative transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 border-2 border-black rounded-md overflow-hidden transition duration-500">
            <span class="absolute top-0 left-0 m-5 inline-flex h-8 px-1 items-center justify-center text-sm font-black uppercase bg-indigo-500 border border-black rounded-md shadow-sm">Label</span>

<section class="py-20 bg-green-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4 -mb-18">
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/slack-logo.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/dropbox-logo.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/spotify-logo.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/amazon-logo.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/netflix-logo.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/stripe-logo.svg" alt="">
        </div>
      </div>
    </div>

<section class="pt-16 pb-14 bg-green-500" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center justify-between -mx-4">
        <div class="hidden lg:block w-auto px-4">
          <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="w-full lg:w-2/3 px-4">
          <div class="max-w-3xl mx-auto text-center">
            <span class="inline-block mb-5 text-sm font-black text-indigo-500">Lorem ipsum</span>
            <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">
                        <h2 class="text-2xl sm:text-3xl md:text-4xl font-black mb-8">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
                        <p class="max-w-lg mx-auto text-base sm:text-lg font-bold mb-9">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim quam ultricies, placerat tellus sed, laoreet orci. Duis luctus quam ac metus gravida sodales. Sed a ex accumsan, pellentesque sem eget, scelerisque dolor.</p>
                        <div>
                          <img class="w-16 h-16 mb-6 mx-auto rounded-full border-2 border-black shadow img-fluid" src="shopal-assets/images/avatar-men.png" alt="">
                          <h5 class="text-xl font-black mb-1">Danny Bailey</h5>

<section>
  <div class="bg-white">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap h-16 py-4 items-center">
        <a class="inline-block text-sm text-black font-bold" href="#">Homepage</a>
        <span class="mx-2">
          <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.694 11L5.698 0.78H3.99L0 11H1.694Z" fill="black"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-black font-bold" href="#">Catalogue</a>
        <span class="mx-2">
          <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.694 11L5.698 0.78H3.99L0 11H1.694Z" fill="black"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-indigo-500 font-bold" href="#">Product</a>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-md lg:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
          <div class="max-w-md">
            <h3 class="text-2xl font-bold mb-8">Login</h3>
            <form action="">
              <div class="mb-6">
                <label class="block text-sm font-bold mb-2" for="">E-Mail 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="email" placeholder="example@gmail.com">
              </div>
              <div class="mb-5">
                <label class="block text-sm font-bold mb-2" for="">Password</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="password" placeholder="Password">
              </div>
              <div class="flex mb-6 items-center">
                <input type="checkbox" value="" id="">
                <label class="ml-2 text-sm font-bold" for="">Remember my account details</label>
              </div>
              <div class="flex flex-wrap items-center justify-between">
                <div class="w-full lg:w-auto mb-4 lg:mb-0">
                  <button class="group relative inline-block h-12 w-full lg:w-40 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">

<section class="py-16 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">
        <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
          <a class="max-w-sm mx-auto group block h-80 bg-blueGray-900 rounded-md relative" href="#">
            <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
              <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner-small1.png" alt="">
              <div class="absolute bottom-0 left-0 p-8 w-full">
                <span class="block text-xs text-white font-black">Banner label</span>
                <h4 class="text-xl font-black text-white">Banner Hero</h4>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
          <a class="max-w-sm mx-auto group block h-80 bg-blueGray-900 rounded-md relative" href="#">
            <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
              <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner-small2.png" alt="">
              <div class="absolute bottom-0 left-0 p-8 w-full">
                <span class="block text-xs text-white font-black">Banner label</span>
                <h4 class="text-xl font-black text-white">Banner Hero</h4>
              </div>
            </div>

<section class="pt-16 pb-18 bg-black">
  <div class="container mx-auto px-4 mb-12 md:mb-20">
    <div class="max-w-xl mx-auto text-center">
      <a class="inline-block mb-6" href="#">
        <img src="shopal-assets/logos/shopal-logo-white.svg" alt="">
      </a>
      <ul class="flex flex-col md:flex-row mb-8 items-center justify-center">
        <li class="mb-6 md:mb-0 md:mr-6"><a class="inline-block text-sm font-bold text-white hover:text-green-500" href="#">Category</a></li>
        <li class="mb-6 md:mb-0 md:mr-6"><a class="inline-block text-sm font-bold text-white hover:text-green-500" href="#">Collection</a></li>
        <li class="mb-6 md:mb-0 md:mr-6"><a class="inline-block text-sm font-bold text-white hover:text-green-500" href="#">Story</a></li>
        <li><a class="inline-block text-sm font-bold text-white hover:text-green-500" href="#">Brand</a></li>
      </ul>
      <div class="flex flex-col xs:flex-row items-center justify-center mb-6">
        <a class="inline-block text-green-500 hover:text-indigo-500 mb-6 xs:mb-0 xs:mr-6" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="currentColor"></path>
            <mask id="mask0_601_10113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="white"></path>
            </mask>
          </svg>
        </a>
        <a class="inline-block text-green-500 hover:text-indigo-500 mb-6 xs:mb-0 xs:mr-6" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="currentColor"></path>

<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-flex w-12 h-12 items-center justify-center rounded-full bg-green-500 mb-3">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.5 15.5C21.78 15.5 22 15.72 22 16V17C22 18.66 20.66 20 19 20C19 18.35 17.65 17 16 17C14.35 17 13 18.35 13 20H11C11 18.35 9.65 17 8 17C6.35 17 5 18.35 5 20C3.34 20 2 18.66 2 17V15C2 14.45 2.45 14 3 14H12.5C13.88 14 15 12.88 15 11.5V6C15 5.45 15.45 5 16 5H16.84C17.56 5 18.22 5.39 18.58 6.01L19.22 7.13C19.31 7.29 19.19 7.5 19 7.5C17.62 7.5 16.5 8.62 16.5 10V13C16.5 14.38 17.62 15.5 19 15.5H21.5Z" fill="#474BC5"></path>
                <path d="M8 22C9.10457 22 10 21.1046 10 20C10 18.8954 9.10457 18 8 18C6.89543 18 6 18.8954 6 20C6 21.1046 6.89543 22 8 22Z" fill="#474BC5"></path>
                <path d="M16 22C17.1046 22 18 21.1046 18 20C18 18.8954 17.1046 18 16 18C14.8954 18 14 18.8954 14 20C14 21.1046 14.8954 22 16 22Z" fill="#474BC5"></path>
                <path d="M22 12.53V14H19C18.45 14 18 13.55 18 13V10C18 9.45 18.45 9 19 9H20.29L21.74 11.54C21.91 11.84 22 12.18 22 12.53Z" fill="#474BC5"></path>
                <path d="M13.08 2H5.69C3.65 2 2 3.65 2 5.69V12.07C2 12.62 2.45 13.07 3 13.07H12.15C13.17 13.07 14 12.24 14 11.22V2.92C14 2.41 13.59 2 13.08 2ZM10.07 7.07L7.98 9.09C7.83 9.23 7.64 9.3 7.46 9.3C7.27 9.3 7.08 9.23 6.94 9.09L5.93 8.13C5.63 7.84 5.62 7.36 5.91 7.06C6.19 6.76 6.67 6.76 6.97 7.04L7.46 7.51L9.03 5.99C9.33 5.7 9.8 5.71 10.09 6.01C10.38 6.31 10.37 6.78 10.07 7.07Z" fill="#474BC5"></path>
              </svg>
            </span>
            <h4 class="text-xl font-black mb-1">Free Shipping</h4>
            <span class="text-lg font-bold">From $45</span>
          </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-flex w-12 h-12 items-center justify-center rounded-full bg-green-500 mb-3">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.75 8V10.1C18.31 10.04 17.81 10.01 17.25 10V8C17.25 4.85 16.36 2.75 12 2.75C7.64 2.75 6.75 4.85 6.75 8V10C6.19 10.01 5.69 10.04 5.25 10.1V8C5.25 5.1 5.95 1.25 12 1.25C18.05 1.25 18.75 5.1 18.75 8Z" fill="#474BC5"></path>

<section class="py-6 bg-orange-500">
  <div class="container px-4 mx-auto">
    <h4 class="text-lg font-black mb-5 text-center">Trusted by brands all over the world</h4>
    <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 bg-white 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 bg-white 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 bg-white 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 bg-white border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/stripe-logo.svg" alt="">
          </div>

<section class="relative py-16 overflow-hidden">
  <img class="hidden sm:block absolute top-0 left-0 h-full img-fluid" src="shopal-assets/background/green-line-top.svg" alt="">
  <img class="hidden sm:block absolute top-0 right-0 h-full img-fluid" src="shopal-assets/background/orange-line-top.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-md lg:max-w-6xl mx-auto px-6 sm:px-16 bg-indigo-500 border-2 border-black shadow rounded-md">
      <div class="flex py-10 flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="max-w-md 2xl:max-w-none mx-auto">
            <h3 class="text-3xl sm:text-4xl font-black text-white mb-6">Sign-up for our Newsletter</h3>
            <p class="max-w-sm text-base md:text-lg font-bold text-white">Receive our latest updates about our products and promotions.</p>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md 2xl:max-w-none mx-auto">
            <img class="img-fluid block mb-6" src="shopal-assets/background/light-blue-horizontal.svg" alt="">
            <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-green" type="text" placeholder="Search now...">
              </div>
              <div class="w-full lg:w-1/3 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>