All Prompts
All Prompts
dashboardtimelineproject managementtailwindcardsstatsresponsiveui
Project Management Dashboard with Timeline
Адаптивный дашборд управления проектами с таймлайном, карточками, графиком прогресса и KPI. Для SaaS и продуктивных приложений.
Prompt
<div class="ring-1 ring-white/10 supports-[backdrop-filter]:bg-neutral-950/60 outline outline-1 outline-white/5 overflow-hidden bg-neutral-950/70 rounded-2xl mr-8 ml-8 shadow-2xl backdrop-blur">
<!-- Frame Title Bar -->
<div class="h-10 flex items-center justify-between px-3 sm:px-4 border-b border-white/10 bg-neutral-900/70">
<div class="flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-rose-500"></span>
<span class="h-3 w-3 rounded-full bg-amber-400"></span>
<span class="h-3 w-3 rounded-full bg-emerald-400"></span>
</div>
<div class="hidden sm:flex items-center gap-2">
<span class="text-xs text-neutral-300">Flow Pilot — Work Timeline</span>
</div>
<div class="flex items-center gap-1.5">
<button class="p-1.5 rounded-md hover:bg-neutral-800/70">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus w-[18px] h-[18px] text-neutral-300"><path d="M5 12h14" class=""></path></svg>
</button>
<button class="p-1.5 rounded-md hover:bg-neutral-800/70">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="square" class="lucide lucide-square w-[18px] h-[18px] text-neutral-300"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect></svg>
</button>
<button class="p-1.5 rounded-md hover:bg-neutral-800/70">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x w-[18px] h-[18px] text-neutral-300"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
</button>
</div>
</div>
<!-- App Shell -->
<div class="flex flex-col lg:flex-row">
<!-- Slim Sidebar -->
<aside class="hidden lg:flex lg:w-16 xl:w-20 flex-col gap-6 bg-neutral-900/60 pt-6 items-center">
<button class="p-2 rounded-xl hover:bg-neutral-800/70">
<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="menu" class="lucide lucide-menu w-5 h-5 text-neutral-400"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
</button>
<button class="p-2 rounded-xl hover:bg-neutral-800/70">
<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="grid" class="lucide lucide-grid w-5 h-5 text-neutral-400"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M3 15h18" class=""></path><path d="M9 3v18" class=""></path><path d="M15 3v18" class=""></path></svg>
</button>
<button class="p-2 rounded-xl hover:bg-neutral-800/70">
<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="inbox" class="lucide lucide-inbox w-5 h-5 text-neutral-400"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" class=""></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" class=""></path></svg>
</button>
<button class="p-2 rounded-xl hover:bg-neutral-800/70">
<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="layers" class="lucide lucide-layers w-5 h-5 text-neutral-400"><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>
</button>
<button class="p-2 rounded-xl hover:bg-neutral-800/70">
<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="flag" class="lucide lucide-flag w-5 h-5 text-neutral-400"><path d="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528" class=""></path></svg>
</button>
<button class="p-2 rounded-xl hover:bg-neutral-800/70">
<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="settings" class="lucide lucide-settings w-5 h-5 text-neutral-400"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
</button>
</aside>
<!-- Main Content + Right Panel -->
<main class="flex-1">
<div class="sm:px-6 lg:px-8 pt-6 pr-4 pb-6 pl-4">
<!-- Top Bar -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="flex items-center gap-3">
<div class="h-9 w-9 rounded-xl bg-gradient-to-br from-emerald-400/20 to-sky-400/10 ring-1 ring-white/10 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="radar" class="lucide lucide-radar w-5 h-5 text-emerald-400"><path d="M19.07 4.93A10 10 0 0 0 6.99 3.34" class=""></path><path d="M4 6h.01" class=""></path><path d="M2.29 9.62A10 10 0 1 0 21.31 8.35" class=""></path><path d="M16.24 7.76A6 6 0 1 0 8.23 16.67" class=""></path><path d="M12 18h.01" class=""></path><path d="M17.99 11.66A6 6 0 0 1 15.77 16.67" class=""></path><circle cx="12" cy="12" r="2" class=""></circle><path d="m13.41 10.59 5.66-5.66" class=""></path></svg>
</div>
<h1 class="text-[22px] sm:text-2xl tracking-tight font-semibold">Flow Pilot</h1>
</div>
<div class="hidden md:flex items-center gap-2 text-sm text-neutral-400">
<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="calendar" class="lucide lucide-calendar w-4 h-4"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
<span id="todayLabel" class="">Fri, Sep 5, 2025</span>
<span class="ml-1 inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-rose-500/15 text-rose-300 px-1.5 text-[11px]">1</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="hidden sm:flex bg-neutral-900/70 ring-1 ring-white/10 rounded-xl p-1">
<button class="px-3 py-1.5 rounded-lg text-xs font-medium text-neutral-300 bg-neutral-800/70">Day</button>
<button class="px-3 py-1.5 rounded-lg text-xs font-medium text-neutral-400 hover:text-neutral-200">Week</button>
<button class="px-3 py-1.5 rounded-lg text-xs font-medium text-neutral-400 hover:text-neutral-200">Month</button>
<button class="px-3 py-1.5 rounded-lg text-xs font-medium text-neutral-400 hover:text-neutral-200">Year</button>
</div>
<button class="hidden sm:flex p-2 rounded-xl bg-neutral-900/70 ring-1 ring-white/10 hover:bg-neutral-800/70">
<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="search" class="lucide lucide-search w-5 h-5 text-neutral-300"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
</button>
<button class="relative p-2 rounded-xl bg-neutral-900/70 ring-1 ring-white/10 hover:bg-neutral-800/70">
<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="bell" class="lucide lucide-bell w-5 h-5 text-neutral-300"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
<span class="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-rose-500 ring-2 ring-neutral-950"></span>
</button>
<div class="flex items-center gap-2">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0dd1790c-456a-4f93-bfce-911a2196719b_800w.jpg" alt="Profile" class="h-8 w-8 rounded-full object-cover ring-2 ring-white/10">
<div class="hidden sm:flex flex-col leading-tight">
<span class="text-sm font-medium">Aria Velasquez</span>
<span class="text-[11px] text-neutral-400">Product Lead</span>
</div>
</div>
</div>
</div>
<!-- Layout -->
<div class="mt-6 grid grid-cols-1 xl:grid-cols-12 gap-6">
<!-- Timeline + Cards -->
<section class="xl:col-span-8 2xl:col-span-9">
<!-- Timeline Card -->
<div class="relative rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-4 sm:p-6 overflow-hidden">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<h2 class="text-xl tracking-tight font-semibold">Work Timeline</h2>
<span class="text-xs text-neutral-400">Sprint 34</span>
</div>
<div class="flex items-center gap-2 text-xs text-neutral-400">
<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="clock" class="lucide lucide-clock w-4 h-4"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
<span>1 PM — 9 PM</span>
</div>
</div>
<!-- Header Columns -->
<div class="mt-4 hidden md:grid grid-cols-12 text-[11px] text-neutral-400">
<div class="col-span-3"></div>
<div class="col-span-9 grid grid-cols-9">
<div class="text-center">1</div>
<div class="text-center">2</div>
<div class="text-center">3</div>
<div class="text-center">4</div>
<div class="text-center">5</div>
<div class="text-center">6</div>
<div class="text-center">7</div>
<div class="text-center">8</div>
<div class="text-center">9</div>
</div>
</div>
<!-- Rows -->
<div class="mt-2 space-y-4">
<!-- Row template -->
<div class="grid grid-cols-1 md:grid-cols-12 items-center gap-3">
<div class="md:col-span-3 flex items-center gap-3">
<button class="hidden md:flex h-8 w-8 rounded-full bg-teal-500/15 text-teal-300 items-center justify-center ring-1 ring-white/10">
<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="pen-tool" class="lucide lucide-pen-tool w-4 h-4"><path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" class=""></path><path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" class=""></path><path d="m2.3 2.3 7.286 7.286" class=""></path><circle cx="11" cy="11" r="2" class=""></circle></svg>
</button>
<div>
<p class="text-sm font-medium">Design System</p>
<p class="text-xs text-neutral-400">Tokens & patterns</p>
</div>
</div>
<div class="md:col-span-9">
<div class="relative h-10 w-full rounded-xl ring-1 ring-white/5 bg-neutral-950/40 overflow-hidden">
<!-- Grid guides -->
<div class="absolute inset-0 grid grid-cols-9">
<div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div>
<div></div>
</div>
<!-- Task bars -->
<div class="absolute left-[4%] top-1/2 -translate-y-1/2 h-7 w-[28%] rounded-lg bg-gradient-to-r from-pink-400/30 to-fuchsia-400/20 ring-1 ring-pink-400/30 backdrop-blur-[2px] flex items-center justify-between px-3">
<span class="text-xs text-neutral-200">Audit (2h)</span>
<div class="flex -space-x-2">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ef159f6c-238b-447a-8560-89ad7ba46090_320w.jpg" alt="avatar">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/94f325d2-00ce-48ec-9c3d-a87ff77bb836_320w.jpg" alt="avatar">
</div>
</div>
<div class="absolute left-[40%] top-1/2 -translate-y-1/2 h-7 w-[22%] rounded-lg bg-gradient-to-r from-amber-400/30 to-orange-400/20 ring-1 ring-amber-400/30 px-3 flex items-center justify-between">
<span class="text-xs text-neutral-200">Handoff (1.5h)</span>
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6708bd8e-2bd1-4959-a58b-fcee27401479_320w.jpg" alt="avatar" style="">
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 items-center gap-3">
<div class="md:col-span-3 flex items-center gap-3">
<button class="hidden md:flex h-8 w-8 rounded-full bg-sky-500/15 text-sky-300 items-center justify-center ring-1 ring-white/10">
<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="smartphone" class="lucide lucide-smartphone w-4 h-4"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect><path d="M12 18h.01" class=""></path></svg>
</button>
<div>
<p class="text-sm font-medium">Mobile Apps</p>
<p class="text-xs text-neutral-400">iOS & Android</p>
</div>
</div>
<div class="md:col-span-9">
<div class="relative h-10 w-full rounded-xl ring-1 ring-white/5 bg-neutral-950/40 overflow-hidden">
<div class="absolute inset-0 grid grid-cols-9">
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class=""></div>
</div>
<div class="absolute left-[6%] top-1/2 -translate-y-1/2 h-7 w-[30%] rounded-lg bg-gradient-to-r from-teal-400/30 to-cyan-400/20 ring-1 ring-teal-400/30 px-3 flex items-center justify-between">
<span class="text-xs text-neutral-200">API Hookup (2h)</span>
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1b33be0b-d1be-4f7e-99f3-df83494621cb_320w.jpg" alt="avatar">
</div>
<div class="absolute left-[40%] top-1/2 -translate-y-1/2 h-7 w-[14%] rounded-lg bg-neutral-800/80 ring-1 ring-white/10 px-3 flex items-center justify-between">
<span class="text-xs text-neutral-300">Break</span>
<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="coffee" class="lucide lucide-coffee w-4 h-4 text-neutral-400"><path d="M10 2v2" class=""></path><path d="M14 2v2" class=""></path><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1" class=""></path><path d="M6 2v2" class=""></path></svg>
</div>
<div class="absolute left-[57%] top-1/2 -translate-y-1/2 h-7 w-[24%] rounded-lg bg-gradient-to-r from-blue-400/30 to-indigo-400/20 ring-1 ring-blue-400/30 px-3 flex items-center justify-between">
<span class="text-xs text-neutral-200">QA Pass (1.5h)</span>
<div class="flex -space-x-2">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b62eea8b-831c-41a3-b9b1-21f4c25de5e5_320w.jpg" alt="avatar" style="">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/76672c59-0193-4795-ba6b-96fe356d9cab_320w.jpg" alt="avatar" style="">
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 items-center gap-3">
<div class="md:col-span-3 flex items-center gap-3">
<button class="hidden md:flex h-8 w-8 rounded-full bg-fuchsia-500/15 text-fuchsia-300 items-center justify-center ring-1 ring-white/10">
<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="image" class="lucide lucide-image w-4 h-4"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
</button>
<div class="">
<p class="text-sm font-medium">Infographics</p>
<p class="text-xs text-neutral-400">Marketing kit</p>
</div>
</div>
<div class="md:col-span-9">
<div class="relative h-10 w-full rounded-xl ring-1 ring-white/5 bg-neutral-950/40 overflow-hidden">
<div class="absolute inset-0 grid grid-cols-9">
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class=""></div>
</div>
<div class="absolute left-[30%] top-1/2 -translate-y-1/2 h-7 w-[26%] rounded-lg bg-gradient-to-r from-purple-400/30 to-violet-400/20 ring-1 ring-purple-400/30 px-3 flex items-center justify-between">
<span class="text-xs text-neutral-200">Draft (2h)</span>
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/18e7ffa9-6336-4e08-9af8-9fffea373570_320w.jpg" alt="avatar">
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 items-center gap-3">
<div class="md:col-span-3 flex items-center gap-3">
<button class="hidden md:flex h-8 w-8 rounded-full bg-amber-500/15 text-amber-300 items-center justify-center ring-1 ring-white/10">
<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="code-2" class="lucide lucide-code-2 w-4 h-4"><path d="m18 16 4-4-4-4" class=""></path><path d="m6 8-4 4 4 4" class=""></path><path d="m14.5 4-5 16" class=""></path></svg>
</button>
<div class="">
<p class="text-sm font-medium">Prototyping</p>
<p class="text-xs text-neutral-400">Interactive flows</p>
</div>
</div>
<div class="md:col-span-9">
<div class="relative h-10 w-full rounded-xl ring-1 ring-white/5 bg-neutral-950/40 overflow-hidden">
<div class="absolute inset-0 grid grid-cols-9">
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class=""></div>
</div>
<div class="absolute left-[18%] top-1/2 -translate-y-1/2 h-7 w-[20%] rounded-lg bg-gradient-to-r from-amber-400/30 to-yellow-400/20 ring-1 ring-amber-400/30 px-3 flex items-center justify-between">
<span class="text-xs text-neutral-200">Wire (1.5h)</span>
<div class="flex -space-x-2">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/0a56382f-4c01-4cfc-9632-244a7ce4fa20_320w.jpg" alt="avatar" style="">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6e7842fa-2930-4398-a1b1-829010b57b42_320w.jpg" alt="avatar">
</div>
</div>
<div class="absolute left-[44%] top-1/2 -translate-y-1/2 h-7 w-[24%] rounded-lg bg-gradient-to-r from-cyan-400/30 to-sky-400/20 ring-1 ring-sky-400/30 px-3 flex items-center justify-between">
<span class="text-xs text-neutral-200">Prototype (2h)</span>
<div class="flex -space-x-2">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/05e3e53f-e4cc-4941-8fa1-f22b5b9379f1_320w.jpg" alt="avatar">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dcfa0419-bad7-43d5-b38d-50a6932d399b_320w.jpg" alt="avatar">
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 items-center gap-3">
<div class="md:col-span-3 flex items-center gap-3">
<button class="hidden md:flex h-8 w-8 rounded-full bg-blue-500/15 text-blue-300 items-center justify-center ring-1 ring-white/10">
<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="shapes" class="lucide lucide-shapes w-4 h-4"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" class=""></path><rect x="3" y="14" width="7" height="7" rx="1" class=""></rect><circle cx="17.5" cy="17.5" r="3.5" class=""></circle></svg>
</button>
<div class="">
<p class="text-sm font-medium">Brand Studio</p>
<p class="text-xs text-neutral-400">Graphics & assets</p>
</div>
</div>
<div class="md:col-span-9">
<div class="relative h-10 w-full rounded-xl ring-1 ring-white/5 bg-neutral-950/40 overflow-hidden">
<div class="absolute inset-0 grid grid-cols-9">
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class="border-r border-white/5"></div>
<div class="border-r border-white/5"></div><div class="border-r border-white/5"></div><div class=""></div>
</div>
<div class="absolute left-[60%] top-1/2 -translate-y-1/2 h-7 w-[26%] rounded-lg bg-gradient-to-r from-sky-400/30 to-blue-400/20 ring-1 ring-sky-400/30 px-3 flex items-center justify-between">
<span class="text-xs text-neutral-200">Illustrations (2h)</span>
<div class="flex -space-x-2">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?q=80&w=64&auto=format&fit=crop" alt="avatar" style="">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1556157382-97eda2d62296?q=80&w=64&auto=format&fit=crop" alt="avatar" style="">
<img class="h-5 w-5 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=64&auto=format&fit=crop" alt="avatar" style="">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Time labels -->
<div class="mt-5 hidden md:flex justify-end">
<div class="w-full md:w-9/12 grid grid-cols-9 text-[11px] text-neutral-500">
<div class="text-center">1 PM</div>
<div class="text-center">2 PM</div>
<div class="text-center">3 PM</div>
<div class="text-center">4 PM</div>
<div class="text-center">5 PM</div>
<div class="text-center">6 PM</div>
<div class="text-center">7 PM</div>
<div class="text-center">8 PM</div>
<div class="text-center">9 PM</div>
</div>
</div>
</div>
<!-- Project Cards -->
<div class="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
<!-- Card -->
<div class="rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-4">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg tracking-tight font-semibold">Nebula UI Kit</h3>
<p class="text-xs text-neutral-400">Design & Creative</p>
</div>
<button class="p-1.5 rounded-lg hover:bg-neutral-800/70">
<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="more-horizontal" class="lucide lucide-more-horizontal w-4 h-4 text-neutral-400"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
<img class="h-28 w-full ring-1 ring-white/10 object-cover rounded-xl mt-3" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/043dfbdb-4f34-4acf-91e6-0c39b81cef40_800w.jpg" alt="project cover">
<div class="mt-4 flex items-center justify-between">
<div class="flex -space-x-2">
<img class="h-6 w-6 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=64&auto=format&fit=crop" alt="avatar">
<img class="h-6 w-6 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?q=80&w=64&auto=format&fit=crop" alt="avatar">
<img class="h-6 w-6 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=64&auto=format&fit=crop" alt="avatar">
</div>
<span class="text-xs text-neutral-400 flex items-center gap-1">
<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="calendar" class="lucide lucide-calendar w-3.5 h-3.5"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg> 3 weeks left
</span>
</div>
<div class="mt-3">
<div class="flex items-center justify-between text-xs">
<span class="text-neutral-300">Progress</span>
<span class="text-neutral-400">45%</span>
</div>
<div class="mt-1 h-2 rounded-full bg-neutral-800 ring-1 ring-white/5">
<div class="h-2 w-[45%] rounded-full bg-gradient-to-r from-emerald-400 to-sky-400"></div>
</div>
</div>
</div>
<!-- Card -->
<div class="rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-4">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg tracking-tight font-semibold">Orion Backend</h3>
<p class="text-xs text-neutral-400">ASP.NET Core</p>
</div>
<button class="p-1.5 rounded-lg hover:bg-neutral-800/70">
<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="more-horizontal" class="lucide lucide-more-horizontal w-4 h-4 text-neutral-400"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
<img class="h-28 w-full ring-1 ring-white/10 object-cover rounded-xl mt-3" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/575a1d5c-41e6-4663-bb47-6707f1af0af9_800w.jpg" alt="server" style="">
<div class="mt-4 flex items-center justify-between">
<div class="flex -space-x-2">
<img class="h-6 w-6 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&w=64&auto=format&fit=crop" alt="avatar" style="">
<img class="h-6 w-6 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&w=64&auto=format&fit=crop" alt="avatar" style="">
</div>
<span class="text-xs text-neutral-400 flex items-center gap-1">
<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="calendar" class="lucide lucide-calendar w-3.5 h-3.5"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg> 2 weeks left
</span>
</div>
<div class="mt-3">
<div class="flex items-center justify-between text-xs">
<span class="text-neutral-300">Progress</span>
<span class="text-neutral-400">95%</span>
</div>
<div class="mt-1 h-2 rounded-full bg-neutral-800 ring-1 ring-white/5">
<div class="h-2 w-[95%] rounded-full bg-gradient-to-r from-emerald-400 to-sky-400"></div>
</div>
</div>
</div>
<!-- Card -->
<div class="rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-4">
<div class="flex items-start justify-between">
<div class="">
<h3 class="text-lg tracking-tight font-semibold">Atlas QA</h3>
<p class="text-xs text-neutral-400">Testing Suite</p>
</div>
<button class="p-1.5 rounded-lg hover:bg-neutral-800/70">
<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="more-horizontal" class="lucide lucide-more-horizontal w-4 h-4 text-neutral-400"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
<img class="h-28 w-full ring-1 ring-white/10 object-cover rounded-xl mt-3" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/86fb226e-d57b-4ac4-a058-724fdc1be4c0_800w.jpg" alt="minimal" style="">
<div class="mt-4 flex items-center justify-between">
<div class="flex -space-x-2">
<img class="h-6 w-6 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=64&auto=format&fit=crop" alt="avatar" style="">
<img class="h-6 w-6 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1521572267360-ee0c2909d518?q=80&w=64&auto=format&fit=crop" alt="avatar" style="">
<img class="h-6 w-6 rounded-full ring-2 ring-neutral-900 object-cover" src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?q=80&w=64&auto=format&fit=crop" alt="avatar" style="">
</div>
<span class="text-xs text-neutral-400 flex items-center gap-1">
<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="calendar" class="lucide lucide-calendar w-3.5 h-3.5"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg> 1 week left
</span>
</div>
<div class="mt-3">
<div class="flex items-center justify-between text-xs">
<span class="text-neutral-300">Progress</span>
<span class="text-neutral-400">75%</span>
</div>
<div class="mt-1 h-2 rounded-full bg-neutral-800 ring-1 ring-white/5">
<div class="h-2 w-[75%] rounded-full bg-gradient-to-r from-emerald-400 to-sky-400"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Right Sidebar -->
<aside class="xl:col-span-4 2xl:col-span-3 space-y-6">
<!-- Overview -->
<div class="rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-5">
<div class="flex items-center justify-between">
<h3 class="text-lg tracking-tight font-semibold">Overall Progress</h3>
<button class="p-1.5 rounded-lg hover:bg-neutral-800/70">
<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="refresh-ccw" class="lucide lucide-refresh-ccw w-4 h-4 text-neutral-400"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" class=""></path><path d="M3 3v5h5" class=""></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" class=""></path><path d="M16 16h5v5" class=""></path></svg>
</button>
</div>
<p class="text-xs text-neutral-400">Team: Core Platform</p>
<div class="mt-4 grid grid-cols-2 gap-4 items-center">
<div class="col-span-1">
<div class="relative h-40">
<div class="absolute inset-0 flex items-center justify-center">
<div class="h-36 w-36">
<div class="relative">
<div class="absolute inset-0 flex items-center justify-center">
<span id="usagePercent" class="text-xl font-semibold tracking-tight">72%</span>
</div>
<div class="relative">
<div class="bg-transparent">
<div class="relative">
<!-- Chart wrapper to avoid layout bug -->
<div class="h-36 w-36">
<div class="relative h-full w-full">
<div class="absolute inset-0">
<div class="h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<!-- Actual canvas inside wrapper -->
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<div class="h-full w-full">
<div class="relative h-full w-full">
<!-- Keep one simple wrapper to ensure sizing -->
<div class="relative h-36 w-36 mx-auto">
<canvas id="usageChart" class="!h-36 !w-36" width="288" height="288" style="display: block; box-sizing: border-box; height: 144px; width: 144px;"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End canvas wrapper -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End chart wrapper -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-1">
<ul class="space-y-3">
<li class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-emerald-400"></span>
<span class="text-sm">Completed</span>
</div>
<span class="text-sm text-neutral-400">128</span>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-sky-400"></span>
<span class="text-sm">In Progress</span>
</div>
<span class="text-sm text-neutral-400">390</span>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-amber-400"></span>
<span class="text-sm">Upcoming</span>
</div>
<span class="text-sm text-neutral-400">250</span>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-rose-500"></span>
<span class="text-sm">Blocked</span>
</div>
<span class="text-sm text-neutral-400">22</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-5">
<h3 class="text-lg tracking-tight font-semibold">Recent Activity</h3>
<p class="text-xs text-neutral-400">12 August 2025</p>
<ul class="mt-4 space-y-4">
<li class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img class="h-8 w-8 rounded-full object-cover ring-2 ring-white/10" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=80&auto=format&fit=crop" alt="avatar" style="">
<div class="leading-tight">
<p class="text-sm">Rin Ito commented on Nebula UI Kit</p>
<p class="text-[11px] text-neutral-400">“Spacing looks sharp 👌”</p>
</div>
</div>
<span class="text-[11px] text-neutral-500">5m</span>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img class="h-8 w-8 rounded-full object-cover ring-2 ring-white/10" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=80&auto=format&fit=crop" alt="avatar">
<div class="leading-tight">
<p class="text-sm">Ash Malik pushed commits to Orion</p>
<p class="text-[11px] text-neutral-400">3 files changed</p>
</div>
</div>
<span class="text-[11px] text-neutral-500">15m</span>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img class="h-8 w-8 rounded-full object-cover ring-2 ring-white/10" src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?q=80&w=80&auto=format&fit=crop" alt="avatar">
<div class="leading-tight">
<p class="text-sm">Dena Abbas updated sprint 34</p>
<p class="text-[11px] text-neutral-400">Velocity +8%</p>
</div>
</div>
<span class="text-[11px] text-neutral-500">30m</span>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img class="h-8 w-8 rounded-full object-cover ring-2 ring-white/10" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?q=80&w=80&auto=format&fit=crop" alt="avatar">
<div class="leading-tight">
<p class="text-sm">Will Tran closed issue #842</p>
<p class="text-[11px] text-neutral-400">Accessibility: keyboard nav</p>
</div>
</div>
<span class="text-[11px] text-neutral-500">1h</span>
</li>
</ul>
</div>
<!-- Stats -->
<div class="grid grid-cols-2 gap-4">
<div class="rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-5">
<p class="text-xs text-neutral-400">Total Projects</p>
<p class="mt-2 text-2xl tracking-tight font-semibold">550</p>
</div>
<div class="ring-1 ring-teal-300/30 bg-teal-400/20 rounded-2xl pt-5 pr-5 pb-5 pl-5">
<p class="text-xs text-neutral-100">Upcoming</p>
<p class="mt-2 text-2xl tracking-tight font-semibold">250</p>
</div>
<div class="rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-5">
<p class="text-xs text-neutral-400">In Progress</p>
<p class="mt-2 text-2xl tracking-tight font-semibold">390</p>
</div>
<div class="rounded-2xl bg-neutral-900/70 ring-1 ring-white/10 p-5">
<p class="text-xs text-neutral-400">Completed</p>
<p class="mt-2 text-2xl tracking-tight font-semibold">125</p>
</div>
</div>
</aside>
</div>
</div>
</main>
</div>
</div>