UI Components – Shopal Library

<section class="py-16 bg-indigo-500">
  <div class="container px-4 mx-auto">
    <h4 class="text-lg font-black text-white mb-6 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/3 xl:w-1/6 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/3 xl:w-1/6 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/3 xl:w-1/6 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/3 xl:w-1/6 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/amazon-logo.svg" alt="">
          </div>

<section class="py-16 bg-indigo-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="max-w-2xl mx-auto mb-16 text-center">
        <span class="inline-block mb-5 text-sm font-black text-green-500">Lorem ipsum</span>
        <h2 class="text-3xl sm:text-4xl font-black text-white mb-8">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="text-lg font-bold text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="max-w-md mx-auto h-full p-8 bg-white border-2 border-black rounded-md shadow">
            <p class="text-lg font-bold mb-8">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-12 h-12 mb-3 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>
              <span class="font-bold">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="max-w-md mx-auto h-full p-8 bg-white border-2 border-black rounded-md shadow">
            <p class="text-lg font-bold mb-8">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-12 h-12 mb-3 rounded-full border-2 border-black shadow img-fluid" src="shopal-assets/images/avatar-men.png" alt="">

<section>
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-2/5 pt-18 md:pb-14 px-4 md:border-r-2 border-black">
          <div class="md:mr-8 xl:mr-24">
            <p class="text-xl font-black">Sign Up to our newsletter</p>
            <p class="text-xl font-black mb-6">and receive 10% off your first order!</p>
            <div class="xl:flex items-center max-w-sm mb-14">
              <input class="h-12 w-full mb-4 xl:mb-0 xl:mr-3 pl-5 py-3 placeholder-black font-bold text-black border-2 border-black bg-white rounded-md focus:outline-indigo" type="email" placeholder="Type your e-mail">
              <button class="group flex-shrink-0 relative inline-block h-12 w-full xl:w-32 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 text-black hover:text-white bg-white hover:bg-black border-2 border-black rounded-md transition duration-500">
                    <span class="text-base font-black">Subscribe</span>
                  </div>
                </div>
              </button>
            </div>
            <div class="-mb-5">
              <a class="group relative inline-block mb-5 mr-5" href="#">
                <div class="absolute top-0 left-0 w-full h-full rounded-full bg-blueGray-900"></div>
                <div class="relative inline-flex items-center justify-center h-12 w-12 bg-white rounded-full border-2 border-black transform -translate-x-1 -translate-y-1 group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                  <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.6347 20.7272V12.766H16.3581L16.7666 9.66243H13.6347V7.68126C13.6347 6.78299 13.888 6.17083 15.2027 6.17083L16.8769 6.17015V3.39421C16.5874 3.35731 15.5935 3.27271 14.4368 3.27271C12.0215 3.27271 10.3679 4.71878 10.3679 7.37389V9.66243H7.63623V12.766H10.3679V20.7272H13.6347Z" fill="#425F58"></path>

<section>
  <div class="bg-green-500">
    <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="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.052 4.418C4.228 4.418 5.25 3.424 5.25 2.234C5.25 1.044 4.256 0.0219998 3.052 0.0219998C1.848 0.0219998 0.826 1.03 0.826 2.234C0.826 3.424 1.848 4.418 3.052 4.418Z" 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="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.052 4.418C4.228 4.418 5.25 3.424 5.25 2.234C5.25 1.044 4.256 0.0219998 3.052 0.0219998C1.848 0.0219998 0.826 1.03 0.826 2.234C0.826 3.424 1.848 4.418 3.052 4.418Z" 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-12 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-xs md:max-w-xl xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center justify-between -mx-2 -mb-12">
        <div class="w-full md:w-1/2 xl:w-auto px-2 mb-12">
          <div class="flex items-center">
            <span class="inline-flex w-12 h-12 items-center justify-center rounded-full border-2 border-black shadow">
              <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="#EB742E"></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="#EB742E"></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="#EB742E"></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="#EB742E"></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="#EB742E"></path>
              </svg>
            </span>
            <div class="ml-4">
              <h4 class="text-xl font-black mb-1">Free Shipping</h4>
              <span class="text-lg font-bold">From $45</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 xl:w-auto px-2 mb-12">
          <div class="flex items-center">
            <span class="inline-flex w-12 h-12 items-center justify-center rounded-full border-2 border-black shadow">

<section class="py-16 bg-green-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-md lg: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="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 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 text-center 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="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 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 text-center 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="relative py-12 overflow-hidden">
  <img class="hidden sm:block absolute top-0 left-0 h-full -ml-32 lg:-ml-20 xl:-ml-0 img-fluid" src="shopal-assets/background/green-small-lines.svg" alt="">
  <img class="hidden sm:block absolute top-0 right-0 -mr-32 lg:-mr-20 xl:-mr-0 h-full img-fluid" src="shopal-assets/background/orange-small-wave.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">Sign-up for our Newsletter</h3>
          </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-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-500">
                    <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>

<section class="py-14 bg-white" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="max-w-md mx-auto lg:max-w-none">
      <div class="flex flex-wrap items-center justify-between -mx-4 mb-16">
        <div class="w-full sm:w-auto px-4 mb-8 sm:mb-0">
          <h1 class="font-heading text-4xl font-black text-black">Our products</h1>
        </div>
        <div class="w-full sm:w-auto px-4">
          <a x-on:click.prevent="showContent=true" :class="{ 'hidden': showContent }" 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">Show more</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full lg:w-1/3 px-4 mb-8">
          <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">
              <img class="img-fluid w-full h-112 object-cover" src="shopal-assets/products/headphones-large.png" alt="">
              <div class="absolute bottom-0 left-0 pt-3 pb-4 w-full text-center bg-black group-hover:bg-indigo-500 transition duration-500 ease-out">

<section class="py-16 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-12">
        <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
          <div class="max-w-xl mx-auto xl:mx-0">
            <h2 class="font-heading text-4xl font-black mb-8">Lorem ipsum dolor sit amet consectetur</h2>
            <p class="max-w-md text-lg font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4">
          <div class="pl-20 relative">
            <img class="absolute top-0 left-0 transform img-fluid w-12 md:w-auto" src="shopal-assets/background/circle-orange-green-part.svg" alt="">
            <img class="img-fluid w-full h-67 border-2 border-black rounded-md shadow" src="shopal-assets/images/benefit-table-work.png" alt="">
          </div>
        </div>
      </div>
      <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="#474BC5"></path>

<section class="pt-14 pb-16">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="pb-14 mb-14 border-b-2 border-black">
        <div class="flex flex-wrap items-center justify-between -mx-2 -mb-12">
          <div class="w-full md:w-1/2 xl:w-auto px-2 mb-12">
            <div class="flex items-center">
              <span class="inline-flex w-12 h-12 items-center justify-center rounded-full border-2 border-black shadow">
                <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>
              <div class="ml-4">
                <h4 class="text-base sm:text-xl font-black mb-1">Free Shipping</h4>
                <span class="text-base sm:text-lg font-bold">From $45</span>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/2 xl:w-auto px-2 mb-12">
            <div class="flex items-center">

<section class="py-14 bg-white" 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">Our products</h1>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 px-4 mb-8">
        <a class="group block h-80 lg:h-112 relative bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 h-full left-0 w-full border-2 border-black rounded-md transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 overflow-hidden transition duration-300">
            <span class="absolute top-0 left-0 m-6 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>
            <img class="img-fluid w-full h-118 object-cover" src="shopal-assets/products/product-square1.png" alt="">
            <div class="absolute bottom-0 left-0 w-full p-6">
              <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 px-4 mb-8">
        <a class="group block h-80 lg:h-112 relative bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 h-full left-0 w-full border-2 border-black rounded-md transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 overflow-hidden transition duration-300">
            <span class="absolute top-0 left-0 m-6 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>
            <img class="img-fluid w-full h-118 object-cover" src="shopal-assets/products/product-square2.png" alt="">
            <div class="absolute bottom-0 left-0 w-full p-6">

<section class="relative py-12 bg-green-500 overflow-hidden">
  <img class="hidden sm:block absolute top-0 left-0 h-full -ml-32 lg:-ml-20 xl:-ml-0 img-fluid" src="shopal-assets/background/blue-small-lines.svg" alt="">
  <img class="hidden sm:block absolute top-0 right-0 -mr-32 lg:-mr-20 xl:-mr-0 h-full img-fluid" src="shopal-assets/background/orange-small-wave.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">Sign-up for our Newsletter</h3>
          </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-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">Subscribe</span>
                    </div>
                  </div>

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="max-w-2xl mx-auto mb-16 text-center">
        <span class="inline-block mb-5 text-sm font-black text-indigo-500">Lorem ipsum</span>
        <h2 class="text-3xl sm:text-4xl font-black mb-8">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="text-lg font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="max-w-md mx-auto h-full p-8 bg-black border-2 border-black rounded-md shadow">
            <p class="text-lg font-bold text-white mb-8">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-12 h-12 mb-3 rounded-full border-2 border-black shadow img-fluid" src="shopal-assets/images/avatar-men.png" alt="">
              <h5 class="text-xl font-black text-white mb-1">Danny Bailey</h5>
              <span class="font-bold text-white">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="max-w-md mx-auto h-full p-8 bg-black border-2 border-black rounded-md shadow">
            <p class="text-lg font-bold text-white mb-8">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-12 h-12 mb-3 rounded-full border-2 border-black shadow img-fluid" src="shopal-assets/images/avatar-men.png" alt="">

<section class="py-6 bg-white">
  <div class="container px-4 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-md mx-auto group block h-112 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 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 text-center 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-md mx-auto group block h-112 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 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 text-center 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>

<section>
  <div class="bg-white">
    <div class="container px-4 mx-auto">
      <div class="flex py-5 items-center">
        <div class="bg-blueGray-900 rounded-md">
          <div class="flex transform -translate-x-1 -translate-y-1 bg-white border-2 border-black rounded-md overflow-hidden">
            <a class="inline-flex items-center -mr-2 xs:-mr-5 pl-4 z-10" href="#">
              <span class="inline-block mr-3 text-xs xs:text-sm text-black font-bold">Homepage</span>
              <svg width="24" height="44" viewBox="0 0 24 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L22 22L1 43" stroke="black" fill="white" stroke-width="2"></path>
              </svg>
            </a>
            <a class="inline-flex items-center pl-4 xs:pl-8 -mr-5 z-10" href="#">
              <span class="inline-block mr-2 text-xs xs:text-sm text-black font-bold">Catalogue</span>
              <svg width="24" height="44" viewBox="0 0 24 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L22 22L1 43" stroke="black" fill="white" stroke-width="2"></path>
              </svg>
            </a>
            <a class="inline-flex items-center pl-8 pr-3 bg-green-500" href="#">
              <span class="inline-block mr-3 text-xs xs:text-sm text-indigo-500 font-bold">Product</span>
            </a>
          </div>
        </div>
      </div>

<section class="py-16 bg-green-500">
  <div class="container px-4 mx-auto">
    <h4 class="text-lg font-black mb-6 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/3 xl:w-1/6 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/3 xl:w-1/6 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/3 xl:w-1/6 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/3 xl:w-1/6 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/amazon-logo.svg" alt="">
          </div>

<section>
  <div class="h-20 py-4 bg-white">
    <div class="container px-4 mx-auto">
      <div class="inline-block bg-blueGray-900 rounded-md">
        <div class="inline-flex items-center px-4 py-2 transform -translate-x-1 -translate-y-1 bg-white border-2 border-black rounded-md overflow-hidden">
          <div class="hidden sm:block 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-black 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="black"></path>
            </svg>
          </span>
          <a class="inline-block text-sm text-black 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="black"></path>
            </svg>
          </span>

<section class="pt-16 pb-24 bg-indigo-500">
  <div class="container px-4 mx-auto">
    <h4 class="text-lg font-black text-green-500 mb-20 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-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-green.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-green.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-green.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-green.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-green.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-green.svg" alt="">
        </div>
      </div>

<section class="py-16 bg-white">
  <div class="container px-4 mx-auto mb-10">
    <div class="max-w-xl xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-12">
        <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
          <div class="sm:pl-20 xl:pl-0 max-w-xl">
            <h2 class="font-heading text-4xl font-black mb-8">Lorem ipsum dolor sit amet consectetur</h2>
            <p class="max-w-md text-lg font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4">
          <div class="pl-20 max-w-lg xl:max-w-none relative">
            <img class="absolute top-0 left-0 transform img-fluid w-12 md:w-auto" src="shopal-assets/background/circle-orange-green-part.svg" alt="">
            <img class="img-fluid w-full h-67 border-2 border-black rounded-md shadow" src="shopal-assets/images/benefit-table-work.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pt-10 border-t-2 border-black">
    <div class="container px-4 mx-auto">
      <div class="max-w-xs md:max-w-xl xl:max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center -mx-2 -mb-12">
          <div class="w-full md:w-1/2 xl:w-1/4 px-2 mb-12">

<section class="py-14 bg-white" 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">Our products</h1>
    </div>
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="flex flex-wrap -mx-4 -mb-8">
            <div class="w-full sm:w-1/2 px-4 mb-8">
              <a class="group block h-72 relative bg-blueGray-900 rounded-md" href="#">
                <div class="absolute top-0 h-full left-0 w-full border-2 border-black rounded-md transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 overflow-hidden transition duration-300">
                  <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-full 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 sm:w-1/2 px-4 mb-8">
              <a class="group block h-72 relative bg-blueGray-900 rounded-md" href="#">
                <div class="absolute top-0 h-full left-0 w-full border-2 border-black rounded-md transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 overflow-hidden transition duration-300">