Cards Hover Spotlight

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <style>
    .ws-spotlight-card .ws-spotlight-layer { opacity: 0; transition: opacity 0.35s ease; }
    .ws-spotlight-card:hover .ws-spotlight-layer { opacity: 1; }
  </style>
  <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">Consolidate your workflow</h2>
      <p class="mt-4 text-lg text-[var(--ws-cards-text-soft)]">Everything you need in one place — stop switching tools.</p>
    </div>
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Card 1 -->
      <article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
        <div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
             style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
        <div class="relative z-10">
          <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
            <svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
          </div>
          <h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">Write</h3>
          <p class="text-sm text-[var(--ws-cards-text-soft)]">Rich text documents that think like you do. Block-based, keyboard-first, infinitely nestable.</p>
        </div>
      </article>
      <!-- Card 2 -->
      <article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
        <div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
             style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
        <div class="relative z-10">
          <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
            <svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
          </div>
          <h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">Draw</h3>
          <p class="text-sm text-[var(--ws-cards-text-soft)]">Infinite canvas for diagrams, wireframes, and visual thinking. No constraints, no grids.</p>
        </div>
      </article>
      <!-- Card 3 -->
      <article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
        <div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
             style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
        <div class="relative z-10">
          <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
            <svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
          </div>
          <h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">Plan</h3>
          <p class="text-sm text-[var(--ws-cards-text-soft)]">Databases, tasks, and timelines in the same document. Plan and track without switching apps.</p>
        </div>
      </article>
      <!-- Card 4 -->
      <article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
        <div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
             style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
        <div class="relative z-10">
          <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
            <svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
          </div>
          <h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">Privacy-first</h3>
          <p class="text-sm text-[var(--ws-cards-text-soft)]">Local storage by default. Your data never leaves your device unless you choose to sync.</p>
        </div>
      </article>
      <!-- Card 5 -->
      <article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
        <div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
             style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
        <div class="relative z-10">
          <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
            <svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          </div>
          <h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">Collaborate</h3>
          <p class="text-sm text-[var(--ws-cards-text-soft)]">Real-time multiplayer with conflict-free sync. Invite your team and work together live.</p>
        </div>
      </article>
      <!-- Card 6 -->
      <article class="ws-spotlight-card group relative overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-6 transition hover:border-[var(--ws-cards-accent)]/40 hover:shadow-lg">
        <div class="ws-spotlight-layer pointer-events-none absolute inset-0 rounded-2xl"
             style="background: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 50%), oklch(0.6 0.2 280 / 0.07), transparent)"></div>
        <div class="relative z-10">
          <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--ws-cards-accent)]/10">
            <svg class="h-5 w-5 text-[var(--ws-cards-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
          </div>
          <h3 class="mb-2 font-semibold text-[var(--ws-cards-text)]">AI-powered</h3>
          <p class="text-sm text-[var(--ws-cards-text-soft)]">Built-in AI that writes, summarizes, and transforms content — right where you work.</p>
        </div>
      </article>
    </div>
  </div>
  <script>
    document.querySelectorAll('.ws-spotlight-card').forEach(card => {
      card.addEventListener('mousemove', e => {
        const r = card.getBoundingClientRect();
        card.style.setProperty('--cx', `${e.clientX - r.left}px`);
        card.style.setProperty('--cy', `${e.clientY - r.top}px`);
      });
    });
  </script>
</section>