Bento Base

<section class="ws-bento bg-[var(--ws-bento-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 text-[var(--ws-bento-text)]">Everything you need</p>
      <h2 class="mt-2 text-3xl font-bold tracking-tight text-[var(--ws-bento-text)] sm:text-4xl">Built for modern teams</h2>
      <p class="mt-4 text-lg text-[var(--ws-bento-text-soft)]">A complete toolkit designed to streamline your workflow and boost productivity.</p>
    </div>

    <div class="mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Large card: spans 2 columns -->
      <div class="row-span-2 rounded-2xl border border-[var(--ws-bento-border)] bg-[var(--ws-bento-card-bg)] p-8 sm:col-span-2 lg:col-span-2">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600 text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
        </div>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-bento-text)]">Lightning fast performance</h3>
        <p class="mt-2 text-sm text-[var(--ws-bento-text-soft)]">Optimized at every level for speed. Sub-second load times, instant interactions, and smooth animations that never drop a frame.</p>
      </div>

      <!-- Small card -->
      <div class="rounded-2xl border border-[var(--ws-bento-border)] bg-[var(--ws-bento-card-bg)] p-8">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600 text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>
        </div>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-bento-text)]">Enterprise security</h3>
        <p class="mt-2 text-sm text-[var(--ws-bento-text-soft)]">SOC 2 compliant with end-to-end encryption and role-based access controls.</p>
      </div>

      <!-- Small card -->
      <div class="rounded-2xl border border-[var(--ws-bento-border)] bg-[var(--ws-bento-card-bg)] p-8">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600 text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /></svg>
        </div>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-bento-text)]">Scalable storage</h3>
        <p class="mt-2 text-sm text-[var(--ws-bento-text-soft)]">Auto-scaling infrastructure that grows with your data needs.</p>
      </div>

      <!-- Wide card: spans 2 columns -->
      <div class="rounded-2xl border border-[var(--ws-bento-border)] bg-[var(--ws-bento-card-bg)] p-8 sm:col-span-2">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600 text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
        </div>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-bento-text)]">Team collaboration</h3>
        <p class="mt-2 text-sm text-[var(--ws-bento-text-soft)]">Real-time collaboration tools with shared workspaces, inline comments, and presence indicators. Keep your entire team in sync no matter where they are.</p>
      </div>

      <!-- Small card -->
      <div class="rounded-2xl border border-[var(--ws-bento-border)] bg-[var(--ws-bento-card-bg)] p-8">
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600 text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
        </div>
        <h3 class="mt-4 text-lg font-semibold text-[var(--ws-bento-text)]">Advanced analytics</h3>
        <p class="mt-2 text-sm text-[var(--ws-bento-text-soft)]">Comprehensive dashboards with real-time metrics and custom reports.</p>
      </div>
    </div>
  </div>
</section>