Footer Command Line

<footer class="ws-footer border-t border-[var(--ws-footer-border)] bg-[var(--ws-footer-bg)] py-14">
  <div class="mx-auto max-w-4xl px-6">
    <!-- Terminal panel (always-dark by design) -->
    <div class="overflow-hidden rounded-xl border border-slate-800 bg-slate-950 font-mono text-sm shadow-lg">
      <!-- Title bar -->
      <div class="flex items-center gap-2 border-b border-slate-800 px-4 py-2.5">
        <span class="h-3 w-3 rounded-full bg-red-500/80" aria-hidden="true"></span>
        <span class="h-3 w-3 rounded-full bg-amber-500/80" aria-hidden="true"></span>
        <span class="h-3 w-3 rounded-full bg-emerald-500/80" aria-hidden="true"></span>
        <span class="ml-2 text-xs text-slate-500">visitor@webspire: ~</span>
      </div>
      <!-- Body -->
      <div class="space-y-2 p-5 leading-relaxed text-slate-300">
        <p>
          <span class="text-emerald-400">visitor@webspire</span><span class="text-slate-500">:~$</span> ls
        </p>
        <nav aria-label="Footer" class="grid grid-cols-2 gap-x-8 gap-y-1 pl-4 sm:grid-cols-3">
          <a href="#docs" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">docs/</a>
          <a href="#api" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">api/</a>
          <a href="#guides" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">guides/</a>
          <a href="#contact" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">contact</a>
          <a href="#support" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">support</a>
          <a href="#status" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">status</a>
        </nav>
        <p>
          <span class="text-emerald-400">visitor@webspire</span><span class="text-slate-500">:~$</span> cat license.txt
        </p>
        <p class="pl-4 text-slate-400">Free to use. No attribution required.</p>
        <p>
          <span class="text-emerald-400">visitor@webspire</span><span class="text-slate-500">:~$</span>
          <span class="ml-1 inline-block h-4 w-2 translate-y-0.5 bg-slate-300" aria-hidden="true"></span>
        </p>
      </div>
    </div>
    <p class="mt-6 text-center text-xs text-[var(--ws-footer-text-muted)]">&copy; 2026 Webspire. Built for developers.</p>
  </div>
</footer>