Changelog Base

<section class="ws-changelog mx-auto max-w-3xl px-6 py-16">
  <h2 class="mb-10 text-3xl font-bold text-slate-900">Changelog</h2>

  <div class="space-y-10">
    <!-- Latest version -->
    <article class="relative rounded-2xl border border-slate-200 bg-[var(--ws-changelog-bg)] p-6">
      <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
          <div class="flex items-center gap-3">
            <span class="rounded-full bg-emerald-100 px-3 py-0.5 text-xs font-bold text-emerald-700">Latest</span>
            <h3 class="text-xl font-bold text-slate-900">v4.2.0</h3>
          </div>
          <p class="mt-1 text-sm text-slate-500">Released March 20, 2026 · 12.4 MB</p>
        </div>
        <a href="#" class="rounded-xl bg-slate-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-slate-800 dark:hover:bg-slate-100">Download</a> <!-- ws-ok -->
      </div>
      <ul class="mt-4 space-y-2 text-sm text-slate-600">
        <li class="flex items-start gap-2"><span class="mt-1 rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-bold text-emerald-700">NEW</span> Added 25 new pattern families including kanban, timeline, and mail</li>
        <li class="flex items-start gap-2"><span class="mt-1 rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-bold text-blue-700">IMP</span> Improved dark mode support across all interaction snippets</li>
        <li class="flex items-start gap-2"><span class="mt-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-700">FIX</span> Fixed clip-path rendering on Safari for reveal animations</li>
      </ul>
    </article>

    <!-- Previous version -->
    <article class="rounded-2xl border border-slate-200 bg-[var(--ws-changelog-bg)] p-6">
      <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
          <h3 class="text-xl font-bold text-slate-900">v4.1.0</h3>
          <p class="mt-1 text-sm text-slate-500">Released February 15, 2026 · 11.8 MB</p>
        </div>
        <a href="#" class="rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700">Download</a>
      </div>
      <ul class="mt-4 space-y-2 text-sm text-slate-600">
        <li class="flex items-start gap-2"><span class="mt-1 rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-bold text-emerald-700">NEW</span> Introduced CSS snippet category for scroll effects</li>
        <li class="flex items-start gap-2"><span class="mt-1 rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-bold text-blue-700">IMP</span> Refactored pattern MDX frontmatter for better search</li>
        <li class="flex items-start gap-2"><span class="mt-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-700">FIX</span> Resolved accessibility issues with toggle switches</li>
      </ul>
    </article>

    <!-- Older version -->
    <article class="rounded-2xl border border-slate-200 bg-[var(--ws-changelog-bg)] p-6">
      <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
          <h3 class="text-xl font-bold text-slate-900">v4.0.0</h3>
          <p class="mt-1 text-sm text-slate-500">Released January 10, 2026 · 10.2 MB</p>
        </div>
        <a href="#" class="rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700">Download</a>
      </div>
      <ul class="mt-4 space-y-2 text-sm text-slate-600">
        <li class="flex items-start gap-2"><span class="mt-1 rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-bold text-emerald-700">NEW</span> Major rewrite with Tailwind v4 and Astro v6</li>
        <li class="flex items-start gap-2"><span class="mt-1 rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-bold text-emerald-700">NEW</span> Introduced pattern family model with base/enhanced tiers</li>
      </ul>
    </article>
  </div>
</section>