Profile Cover

<div class="ws-profiles mx-auto max-w-md overflow-hidden rounded-xl border border-[var(--ws-profiles-border)] bg-[var(--ws-profiles-bg)]">
  <!-- Cover image placeholder -->
  <div class="h-32 bg-gradient-to-r from-indigo-500 via-violet-500 to-purple-600" aria-hidden="true"></div>
  <!-- Profile info -->
  <div class="relative px-6 pb-6">
    <div class="-mt-10 flex h-20 w-20 items-center justify-center rounded-full border-4 border-[var(--ws-profiles-bg)] bg-gradient-to-br from-indigo-500 to-violet-600" aria-hidden="true">
      <span class="text-2xl font-bold text-white">JD</span>
    </div>
    <h3 class="mt-3 text-lg font-semibold text-[var(--ws-profiles-text)]">Jane Doe</h3>
    <p class="text-sm text-[var(--ws-profiles-accent)]">Senior Product Designer</p>
    <div class="mt-4 flex gap-6" role="list" aria-label="Profile statistics">
      <div role="listitem" class="text-center">
        <p class="text-lg font-bold text-[var(--ws-profiles-text)]">234</p>
        <p class="text-xs text-[var(--ws-profiles-text-soft)]">Posts</p>
      </div>
      <div role="listitem" class="text-center">
        <p class="text-lg font-bold text-[var(--ws-profiles-text)]">12.4k</p>
        <p class="text-xs text-[var(--ws-profiles-text-soft)]">Followers</p>
      </div>
      <div role="listitem" class="text-center">
        <p class="text-lg font-bold text-[var(--ws-profiles-text)]">890</p>
        <p class="text-xs text-[var(--ws-profiles-text-soft)]">Following</p>
      </div>
    </div>
  </div>
</div>