Загрузка...
Боковая панель профиля: имя, должность, статус, навыки, контакты. Адаптивный UI-компонент с эффектами при наведении.
<div class="space-y-12 text-white p-6">
<div>
<h2 class="text-4xl md:text-5xl lg:text-6xl font-medium leading-tight tracking-tight mb-8 text-white">
Elena Rodriguez
<br>
</h2>
<p class="text-base leading-relaxed opacity-80 mb-6 text-white">
Creative Director & Brand Strategist specializing in digital experiences that bridge art and technology.
</p>
<div class="flex items-center space-x-2 text-sm opacity-60 text-white">
<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" class="w-4 h-4">
<path d="M8 2v4"></path>
<path d="M16 2v4"></path>
<rect width="18" height="18" x="3" y="4" rx="2"></rect>
<path d="M3 10h18"></path>
</svg>
<span>Available for new projects</span>
</div>
</div>
<div class="space-y-4">
<h3 class="text-lg font-medium opacity-90 text-white">Expertise</h3>
<div class="space-y-3">
<div class="flex items-center space-x-3">
<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" class="w-4 h-4 opacity-60 text-white">
<path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path>
<circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
<circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
<circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
<circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
<span class="text-sm text-white">Brand Identity</span>
</div>
<div class="flex items-center space-x-3">
<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" class="w-4 h-4 opacity-60 text-white">
<rect width="20" height="14" x="2" y="3" rx="2"></rect>
<line x1="8" x2="16" y1="21" y2="21"></line>
<line x1="12" x2="12" y1="17" y2="21"></line>
</svg>
<span class="text-sm text-white">Digital Design</span>
</div>
<div class="flex items-center space-x-3">
<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" class="w-4 h-4 opacity-60 text-white">
<rect width="18" height="18" x="3" y="3" rx="2"></rect>
<path d="M3 9h18"></path>
<path d="M9 21V9"></path>
</svg>
<span class="text-sm text-white">UI/UX Strategy</span>
</div>
<div class="flex items-center space-x-3">
<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" class="w-4 h-4 opacity-60 text-white">
<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path>
<path d="M9 18h6"></path>
<path d="M10 22h4"></path>
</svg>
<span class="text-sm text-white">Creative Direction</span>
</div>
</div>
</div>
<div class="space-y-4">
<h3 class="text-lg font-medium opacity-90 text-white">Connect</h3>
<div class="space-y-3">
<div class="flex items-center space-x-3 group cursor-pointer">
<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" class="w-4 h-4 opacity-60 group-hover:opacity-100 transition-opacity text-white">
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg>
<span class="text-sm group-hover:opacity-100 opacity-80 transition-opacity text-white">hello@elena.studio</span>
</div>
<div class="flex items-center space-x-3 group cursor-pointer">
<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" class="w-4 h-4 opacity-60 group-hover:opacity-100 transition-opacity text-white">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
<span class="text-sm group-hover:opacity-100 opacity-80 transition-opacity text-white">@elenarodriguez</span>
</div>
<div class="flex items-center space-x-3 group cursor-pointer">
<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" class="w-4 h-4 opacity-60 group-hover:opacity-100 transition-opacity text-white">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
<span class="text-sm group-hover:opacity-100 opacity-80 transition-opacity text-white">@elena.creates</span>
</div>
</div>
</div>
</div>