Case Study Spotlight

<section class="ws-case-study bg-[var(--ws-case-study-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.15em] text-[var(--ws-case-study-accent)]">Customers</p>
        <h2 class="mt-2 text-2xl font-bold text-[var(--ws-case-study-text)] sm:text-3xl">Deployed in production</h2>
      </div>
      <a href="#" class="hidden shrink-0 text-sm font-medium text-[var(--ws-case-study-accent)] hover:underline sm:block">All case studies →</a>
    </div>

    <!-- Spotlight cards grid -->
    <div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">

      <!-- Card 1 -->
      <a href="#" class="group relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5">
        <!-- Cover image area -->
        <div class="relative aspect-video overflow-hidden bg-gradient-to-br from-slate-700 to-slate-900">
          <!-- Industry tag -->
          <span class="absolute left-4 top-4 rounded-full bg-black/40 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm">Manufacturing</span>
          <!-- Placeholder cover -->
          <div class="absolute inset-0 flex items-center justify-center opacity-20">
            <svg class="h-16 w-16 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z"/></svg>
          </div>
        </div>
        <!-- Card body -->
        <div class="flex flex-1 flex-col p-6">
          <p class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">Stellantis</p>
          <h3 class="mt-2 text-base font-semibold text-[var(--ws-case-study-text)] leading-snug group-hover:text-[var(--ws-case-study-accent)] transition-colors">Accelerating software-defined vehicle development with AI coding assistance</h3>
          <div class="mt-4 pt-4 border-t border-[var(--ws-case-study-border)]">
            <span class="text-xs font-medium text-[var(--ws-case-study-text-muted)]">40% faster time-to-merge →</span>
          </div>
        </div>
      </a>

      <!-- Card 2 -->
      <a href="#" class="group relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5">
        <div class="relative aspect-video overflow-hidden bg-gradient-to-br from-blue-800 to-indigo-900">
          <span class="absolute left-4 top-4 rounded-full bg-black/40 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm">Technology</span>
          <div class="absolute inset-0 flex items-center justify-center opacity-20">
            <svg class="h-16 w-16 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"/></svg>
          </div>
        </div>
        <div class="flex flex-1 flex-col p-6">
          <p class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">ASML</p>
          <h3 class="mt-2 text-base font-semibold text-[var(--ws-case-study-text)] leading-snug group-hover:text-[var(--ws-case-study-accent)] transition-colors">Deploying domain-specific models for semiconductor lithography R&D</h3>
          <div class="mt-4 pt-4 border-t border-[var(--ws-case-study-border)]">
            <span class="text-xs font-medium text-[var(--ws-case-study-text-muted)]">3× engineering throughput →</span>
          </div>
        </div>
      </a>

      <!-- Card 3 -->
      <a href="#" class="group relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-case-study-border)] bg-[var(--ws-case-study-card-bg)] transition hover:shadow-lg hover:shadow-black/5 sm:col-span-2 lg:col-span-1">
        <div class="relative aspect-video overflow-hidden bg-gradient-to-br from-emerald-700 to-teal-900">
          <span class="absolute left-4 top-4 rounded-full bg-black/40 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm">Logistics</span>
          <div class="absolute inset-0 flex items-center justify-center opacity-20">
            <svg class="h-16 w-16 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/></svg>
          </div>
        </div>
        <div class="flex flex-1 flex-col p-6">
          <p class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-case-study-text-muted)]">CMA CGM</p>
          <h3 class="mt-2 text-base font-semibold text-[var(--ws-case-study-text)] leading-snug group-hover:text-[var(--ws-case-study-accent)] transition-colors">Optimizing global container shipping routes with intelligent document processing</h3>
          <div class="mt-4 pt-4 border-t border-[var(--ws-case-study-border)]">
            <span class="text-xs font-medium text-[var(--ws-case-study-text-muted)]">60% reduction in manual ops →</span>
          </div>
        </div>
      </a>

    </div>

    <!-- Mobile: all case studies link -->
    <div class="mt-8 text-center sm:hidden">
      <a href="#" class="text-sm font-medium text-[var(--ws-case-study-accent)] hover:underline">All case studies →</a>
    </div>
  </div>
</section>