Blog Featured

<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]">Blog</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl">Featured & latest</h2>
    </div>

    <div class="mt-12 grid gap-8 lg:grid-cols-2">
      <!-- Featured post (large) -->
      <article class="group">
        <div class="aspect-[16/10] overflow-hidden rounded-2xl bg-[var(--ws-blog-card-bg)]">
          <div class="h-full w-full bg-gradient-to-br from-indigo-200 to-purple-200 transition group-hover:scale-105"></div>
        </div>
        <div class="mt-6">
          <div class="flex items-center gap-3">
            <span class="inline-block rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700">Featured</span>
            <span class="text-xs text-[var(--ws-blog-text-muted)]">Mar 8, 2026</span>
          </div>
          <h3 class="mt-3 text-2xl font-bold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">
            <a href="#">The complete guide to building a pattern registry</a>
          </h3>
          <p class="mt-3 text-base text-[var(--ws-blog-text-soft)]">From CSS snippets to full page sections — how we built a searchable, AI-native component library that scales across frameworks.</p>
          <div class="mt-4 flex items-center gap-3">
            <div class="h-8 w-8 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500"></div>
            <div class="text-sm">
              <p class="font-medium text-[var(--ws-blog-text)]">Anna Weber</p>
              <p class="text-[var(--ws-blog-text-muted)]">8 min read</p>
            </div>
          </div>
        </div>
      </article>

      <!-- Secondary posts (stacked) -->
      <div class="flex flex-col gap-8">
        <article class="group flex gap-5">
          <div class="aspect-square w-24 shrink-0 overflow-hidden rounded-xl bg-[var(--ws-blog-card-bg)]">
            <div class="h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition group-hover:scale-105"></div>
          </div>
          <div>
            <span class="inline-block rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Tutorial</span>
            <h3 class="mt-1.5 text-base font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">
              <a href="#">Scroll-driven animations without JavaScript</a>
            </h3>
            <div class="mt-2 flex items-center gap-2 text-xs text-[var(--ws-blog-text-muted)]">
              <span>Feb 28, 2026</span>
              <span aria-hidden="true">&middot;</span>
              <span>4 min read</span>
            </div>
          </div>
        </article>

        <article class="group flex gap-5">
          <div class="aspect-square w-24 shrink-0 overflow-hidden rounded-xl bg-[var(--ws-blog-card-bg)]">
            <div class="h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition group-hover:scale-105"></div>
          </div>
          <div>
            <span class="inline-block rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">Workflow</span>
            <h3 class="mt-1.5 text-base font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">
              <a href="#">Using the CLI to scaffold landing pages</a>
            </h3>
            <div class="mt-2 flex items-center gap-2 text-xs text-[var(--ws-blog-text-muted)]">
              <span>Feb 20, 2026</span>
              <span aria-hidden="true">&middot;</span>
              <span>3 min read</span>
            </div>
          </div>
        </article>

        <article class="group flex gap-5">
          <div class="aspect-square w-24 shrink-0 overflow-hidden rounded-xl bg-[var(--ws-blog-card-bg)]">
            <div class="h-full w-full bg-gradient-to-br from-rose-100 to-pink-100 transition group-hover:scale-105"></div>
          </div>
          <div>
            <span class="inline-block rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-700">Deep dive</span>
            <h3 class="mt-1.5 text-base font-semibold text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">
              <a href="#">Glass effects with OKLCH and fallbacks</a>
            </h3>
            <div class="mt-2 flex items-center gap-2 text-xs text-[var(--ws-blog-text-muted)]">
              <span>Feb 14, 2026</span>
              <span aria-hidden="true">&middot;</span>
              <span>6 min read</span>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>