All Prompts
All Prompts

cardstatsctatailwindresponsivedashboardsaaslanding-page
Workflow Automation Stats Card with CTA
Карточка статистики для автоматизации рабочих процессов с CTA. Отображает аптайм, счетчик, иконки и кнопку. Идеально для SaaS-дашбордов и лендингов.
Prompt
<article class="sm:p-6 flex flex-col min-h-[420px] bg-zinc-800/50 border-zinc-800 border rounded-2xl pt-5 pr-5 pb-5 pl-5 backdrop-blur-lg justify-between">
<div class="space-y-5">
<div class="flex items-end gap-2">
<span class="text-5xl sm:text-6xl text-white font-geist font-medium tracking-tighter" style="">99.8</span>
<span class="text-zinc-400 text-base font-normal font-geist" style="">%</span>
</div>
<p class="text-sm text-zinc-300 font-geist" style="">We've automated <span class="font-medium text-white font-geist" style="">250K+ workflows</span> with industry-leading uptime and reliability.</p>
<div class="flex items-center gap-3">
<span class="text-sm font-medium text-white font-geist" style="">FlowAI®</span>
</div>
<div class="flex items-center gap-2">
<div class="h-7 w-7 bg-gradient-to-br from-zinc-700 to-zinc-800 border border-zinc-700 rounded-full flex items-center justify-center">
<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="zap" class="lucide lucide-zap h-3 w-3 text-zinc-300"><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"></path></svg>
</div>
<div class="h-7 w-7 bg-gradient-to-br from-zinc-700 to-zinc-800 border border-zinc-700 -ml-2 rounded-full flex items-center justify-center">
<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="brain" class="lucide lucide-brain h-3 w-3 text-zinc-300"><path d="M12 18V5"></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"></path><path d="M18 18a4 4 0 0 0 2-7.464"></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"></path><path d="M6 18a4 4 0 0 1-2-7.464"></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"></path></svg>
</div>
<div class="h-7 w-7 bg-gradient-to-br from-zinc-700 to-zinc-800 border border-zinc-700 -ml-2 rounded-full flex items-center justify-center">
<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="trending-up" class="lucide lucide-trending-up h-3 w-3 text-zinc-300"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>
</div>
<span class="inline-flex items-center justify-center -ml-1 h-7 px-2 rounded-full bg-white text-zinc-900 text-xs font-normal font-geist" style="">250K+</span>
</div>
<div class="flex items-center gap-1 text-green-500">
<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="trending-up" class="lucide lucide-trending-up h-4 w-4"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>
<span class="text-xs text-zinc-400 font-normal font-geist" style="">Active across 50+ industries</span>
</div>
</div>
<button class="mt-6 h-11 w-full rounded-full bg-white text-zinc-900 text-sm font-normal hover:bg-zinc-100 transition font-geist" style="">
Start your workflow
</button>
</article>