All Prompts
All Prompts
feature-sectionlandingtailwindinteractiveanimatedtabschartjsdashboard
Animated Multi-Step Feature Showcase Section
Анимированная секция с вкладками для демонстрации функций. Показывает дашборд, прогресс, сеть. Интерактивные кнопки, анимация при просмотре. Идеально для SaaS-аналитики.
Prompt
<section class="sm:px-8 sm:mt-14 animate-scale-in delay-400 max-w-7xl mt-10 mr-auto ml-auto pr-6 pl-6">
<div class="sm:p-6 border-white/10 border rounded-3xl pt-4 pr-4 pb-4 pl-4 relative">
<!-- Top steps schema with interactive buttons -->
<div class="grid grid-cols-3 gap-3 mb-8">
<button data-step="1" class="step-button active rounded-xl border border-white/20 bg-white/10 backdrop-blur-xl text-center py-2 text-xs text-zinc-400 tracking-wide transition-all duration-300 hover:bg-white/[0.15] hover:border-white/30 cursor-pointer shadow-[0_8px_32px_0_rgba(255,255,255,0.1)]">STEP 1</button>
<button data-step="2" class="step-button rounded-xl border border-white/20 bg-white/10 backdrop-blur-xl text-center py-2 text-xs text-zinc-400 tracking-wide transition-all duration-300 hover:bg-white/[0.15] hover:border-white/30 cursor-pointer shadow-[0_8px_32px_0_rgba(255,255,255,0.1)]">STEP 2</button>
<button data-step="3" class="step-button rounded-xl border border-white/20 bg-white/10 backdrop-blur-xl text-center py-2 text-xs text-zinc-400 tracking-wide transition-all duration-300 hover:bg-white/[0.15] hover:border-white/30 cursor-pointer shadow-[0_8px_32px_0_rgba(255,255,255,0.1)]">STEP 3</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 lg:gap-16 overflow-visible gap-x-10 gap-y-10 items-center">
<!-- Visual: Dashboard mockup -->
<div class="relative overflow-visible" style="mask-image: none; -webkit-mask-image: none;">
<div class="transition-all duration-500 ease-in-out overflow-visible" id="visual-container">
<!-- Step 1 Content (default) -->
<div class="step-content step-1 active overflow-visible"
style="animation: 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal forwards running floatCardIn;">
<div
class="sm:p-7 overflow-visible bg-[#111016] ring-white/5 ring-1 rounded-[28px] pt-5 pr-5 pb-5 pl-5 relative shadow-[0_10px_60px_-15px_rgba(0,0,0,0.6)]">
<div class="rounded-2xl bg-[#16141c] ring-1 ring-white/5 p-4 sm:p-5">
<div class="rounded-xl bg-[#1a1822] ring-1 ring-white/5 p-3 sm:p-4">
<div class="relative h-44 sm:h-56">
<div class="absolute inset-0">
<canvas id="overviewLine1" class="w-full h-full"></canvas>
</div>
<div
class="pointer-events-none absolute bottom-2 left-3 right-3 flex justify-between text-[10px] text-zinc-500">
<span>Apr</span><span>May</span><span>Jun</span><span>Jul</span><span>Aug</span>
</div>
</div>
</div>
</div>
<div class="absolute left-0 right-0 overflow-visible z-20" style="bottom: -100px;">
<div
class="sm:w-[420px] bg-white/10 w-full ring-white/20 ring-1 rounded-2xl pt-4 pr-4 pb-4 pl-4 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.9)] backdrop-blur-2xl mx-auto transform transition-all duration-700 hover:scale-105 hover:shadow-[0_40px_80px_-15px_rgba(139,92,246,0.4)]">
<div class="flex items-center justify-between">
<p class="text-[11px] uppercase tracking-[0.2em] text-zinc-400">Growth & Efficiency Driven by AI
</p>
<span class="text-[10px] text-zinc-500">Score</span>
</div>
<div class="mt-3 flex items-center gap-3">
<div
class="h-8 w-8 rounded-lg bg-white/[0.08] backdrop-blur-sm ring-1 ring-white/20 flex items-center justify-center shrink-0">
<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 text-zinc-300">
<path
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
class=""></path>
<path d="M20 2v4" class=""></path>
<path d="M22 4h-4" class=""></path>
<circle cx="4" cy="20" r="2" class=""></circle>
</svg>
</div>
<div class="min-w-0 flex-1">
<div class="flex items-center justify-between">
<span class="text-[12px] text-zinc-300">Marketing & ads</span>
<span class="text-[11px] text-zinc-400">84%</span>
</div>
<div class="mt-1 h-2 rounded-full bg-white/10 overflow-hidden">
<div class="bg-gradient-to-r from-blue-400 to-cyan-400 h-2 rounded-full" style="width:84%">
</div>
</div>
</div>
</div>
<div class="mt-3 flex items-center gap-3">
<div
class="h-8 w-8 rounded-lg bg-cyan-500/10 backdrop-blur-sm ring-1 ring-cyan-400/30 flex items-center justify-center shrink-0">
<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 text-cyan-300">
<path d="M12 8V4H8" class=""></path>
<rect width="16" height="12" x="4" y="8" rx="2" class=""></rect>
<path d="M2 14h2" class=""></path>
<path d="M20 14h2" class=""></path>
<path d="M15 13v2" class=""></path>
<path d="M9 13v2" class=""></path>
</svg>
</div>
<div class="min-w-0 flex-1">
<div class="flex items-center justify-between">
<span class="text-[12px] text-zinc-300">AI Automation</span>
<span class="text-[11px] text-zinc-400">94%</span>
</div>
<div class="mt-1 h-2 rounded-full bg-white/10 overflow-hidden">
<div class="bg-gradient-to-r from-purple-400 to-pink-400 h-2 rounded-full" style="width:94%">
</div>
</div>
</div>
</div>
<div class="mt-3 flex items-center gap-3">
<div
class="h-8 w-8 rounded-lg bg-white/[0.08] backdrop-blur-sm ring-1 ring-white/20 flex items-center justify-center shrink-0">
<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 text-zinc-300">
<rect width="20" height="12" x="2" y="6" rx="2" class=""></rect>
<circle cx="12" cy="12" r="2" class=""></circle>
<path d="M6 12h.01M18 12h.01" class=""></path>
</svg>
</div>
<div class="min-w-0 flex-1">
<div class="flex items-center justify-between">
<span class="text-[12px] text-zinc-300">Money & Finance</span>
<span class="text-[11px] text-zinc-400">88%</span>
</div>
<div class="mt-1 h-2 rounded-full bg-white/10 overflow-hidden">
<div class="h-2 rounded-full bg-zinc-300/80" style="width:88%"></div>
</div>
</div>
</div>
<div class="mt-3 border-t border-white/10 pt-3">
<div class="flex items-center justify-between text-[11px] text-zinc-500">
<span>Last updated</span>
<span class="">Just now</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Step 2 Content -->
<div class="step-content step-2 overflow-visible">
<div
class="sm:p-7 bg-[#111016] ring-white/5 ring-1 rounded-[28px] pt-5 pr-5 pb-5 pl-5 relative shadow-[0_10px_60px_-15px_rgba(0,0,0,0.6)] overflow-visible">
<div class="rounded-2xl bg-[#16141c] ring-1 ring-white/5 p-4 sm:p-5">
<div class="rounded-xl bg-[#1a1822] ring-1 ring-white/5 p-3 sm:p-4">
<div class="relative h-44 sm:h-56 flex items-center justify-center">
<svg viewBox="0 0 200 200" class="w-48 h-48">
<defs class="">
</defs>
<circle cx="100" cy="100" r="80" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="12"
class=""></circle>
<circle cx="100" cy="100" r="80" fill="none" stroke="url(#grad1)" stroke-width="12"
stroke-dasharray="502" stroke-dashoffset="125" stroke-linecap="round"
transform="rotate(-90 100 100)" class=""></circle>
<text x="100" y="95" text-anchor="middle" fill="#fff" font-size="32" font-weight="600"
class="">75%</text>
<text x="100" y="115" text-anchor="middle" fill="#a1a1aa" font-size="12" class="">Complete</text>
</svg>
</div>
</div>
</div>
<div class="absolute left-0 right-0 overflow-visible z-20" style="bottom: -100px;">
<div
class="sm:w-[420px] bg-white/10 w-full ring-white/20 ring-1 rounded-2xl px-4 py-4 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.9)] backdrop-blur-2xl mx-auto transform transition-all duration-700 hover:scale-105 hover:shadow-[0_40px_80px_-15px_rgba(139,92,246,0.4)]">
<div class="flex items-center justify-between mb-3">
<p class="text-[11px] uppercase tracking-[0.2em] text-zinc-400">Task Completion Status</p>
<span class="text-[10px] text-emerald-400">● Active</span>
</div>
<div class="space-y-3">
<div class="flex items-center gap-3">
<div
class="h-8 w-8 rounded-lg bg-emerald-500/10 backdrop-blur-sm ring-1 ring-emerald-400/30 flex items-center justify-center shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-emerald-400">
<polyline points="20 6 9 17 4 12" class=""></polyline>
</svg>
</div>
<div class="flex-1">
<div class="text-[12px] text-zinc-300">Database Setup</div>
<div class="text-[10px] text-zinc-500">Completed 2 hours ago</div>
</div>
</div>
<div class="flex items-center gap-3">
<div
class="h-8 w-8 rounded-lg bg-blue-500/10 backdrop-blur-sm ring-1 ring-blue-400/30 flex items-center justify-center shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-blue-400">
<circle cx="12" cy="12" r="10" class=""></circle>
<polyline points="12 6 12 12 16 14" class=""></polyline>
</svg>
</div>
<div class="flex-1">
<div class="text-[12px] text-zinc-300">API Integration</div>
<div class="text-[10px] text-zinc-500">In progress - 65% done</div>
</div>
</div>
<div class="flex items-center gap-3">
<div
class="h-8 w-8 rounded-lg bg-zinc-500/10 backdrop-blur-sm ring-1 ring-zinc-400/30 flex items-center justify-center shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-zinc-400">
<circle cx="12" cy="12" r="10" class=""></circle>
</svg>
</div>
<div class="flex-1">
<div class="text-[12px] text-zinc-300">Deployment</div>
<div class="text-[10px] text-zinc-500">Pending</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Step 3 Content -->
<div class="step-content step-3 overflow-visible">
<div
class="sm:p-7 bg-[#111016] ring-white/5 ring-1 rounded-[28px] pt-5 pr-5 pb-5 pl-5 relative shadow-[0_10px_60px_-15px_rgba(0,0,0,0.6)] overflow-visible">
<div class="rounded-2xl bg-[#16141c] ring-1 ring-white/5 p-4 sm:p-5">
<div class="rounded-xl bg-[#1a1822] ring-1 ring-white/5 p-3 sm:p-4">
<div class="relative h-44 sm:h-56 flex items-center justify-center">
<!-- Network Flow Animation -->
<svg viewBox="0 0 300 220" class="w-full h-full absolute inset-0">
<defs class="">
</defs>
<!-- Connecting Lines -->
<line x1="150" y1="50" x2="70" y2="110" stroke="rgba(167,139,250,0.3)" stroke-width="2"
stroke-dasharray="5,5" class="">
<animate attributeName="stroke-dashoffset" from="0" to="-10" dur="1s" repeatCount="indefinite"
class=""></animate>
</line>
<line x1="150" y1="50" x2="230" y2="110" stroke="rgba(167,139,250,0.3)" stroke-width="2"
stroke-dasharray="5,5" class="">
<animate attributeName="stroke-dashoffset" from="0" to="-10" dur="1s" repeatCount="indefinite"
class=""></animate>
</line>
<line x1="70" y1="110" x2="230" y2="110" stroke="rgba(167,139,250,0.3)" stroke-width="2"
stroke-dasharray="5,5" class="">
<animate attributeName="stroke-dashoffset" from="0" to="-10" dur="1s" repeatCount="indefinite"
class=""></animate>
</line>
<line x1="70" y1="110" x2="150" y2="170" stroke="rgba(167,139,250,0.3)" stroke-width="2"
stroke-dasharray="5,5" class="">
<animate attributeName="stroke-dashoffset" from="0" to="-10" dur="1s" repeatCount="indefinite"
class=""></animate>
</line>
<line x1="230" y1="110" x2="150" y2="170" stroke="rgba(167,139,250,0.3)" stroke-width="2"
stroke-dasharray="5,5" class="">
<animate attributeName="stroke-dashoffset" from="0" to="-10" dur="1s" repeatCount="indefinite"
class=""></animate>
</line>
<!-- Network Nodes -->
<g filter="url(#glow)" class="">
<!-- Top Node -->
<circle cx="150" cy="50" r="18" fill="rgba(139,92,246,0.2)" stroke="rgb(167,139,250)"
stroke-width="2" class="">
<animate attributeName="r" values="18;20;18" dur="2s" repeatCount="indefinite" class="">
</animate>
</circle>
<circle cx="150" cy="50" r="8" fill="rgb(167,139,250)" class="">
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" class="">
</animate>
</circle>
<!-- Left Node -->
<circle cx="70" cy="110" r="16" fill="rgba(139,92,246,0.2)" stroke="rgb(167,139,250)"
stroke-width="2" class="">
<animate attributeName="r" values="16;18;16" dur="2s" begin="0.5s" repeatCount="indefinite"
class=""></animate>
</circle>
<circle cx="70" cy="110" r="7" fill="rgb(167,139,250)" class="">
<animate attributeName="opacity" values="1;0.5;1" dur="2s" begin="0.5s"
repeatCount="indefinite" class=""></animate>
</circle>
<!-- Right Node -->
<circle cx="230" cy="110" r="16" fill="rgba(139,92,246,0.2)" stroke="rgb(167,139,250)"
stroke-width="2" class="">
<animate attributeName="r" values="16;18;16" dur="2s" begin="1s" repeatCount="indefinite"
class=""></animate>
</circle>
<circle cx="230" cy="110" r="7" fill="rgb(167,139,250)" class="">
<animate attributeName="opacity" values="1;0.5;1" dur="2s" begin="1s" repeatCount="indefinite"
class=""></animate>
</circle>
<!-- Bottom Node (Central Hub) -->
<circle cx="150" cy="170" r="22" fill="rgba(139,92,246,0.3)" stroke="rgb(167,139,250)"
stroke-width="3" class="">
<animate attributeName="r" values="22;25;22" dur="2s" begin="1.5s" repeatCount="indefinite"
class=""></animate>
</circle>
<circle cx="150" cy="170" r="10" fill="rgb(167,139,250)" class="">
<animate attributeName="opacity" values="1;0.5;1" dur="2s" begin="1.5s"
repeatCount="indefinite" class=""></animate>
</circle>
</g>
<!-- Data Particles -->
<circle r="3" fill="rgb(167,139,250)" class="">
<animate attributeName="opacity" values="0;1;1;0" dur="3s" repeatCount="indefinite" class="">
</animate>
</circle>
<circle r="3" fill="rgb(139,92,246)" class="">
<animate attributeName="opacity" values="0;1;1;0" dur="3s" begin="1s" repeatCount="indefinite"
class=""></animate>
</circle>
<circle r="3" fill="rgb(196,181,253)" class="">
<animate attributeName="opacity" values="0;1;1;0" dur="3s" begin="2s" repeatCount="indefinite"
class=""></animate>
</circle>
<!-- Hidden paths for particles -->
<path id="path1" d="M 150,50 L 70,110 L 150,170" fill="none" class=""></path>
<path id="path2" d="M 150,50 L 230,110 L 150,170" fill="none" class=""></path>
<path id="path3" d="M 70,110 L 230,110" fill="none" class=""></path>
</svg>
</div>
</div>
</div>
<div class="absolute left-0 right-0 overflow-visible z-20" style="bottom: -100px;">
<div
class="sm:w-[420px] bg-white/10 w-full ring-white/20 ring-1 rounded-2xl px-4 py-4 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.9)] backdrop-blur-2xl mx-auto transform transition-all duration-700 hover:scale-105 hover:shadow-[0_40px_80px_-15px_rgba(139,92,246,0.4)]">
<div class="flex items-center justify-between mb-3">
<p class="text-[11px] uppercase tracking-[0.2em] text-zinc-400">Network Performance</p>
<span class="text-[10px] text-violet-400">● Live</span>
</div>
<div class="grid grid-cols-3 gap-3">
<div class="rounded-lg bg-white/[0.05] backdrop-blur-sm ring-1 ring-white/20 p-3 text-center">
<div class="text-lg font-semibold text-white">142ms</div>
<div class="text-[10px] text-zinc-500 mt-1">Latency</div>
</div>
<div class="rounded-lg bg-white/[0.05] backdrop-blur-sm ring-1 ring-white/20 p-3 text-center">
<div class="text-lg font-semibold text-violet-400">4.2k</div>
<div class="text-[10px] text-zinc-500 mt-1">Requests</div>
</div>
<div class="rounded-lg bg-white/[0.05] backdrop-blur-sm ring-1 ring-white/20 p-3 text-center">
<div class="text-lg font-semibold text-emerald-400">99.8%</div>
<div class="text-[10px] text-zinc-500 mt-1">Uptime</div>
</div>
</div>
<div class="mt-3 border-t border-white/10 pt-3">
<div class="flex items-center justify-between text-[11px] text-zinc-500">
<span>Network Status</span>
<span>All systems operational</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Text + CTA -->
<div id="text-container" class="pl-0 lg:pl-6">
<!-- Step 1 Text (default) -->
<div class="text-content text-1 active">
<div class="text-xs text-zinc-500">01</div>
<div
class="inline-flex items-center justify-center rounded-full bg-white/10 backdrop-blur-xl ring-1 ring-white/20 p-2 relative mt-2 shadow-[0_8px_32px_0_rgba(255,255,255,0.1)]">
<span class="absolute inset-0 blur-xl rounded-full" style="background: radial-gradient(60% 60% at 50% 50%, rgba(34,211,238,0.25), transparent);"></span>
<div
class="relative flex h-10 w-10 items-center justify-center rounded-full bg-white/[0.05] backdrop-blur-sm">
<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-5 h-5 text-cyan-300">
<path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
<path d="m19 9-5 5-4-4-3 3" class=""></path>
</svg>
</div>
</div>
<h2 class="mt-6 text-3xl sm:text-5xl tracking-tight font-semibold text-white">
Monitor Every Metric That Matters
</h2>
<p class="sm:text-lg text-base text-zinc-400 max-w-xl mt-4">Live dashboards connect directly to your
infrastructure. Track performance, detect anomalies, and respond instantly with data-driven confidence.</p>
<div class="mt-7">
<div class="relative inline-block group text-sm rounded-full">
<button class="group relative inline-flex min-w-[120px] cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:scale-[1.1] hover:text-white text-xs font-semibold text-white/70 tracking-tight rounded-full pt-[12px] pr-[17px] pb-[12px] pl-[17px] items-center justify-center" style="box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);background:radial-gradient(ellipse at bottom,rgba(55,55,55,1) 0%,rgba(0,0,0,1) 100%);">
<span class="z-10 text-xs font-normal rounded-full relative">Explore Analytics</span>
<span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 opacity-20 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80 rounded-full text-xs" style="background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);"></span>
</button>
<span class="pointer-events-none absolute -bottom-3 left-1/2 z-0 h-6 w-44 -translate-x-1/2 transition-opacity duration-300 ease-out group-hover:opacity-100 rounded-full text-sm" style="background: radial-gradient(60% 100% at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,.28) 35%, transparent 70%); filter: blur(10px) saturate(120%);" aria-hidden="true"></span>
</div>
</div>
</div>
<!-- Step 2 Text -->
<div class="text-content text-2">
<div class="text-xs text-zinc-500">02</div>
<div
class="inline-flex items-center justify-center rounded-full bg-white/10 backdrop-blur-xl ring-1 ring-white/20 p-2 relative mt-2 shadow-[0_8px_32px_0_rgba(255,255,255,0.1)]">
<span class="absolute inset-0 blur-xl rounded-full" style="background: radial-gradient(60% 60% at 50% 50%, rgba(139,92,246,0.25), transparent);"></span>
<div
class="relative flex h-10 w-10 items-center justify-center rounded-full bg-white/[0.05] backdrop-blur-sm">
<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-5 h-5 text-violet-300">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" class=""></polyline>
</svg>
</div>
</div>
<h2 class="mt-6 text-3xl sm:text-5xl tracking-tight font-semibold text-white">
Track Progress in Real-Time
</h2>
<p class="mt-4 text-base sm:text-lg text-zinc-400 max-w-xl">
Visual progress indicators and status updates keep your entire team aligned. Know exactly where every task
stands at a glance.
</p>
<div class="mt-7">
<div class="relative inline-block group text-sm rounded-full">
<button class="group relative inline-flex min-w-[120px] cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:scale-[1.1] hover:text-white text-xs font-semibold text-white/70 tracking-tight rounded-full pt-[12px] pr-[17px] pb-[12px] pl-[17px] items-center justify-center" style="box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);background:radial-gradient(ellipse at bottom,rgba(55,55,55,1) 0%,rgba(0,0,0,1) 100%);">
<span class="z-10 text-xs font-normal rounded-full relative">View Dashboard</span>
<span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 opacity-20 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80 rounded-full text-xs" style="background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);"></span>
</button>
<span class="pointer-events-none absolute -bottom-3 left-1/2 z-0 h-6 w-44 -translate-x-1/2 transition-opacity duration-300 ease-out group-hover:opacity-100 rounded-full text-sm" style="background: radial-gradient(60% 100% at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,.28) 35%, transparent 70%); filter: blur(10px) saturate(120%);" aria-hidden="true"></span>
</div>
</div>
</div>
<!-- Step 3 Text -->
<div class="text-content text-3">
<div class="text-xs text-zinc-500">03</div>
<div
class="inline-flex items-center justify-center rounded-full bg-white/10 backdrop-blur-xl ring-1 ring-white/20 p-2 relative mt-2 shadow-[0_8px_32px_0_rgba(255,255,255,0.1)]">
<span class="absolute inset-0 blur-xl rounded-full" style="background: radial-gradient(60% 60% at 50% 50%, rgba(167,139,250,0.25), transparent);"></span>
<div
class="relative flex h-10 w-10 items-center justify-center rounded-full bg-white/[0.05] backdrop-blur-sm">
<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-5 h-5 text-violet-300">
<circle cx="12" cy="12" r="2" class=""></circle>
<path
d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
class=""></path>
</svg>
</div>
</div>
<h2 class="mt-6 text-3xl sm:text-5xl tracking-tight font-semibold text-white">
Network Performance Insights
</h2>
<p class="mt-4 text-base sm:text-lg text-zinc-400 max-w-xl">
Real-time network topology visualization shows data flow across your infrastructure. Monitor latency,
throughput, and system health at every node.
</p>
<div class="mt-7">
<div class="relative inline-block group text-sm rounded-full">
<button class="group relative inline-flex min-w-[120px] cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:scale-[1.1] hover:text-white text-xs font-semibold text-white/70 tracking-tight rounded-full pt-[12px] pr-[17px] pb-[12px] pl-[17px] items-center justify-center" style="box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);background:radial-gradient(ellipse at bottom,rgba(55,55,55,1) 0%,rgba(0,0,0,1) 100%);">
<span class="z-10 text-xs font-normal rounded-full relative">See Network</span>
<span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 opacity-20 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80 rounded-full text-xs" style="background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);"></span>
</button>
<span class="pointer-events-none absolute -bottom-3 left-1/2 z-0 h-6 w-44 -translate-x-1/2 transition-opacity duration-300 ease-out group-hover:opacity-100 rounded-full text-sm" style="background: radial-gradient(60% 100% at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,.28) 35%, transparent 70%); filter: blur(10px) saturate(120%);" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
</div>
<!-- Extra spacing for floating cards -->
<div class="h-24"></div>
<style>
.step-button {
position: relative;
}
.step-button.active {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.2));
border-color: rgba(139, 92, 246, 0.6);
color: rgba(255, 255, 255, 0.9);
}
.step-button.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 1), transparent);
box-shadow: 0 0 12px rgba(139, 92, 246, 0.8);
}
.step-content {
display: none;
opacity: 0;
transform: scale(0.95);
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-content.active {
display: block;
opacity: 1;
transform: scale(1);
}
.text-content {
display: none;
opacity: 0;
transform: translateX(30px);
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.text-content.active {
display: block;
opacity: 1;
transform: translateX(0);
}
.step-content.active>div>div:first-child {
animation: floatCardIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes floatCardIn {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
<script>
(function() {
const stepButtons = document.querySelectorAll('.step-button');
const stepContents = document.querySelectorAll('.step-content');
const textContents = document.querySelectorAll('.text-content');
stepButtons.forEach((button, index) => {
button.addEventListener('click', () => {
stepButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
stepContents.forEach(content => content.classList.remove('active'));
textContents.forEach(text => text.classList.remove('active'));
setTimeout(() => {
stepContents[index].classList.add('active');
textContents[index].classList.add('active');
}, 50);
if (index === 0 && window.Chart) {
setTimeout(() => {
const ctx = document.getElementById('overviewLine1');
if (ctx && !ctx.chartInitialized) {
const lineCtx = ctx.getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: 'Success',
data: [320, 410, 380, 520, 610, 560, 680],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139,92,246,0.15)',
tension: 0.35,
fill: true,
borderWidth: 2,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(24,24,27,0.9)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1
}
},
scales: {
x: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
},
y: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
}
}
}
});
ctx.chartInitialized = true;
}
}, 100);
}
});
});
if (window.Chart) {
setTimeout(() => {
const ctx = document.getElementById('overviewLine1');
if (ctx) {
const lineCtx = ctx.getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: 'Success',
data: [320, 410, 380, 520, 610, 560, 680],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139,92,246,0.15)',
tension: 0.35,
fill: true,
borderWidth: 2,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(24,24,27,0.9)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1
}
},
scales: {
x: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
},
y: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
}
}
}
});
ctx.chartInitialized = true;
}
}, 500);
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animation = 'floatCardIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards';
}
});
}, { threshold: 0.2 });
stepContents.forEach(content => {
observer.observe(content);
});
})();
</script>
</div>
<style>
.step-button {
position: relative;
}
.step-button.active {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(34, 211, 238, 0.15));
border-color: rgba(139, 92, 246, 0.5);
color: rgba(255, 255, 255, 0.9);
}
.step-button.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 1), transparent);
box-shadow: 0 0 12px rgba(139, 92, 246, 0.8);
}
.step-content {
display: none;
opacity: 0;
transform: scale(0.95);
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-content.active {
display: block;
opacity: 1;
transform: scale(1);
}
.text-content {
display: none;
opacity: 0;
transform: translateX(30px);
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.text-content.active {
display: block;
opacity: 1;
transform: translateX(0);
}
/* Intersection Observer Animation */
.step-content.active>div>div:first-child {
animation: floatCardIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes floatCardIn {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
<script>
(function() {
const stepButtons = document.querySelectorAll('.step-button');
const stepContents = document.querySelectorAll('.step-content');
const textContents = document.querySelectorAll('.text-content');
stepButtons.forEach((button, index) => {
button.addEventListener('click', () => {
stepButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
stepContents.forEach(content => content.classList.remove('active'));
textContents.forEach(text => text.classList.remove('active'));
setTimeout(() => {
stepContents[index].classList.add('active');
textContents[index].classList.add('active');
}, 50);
if (index === 0 && window.Chart) {
setTimeout(() => {
const ctx = document.getElementById('overviewLine1');
if (ctx && !ctx.chartInitialized) {
const lineCtx = ctx.getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: 'Success',
data: [320, 410, 380, 520, 610, 560, 680],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139,92,246,0.15)',
tension: 0.35,
fill: true,
borderWidth: 2,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(24,24,27,0.9)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1
}
},
scales: {
x: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
},
y: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
}
}
}
});
ctx.chartInitialized = true;
}
}, 100);
}
});
});
if (window.Chart) {
setTimeout(() => {
const ctx = document.getElementById('overviewLine1');
if (ctx) {
const lineCtx = ctx.getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: 'Success',
data: [320, 410, 380, 520, 610, 560, 680],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139,92,246,0.15)',
tension: 0.35,
fill: true,
borderWidth: 2,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(24,24,27,0.9)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1
}
},
scales: {
x: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
},
y: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
}
}
}
});
ctx.chartInitialized = true;
}
}, 500);
}
// Intersection Observer for animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animation = 'floatCardIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards';
}
});
}, { threshold: 0.2 });
stepContents.forEach(content => {
observer.observe(content);
});
})();
</script>
<style>
.step-button {
position: relative;
}
.step-button.active {
background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(34,211,238,0.2));
border-color: rgba(139,92,246,0.6);
color: rgba(255,255,255,0.9);
}
.step-button.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(139,92,246,1), transparent);
box-shadow: 0 0 12px rgba(139,92,246,0.8);
}
.step-content {
display: none;
opacity: 0;
transform: scale(0.95);
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-content.active {
display: block;
opacity: 1;
transform: scale(1);
}
.text-content {
display: none;
opacity: 0;
transform: translateX(30px);
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.text-content.active {
display: block;
opacity: 1;
transform: translateX(0);
}
.step-content.active > div > div:first-child {
animation: floatCardIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes floatCardIn {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
<script>
(function() {
const stepButtons = document.querySelectorAll('.step-button');
const stepContents = document.querySelectorAll('.step-content');
const textContents = document.querySelectorAll('.text-content');
stepButtons.forEach((button, index) => {
button.addEventListener('click', () => {
stepButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
stepContents.forEach(content => content.classList.remove('active'));
textContents.forEach(text => text.classList.remove('active'));
setTimeout(() => {
stepContents[index].classList.add('active');
textContents[index].classList.add('active');
}, 50);
if (index === 0 && window.Chart) {
setTimeout(() => {
const ctx = document.getElementById('overviewLine1');
if (ctx && !ctx.chartInitialized) {
const lineCtx = ctx.getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: 'Success',
data: [320, 410, 380, 520, 610, 560, 680],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139,92,246,0.15)',
tension: 0.35,
fill: true,
borderWidth: 2,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(24,24,27,0.9)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1
}
},
scales: {
x: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
},
y: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
}
}
}
});
ctx.chartInitialized = true;
}
}, 100);
}
});
});
if (window.Chart) {
setTimeout(() => {
const ctx = document.getElementById('overviewLine1');
if (ctx) {
const lineCtx = ctx.getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: 'Success',
data: [320, 410, 380, 520, 610, 560, 680],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139,92,246,0.15)',
tension: 0.35,
fill: true,
borderWidth: 2,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(24,24,27,0.9)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1
}
},
scales: {
x: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
},
y: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
}
}
}
});
ctx.chartInitialized = true;
}
}, 500);
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animation = 'floatCardIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards';
}
});
}, { threshold: 0.2 });
stepContents.forEach(content => {
observer.observe(content);
});
})();
</script>
</div>
<style>
.step-button {
position: relative;
}
.step-button.active {
background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(34,211,238,0.15));
border-color: rgba(139,92,246,0.5);
color: rgba(255,255,255,0.9);
}
.step-button.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(139,92,246,1), transparent);
box-shadow: 0 0 12px rgba(139,92,246,0.8);
}
.step-content {
display: none;
opacity: 0;
transform: scale(0.95);
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-content.active {
display: block;
opacity: 1;
transform: scale(1);
}
.text-content {
display: none;
opacity: 0;
transform: translateX(30px);
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.text-content.active {
display: block;
opacity: 1;
transform: translateX(0);
}
/* Intersection Observer Animation */
.step-content.active > div > div:first-child {
animation: floatCardIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes floatCardIn {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
<script>
(function() {
const stepButtons = document.querySelectorAll('.step-button');
const stepContents = document.querySelectorAll('.step-content');
const textContents = document.querySelectorAll('.text-content');
stepButtons.forEach((button, index) => {
button.addEventListener('click', () => {
stepButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
stepContents.forEach(content => content.classList.remove('active'));
textContents.forEach(text => text.classList.remove('active'));
setTimeout(() => {
stepContents[index].classList.add('active');
textContents[index].classList.add('active');
}, 50);
if (index === 0 && window.Chart) {
setTimeout(() => {
const ctx = document.getElementById('overviewLine1');
if (ctx && !ctx.chartInitialized) {
const lineCtx = ctx.getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: 'Success',
data: [320, 410, 380, 520, 610, 560, 680],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139,92,246,0.15)',
tension: 0.35,
fill: true,
borderWidth: 2,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(24,24,27,0.9)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1
}
},
scales: {
x: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
},
y: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
}
}
}
});
ctx.chartInitialized = true;
}
}, 100);
}
});
});
if (window.Chart) {
setTimeout(() => {
const ctx = document.getElementById('overviewLine1');
if (ctx) {
const lineCtx = ctx.getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [{
label: 'Success',
data: [320, 410, 380, 520, 610, 560, 680],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139,92,246,0.15)',
tension: 0.35,
fill: true,
borderWidth: 2,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(24,24,27,0.9)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1
}
},
scales: {
x: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
},
y: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
}
}
}
});
ctx.chartInitialized = true;
}
}, 500);
}
// Intersection Observer for animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animation = 'floatCardIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards';
}
});
}, { threshold: 0.2 });
stepContents.forEach(content => {
observer.observe(content);
});
})();
</script>
</section>
<!-- Icons & Charts -->
<script src="https://unpkg.com/lucide@latest" class=""></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js" class=""></script>
<script class="">
// Replace icons
lucide.createIcons();
// Line chart
const lineCtx = document.getElementById('overviewLine').getContext('2d');
new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
datasets: [
{
label: 'Success',
data: [320, 410, 380, 520, 610, 560, 680],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139,92,246,0.15)',
tension: 0.35,
fill: true,
borderWidth: 2,
pointRadius: 0
},
{
label: 'Error',
data: [12, 18, 22, 16, 14, 19, 21],
borderColor: '#a3e635',
backgroundColor: 'rgba(163,230,53,0.12)',
tension: 0.35,
fill: true,
borderWidth: 2,
pointRadius: 0
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(24,24,27,0.9)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1,
titleColor: '#fff',
bodyColor: '#e5e7eb',
displayColors: false
}
},
scales: {
x: {
ticks: { color: '#9ca3af', font: { size: 11 } },
grid: { color: 'rgba(255,255,255,0.06)' }
},
y: {
ticks: { color: '#9ca3af', font: { size: 11 }, maxTicksLimit: 5 },
grid: { color: 'rgba(255,255,255,0.06)' }
}
}
}
});
// Doughnut chart
const donutCtx = document.getElementById('overviewDoughnut').getContext('2d');
new Chart(donutCtx, {
type: 'doughnut',
data: {
labels: ['Direct', 'Referral', 'Social'],
datasets: [{
data: [58, 32, 10],
backgroundColor: ['#a3e635', '#8b5cf6', '#71717a'],
borderWidth: 0,
hoverOffset: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(24,24,27,0.9)',
borderColor: 'rgba(255,255,255,0.08)',
borderWidth: 1,
titleColor: '#fff',
bodyColor: '#e5e7eb',
displayColors: true
}
}
}
});
</script>
</section>