Footer SaaS Brutalist

                <!--
@type: Footer
@industry: SaaS
@style: Brutalist
@category: Page Section, Navigation, Contact
@framework: Tailwind
@license: Free
-->

<style>
  .brutalist-border {
    border: 4px solid #000;
  }
  .brutalist-shadow-sm {
    box-shadow: 4px 4px 0px 0px #000;
  }
  .brutalist-shadow-md {
    box-shadow: 8px 8px 0px 0px #000;
  }
  .brutalist-input {
    border: 3px solid #000;
    outline: none;
  }
  .brutalist-input:focus {
    background-color: #22d3ee;
  }
</style>

<footer class="bg-white border-t-8 border-black pt-16 pb-8 px-6 font-mono">
  <div class="max-w-7xl mx-auto">

    <div class="grid grid-cols-1 md:grid-cols-12 gap-12 mb-16">

      <div class="md:col-span-5 space-y-8">
        <div
          class="text-4xl font-black uppercase tracking-tighter italic bg-cyan-400 inline-block px-6 py-2 brutalist-border brutalist-shadow-sm">
          NEOBRUTAL.IO
        </div>
        <p class="text-xl font-bold max-w-sm leading-tight">
          NO SOFT CORNERS. NO GRADIENTS. JUST RAW PERFORMANCE FOR MODERN TEAMS.
        </p>
      </div>

      <div class="md:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-8">
        <div class="space-y-4">
          <h4 class="font-black uppercase bg-black text-white inline-block px-2 py-1">Product</h4>
          <ul class="font-bold space-y-2 uppercase text-sm">
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">Terminal</a></li>
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">API Access</a></li>
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">Logistics</a></li>
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">Uptime</a></li>
          </ul>
        </div>

        <div class="space-y-4">
          <h4 class="font-black uppercase bg-black text-white inline-block px-2 py-1">Company</h4>
          <ul class="font-bold space-y-2 uppercase text-sm">
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">Manifesto</a></li>
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">Careers</a></li>
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">Press</a></li>
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">Privacy</a></li>
          </ul>
        </div>

        <div class="space-y-4 col-span-2 sm:col-span-1">
          <h4 class="font-black uppercase bg-black text-white inline-block px-2 py-1">Socials</h4>
          <ul class="font-bold space-y-2 uppercase text-sm">
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">Github</a></li>
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">X / Twitter</a></li>
            <li><a href="#" class="hover:underline decoration-cyan-400 decoration-4">Discord</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div
      class="border-t-4 border-black pt-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
      <div class="font-black uppercase tracking-widest text-sm">
        © 2026 NEOBRUTAL BUILT_FOR_STABILITY
      </div>

      <div class="flex gap-4">
        <div class="w-8 h-8 bg-cyan-400 brutalist-border brutalist-shadow-sm"></div>
        <div class="w-8 h-8 bg-neutral-900 brutalist-border brutalist-shadow-sm"></div>
        <div class="w-8 h-8 bg-neutral-100 brutalist-border brutalist-shadow-sm"></div>
      </div>

      <div class="font-bold text-sm uppercase">
        Status: <span class="bg-green-400 px-2 border-2 border-black">Operational</span>
      </div>
    </div>

  </div>
</footer>