Загрузка...
Glassmorphic дашборд для Agile-менеджмента спринтов. Отслеживайте прогресс, задачи команды, таймлайн спринта. Адаптивный UI на Tailwind CSS.
<div class="sm:mt-16 mt-16 relative"
data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2)">
<!-- Glow -->
<div
class="absolute inset-0 -top-8 mx-auto h-56 max-w-5xl rounded-[28px] bg-gradient-to-r from-violet-500/30 via-fuchsia-500/20 to-indigo-500/30 blur-2xl">
</div>
<section
class="supports-[backdrop-filter]:bg-white/5 overflow-hidden text-white bg-white/5 border-slate-50/10 border ring-white/10 ring-1 rounded-2xl relative backdrop-blur-xl"
style="mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 100%);"
data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > section:nth-of-type(1)">
<!-- Sidebar (icons only) -->
<nav
class="hidden sm:flex flex-col z-10 w-14 border-slate-50/0 ring-white/10 ring-1 border-r pt-4 pr-2 pb-4 pl-2 absolute top-0 bottom-0 left-0 backdrop-blur items-center justify-between"
aria-label="Primary"
data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > section:nth-of-type(1) > nav:nth-of-type(1)">
<div class="flex flex-col gap-3 items-center">
<button type="button" class="h-10 w-10 rounded-xl bg-gradient-to-br from-zinc-600 to-zinc-700 ring-1 ring-white/20 shadow-lg shadow-zinc-900/25 flex items-center justify-center" title="Home" aria-label="Home">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="layout-grid" class="lucide lucide-layout-grid w-[20px] h-[20px]" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><rect width="7" height="7" x="3" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="14" rx="1" class=""></rect><rect width="7" height="7" x="3" y="14" rx="1" class=""></rect></svg>
</button>
<div class="h-px w-8 bg-white/10"></div>
<button type="button" class="hover:bg-white/10 flex text-slate-300 w-10 h-10 ring-0 rounded-xl items-center justify-center" title="Search" aria-label="Search">
<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="search" class="lucide lucide-search w-[20px] h-[20px]" style="width: 20px; height: 20px; color: rgb(203, 213, 225);"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
</button>
<button type="button" class="hover:bg-white/10 flex text-slate-300 w-10 h-10 ring-0 rounded-xl items-center justify-center" title="Roadmap" aria-label="Roadmap">
<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="map" class="lucide lucide-map w-[20px] h-[20px]" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" class=""></path><path d="M15 5.764v15" class=""></path><path d="M9 3.236v15" class=""></path></svg>
</button>
<button type="button" class="hover:bg-white/10 flex text-slate-300 w-10 h-10 ring-0 rounded-xl items-center justify-center" title="Tasks" aria-label="Tasks">
<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="list-checks" class="lucide lucide-list-checks h-5 w-5"><path d="M13 5h8" class=""></path><path d="M13 12h8" class=""></path><path d="M13 19h8" class=""></path><path d="m3 17 2 2 4-4" class=""></path><path d="m3 7 2 2 4-4" class=""></path></svg>
</button>
<button type="button" class="hover:bg-white/10 flex text-slate-300 w-10 h-10 ring-0 rounded-xl items-center justify-center" title="Team" aria-label="Team">
<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="users" class="lucide lucide-users h-5 w-5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
</button>
<button type="button" class="hover:bg-white/10 flex text-slate-300 w-10 h-10 ring-0 rounded-xl items-center justify-center" title="Docs" aria-label="Docs">
<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="file-text" class="lucide lucide-file-text h-5 w-5"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="M10 9H8" class=""></path><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path></svg>
</button>
</div>
<div class="flex flex-col items-center gap-3">
<button type="button" class="h-10 w-10 rounded-xl bg-white/5 ring-1 ring-white/10 hover:bg-white/10 text-slate-300 flex items-center justify-center" title="Settings" aria-label="Settings">
<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="settings-2" class="lucide lucide-settings-2 h-5 w-5"><path d="M14 17H5" class=""></path><path d="M19 7h-9" class=""></path><circle cx="17" cy="17" r="3" class=""></circle><circle cx="7" cy="7" r="3" class=""></circle></svg>
</button>
<button type="button" class="h-10 w-10 rounded-xl bg-white/5 ring-1 ring-white/10 hover:bg-white/10 text-slate-300 flex items-center justify-center" title="Help" aria-label="Help">
<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="help-circle" class="lucide lucide-help-circle h-5 w-5"><circle cx="12" cy="12" r="10" class=""></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" class=""></path><path d="M12 17h.01" class=""></path></svg>
</button>
</div>
</nav>
<div class="grid grid-cols-1 lg:grid-cols-2 sm:pl-16 pl-16">
<!-- Left: Sprint Timeline -->
<div class="sm:p-8 lg:p-10 pt-5 pr-5 pb-5 pl-5">
<div class="space-y-6">
<div class="flex items-center justify-between">
<h2 class="sm:text-2xl text-xl font-semibold text-white tracking-tight">Sprint 12 · Week 3</h2>
<div class="flex items-center gap-2 text-slate-400">
<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="target" class="lucide lucide-target h-4 w-4">
<circle cx="12" cy="12" r="10" class=""></circle>
<circle cx="12" cy="12" r="6" class=""></circle>
<circle cx="12" cy="12" r="2" class=""></circle>
</svg>
<span class="text-xs sm:text-sm font-medium">Roadmap</span>
</div>
</div>
<div class="space-y-8">
<div class="space-y-3">
<div class="flex items-start gap-3">
<div class="mt-1 h-1.5 w-1.5 rounded-full bg-slate-400"></div>
<p class="text-sm sm:text-base text-slate-300">
Launched <a href="#"
class="text-slate-300 hover:text-slate-200 underline underline-offset-4 decoration-slate-500/50">v2.3
Dashboard</a> to beta users
</p>
</div>
<div class="ml-6 pl-4 border-l border-white/10 space-y-2">
<div class="flex items-center gap-2 text-slate-400">
<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="check-circle" class="lucide lucide-check-circle h-4 w-4 text-slate-400">
<path d="M21.801 10A10 10 0 1 1 17 3.335" class=""></path>
<path d="m9 11 3 3L22 4" class=""></path>
</svg>
<p class="text-sm">98% positive feedback</p>
</div>
<div class="flex items-center gap-2 text-slate-400">
<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="users" class="lucide lucide-users h-4 w-4">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
<circle cx="9" cy="7" r="4" class=""></circle>
</svg>
<p class="text-sm">1,247 active beta testers</p>
</div>
<div class="flex items-center gap-2 text-slate-500">
<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="arrow-right" class="lucide lucide-arrow-right h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
<p class="text-sm">Moving to GA next sprint</p>
</div>
</div>
</div>
<!-- Team integrations -->
<div class="relative space-y-2">
<div class="flex flex-col sm:flex-row gap-3">
<div
class="flex gap-3 ring-1 ring-white/10 bg-white/5 rounded-xl pt-3 pr-4 pb-3 pl-4 shadow-sm backdrop-blur items-center">
<div
class="h-8 w-8 rounded-lg bg-gradient-to-br from-zinc-500 to-zinc-700 flex items-center justify-center ring-1 ring-white/20">
<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="github" class="lucide lucide-github h-4 w-4 text-white">
<path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
class=""></path>
<path d="M9 18c-4.51 2-5-2-7-2" class=""></path>
</svg>
</div>
<div class="min-w-0">
<p class="text-sm font-medium text-slate-200">GitHub</p>
<p class="text-xs text-slate-400 truncate">24 PRs merged</p>
</div>
</div>
<div
class="flex gap-3 ring-1 ring-white/10 bg-white/5 rounded-xl pt-3 pr-4 pb-3 pl-4 shadow-sm backdrop-blur items-center">
<div
class="h-8 w-8 rounded-lg bg-gradient-to-br from-zinc-600 to-zinc-800 flex items-center justify-center ring-1 ring-white/20">
<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="figma" class="lucide lucide-figma h-4 w-4 text-white">
<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" class=""></path>
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" class=""></path>
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" class=""></path>
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" class=""></path>
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" class=""></path>
</svg>
</div>
<div class="min-w-0">
<p class="text-sm font-medium text-slate-200">Figma</p>
<p class="text-xs text-slate-400 truncate">8 designs ready</p>
</div>
</div>
</div>
</div>
<!-- Feature list -->
<div class="space-y-4">
<h3 class="text-lg tracking-tight font-semibold text-white">In Progress</h3>
<div class="space-y-2">
<div class="flex items-center justify-between px-4 py-3 rounded-lg bg-white/5 ring-1 ring-white/10">
<div class="flex items-center gap-3">
<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 h-4 w-4 text-zinc-400">
<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>
<p class="text-sm text-slate-300 truncate">Real-time collaboration mode</p>
</div>
<span class="text-xs text-slate-400">Due in 3 days</span>
</div>
<div class="flex items-center justify-between px-4 py-3 rounded-lg bg-white/5 ring-1 ring-white/10">
<div class="flex items-center gap-3">
<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 h-4 w-4 text-zinc-400">
<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>
<p class="text-sm text-slate-300 truncate">Advanced analytics dashboard</p>
</div>
<span class="text-xs text-slate-400">On track</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right: Sprint Planning -->
<div class="lg:border-t-0 lg:border-l border-white/10 border-t pr-4 pl-4">
<div class="sm:p-8 lg:p-10 pt-5 pr-5 pb-5 pl-5 space-y-6">
<!-- Sprint header -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<button class="p-2 rounded-lg bg-white/5 ring-1 ring-white/10 hover:bg-white/10" type="button" aria-label="Previous sprint" data-nav="prev">
<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="chevron-left" class="lucide lucide-chevron-left h-4 w-4 text-slate-200"><path d="m15 18-6-6 6-6" class=""></path></svg>
</button>
<button class="p-2 rounded-lg bg-white/5 ring-1 ring-white/10 hover:bg-white/10" type="button" aria-label="Next sprint" data-nav="next">
<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="chevron-right" class="lucide lucide-chevron-right w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(226, 232, 240);"><path d="m9 18 6-6-6-6" class=""></path></svg>
</button>
</div>
<h3 class="text-xl tracking-tight font-semibold text-white" id="sprint-label">Sprint 12</h3>
<button class="p-2 rounded-lg bg-white/5 ring-1 ring-white/10 hover:bg-white/10" type="button" id="add-task-btn" aria-label="Add task">
<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 h-4 w-4 text-slate-200"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
<!-- Progress overview -->
<div class="ring-1 ring-white/10 bg-white/5 rounded-xl pt-4 pr-4 pb-4 pl-4">
<div class="flex items-center justify-between mb-3">
<h4 class="text-lg tracking-tight font-semibold text-white">Progress</h4>
<div class="flex items-center gap-2 text-xs text-slate-400">
<span class="font-medium text-slate-300">67%</span>
<span class="">complete</span>
</div>
</div>
<div class="relative h-2 bg-white/10 rounded-full overflow-hidden mb-4">
<div class="absolute inset-y-0 left-0 bg-gradient-to-r from-zinc-600 to-zinc-700 rounded-full"
style="width: 67%"></div>
</div>
<div class="grid grid-cols-3 gap-3 text-center">
<div class="rounded-lg bg-white/5 p-3">
<div class="text-2xl font-semibold text-white">18</div>
<div class="text-xs text-slate-400">Completed</div>
</div>
<div class="rounded-lg bg-white/5 p-3">
<div class="text-2xl font-semibold text-white">9</div>
<div class="text-xs text-slate-400">In Progress</div>
</div>
<div class="rounded-lg bg-white/5 p-3">
<div class="text-2xl font-semibold text-white">27</div>
<div class="text-xs text-slate-400">Total</div>
</div>
</div>
</div>
<!-- Team tasks -->
<div class="ring-1 ring-white/10 bg-white/5 rounded-xl pt-4 pr-4 pb-4 pl-4">
<div class="flex items-center justify-between mb-3">
<h4 class="text-lg tracking-tight font-semibold text-white">Team Tasks</h4>
<div class="flex items-center gap-2 text-xs text-slate-400">
<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="users" class="lucide lucide-users h-4 w-4">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
<circle cx="9" cy="7" r="4" class=""></circle>
</svg>
<span>8 members</span>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center gap-3 px-3 py-3 rounded-lg bg-white/5 ring-1 ring-white/10">
<div
class="h-8 w-8 rounded-md bg-gradient-to-br from-zinc-600 to-zinc-800 flex items-center justify-center ring-1 ring-white/20 text-white text-sm font-semibold">
SL
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-slate-200 truncate">Sarah Lee</p>
<p class="text-xs text-slate-400 truncate">API integration · 3 tasks</p>
</div>
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-slate-400"></span>
</div>
</div>
<div class="flex items-center gap-3 px-3 py-3 rounded-lg bg-white/5 ring-1 ring-white/10">
<div
class="h-8 w-8 rounded-md bg-gradient-to-br from-zinc-500 to-zinc-700 flex items-center justify-center ring-1 ring-white/20 text-white text-sm font-semibold">
MK
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-slate-200 truncate">Marcus Kim</p>
<p class="text-xs text-slate-400 truncate">UI components · 5 tasks</p>
</div>
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-zinc-400"></span>
</div>
</div>
<div class="flex items-center gap-3 px-3 py-3 rounded-lg bg-white/5 ring-1 ring-white/10 opacity-70">
<div
class="h-8 w-8 rounded-md bg-gradient-to-br from-zinc-600 to-zinc-800 flex items-center justify-center ring-1 ring-white/20 text-white text-sm font-semibold">
JP
</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-slate-200 truncate">Jessica Park</p>
<p class="text-xs text-slate-400 truncate">Testing · 2 tasks</p>
</div>
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-slate-400"></span>
</div>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<button class="text-xs text-slate-300 hover:text-white px-3 py-2 rounded-lg bg-white/5 ring-1 ring-white/10 inline-flex items-center gap-2" type="button">
<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="download" class="lucide lucide-download h-4 w-4"><path d="M12 15V3" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5 5 5-5" class=""></path></svg>
Export report
</button>
<button class="text-xs text-slate-300 hover:text-slate-200 inline-flex items-center gap-2" type="button">
<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="bar-chart-3" class="lucide lucide-bar-chart-3 h-4 w-4"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M18 17V9" class=""></path><path d="M13 17V5" class=""></path><path d="M8 17v-3" class=""></path></svg>
View metrics
</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>