Footer Timeline

<footer class="ws-footer border-t border-[var(--ws-footer-border)] bg-[var(--ws-footer-bg)] py-14">
  <div class="mx-auto max-w-6xl px-6">
    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--ws-footer-text-muted)]">Our journey</p>
    <h2 class="mt-2 text-2xl font-bold text-[var(--ws-footer-text)]">From side project to platform</h2>

    <!-- Timeline -->
    <ol class="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
      <li class="relative border-l-2 border-[var(--ws-footer-border)] pl-5 lg:border-l-0 lg:border-t-2 lg:pl-0 lg:pt-5">
        <span class="absolute -left-[7px] top-0 h-3 w-3 rounded-full bg-[var(--ws-color-primary)] lg:-top-[7px] lg:left-0" aria-hidden="true"></span>
        <p class="font-mono text-sm font-bold text-[var(--ws-color-primary)]">2018</p>
        <p class="mt-1 text-sm font-semibold text-[var(--ws-footer-text)]">First commit</p>
        <p class="mt-1 text-sm text-[var(--ws-footer-text-muted)]">A weekend prototype becomes a public repo.</p>
      </li>
      <li class="relative border-l-2 border-[var(--ws-footer-border)] pl-5 lg:border-l-0 lg:border-t-2 lg:pl-0 lg:pt-5">
        <span class="absolute -left-[7px] top-0 h-3 w-3 rounded-full bg-[var(--ws-color-primary)] lg:-top-[7px] lg:left-0" aria-hidden="true"></span>
        <p class="font-mono text-sm font-bold text-[var(--ws-color-primary)]">2021</p>
        <p class="mt-1 text-sm font-semibold text-[var(--ws-footer-text)]">1,000 users</p>
        <p class="mt-1 text-sm text-[var(--ws-footer-text-muted)]">The first team plan ships and the company is founded.</p>
      </li>
      <li class="relative border-l-2 border-[var(--ws-footer-border)] pl-5 lg:border-l-0 lg:border-t-2 lg:pl-0 lg:pt-5">
        <span class="absolute -left-[7px] top-0 h-3 w-3 rounded-full bg-[var(--ws-color-primary)] lg:-top-[7px] lg:left-0" aria-hidden="true"></span>
        <p class="font-mono text-sm font-bold text-[var(--ws-color-primary)]">2023</p>
        <p class="mt-1 text-sm font-semibold text-[var(--ws-footer-text)]">Series A</p>
        <p class="mt-1 text-sm text-[var(--ws-footer-text-muted)]">Funding fuels a global team across nine countries.</p>
      </li>
      <li class="relative border-l-2 border-[var(--ws-color-primary)] pl-5 lg:border-l-0 lg:border-t-2 lg:pl-0 lg:pt-5">
        <span class="absolute -left-[7px] top-0 h-3 w-3 rounded-full bg-[var(--ws-color-primary)] ring-4 ring-[var(--ws-color-primary-soft)] lg:-top-[7px] lg:left-0" aria-hidden="true"></span>
        <p class="font-mono text-sm font-bold text-[var(--ws-color-primary)]">Today</p>
        <p class="mt-1 text-sm font-semibold text-[var(--ws-footer-text)]">Trusted everywhere</p>
        <p class="mt-1 text-sm text-[var(--ws-footer-text-muted)]">Powering teams in more than 40,000 organizations.</p>
      </li>
    </ol>

    <!-- Bottom bar -->
    <div class="mt-12 flex flex-col items-center justify-between gap-3 border-t border-[var(--ws-footer-border)] pt-6 sm:flex-row">
      <p class="text-sm text-[var(--ws-footer-text-muted)]">&copy; 2026 Webspire. All rights reserved.</p>
      <nav aria-label="Footer" class="flex gap-5 text-sm">
        <a href="#about" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">About</a>
        <a href="#careers" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Careers</a>
        <a href="#press" class="text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Press</a>
      </nav>
    </div>
  </div>
</footer>