Blog Timeline

<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
  <div class="mx-auto max-w-6xl px-6">
    <div class="max-w-2xl">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]">Archive Timeline</p>
      <h2 class="mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl">Articles along a chronology</h2>
      <p class="mt-3 text-base text-[var(--ws-blog-text-soft)]">A narrative archive layout for release histories, company stories, retrospectives, or editorial timelines.</p>
    </div>

    <div class="relative mt-14 max-w-5xl md:mx-auto">
      <!-- Vertical line -->
      <div class="absolute bottom-0 left-4 top-0 w-px bg-[var(--ws-blog-border)] md:left-1/2 md:-translate-x-1/2"></div>

      <!-- Month marker -->
      <div class="relative mb-10 flex items-center pl-12 md:justify-center md:pl-0">
        <div class="absolute left-4 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[var(--ws-blog-accent)] ring-4 ring-[var(--ws-blog-bg)] md:left-1/2"></div>
        <span class="inline-flex items-center rounded-full bg-[var(--ws-blog-accent)] px-4 py-1.5 text-xs font-bold uppercase tracking-[0.16em] text-white shadow-sm">March 2026</span>
      </div>

      <!-- Article left -->
      <article class="relative mb-8 pl-12 md:flex md:justify-end md:pl-0 md:pr-[54%]">
        <div class="absolute left-4 top-6 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-[var(--ws-blog-border)] ring-4 ring-[var(--ws-blog-bg)] md:left-1/2"></div>
        <a href="#" class="group block rounded-[1.4rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4 transition hover:border-[var(--ws-blog-accent)]">
          <div class="mb-4 aspect-video overflow-hidden rounded-[1rem] bg-[var(--ws-blog-card-bg)]">
            <div class="h-full w-full bg-gradient-to-br from-indigo-100 to-purple-100 transition duration-300 group-hover:scale-105"></div>
          </div>
          <span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Registry</span>
          <h3 class="mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)]">How registry content stays consistent across snippets, patterns, and templates</h3>
          <p class="mt-2 text-sm leading-6 text-[var(--ws-blog-text-soft)]">An analysis of how previews, metadata, and content structures must align for the platform to be understood.</p>
          <div class="mt-4 text-xs text-[var(--ws-blog-text-muted)]">March 21 · 9 min read</div>
        </a>
      </article>

      <!-- Article right -->
      <article class="relative mb-8 pl-12 md:flex md:justify-start md:pl-[54%]">
        <div class="absolute left-4 top-6 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-[var(--ws-blog-border)] ring-4 ring-[var(--ws-blog-bg)] md:left-1/2"></div>
        <a href="#" class="group block rounded-[1.4rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4 transition hover:border-[var(--ws-blog-accent)]">
          <div class="mb-4 aspect-video overflow-hidden rounded-[1rem] bg-[var(--ws-blog-card-bg)]">
            <div class="h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition duration-300 group-hover:scale-105"></div>
          </div>
          <span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">CSS Effects</span>
          <h3 class="mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)]">Why good effect demos must make the mechanic visible</h3>
          <p class="mt-2 text-sm leading-6 text-[var(--ws-blog-text-soft)]">From scroll to hover — demos should make the use case readable, not just impress decoratively.</p>
          <div class="mt-4 text-xs text-[var(--ws-blog-text-muted)]">March 17 · 6 min read</div>
        </a>
      </article>

      <!-- Month marker -->
      <div class="relative mb-10 flex items-center pl-12 md:justify-center md:pl-0">
        <div class="absolute left-4 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[var(--ws-blog-accent)] ring-4 ring-[var(--ws-blog-bg)] md:left-1/2"></div>
        <span class="inline-flex items-center rounded-full bg-[var(--ws-blog-accent)] px-4 py-1.5 text-xs font-bold uppercase tracking-[0.16em] text-white shadow-sm">February 2026</span>
      </div>

      <!-- Article left -->
      <article class="relative mb-8 pl-12 md:flex md:justify-end md:pl-0 md:pr-[54%]">
        <div class="absolute left-4 top-6 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-[var(--ws-blog-border)] ring-4 ring-[var(--ws-blog-bg)] md:left-1/2"></div>
        <a href="#" class="group block rounded-[1.4rem] border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4 transition hover:border-[var(--ws-blog-accent)]">
          <div class="mb-4 aspect-video overflow-hidden rounded-[1rem] bg-[var(--ws-blog-card-bg)]">
            <div class="h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition duration-300 group-hover:scale-105"></div>
          </div>
          <span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Workflow</span>
          <h3 class="mt-2 text-lg font-semibold leading-snug text-[var(--ws-blog-text)]">Which TODOs translate directly into registry content</h3>
          <p class="mt-2 text-sm leading-6 text-[var(--ws-blog-text-soft)]">Not every idea becomes a pattern. Some requests must first be solved as a snippet, preview, or messaging layer.</p>
          <div class="mt-4 text-xs text-[var(--ws-blog-text-muted)]">Feb 28 · 7 min read</div>
        </a>
      </article>
    </div>
  </div>
</section>