Timeline

<section class="ws-steps bg-[var(--ws-steps-bg)] py-20">
  <div class="mx-auto max-w-3xl px-6">
    <div class="mb-12 text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-steps-accent)]">Changelog</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-steps-text)] sm:text-4xl">What's new</h2>
    </div>

    <div class="relative">
      <!-- Vertical line -->
      <div class="absolute left-4 top-0 bottom-0 w-px bg-[var(--ws-steps-line)]" aria-hidden="true"></div>

      <div class="space-y-10">
        <div class="relative pl-12">
          <div class="absolute left-2.5 top-1.5 h-3 w-3 rounded-full border-2 border-indigo-600 bg-[var(--ws-steps-bg)]"></div>
          <div class="flex items-center gap-3">
            <time class="text-sm font-medium text-indigo-600" datetime="2026-03-08">Mar 8, 2026</time>
            <span class="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-700">Feature</span>
          </div>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-steps-text)]">Gallery pattern family</h3>
          <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Added gallery/base and gallery/masonry patterns with hover overlays and CSS-columns layout.</p>
        </div>

        <div class="relative pl-12">
          <div class="absolute left-2.5 top-1.5 h-3 w-3 rounded-full border-2 border-emerald-600 bg-[var(--ws-steps-bg)]"></div>
          <div class="flex items-center gap-3">
            <time class="text-sm font-medium text-emerald-600" datetime="2026-03-01">Mar 1, 2026</time>
            <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Improvement</span>
          </div>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-steps-text)]">Enhanced dark mode</h3>
          <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">All patterns now have refined dark mode colors with better contrast ratios and OKLCH values.</p>
        </div>

        <div class="relative pl-12">
          <div class="absolute left-2.5 top-1.5 h-3 w-3 rounded-full border-2 border-amber-600 bg-[var(--ws-steps-bg)]"></div>
          <div class="flex items-center gap-3">
            <time class="text-sm font-medium text-amber-600" datetime="2026-02-20">Feb 20, 2026</time>
            <span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">New</span>
          </div>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-steps-text)]">CLI tool launched</h3>
          <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Install patterns directly via <code class="rounded bg-[var(--ws-steps-line)] px-1.5 py-0.5 text-xs">npx @webspire/cli add hero/base</code>. Supports init, add, and list commands.</p>
        </div>

        <div class="relative pl-12">
          <div class="absolute left-2.5 top-1.5 h-3 w-3 rounded-full border-2 border-slate-400 bg-[var(--ws-steps-bg)]"></div>
          <div class="flex items-center gap-3">
            <time class="text-sm font-medium text-[var(--ws-steps-text-soft)]" datetime="2026-02-10">Feb 10, 2026</time>
            <span class="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700">Fix</span>
          </div>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-steps-text)]">Safari backdrop-filter fix</h3>
          <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Fixed glass effects not rendering correctly in Safari 17.2 by adding webkit prefix fallbacks.</p>
        </div>
      </div>
    </div>
  </div>
</section>