footer

<footer class="border-t border-gray-100 bg-white px-6 py-12 lg:px-8">
  <div class="mx-auto max-w-5xl text-center">
    <p class="text-sm font-bold tracking-tight text-gray-950">BlockUI</p>
    <nav
      class="mt-6 flex flex-wrap justify-center gap-x-6 gap-y-2"
      aria-label="Footer"
    >
      <a href="#" class="text-sm text-gray-500 transition hover:text-gray-900"
        >Home</a
      ><a href="#" class="text-sm text-gray-500 transition hover:text-gray-900"
        >Blocks</a
      ><a href="#" class="text-sm text-gray-500 transition hover:text-gray-900"
        >Pricing</a
      ><a href="#" class="text-sm text-gray-500 transition hover:text-gray-900"
        >GitHub</a
      ><a href="#" class="text-sm text-gray-500 transition hover:text-gray-900"
        >Issues</a
      >
    </nav>
    <p class="mt-8 text-xs text-gray-400">
      © 2026 BlockUI. Open-source under the MIT license.
    </p>
  </div>
</footer>

<footer class="border-t border-gray-100 bg-white px-6 py-16 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="flex flex-col gap-12 sm:flex-row sm:justify-between">
      <!-- Brand -->
      <div class="max-w-xs">
        <p class="text-sm font-bold tracking-tight text-gray-950">BlockUI</p>
        <p class="mt-2 text-sm leading-6 text-gray-500">
          A free, open-source gallery of copy-paste UI blocks built with Astro
          and Tailwind CSS.
        </p>
      </div>
      <!-- Columns -->
      <div class="grid grid-cols-2 gap-x-12 gap-y-10 sm:grid-cols-3">
        <div>
          <p
            class="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-400"
          >
            Product
          </p>
          <ul class="space-y-3">
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >Blocks</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >Pricing</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >Changelog</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >Roadmap</a
              >
            </li>
          </ul>
        </div>
        <div>
          <p
            class="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-400"
          >
            Resources
          </p>
          <ul class="space-y-3">
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >Documentation</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >GitHub</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >Issues</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >Contribute</a
              >
            </li>
          </ul>
        </div>
        <div>
          <p
            class="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-400"
          >
            Company
          </p>
          <ul class="space-y-3">
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >About</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >Blog</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >License</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-500 transition hover:text-gray-900"
                >Contact</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div
      class="mt-14 flex flex-col items-center justify-between gap-4 border-t border-gray-100 pt-8 sm:flex-row"
    >
      <p class="text-xs text-gray-400">
        © 2026 BlockUI. Open-source under the MIT license.
      </p>
      <p class="text-xs text-gray-400">Built with Astro &amp; Tailwind CSS</p>
    </div>
  </div>
</footer>

<footer class="bg-gray-950 px-6 py-16 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="flex flex-col gap-12 sm:flex-row sm:justify-between">
      <!-- Brand -->
      <div class="max-w-xs">
        <p class="text-sm font-bold tracking-tight text-white">BlockUI</p>
        <p class="mt-2 text-sm leading-6 text-gray-400">
          A free, open-source gallery of copy-paste UI blocks built with Astro
          and Tailwind CSS.
        </p>
        <div class="mt-6 flex gap-4">
          <a
            href="#"
            aria-label="GitHub"
            class="text-gray-500 transition hover:text-gray-300"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="h-5 w-5"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M12 2C6.477 2 2 6.484 2 12.021c0 4.428 2.865 8.185 6.839 9.506.5.092.682-.217.682-.482 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.342-3.369-1.342-.454-1.154-1.11-1.461-1.11-1.461-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.337 4.687-4.565 4.934.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48C19.138 20.203 22 16.447 22 12.021 22 6.484 17.523 2 12 2z"
                clip-rule="evenodd"
              />
            </svg> </a
          ><a
            href="#"
            aria-label="Twitter / X"
            class="text-gray-500 transition hover:text-gray-300"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="h-5 w-5"
              aria-hidden="true"
            >
              <path
                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
              />
            </svg>
          </a>
        </div>
      </div>
      <!-- Columns -->
      <div class="grid grid-cols-2 gap-x-12 gap-y-10 sm:grid-cols-3">
        <div>
          <p
            class="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-500"
          >
            Product
          </p>
          <ul class="space-y-3">
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >Blocks</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >Pricing</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >Changelog</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >Roadmap</a
              >
            </li>
          </ul>
        </div>
        <div>
          <p
            class="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-500"
          >
            Resources
          </p>
          <ul class="space-y-3">
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >Documentation</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >GitHub</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >Issues</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >Contribute</a
              >
            </li>
          </ul>
        </div>
        <div>
          <p
            class="mb-4 text-xs font-semibold uppercase tracking-widest text-gray-500"
          >
            Company
          </p>
          <ul class="space-y-3">
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >About</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >Blog</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >License</a
              >
            </li>
            <li>
              <a
                href="#"
                class="text-sm text-gray-400 transition hover:text-white"
                >Contact</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div
      class="mt-14 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-8 sm:flex-row"
    >
      <p class="text-xs text-gray-500">
        © 2026 BlockUI. Open-source under the MIT license.
      </p>
      <p class="text-xs text-gray-500">Built with Astro &amp; Tailwind CSS</p>
    </div>
  </div>
</footer>