footer1

FREE
<section class="py-32">
  <div class="container">
    <footer>
      <div class="flex flex-col justify-between gap-4 md:flex-row md:items-center">
        <img src="/images/placeholders/logos/figma.svg" alt="logo" class="mb-8 mr-auto h-7 md:mb-0" />
        <div class="flex flex-col gap-4 md:flex-row md:items-center">
          <p class="text-lg font-medium">Copy the code and make it yours.</p>
          <div class="flex gap-2">
            <a href="#" class="inline-flex rounded-lg bg-zinc-900 p-2.5 justify-center items-center"><svg
                stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512"
                class="size-7 text-background" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z">
                </path>
              </svg></a><a href="#" class="inline-flex rounded-lg bg-zinc-900 p-2.5 justify-center items-center"><img
                src="images/icons/google-play-icon.svg" class="size-6 text-background" alt="google play" /></a>
          </div>
        </div>
      </div>
      <div data-orientation="horizontal" role="none" class="shrink-0 bg-border h-[1px] w-full my-14"></div>
      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
        <div>
          <h3 class="mb-4 font-bold">Product</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">Overview</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Pricing</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Marketplace</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Features</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Integrations</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Pricing</a></li>
          </ul>
        </div>
        <div>
          <h3 class="mb-4 font-bold">Company</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">About</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Team</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Blog</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Careers</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Contact</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Privacy</a></li>
          </ul>
        </div>
        <div>
          <h3 class="mb-4 font-bold">Resources</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">Help</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Sales</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Advertise</a></li>
          </ul>
        </div>
        <div>
          <h3 class="mb-4 font-bold">Legal</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">Term of Services</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Privacy Policy</a></li>
          </ul>
          <h3 class="mb-4 mt-8 font-bold">Social</h3>
          <ul class="flex space-x-6 text-zinc-600 items-center">
            <li class="font-medium hover:text-gray-800">
              <a href="#"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512"
                  class="size-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z">
                  </path>
                </svg></a>
            </li>
            <li class="font-medium hover:text-gray-800">
              <a href="#"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512"
                  class="size-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M440.3 203.5c-15 0-28.2 6.2-37.9 15.9-35.7-24.7-83.8-40.6-137.1-42.3L293 52.3l88.2 19.8c0 21.6 17.6 39.2 39.2 39.2 22 0 39.7-18.1 39.7-39.7s-17.6-39.7-39.7-39.7c-15.4 0-28.7 9.3-35.3 22l-97.4-21.6c-4.9-1.3-9.7 2.2-11 7.1L246.3 177c-52.9 2.2-100.5 18.1-136.3 42.8-9.7-10.1-23.4-16.3-38.4-16.3-55.6 0-73.8 74.6-22.9 100.1-1.8 7.9-2.6 16.3-2.6 24.7 0 83.8 94.4 151.7 210.3 151.7 116.4 0 210.8-67.9 210.8-151.7 0-8.4-.9-17.2-3.1-25.1 49.9-25.6 31.5-99.7-23.8-99.7zM129.4 308.9c0-22 17.6-39.7 39.7-39.7 21.6 0 39.2 17.6 39.2 39.7 0 21.6-17.6 39.2-39.2 39.2-22 .1-39.7-17.6-39.7-39.2zm214.3 93.5c-36.4 36.4-139.1 36.4-175.5 0-4-3.5-4-9.7 0-13.7 3.5-3.5 9.7-3.5 13.2 0 27.8 28.5 120 29 149 0 3.5-3.5 9.7-3.5 13.2 0 4.1 4 4.1 10.2.1 13.7zm-.8-54.2c-21.6 0-39.2-17.6-39.2-39.2 0-22 17.6-39.7 39.2-39.7 22 0 39.7 17.6 39.7 39.7-.1 21.5-17.7 39.2-39.7 39.2z">
                  </path>
                </svg></a>
            </li>
            <li class="font-medium hover:text-gray-800">
              <a href="#"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512"
                  class="size-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
                  </path>
                </svg></a>
            </li>
            <li class="font-medium hover:text-gray-800">
              <a href="#"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512"
                  class="size-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z">
                  </path>
                </svg></a>
            </li>
          </ul>
        </div>
      </div>
      <div data-orientation="horizontal" role="none" class="shrink-0 bg-border h-[1px] w-full my-14"></div>
      <p class="text-sm text-zinc-600">© 2024 Wickedblocksblocks. All rights reserved.</p>
    </footer>
  </div>
</section>

footer2

FREE
wickedblocks

Wicked templates for wicked dev's

<section class="py-32">
  <div class="container">
    <footer>
      <div class="grid grid-cols-2 gap-8 lg:grid-cols-6">
        <div class="col-span-2 mb-8 lg:mb-0">
          <img src="/images/placeholders/logos/tailwind.svg" alt="logo" class="mb-4 h-5" />
          <p class="font-bold">Components made easy.</p>
        </div>
        <div>
          <h3 class="mb-4 font-bold">Product</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">Overview</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Pricing</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Marketplace</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Features</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Integrations</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Pricing</a></li>
          </ul>
        </div>
        <div>
          <h3 class="mb-4 font-bold">Company</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">About</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Team</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Blog</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Careers</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Contact</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Privacy</a></li>
          </ul>
        </div>
        <div>
          <h3 class="mb-4 font-bold">Resources</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">Help</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Sales</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Advertise</a></li>
          </ul>
        </div>
        <div>
          <h3 class="mb-4 font-bold">Social</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">Twitter</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Instagram</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">LinkedIn</a></li>
          </ul>
        </div>
      </div>
      <div
        class="mt-24 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-zinc-600 md:flex-row md:items-center">
        <p>© 2024 Wickedblocks. All rights reserved.</p>
        <ul class="flex gap-4">
          <li class="underline hover:text-gray-800"><a href="#"> Terms and Conditions</a></li>
          <li class="underline hover:text-gray-800"><a href="#"> Privacy Policy</a></li>
        </ul>
      </div>
    </footer>
  </div>
</section>

footer3

FREE
<section class="py-32">
  <div class="container">
    <footer>
      <img src="/images/placeholders/logos/tailwind.svg" alt="logo" class="h-5" />
      <div class="mt-14 grid gap-8 md:grid-cols-2 lg:grid-cols-5 xl:grid-cols-4">
        <div>
          <h3 class="mb-4 font-bold">Product</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">Overview</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Pricing</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Marketplace</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Features</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Integrations</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Pricing</a></li>
          </ul>
        </div>
        <div>
          <h3 class="mb-4 font-bold">Company</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">About</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Team</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Blog</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Careers</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Contact</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Privacy</a></li>
          </ul>
        </div>
        <div>
          <h3 class="mb-4 font-bold">Resources</h3>
          <ul class="space-y-4 text-zinc-600">
            <li class="font-medium hover:text-gray-800"><a href="#">Help</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Sales</a></li>
            <li class="font-medium hover:text-gray-800"><a href="#">Advertise</a></li>
          </ul>
        </div>
        <div class="lg:col-span-2 xl:col-span-1">
          <ul class="mb-10 flex items-center gap-2 text-zinc-600">
            <li class="font-medium">
              <a href="#"><span
                  class="flex size-12 items-center justify-center rounded-full bg-zinc-100 transition-colors hover:text-gray-800"><svg
                    stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" class="size-6"
                    height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z">
                    </path>
                  </svg></span></a>
            </li>
            <li class="font-medium">
              <a href="#"><span
                  class="flex size-12 items-center justify-center rounded-full bg-zinc-100 transition-colors hover:text-gray-800"><svg
                    stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="size-6"
                    height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M440.3 203.5c-15 0-28.2 6.2-37.9 15.9-35.7-24.7-83.8-40.6-137.1-42.3L293 52.3l88.2 19.8c0 21.6 17.6 39.2 39.2 39.2 22 0 39.7-18.1 39.7-39.7s-17.6-39.7-39.7-39.7c-15.4 0-28.7 9.3-35.3 22l-97.4-21.6c-4.9-1.3-9.7 2.2-11 7.1L246.3 177c-52.9 2.2-100.5 18.1-136.3 42.8-9.7-10.1-23.4-16.3-38.4-16.3-55.6 0-73.8 74.6-22.9 100.1-1.8 7.9-2.6 16.3-2.6 24.7 0 83.8 94.4 151.7 210.3 151.7 116.4 0 210.8-67.9 210.8-151.7 0-8.4-.9-17.2-3.1-25.1 49.9-25.6 31.5-99.7-23.8-99.7zM129.4 308.9c0-22 17.6-39.7 39.7-39.7 21.6 0 39.2 17.6 39.2 39.7 0 21.6-17.6 39.2-39.2 39.2-22 .1-39.7-17.6-39.7-39.2zm214.3 93.5c-36.4 36.4-139.1 36.4-175.5 0-4-3.5-4-9.7 0-13.7 3.5-3.5 9.7-3.5 13.2 0 27.8 28.5 120 29 149 0 3.5-3.5 9.7-3.5 13.2 0 4.1 4 4.1 10.2.1 13.7zm-.8-54.2c-21.6 0-39.2-17.6-39.2-39.2 0-22 17.6-39.7 39.2-39.7 22 0 39.7 17.6 39.7 39.7-.1 21.5-17.7 39.2-39.7 39.2z">
                    </path>
                  </svg></span></a>
            </li>
            <li class="font-medium">
              <a href="#"><span
                  class="flex size-12 items-center justify-center rounded-full bg-zinc-100 transition-colors hover:text-gray-800"><svg
                    stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="size-6"
                    height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
                    </path>
                  </svg></span></a>
            </li>
            <li class="font-medium">
              <a href="#"><span
                  class="flex size-12 items-center justify-center rounded-full bg-zinc-100 transition-colors hover:text-gray-800"><svg
                    stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="size-6"
                    height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z">
                    </path>
                  </svg></span></a>
            </li>
            <li class="font-medium">
              <a href="#"><span
                  class="flex size-12 items-center justify-center rounded-full bg-zinc-100 transition-colors hover:text-gray-800"><svg
                    stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="size-6"
                    height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z">
                    </path>
                  </svg></span></a>
            </li>
          </ul>
          <div class="grid w-full max-w-sm items-center gap-1.5">
            <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              for="email">Subscribe to our newsletter</label>
            <div class="flex w-full max-w-sm items-center space-x-2">
              <input type="email"
                class="flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                placeholder="Email" /><button
                class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-10 px-4 py-2"
                type="submit">
                Subscribe
              </button>
            </div>
            <p class="mt-1 text-xs text-zinc-600">
              By submitting, you agree to our<a href="#" class="ml-1 text-gray-800 hover:underline">Privacy Policy</a>
            </p>
          </div>
        </div>
      </div>
      <div
        class="mt-24 flex flex-col flex-wrap justify-between gap-4 border-t pt-8 text-sm font-medium text-zinc-600 md:flex-row md:items-center">
        <p>© 2024 WickedblocksBlocks. All rights reserved.</p>
        <ul class="flex gap-4">
          <li class="whitespace-nowrap underline hover:text-gray-800">
            <a href="#">Terms and Conditions</a>
          </li>
          <li class="whitespace-nowrap underline hover:text-gray-800">
            <a href="#">Privacy Policy</a>
          </li>
        </ul>
      </div>
    </footer>
  </div>
</section>