<div class="profile-card">
  <div class="profile-cover"></div>
  <div class="profile-body">
    <div class="profile-avatar">
      <div class="avatar avatar-fallback" style="width:4rem;height:4rem;font-size:1.25rem">JD</div>
    </div>
    <h3 class="profile-name">Jane Doe</h3>
    <p class="profile-role">Product Designer · San Francisco</p>
    <p class="profile-bio">Crafting calm, sharp interfaces for teams that care about details.</p>
    <div class="profile-stats">
      <div class="stat"><strong>128</strong><span>Projects</span></div>
      <div class="stat"><strong>4.2k</strong><span>Followers</span></div>
      <div class="stat"><strong>310</strong><span>Following</span></div>
    </div>
    <button class="btn btn-primary" style="width:100%">Follow</button>
  </div>
</div>

<style>
.profile-card { border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: var(--surface); }
.profile-cover { height: 80px; background: linear-gradient(135deg, #1A3A6A, #3A8AAA); }
.profile-body { padding: 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.profile-avatar { margin-top: -2rem; }
.profile-name { font-size: 1rem; font-weight: 600; margin: 0; }
.profile-role { font-size: 0.8125rem; color: var(--muted); margin: 0; }
.profile-bio { font-size: 0.875rem; color: var(--muted); line-height: 1.5; margin: 0; }
.profile-stats { display: flex; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat { display: flex; flex-direction: column; gap: 0.125rem; }
.stat strong { font-size: 0.9375rem; font-weight: 600; }
.stat span { font-size: 0.75rem; color: var(--muted); }
</style>