Footer Changelog

<footer class="ws-footer border-t border-[var(--ws-footer-border)] bg-[var(--ws-footer-bg)] py-12">
  <div class="mx-auto grid max-w-7xl gap-10 px-6 lg:grid-cols-[1fr_1.3fr]">
    <!-- Brand + links -->
    <div>
      <p class="text-base font-semibold text-[var(--ws-footer-text)]">Driftwood</p>
      <p class="mt-3 max-w-xs text-sm text-[var(--ws-footer-text-muted)]">Small tools for focused work. Shipping quietly, often.</p>
      <nav aria-label="Footer" class="mt-6 flex flex-wrap gap-x-5 gap-y-2 text-sm">
        <a href="#docs" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Docs</a>
        <a href="#pricing" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Pricing</a>
        <a href="#support" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Support</a>
        <a href="#privacy" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Privacy</a>
      </nav>
    </div>
    <!-- Changelog / logbook -->
    <div>
      <div class="flex items-center justify-between">
        <p class="text-sm font-semibold text-[var(--ws-footer-text)]">Recent changes</p>
        <a href="#changelog" class="text-sm font-medium text-[var(--ws-color-primary)] transition hover:opacity-80">Full changelog →</a>
      </div>
      <ol class="mt-4 space-y-4">
        <li class="flex gap-4">
          <span class="mt-0.5 shrink-0 rounded-md bg-[var(--ws-color-primary-soft)] px-2 py-0.5 font-mono text-xs font-semibold text-[var(--ws-color-primary)]">v2.4.0</span>
          <div>
            <p class="text-sm text-[var(--ws-footer-text)]">Offline mode and faster sync</p>
            <p class="text-xs text-[var(--ws-footer-text-muted)]">3 days ago</p>
          </div>
        </li>
        <li class="flex gap-4">
          <span class="mt-0.5 shrink-0 rounded-md bg-[var(--ws-color-surface-muted)] px-2 py-0.5 font-mono text-xs font-semibold text-[var(--ws-footer-text-muted)]">v2.3.1</span>
          <div>
            <p class="text-sm text-[var(--ws-footer-text)]">Keyboard shortcuts for the command bar</p>
            <p class="text-xs text-[var(--ws-footer-text-muted)]">2 weeks ago</p>
          </div>
        </li>
        <li class="flex gap-4">
          <span class="mt-0.5 shrink-0 rounded-md bg-[var(--ws-color-surface-muted)] px-2 py-0.5 font-mono text-xs font-semibold text-[var(--ws-footer-text-muted)]">v2.3.0</span>
          <div>
            <p class="text-sm text-[var(--ws-footer-text)]">Shared workspaces and roles</p>
            <p class="text-xs text-[var(--ws-footer-text-muted)]">1 month ago</p>
          </div>
        </li>
      </ol>
    </div>
  </div>
  <div class="mx-auto mt-10 max-w-7xl px-6">
    <p class="border-t border-[var(--ws-footer-border)] pt-6 text-sm text-[var(--ws-footer-text-muted)]">&copy; 2026 Driftwood</p>
  </div>
</footer>