Загрузка...
Адаптивная контактная карточка с эффектами при наведении. Отображает email, телефон, сайт. Идеальна для футеров, сайдбаров, лендингов.
<aside class="relative sm:p-10 flex flex-col md:min-h-[420px] lg:min-h-[480px] group hover:border-neutral-600/60 transition-all duration-500 animate-scale-in animate-delay-800 text-neutral-200 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/587704f8-5e00-4904-b740-9c240e358d12_800w.jpg)] bg-cover border-neutral-700/50 rounded-xl pt-8 pr-8 pb-8 pl-8 shadow-2xl backdrop-blur-xl">
<div class="relative z-10">
<div class="flex items-start justify-between">
<h3 class="sm:text-5xl group-hover:text-cyan-400 transition-colors duration-300 text-lg tracking-tight font-geist" style="">Contact</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-4 h-4 text-neutral-300 group-hover:text-cyan-400 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all duration-300"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
</div>
<p class="group-hover:text-neutral-200 transition-colors duration-300 text-xl text-neutral-300 font-geist mt-4" style="">
Let's start a conversation — whether you've got a brief, a bold idea, or just curiosity, we're here to help shape what's next.
</p>
<div class="text-sm mt-auto pt-10 space-y-3">
<a href="mailto:hello@kinetic.studio" class="flex items-center gap-3 hover:text-cyan-400 hover:translate-x-1 transition-all duration-300 group/link font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail w-4 h-4 group-hover/link:scale-110 transition-transform duration-300"><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>
hello@kinetic.studio
</a>
<a href="tel:+3598987201" class="flex items-center gap-3 hover:text-cyan-400 hover:translate-x-1 transition-all duration-300 group/link font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="phone" class="lucide lucide-phone w-4 h-4 group-hover/link:scale-110 transition-transform duration-300"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg>
+359 898 72 01
</a>
<a href="https://kinetic.studio" class="flex items-center gap-3 hover:text-cyan-400 hover:translate-x-1 transition-all duration-300 group/link font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="globe" class="lucide lucide-globe w-4 h-4 group-hover/link:scale-110 transition-transform duration-300"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>
www.kinetic.studio
</a>
<div class="pt-4 flex items-center gap-2 text-xs text-neutral-500 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock w-3.5 h-3.5"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
GMT+1 · Typically replies in 1–2 hrs
</div>
</div>
</div>
</aside>