Image Cards

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">Latest Articles</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">Discover our most recent stories, tutorials, and insights.</p>
    </div>

    <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      <article class="group overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] shadow-sm transition hover:shadow-lg">
        <div class="relative aspect-video overflow-hidden">
          <div class="h-full w-full bg-gradient-to-br from-slate-200 to-slate-300 transition-transform duration-500 group-hover:scale-105" aria-hidden="true"></div>
          <span class="absolute top-3 left-3 rounded-full bg-indigo-600 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm">Development</span>
        </div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Building Modern Web Applications</h3>
          <p class="mt-2 line-clamp-2 text-sm text-[var(--ws-cards-text-soft)]">A comprehensive guide to building fast, accessible web apps with the latest tools and frameworks.</p>
          <div class="mt-4 flex items-center gap-3">
            <div class="h-8 w-8 rounded-full bg-slate-200 flex items-center justify-center flex-shrink-0">
              <svg class="h-5 w-5 text-[var(--ws-cards-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
            </div>
            <div class="flex flex-col">
              <span class="text-sm font-medium text-[var(--ws-cards-text)]">Sarah Chen</span>
              <time datetime="2026-03-10" class="text-xs text-[var(--ws-cards-text-muted)]">Mar 10, 2026</time>
            </div>
          </div>
        </div>
      </article>

      <article class="group overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] shadow-sm transition hover:shadow-lg">
        <div class="relative aspect-video overflow-hidden">
          <div class="h-full w-full bg-gradient-to-br from-slate-200 to-slate-300 transition-transform duration-500 group-hover:scale-105" aria-hidden="true"></div>
          <span class="absolute top-3 left-3 rounded-full bg-emerald-600 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm">Design</span>
        </div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Design Systems That Scale</h3>
          <p class="mt-2 line-clamp-2 text-sm text-[var(--ws-cards-text-soft)]">How to create and maintain a design system that grows with your team and product needs.</p>
          <div class="mt-4 flex items-center gap-3">
            <div class="h-8 w-8 rounded-full bg-slate-200 flex items-center justify-center flex-shrink-0">
              <svg class="h-5 w-5 text-[var(--ws-cards-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
            </div>
            <div class="flex flex-col">
              <span class="text-sm font-medium text-[var(--ws-cards-text)]">Marcus Rivera</span>
              <time datetime="2026-03-08" class="text-xs text-[var(--ws-cards-text-muted)]">Mar 8, 2026</time>
            </div>
          </div>
        </div>
      </article>

      <article class="group overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] shadow-sm transition hover:shadow-lg">
        <div class="relative aspect-video overflow-hidden">
          <div class="h-full w-full bg-gradient-to-br from-slate-200 to-slate-300 transition-transform duration-500 group-hover:scale-105" aria-hidden="true"></div>
          <span class="absolute top-3 left-3 rounded-full bg-amber-600 px-2.5 py-0.5 text-xs font-semibold text-white shadow-sm">Analytics</span>
        </div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Data-Driven Product Decisions</h3>
          <p class="mt-2 line-clamp-2 text-sm text-[var(--ws-cards-text-soft)]">Learn how to leverage analytics and user data to make informed decisions that drive growth.</p>
          <div class="mt-4 flex items-center gap-3">
            <div class="h-8 w-8 rounded-full bg-slate-200 flex items-center justify-center flex-shrink-0">
              <svg class="h-5 w-5 text-[var(--ws-cards-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
            </div>
            <div class="flex flex-col">
              <span class="text-sm font-medium text-[var(--ws-cards-text)]">Ava Patel</span>
              <time datetime="2026-03-05" class="text-xs text-[var(--ws-cards-text-muted)]">Mar 5, 2026</time>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>