User Profile Card with Stats & Actions

<div class="bg-gradient-to-b from-white/5 to-transparent border-white/10 border rounded-2xl mb-6 pt-5 pr-5 pb-5 pl-5">
          <div class="flex gap-4 items-center">
            <div class="relative">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e08496f1-bdba-4cb4-83c1-96ac5be57ace_320w.jpg" alt="" class="size-16 ring-1 ring-white/15 object-cover rounded-full">
              <span class="absolute -right-1 -bottom-1 inline-flex size-5 items-center justify-center text-[10px] ring-2 ring-slate-900 font-semibold text-white bg-emerald-500 rounded-full">•</span>
            </div>
            <div class="">
              <div class="text-base font-semibold tracking-tight text-slate-100">Ava Stone</div>
              <div class="text-sm text-slate-400">@avastone</div>
            </div>
          </div>
          <div class="mt-4 grid grid-cols-3 gap-2">
            <div class="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-center">
              <div class="text-sm font-semibold text-slate-100">218</div>
              <div class="text-[11px] text-slate-400">Following</div>
            </div>
            <div class="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-center">
              <div class="text-sm font-semibold text-slate-100">1.4k</div>
              <div class="text-[11px] text-slate-400">Followers</div>
            </div>
            <div class="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-center">
              <div class="text-sm font-semibold text-slate-100">32</div>
              <div class="text-[11px] text-slate-400">Communities</div>
            </div>
          </div>
          <div class="mt-4 flex gap-2">
            <button class="inline-flex flex-1 items-center justify-center gap-2 rounded-lg bg-indigo-500/90 px-3 py-2 text-sm font-medium text-white ring-1 ring-inset ring-indigo-300/40 hover:bg-indigo-500">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="message-circle" class="lucide lucide-message-circle size-4"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" class=""></path></svg> Message
            </button>
            <button class="inline-flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm hover:bg-white/10">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal size-4"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
            </button>
          </div>
        </div>