<footer class="rounded-[32px] bg-slate-950 p-6 text-white shadow-2xl shadow-slate-950/20">
  <div class="grid gap-6 lg:grid-cols-[0.8fr_1.2fr]">
    <div class="space-y-4">
      <div class="inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-lg font-semibold">TP</div>
      <p class="max-w-sm text-sm leading-6 text-slate-300">A calmer block library for product teams that want cleaner launches and stronger page rhythm.</p>
    </div>
    <div class="grid gap-4 sm:grid-cols-3">
      <div>
        <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Product</p>
        <ul class="mt-3 space-y-2 text-sm text-slate-300">
          <li>Blocks</li>
          <li>Tools</li>
          <li>Updates</li>
        </ul>
      </div>
      <div>
        <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Resources</p>
        <ul class="mt-3 space-y-2 text-sm text-slate-300">
          <li>Guides</li>
          <li>Privacy</li>
          <li>Terms</li>
        </ul>
      </div>
      <div>
        <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Social</p>
        <ul class="mt-3 space-y-2 text-sm text-slate-300">
          <li>X / Twitter</li>
          <li>Dribbble</li>
          <li>GitHub</li>
        </ul>
      </div>
    </div>
  </div>
</footer>