Dark Responsive Footer with Links & Social Icons

<footer class="sm:px-6 lg:px-8 lg:ml-auto lg:mr-auto lg:mb-16 max-w-7xl mt-16 mr-auto mb-16 ml-auto pr-4 pl-4">
  <div class="border-gradient sm:rounded-[32px] sm:p-8 bg-neutral-900/40 rounded-[24px] pt-5 pr-5 pb-5 pl-5 backdrop-blur">
    <div class="grid gap-6 sm:gap-8 md:grid-cols-5">
      <!-- Brand -->
      <div class="md:col-span-2">
        <div class="flex items-center gap-3">
          <div class="w-7 h-7 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/08e314a2-f91b-4a94-8cf5-0042ba81f210_320w.webp)] bg-cover rounded-xl ring-1 ring-white/10"></div>
          <span class="text-sm font-medium tracking-tight text-white">SENTRA</span>
        </div>
        <p class="mt-3 text-xs sm:text-sm text-neutral-400 leading-relaxed max-w-md">
          Verifiable protection for modern apps — privacy‑first, open, and community‑audited.
        </p>
        <div class="mt-4 flex items-center gap-3">
          <a href="#" class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white/10 hover:bg-white/15 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e5e7eb" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
              <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 19 3.5 5.07 5.07 0 0 0 18.91 0S17.73-.35 15 1.31a13.38 13.38 0 0 0-6 0C6.27-.35 5.09 0 5.09 0A5.07 5.07 0 0 0 5 3.5 5.44 5.44 0 0 0 3.5 8.5c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 21.13V24" class=""></path>
            </svg>
          </a>
          <a href="#" class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white/10 hover:bg-white/15 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e5e7eb" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
              <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z" class=""></path><rect x="2" y="9" width="4" height="12" class=""></rect><circle cx="4" cy="4" r="2" class=""></circle>
            </svg>
          </a>
          <a href="#" class="inline-flex items-center justify-center w-9 h-9 rounded-lg bg-white/10 hover:bg-white/15 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e5e7eb" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[16px] h-[16px]" data-icon-replaced="true" style="color: rgb(229, 229, 229); width: 16px; height: 16px">
              <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53A4.48 4.48 0 0 0 12 7.5v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" class=""></path>
            </svg>
          </a>
        </div>
      </div>

      <!-- Links -->
      <div class="grid grid-cols-2 sm:grid-cols-3 md:col-span-3 gap-6">
        <div>
          <p class="text-xs uppercase tracking-wider text-neutral-400">Product</p>
          <ul class="mt-2 space-y-2 text-sm">
            <li><a class="text-neutral-300 hover:text-white transition" href="#">Features</a></li>
            <li><a class="text-neutral-300 hover:text-white transition" href="#">Pricing</a></li>
            <li><a class="text-neutral-300 hover:text-white transition" href="#">Changelog</a></li>
          </ul>
        </div>
        <div class="">
          <p class="text-xs uppercase tracking-wider text-neutral-400">Developers</p>
          <ul class="mt-2 space-y-2 text-sm">
            <li><a class="text-neutral-300 hover:text-white transition" href="#">Docs</a></li>
            <li class=""><a class="text-neutral-300 hover:text-white transition" href="#">SDKs</a></li>
            <li><a class="text-neutral-300 hover:text-white transition" href="#">Status</a></li>
          </ul>
        </div>
        <div class="">
          <p class="text-xs uppercase tracking-wider text-neutral-400">Company</p>
          <ul class="mt-2 space-y-2 text-sm">
            <li class=""><a class="text-neutral-300 hover:text-white transition" href="#">About</a></li>
            <li><a class="text-neutral-300 hover:text-white transition" href="#">Careers</a></li>
            <li><a class="text-neutral-300 hover:text-white transition" href="#">Trust Center</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="mt-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
      <p class="text-[11px] sm:text-xs text-neutral-500">© <span class="whitespace-nowrap">2025 Sentra Security, Inc.</span> All rights reserved.</p>
      <div class="flex items-center gap-4 text-[11px] sm:text-xs">
        <a href="#" class="text-neutral-400 hover:text-white transition">Terms</a>
        <a href="#" class="text-neutral-400 hover:text-white transition">Privacy</a>
        <a href="#" class="text-neutral-400 hover:text-white transition">DPA</a>
      </div>
    </div>
  </div>
</footer>