Загрузка...
Карточка премиум-профиля с анимированным градиентом. Отображает статистику, навыки, контакты и кнопки. Идеально для портфолио и страниц пользователей.
<div class="w-full max-w-sm p-6 flex items-center justify-center" style="font-family: 'Inter', ui-sans-serif, system-ui">
<div class="group relative w-full">
<div class="absolute inset-0 rounded-2xl overflow-hidden">
<div class="pointer-events-none absolute -inset-10 rounded-full bg-gradient-to-r from-transparent via-gray-400/20 to-transparent blur-xl opacity-50 animate-spin [animation-duration:10s]"></div>
<div class="pointer-events-none absolute -inset-20 rounded-full bg-gradient-to-r from-transparent via-gray-500/15 to-transparent blur-2xl opacity-30 animate-spin [animation-duration:18s] [animation-direction:reverse]"></div>
</div>
<div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-b from-gray-300/40 via-gray-600/60 to-gray-800/50 transition-opacity duration-300 group-hover:opacity-100"></div>
<div class="relative rounded-2xl overflow-hidden shadow-inner ring-1 ring-white/15 transition-all duration-300 ease-out hover:-translate-y-1 hover:ring-gray-400/30 hover:shadow-[0_10px_40px_-10px_rgba(107,114,128,0.4)] bg-gray-900" style="background-image: radial-gradient(at 88% 40%, hsl(220, 13%, 9%) 0px, transparent 85%), radial-gradient(at 49% 30%, hsl(220, 13%, 9%) 0px, transparent 85%), radial-gradient(at 14% 26%, hsl(220, 13%, 9%) 0px, transparent 85%), radial-gradient(at 0% 64%, hsl(220, 9%, 46%) 0px, transparent 85%), radial-gradient(at 41% 94%, hsl(215, 14%, 34%) 0px, transparent 85%), radial-gradient(at 100% 99%, hsl(217, 19%, 27%) 0px, transparent 85%)">
<div class="relative p-6">
<div class="flex justify-center mb-4">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e183f309-3f53-4b47-af6c-55a9cce9da41_320w.jpg" alt="Profile" class="w-20 h-20 rounded-full object-cover ring-2 ring-gray-500/30 shadow-lg">
<div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full ring-2 ring-gray-900 flex items-center justify-center">
<div class="w-2 h-2 bg-white rounded-full"></div>
</div>
</div>
</div>
<div class="text-center mb-6">
<h2 class="text-xl font-semibold tracking-tight text-white mb-1">Alex Morgan</h2>
<p class="text-sm text-gray-400">Senior Product Designer</p>
<p class="text-xs text-gray-500 mt-1">San Francisco, CA</p>
</div>
<div class="grid grid-cols-3 gap-4 mb-6">
<div class="text-center">
<div class="text-lg font-semibold text-white">142</div>
<div class="text-xs text-gray-400">Projects</div>
</div>
<div class="text-center border-x border-gray-700/50">
<div class="text-lg font-semibold text-white">2.8k</div>
<div class="text-xs text-gray-400">Followers</div>
</div>
<div class="text-center">
<div class="text-lg font-semibold text-white">4.9</div>
<div class="text-xs text-gray-400">Rating</div>
</div>
</div>
<hr class="mb-6 border-t border-white/10">
<div class="mb-6">
<h3 class="text-sm font-medium text-white mb-3">Skills</h3>
<div class="flex flex-wrap gap-2">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-800/60 text-gray-300 ring-1 ring-gray-600/30 hover:bg-gray-700/60 transition-colors duration-200">UI/UX Design</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-800/60 text-gray-300 ring-1 ring-gray-600/30 hover:bg-gray-700/60 transition-colors duration-200">Figma</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-800/60 text-gray-300 ring-1 ring-gray-600/30 hover:bg-gray-700/60 transition-colors duration-200">Prototyping</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-800/60 text-gray-300 ring-1 ring-gray-600/30 hover:bg-gray-700/60 transition-colors duration-200">React</span>
</div>
</div>
<div class="space-y-3 mb-6">
<div class="flex items-center gap-3 text-sm">
<div class="w-5 h-5 text-gray-400 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-10 5L2 7"></path>
</svg>
</div>
<span class="text-gray-300">alex.morgan@email.com</span>
</div>
<div class="flex items-center gap-3 text-sm">
<div class="w-5 h-5 text-gray-400 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
</svg>
</div>
<span class="text-gray-300">+1 (555) 123-4567</span>
</div>
<div class="flex items-center gap-3 text-sm">
<div class="w-5 h-5 text-gray-400 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 1v6M12 17v6"></path>
<path d="m5.93 5.93 4.24 4.24m4.24 4.24 4.24 4.24M1 12h6m10 0h6m-2.07-5.93-4.24 4.24m-4.24 4.24L5.93 18.07"></path>
</svg>
</div>
<span class="text-gray-300">alexmorgan.design</span>
</div>
</div>
<div class="flex gap-3">
<button class="flex-1 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-gray-700 to-gray-600 shadow-[inset_0_-2px_25px_-4px_rgba(255,255,255,0.2)] ring-1 ring-white/10 hover:ring-gray-300/40 hover:from-gray-600 hover:to-gray-500 hover:shadow-lg transition-all duration-300 focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400/60">
Follow
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line>
</svg>
</button>
<button class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium text-gray-300 bg-gray-800/60 ring-1 ring-gray-600/30 hover:bg-gray-700/60 hover:text-white hover:ring-gray-500/40 transition-all duration-300 focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400/60">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>