Team Leadership

<section class="ws-team bg-[var(--ws-team-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 uppercase tracking-[0.18em] text-[var(--ws-color-primary)]">Leadership</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-team-text)] sm:text-4xl">Meet our leadership team</h2>
    </div>
    <div class="mt-12">
      <div class="mx-auto max-w-3xl rounded-2xl border border-[var(--ws-team-border, rgba(0,0,0,0.08))] bg-[var(--ws-team-card-bg, transparent)] p-8">
        <div class="flex flex-col items-center gap-6 sm:flex-row sm:items-start">
          <div class="h-28 w-28 shrink-0 rounded-2xl bg-gradient-to-br from-indigo-200 to-purple-300"></div>
          <div>
            <h3 class="text-xl font-bold text-[var(--ws-team-text)]">Anna Weber</h3>
            <p class="text-sm text-[var(--ws-color-primary)]">Founder &amp; CEO</p>
            <p class="mt-3 text-sm leading-relaxed text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-70">Turning ideas into products people love. With over 10 years of experience in design systems and developer tools, Anna founded Webspire to bridge the gap between design and engineering. She believes great UI patterns should be accessible, composable, and ready to ship.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-8 grid gap-6 sm:grid-cols-3">
      <div class="rounded-2xl border border-[var(--ws-team-border, rgba(0,0,0,0.08))] bg-[var(--ws-team-card-bg, transparent)] p-6 text-center">
        <div class="mx-auto h-20 w-20 rounded-full bg-gradient-to-br from-emerald-200 to-teal-300"></div>
        <h3 class="mt-4 text-base font-semibold text-[var(--ws-team-text)]">Marcus Kim</h3>
        <p class="text-sm text-[var(--ws-color-primary)]">CTO</p>
        <p class="mt-2 text-xs leading-relaxed text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">Architecture and performance. Building the foundation for scalable pattern delivery.</p>
      </div>
      <div class="rounded-2xl border border-[var(--ws-team-border, rgba(0,0,0,0.08))] bg-[var(--ws-team-card-bg, transparent)] p-6 text-center">
        <div class="mx-auto h-20 w-20 rounded-full bg-gradient-to-br from-amber-200 to-orange-300"></div>
        <h3 class="mt-4 text-base font-semibold text-[var(--ws-team-text)]">Lisa Muller</h3>
        <p class="text-sm text-[var(--ws-color-primary)]">VP Design</p>
        <p class="mt-2 text-xs leading-relaxed text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">Visual systems and token architecture. From concept to production-ready patterns.</p>
      </div>
      <div class="rounded-2xl border border-[var(--ws-team-border, rgba(0,0,0,0.08))] bg-[var(--ws-team-card-bg, transparent)] p-6 text-center">
        <div class="mx-auto h-20 w-20 rounded-full bg-gradient-to-br from-rose-200 to-pink-300"></div>
        <h3 class="mt-4 text-base font-semibold text-[var(--ws-team-text)]">David Chen</h3>
        <p class="text-sm text-[var(--ws-color-primary)]">VP Product</p>
        <p class="mt-2 text-xs leading-relaxed text-[var(--ws-team-text-soft, var(--ws-team-text))] opacity-60">User research and roadmap. Ensuring every pattern solves a real problem.</p>
      </div>
    </div>
  </div>
</section>