Загрузка...

Анимированная карточка героя с иконками CTA. Идеальна для лендингов и маркетинговых блоков. Создана на Tailwind CSS.
<div
class="flex flex-col min-h-[420px] lg:col-span-1 animate-scale-fade delay-900 text-white bg-slate-900 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/6edaf09b-bdf5-452f-a440-01295e678315_800w.jpg)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8 shadow-xl justify-between">
<div class="space-y-6">
<div class="flex items-center justify-between animate-fade-slide delay-1000">
<span class="text-sm opacity-70 font-sans" style="">Platform</span>
<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="plus"
class="lucide lucide-plus w-5 h-5">
<path d="M5 12h14" class=""></path>
<path d="M12 5v14" class=""></path>
</svg>
</div>
<h2 class="display text-4xl leading-tight uppercase font-manrope font-medium animate-fade-blur delay-1100" style="">
Transform Your Data Pipeline</h2>
</div>
<div class="flex items-center gap-4 pt-6 animate-fade-slide delay-1200">
<button class="p-3 rounded-full bg-orange-500 hover:bg-orange-600 transition-colors"><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="zap" class="lucide lucide-zap w-4 h-4"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg></button>
<button class="p-3 rounded-full bg-white text-slate-900 hover:bg-slate-200 transition-colors"><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="activity" class="lucide lucide-activity w-4 h-4"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg></button>
<button class="p-3 rounded-full bg-lime-500 hover:bg-lime-600 transition-colors"><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="trending-up" class="lucide lucide-trending-up w-4 h-4"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg></button>
</div>
</div>