Responsive Dark Footer with Links & Newsletter

<footer class="w-full max-w-6xl mr-auto ml-auto pt-10 pr-4 pb-12 pl-4">
  <div class="ring-1 ring-white/10 bg-gray-900 text-white rounded-2xl pt-6 pr-6 pb-6 pl-6">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
      <div class="">
        <div class="flex items-center gap-3">
          <div
            class="w-9 h-9 rounded-lg bg-white text-black flex items-center justify-center font-semibold tracking-tight">
            OS</div>
          <div class="">
            <div class="text-sm font-semibold text-white">OrbitStack</div>
            <div class="text-xs text-gray-400">Design infrastructure for modern teams</div>
          </div>
        </div>
        <p class="text-xs text-gray-300 mt-4">Built for creators and enterprise teams. Secure, fast, and delightful to
          use.</p>
        <div class="flex gap-3 mt-4 items-center">
          <a href="#"
            class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-gray-800 ring-1 ring-white/10 text-gray-300 hover:bg-gray-700 hover:text-white"
            aria-label="Twitter">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
              <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="#"
            class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-gray-800 ring-1 ring-white/10 text-gray-300 hover:bg-gray-700 hover:text-white"
            aria-label="GitHub">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
              <path
                d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
                class=""></path>
              <path d="M9 18c-4.51 2-5-2-7-2" class=""></path>
            </svg>
          </a>
          <a href="#"
            class="inline-flex items-center justify-center w-9 h-9 ring-1 ring-white/10 hover:bg-gray-700 text-gray-300 hover:text-white bg-gray-800 rounded-lg"
            aria-label="LinkedIn">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
              <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" class=""></path>
              <rect width="4" height="12" x="2" y="9" class=""></rect>
              <circle cx="4" cy="4" r="2" class=""></circle>
            </svg>
          </a>
        </div>
      </div>

      <div class="md:col-span-2 grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="">
          <h4 class="text-sm font-semibold text-white">Product</h4>
          <ul class="mt-3 space-y-2 text-sm text-gray-300">
            <li><a href="#" class="hover:text-white hover:underline">Features</a></li>
            <li><a href="#" class="hover:text-white hover:underline">Pricing</a></li>
            <li class=""><a href="#" class="hover:text-white hover:underline">Integrations</a></li>
            <li class=""><a href="#" class="hover:text-white hover:underline">API</a></li>
          </ul>
        </div>

        <div class="">
          <h4 class="text-sm font-semibold text-white">Company</h4>
          <ul class="mt-3 space-y-2 text-sm text-gray-300">
            <li class=""><a href="#" class="hover:text-white hover:underline">Careers</a></li>
            <li><a href="#" class="hover:text-white hover:underline">Blog</a></li>
            <li><a href="#" class="hover:text-white hover:underline">Press</a></li>
          </ul>
        </div>

        <div class="">
          <h4 class="text-sm font-semibold text-white">Support</h4>
          <ul class="mt-3 space-y-2 text-sm text-gray-300">
            <li class=""><a href="#" class="hover:text-white hover:underline">Docs</a></li>
            <li><a href="#" class="hover:text-white hover:underline">Contact</a></li>
            <li><a href="#" class="hover:text-white hover:underline">Status</a></li>
            <li><a href="#" class="hover:text-white hover:underline">Security</a></li>
          </ul>
        </div>

        <div class="">
          <h4 class="text-sm font-semibold text-white">Legal</h4>
          <ul class="mt-3 space-y-2 text-sm text-gray-300">
            <li class=""><a href="#" class="hover:text-white hover:underline">Terms</a></li>
            <li><a href="#" class="hover:text-white hover:underline">Privacy</a></li>
            <li><a href="#" class="hover:text-white hover:underline">GDPR</a></li>
            <li class=""><a href="#" class="hover:text-white hover:underline">Cookies</a></li>
          </ul>
        </div>
      </div>

      <div class="">
        <h4 class="text-sm font-semibold text-white">Get updates</h4>
        <p class="text-xs text-gray-300 mt-2">Join 20,000+ teams receiving product updates and design tips.</p>
        <form class="mt-4 flex items-center gap-2" onsubmit="event.preventDefault();">
          <label for="newsletter" class="sr-only">Email</label>
          <input id="newsletter" type="email" placeholder="you@company.com" class="w-full px-3 py-2 rounded-lg bg-gray-800 ring-1 ring-white/10 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-white/20">
          <button class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-white text-gray-900 text-sm font-semibold hover:bg-gray-100 transition-colors" aria-label="Subscribe">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><rect width="20" height="16" x="2" y="4" rx="2" class=""></rect><path d="m22 7-10 5L2 7" class=""></path></svg>
            <span>Subscribe</span>
          </button>
        </form>
      </div>
    </div>

    <div class="mt-6 border-t border-gray-700 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
      <p class="text-xs text-gray-400">© 2025 OrbitStack, Inc. All rights reserved.</p>
      <div class="flex items-center gap-4 text-xs text-gray-400">
        <a href="#" class="hover:text-white hover:underline">Status</a>
        <a href="#" class="hover:text-white hover:underline">Contact support</a>
        <a href="#" class="hover:text-white hover:underline">Privacy</a>
      </div>
    </div>
  </div>
</footer>