Загрузка...

Темная карточка виджета аналитики с SVG-графиком роста. Идеальна для дашбордов, SaaS-лендингов для быстрой визуализации данных.
<div class="relative overflow-hidden bg-black/40 border-white/10 border rounded-2xl px-6 py-6">
<div class="absolute inset-0 pointer-events-none" style="background:
radial-gradient(220px 160px at 8% 100%, rgba(139,92,246,0.25), transparent 60%),
radial-gradient(260px 180px at 100% 0%, rgba(59,130,246,0.10), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))"></div>
<h3 class="text-xl sm:text-2xl lg:text-3xl tracking-tight" style="font-weight: 600">Business Data Solutions</h3>
<p class="mt-2 text-sm sm:text-base text-gray-300">Your data‑driven guide to making informed business decisions.</p>
<div class="mt-6 relative">
<div class="rounded-xl bg-white/5 border border-white/10 p-4">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-3">
<p class="text-sm font-medium">See Growth</p>
<div class="flex items-center gap-2">
<span class="text-[11px] px-2 py-1 rounded bg-black/40 border border-white/10">Monthly Visits</span>
<span class="text-[11px] px-2 py-1 rounded bg-black/40 border border-white/10">Last 24hrs</span>
</div>
</div>
<div class="mt-3 h-28 rounded-lg bg-gradient-to-b from-gray-900/60 to-transparent border border-white/10 overflow-hidden">
<svg viewBox="0 0 400 112" class="w-full h-full">
<defs class="">
</defs>
<path d="M0 90 C70 40, 140 100, 200 55 S330 90, 400 65" stroke="#34d399" stroke-width="2" fill="url(#growthGrad)" class=""></path>
</svg>
</div>
<div class="mt-3 inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-black/40 border border-white/10">
<span class="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-500/20 ring-1 ring-white/10 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers w-3.5 h-3.5"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
</span>
<span class="text-xs font-medium">LanderX</span>
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check w-3.5 h-3.5 text-yellow-300 flex-shrink-0"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
</div>
</div>
<!-- Floating checklist -->
<div class="mt-6 lg:absolute lg:right-0 lg:bottom-0 lg:translate-x-0 lg:translate-y-6 lg:mt-0 rounded-xl bg-black/60 backdrop-blur border border-white/10 p-4 w-full lg:w-80">
<div class="flex items-center justify-between mb-3">
<p class="text-sm font-medium">See Growth</p>
<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" data-lucide="chevron-down" class="lucide lucide-chevron-down w-4 h-4 text-gray-400 flex-shrink-0"><path d="m6 9 6 6 6-6" class=""></path></svg>
</div>
<ul class="space-y-2 text-sm text-gray-300">
<li class="flex items-center gap-2">
<span class="inline-flex h-4 w-4 items-center justify-center rounded-[4px] bg-blue-500/20 border border-blue-300/40 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-2.5 h-2.5 text-blue-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
100% score anytime
</li>
<li class="flex items-center gap-2">
<span class="inline-flex h-4 w-4 items-center justify-center rounded-[4px] bg-blue-500/20 border border-blue-300/40 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-2.5 h-2.5 text-blue-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
Watch Stats & Growth like master
</li>
<li class="flex items-center gap-2">
<span class="inline-flex h-4 w-4 items-center justify-center rounded-[4px] bg-blue-500/20 border border-blue-300/40 flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-2.5 h-2.5 text-blue-300"><path d="M20 6 9 17l-5-5" class=""></path></svg>
</span>
Start Growing Now
</li>
</ul>
</div>
</div>
</div>