Blog Content Hub

<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="flex items-end justify-between gap-4">
      <div>
        <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]">Resources</p>
        <h2 class="mt-2 text-balance text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl">Everything you need to go deeper</h2>
      </div>
      <a href="#" class="hidden shrink-0 text-sm font-medium text-[var(--ws-blog-accent)] hover:underline sm:block">Browse all →</a>
    </div>

    <div class="mt-12 grid gap-6 lg:grid-cols-3">
      <!-- Featured: Case Study (spans 1 col tall) -->
      <div class="lg:row-span-2 flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)]">
        <div class="aspect-[4/3] bg-[var(--ws-blog-bg-secondary)]"></div>
        <div class="flex flex-1 flex-col p-6">
          <span class="inline-block rounded-full bg-indigo-500/10 px-3 py-1 text-xs font-semibold text-indigo-600">Case Study</span>
          <h3 class="mt-3 text-lg font-bold leading-snug text-[var(--ws-blog-text)]">How ThoughtSpot reduced data risk incidents by 80% in 90 days</h3>
          <p class="mt-2 flex-1 text-sm leading-relaxed text-[var(--ws-blog-text-soft)]">Their security team had visibility into SaaS apps but not into the data flowing through them. Here's how they changed that without adding headcount.</p>
          <div class="mt-4 flex items-center gap-3">
            <div class="h-7 w-7 rounded-full bg-[var(--ws-blog-border)]"></div>
            <span class="text-xs text-[var(--ws-blog-text-soft)]">Sarah Kim · 8 min read</span>
          </div>
        </div>
      </div>

      <!-- Blog post -->
      <div class="flex gap-4 overflow-hidden rounded-2xl border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4">
        <div class="aspect-square h-20 shrink-0 rounded-xl bg-[var(--ws-blog-bg-secondary)]"></div>
        <div class="flex flex-col justify-center gap-1.5">
          <span class="inline-block w-fit rounded-full bg-amber-500/10 px-2.5 py-0.5 text-xs font-semibold text-amber-600">Blog</span>
          <h3 class="text-sm font-semibold leading-snug text-[var(--ws-blog-text)]">What autonomous DLP actually means in 2025</h3>
          <p class="text-xs text-[var(--ws-blog-text-soft)]">Mar 12, 2025 · 5 min read</p>
        </div>
      </div>

      <!-- Report -->
      <div class="flex gap-4 overflow-hidden rounded-2xl border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4">
        <div class="aspect-square h-20 shrink-0 rounded-xl bg-[var(--ws-blog-bg-secondary)]"></div>
        <div class="flex flex-col justify-center gap-1.5">
          <span class="inline-block w-fit rounded-full bg-rose-500/10 px-2.5 py-0.5 text-xs font-semibold text-rose-600">Report</span>
          <h3 class="text-sm font-semibold leading-snug text-[var(--ws-blog-text)]">State of DLP 2025 — 500 security leaders surveyed</h3>
          <p class="text-xs text-[var(--ws-blog-text-soft)]">Feb 28, 2025 · 24 pages</p>
        </div>
      </div>

      <!-- Guide -->
      <div class="flex gap-4 overflow-hidden rounded-2xl border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4">
        <div class="aspect-square h-20 shrink-0 rounded-xl bg-[var(--ws-blog-bg-secondary)]"></div>
        <div class="flex flex-col justify-center gap-1.5">
          <span class="inline-block w-fit rounded-full bg-emerald-500/10 px-2.5 py-0.5 text-xs font-semibold text-emerald-600">Guide</span>
          <h3 class="text-sm font-semibold leading-snug text-[var(--ws-blog-text)]">DORA compliance checklist for data-rich environments</h3>
          <p class="text-xs text-[var(--ws-blog-text-soft)]">Feb 10, 2025 · 12 min read</p>
        </div>
      </div>

      <!-- Webinar -->
      <div class="flex gap-4 overflow-hidden rounded-2xl border border-[var(--ws-blog-border)] bg-[var(--ws-blog-card-bg)] p-4">
        <div class="aspect-square h-20 shrink-0 rounded-xl bg-[var(--ws-blog-bg-secondary)]"></div>
        <div class="flex flex-col justify-center gap-1.5">
          <span class="inline-block w-fit rounded-full bg-violet-500/10 px-2.5 py-0.5 text-xs font-semibold text-violet-600">Webinar</span>
          <h3 class="text-sm font-semibold leading-snug text-[var(--ws-blog-text)]">Live demo: classifying 10M files in under an hour</h3>
          <p class="text-xs text-[var(--ws-blog-text-soft)]">On-demand · 45 min</p>
        </div>
      </div>
    </div>

    <div class="mt-6 sm:hidden">
      <a href="#" class="text-sm font-medium text-[var(--ws-blog-accent)] hover:underline">Browse all →</a>
    </div>
  </div>
</section>