Responsive Tailwind Footer with Navigation & Social Links

<footer class="relative border-white/10 border-t w-full">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-10 py-12">
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-8 text-sm">
      <div class="col-span-2 sm:col-span-1">
        <p class="text-white font-semibold tracking-tight">Arcade</p>
        <p class="mt-2 text-neutral-400">Play more. Save more. Discover console hits across platforms.</p>
      </div>
      <div>
        <p class="text-white font-medium">Store</p>
        <ul class="mt-2 space-y-2 text-neutral-400">
          <li><a class="hover:text-white" href="#new">New releases</a></li>
          <li><a class="hover:text-white" href="#charts">Top charts</a></li>
          <li><a class="hover:text-white" href="#deals">Deals</a></li>
          <li><a class="hover:text-white" href="#membership">Membership</a></li>
        </ul>
      </div>
      <div>
        <p class="text-white font-medium">Support</p>
        <ul class="mt-2 space-y-2 text-neutral-400">
          <li><a class="hover:text-white" href="#">Help center</a></li>
          <li><a class="hover:text-white" href="#">Refund policy</a></li>
          <li><a class="hover:text-white" href="#">Security</a></li>
        </ul>
      </div>
      <div class="">
        <p class="text-white font-medium">Legal</p>
        <ul class="mt-2 space-y-2 text-neutral-400">
          <li class=""><a class="hover:text-white" href="#">Terms</a></li>
          <li class=""><a class="hover:text-white" href="#">Privacy</a></li>
          <li class=""><a class="hover:text-white" href="#">Cookies</a></li>
        </ul>
      </div>
    </div>

    <div class="mt-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <p class="text-xs text-neutral-500">© <span id="year">2025</span> Arcade, Inc. All rights reserved.</p>
      <div class="flex items-center gap-3">
        <a href="#" aria-label="Twitter/X"
          class="inline-flex items-center justify-center h-9 w-9 rounded-lg ring-1 ring-white/10 bg-white/5 hover:bg-white/10 text-white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter"
            class="lucide lucide-twitter w-4.5 h-4.5" style="stroke-width:1.6">
            <path
              d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
              class=""></path>
          </svg>
        </a>
        <a href="#" aria-label="YouTube"
          class="inline-flex items-center justify-center h-9 w-9 rounded-lg ring-1 ring-white/10 bg-white/5 hover:bg-white/10 text-white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="youtube"
            class="lucide lucide-youtube w-5 h-5" style="stroke-width:1.6">
            <path
              d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"
              class=""></path>
            <path d="m10 15 5-3-5-3z" class=""></path>
          </svg>
        </a>
        <a href="#" aria-label="Discord"
          class="inline-flex items-center justify-center h-9 w-9 rounded-lg ring-1 ring-white/10 bg-white/5 hover:bg-white/10 text-white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="message-circle" class="lucide lucide-message-circle w-5 h-5" style="stroke-width:1.6">
            <path
              d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
              class=""></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</footer>