All Prompts
All Prompts
onboardingdashboardbentotailwindprogressresponsivedarksaas
Workspace Onboarding Bento Grid UI
Dark UI-компонент "Bento Grid" для онбординга в SaaS. Отображает прогресс, шаги и карточки действий (шаблоны, приглашения, инструменты). Адаптивный дизайн.
Prompt
<div
class="shadow-[0_10px_60px_-15px_rgba(0,0,0,0.6)] overflow-hidden bg-neutral-900/60 border-neutral-800/80 border rounded-2xl backdrop-blur-xl">
<!-- Browser top bar -->
<div class="flex items-center gap-3 border-b border-neutral-800/80 px-4 sm:px-5 py-3">
<div class="flex items-center gap-1.5">
<span class="h-2.5 w-2.5 rounded-full bg-red-500/90"></span>
<span class="h-2.5 w-2.5 rounded-full bg-amber-400/90"></span>
<span class="h-2.5 w-2.5 rounded-full bg-emerald-500/90"></span>
</div>
<div class="mx-auto flex-1 max-w-3xl">
<div class="flex items-center gap-2 rounded-lg border border-neutral-800/80 bg-neutral-900/70 px-3 py-1.5">
<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="globe-2"
class="lucide lucide-globe-2 h-4 w-4 text-neutral-500">
<path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" class=""></path>
<path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17" class="">
</path>
<path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05" class=""></path>
<circle cx="12" cy="12" r="10" class=""></circle>
</svg>
<div class="truncate text-[13px] text-neutral-400">https://app.nx/onboarding</div>
<div class="ml-auto flex items-center gap-2">
<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="rotate-ccw"
class="lucide lucide-rotate-ccw h-4 w-4 text-neutral-500 hover:text-neutral-300 transition-colors">
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" class=""></path>
<path d="M3 3v5h5" class=""></path>
</svg>
<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 h-4 w-4 text-neutral-500 hover:text-neutral-300 transition-colors">
<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>
<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="shield"
class="lucide lucide-shield h-4 w-4 text-neutral-500 hover:text-neutral-300 transition-colors">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
class=""></path>
</svg>
</div>
</div>
</div>
<div class="hidden sm:flex items-center gap-2">
<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="chevron-left"
class="lucide lucide-chevron-left h-4 w-4 text-neutral-500 hover:text-neutral-300 transition-colors">
<path d="m15 18-6-6 6-6" class=""></path>
</svg>
<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="chevron-right"
class="lucide lucide-chevron-right h-4 w-4 text-neutral-500 hover:text-neutral-300 transition-colors">
<path d="m9 18 6-6-6-6" class=""></path>
</svg>
</div>
</div>
<!-- App header -->
<div class="px-5 sm:px-8 pt-6 sm:pt-8 pb-4 border-b border-neutral-800/80">
<div class="flex flex-col md:flex-row md:items-center gap-4 md:gap-6">
<div class="flex items-center gap-3">
<div class="h-9 w-9 rounded-md bg-neutral-800/90 ring-1 ring-neutral-700/80 flex items-center justify-center">
<span class="text-[13px] font-semibold tracking-tight text-neutral-200">NX</span>
</div>
<div>
<h1 class="text-xl sm:text-2xl tracking-tight font-semibold text-neutral-100">Welcome, let's set up your
workspace</h1>
<p class="text-sm text-neutral-400">A few steps to personalize your experience.</p>
</div>
</div>
<div class="md:ml-auto w-full md:w-64">
<div class="flex items-center justify-between text-xs text-neutral-400 mb-1">
<span>Step 1 of 3</span>
<span>33%</span>
</div>
<div class="h-1.5 w-full rounded-full bg-neutral-800 overflow-hidden">
<div class="h-full w-1/3 rounded-full bg-indigo-500"></div>
</div>
</div>
</div>
</div>
<!-- Content: Feature Bento -->
<div class="sm:px-8 sm:py-8 pt-6 pr-5 pb-6 pl-5">
<div class="grid grid-cols-1 md:grid-cols-6 gap-4 sm:gap-5">
<!-- Featured cell (large) - first row, spans 4 cols and 2 rows -->
<div
class="col-span-1 md:col-span-4 md:row-span-2 rounded-xl border border-neutral-800/80 bg-neutral-900/60 p-5 sm:p-6 hover:border-neutral-700 transition-colors">
<div class="flex items-center gap-2 text-xs text-indigo-300/90">
<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="rocket"
class="lucide lucide-rocket h-4 w-4">
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
class=""></path>
<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
class=""></path>
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path>
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path>
</svg>
<span class="font-medium tracking-tight">Start fast</span>
</div>
<h2 class="mt-2 text-2xl md:text-[28px] tracking-tight font-semibold text-neutral-100">Create your first
workspace</h2>
<p class="mt-2 text-sm text-neutral-400">Name it, choose a template, and you're ready to collaborate.</p>
<div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-3">
<div class="flex items-center gap-3 rounded-lg border border-neutral-800/80 bg-neutral-900/60 px-3 py-2.5">
<div class="h-8 w-8 rounded-md bg-indigo-500/15 ring-1 ring-indigo-500/20 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="layout-dashboard" class="lucide lucide-layout-dashboard h-4 w-4 text-indigo-400">
<rect width="7" height="9" x="3" y="3" rx="1" class=""></rect>
<rect width="7" height="5" x="14" y="3" rx="1" class=""></rect>
<rect width="7" height="9" x="14" y="12" rx="1" class=""></rect>
<rect width="7" height="5" x="3" y="16" rx="1" class=""></rect>
</svg>
</div>
<div>
<div class="text-sm font-medium text-neutral-200">Pick a template</div>
<div class="text-xs text-neutral-400">Boards, docs, or tasks</div>
</div>
</div>
<div class="flex items-center gap-3 rounded-lg border border-neutral-800/80 bg-neutral-900/60 px-3 py-2.5">
<div
class="h-8 w-8 rounded-md bg-emerald-500/15 ring-1 ring-emerald-500/20 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="users" class="lucide lucide-users h-4 w-4 text-emerald-400">
<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>
</div>
<div>
<div class="text-sm font-medium text-neutral-200">Invite teammates</div>
<div class="text-xs text-neutral-400">Share instantly</div>
</div>
</div>
<div class="flex items-center gap-3 rounded-lg border border-neutral-800/80 bg-neutral-900/60 px-3 py-2.5">
<div class="h-8 w-8 rounded-md bg-sky-500/15 ring-1 ring-sky-500/20 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="plug" class="lucide lucide-plug h-4 w-4 text-sky-400">
<path d="M12 22v-5" class=""></path>
<path d="M9 8V2" class=""></path>
<path d="M15 8V2" class=""></path>
<path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" class=""></path>
</svg>
</div>
<div>
<div class="text-sm font-medium text-neutral-200">Connect tools</div>
<div class="text-xs text-neutral-400">Git, Calendar, more</div>
</div>
</div>
<div class="flex items-center gap-3 rounded-lg border border-neutral-800/80 bg-neutral-900/60 px-3 py-2.5">
<div class="h-8 w-8 rounded-md bg-amber-500/15 ring-1 ring-amber-500/20 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="lock" class="lucide lucide-lock h-4 w-4 text-amber-400">
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path>
</svg>
</div>
<div>
<div class="text-sm font-medium text-neutral-200">Set roles</div>
<div class="text-xs text-neutral-400">Owner, Editor, Viewer</div>
</div>
</div>
</div>
<div class="mt-6 flex flex-col sm:flex-row gap-3">
<button class="inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-500 text-white px-4 py-2.5 text-sm font-medium hover:bg-indigo-400/90 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-400/50">
Continue
<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="chevron-right" class="lucide lucide-chevron-right h-4 w-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
</button>
<button class="inline-flex items-center justify-center gap-2 rounded-lg border border-neutral-800/80 bg-neutral-900/60 text-neutral-300 px-4 py-2.5 text-sm font-medium hover:border-neutral-700 hover:text-neutral-100 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-700/60">
Skip for now
</button>
</div>
<div class="mt-6 border-t border-neutral-800/80 pt-4">
<div class="text-xs uppercase tracking-wider text-neutral-500 mb-3">Quick checklist</div>
<div class="grid sm:grid-cols-3 gap-2.5">
<div class="flex items-center gap-2 text-sm text-neutral-300">
<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="check-circle-2" class="lucide lucide-check-circle-2 h-4 w-4 text-emerald-400">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
Workspace name
</div>
<div class="flex items-center gap-2 text-sm text-neutral-300">
<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="circle" class="lucide lucide-circle h-4 w-4 text-neutral-500">
<circle cx="12" cy="12" r="10" class=""></circle>
</svg>
Choose template
</div>
<div class="flex items-center gap-2 text-sm text-neutral-300">
<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="circle" class="lucide lucide-circle h-4 w-4 text-neutral-500">
<circle cx="12" cy="12" r="10" class=""></circle>
</svg>
Invite teammates
</div>
</div>
</div>
</div>
<!-- First row, right side - 2 cols -->
<div
class="col-span-1 md:col-span-2 rounded-xl border border-neutral-800/80 bg-neutral-900/60 p-5 hover:border-neutral-700 transition-colors">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-xs text-neutral-300">
<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="users" class="lucide lucide-users h-4 w-4 text-emerald-400">
<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 class="font-medium tracking-tight">Invite teammates</span>
</div>
<span class="text-[11px] text-neutral-500">Optional</span>
</div>
<div class="mt-3 flex -space-x-2">
<img class="h-8 w-8 rounded-full object-cover ring-1 ring-neutral-700/80" src="https://images.unsplash.com/photo-1548142813-c348350df52b?q=80&w=120&auto=format&fit=crop" alt="">
<img class="h-8 w-8 rounded-full object-cover ring-1 ring-neutral-700/80" src="https://images.unsplash.com/photo-1554151228-14d9def656e4?q=80&w=120&auto=format&fit=crop" alt="">
<img class="h-8 w-8 rounded-full object-cover ring-1 ring-neutral-700/80" src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&w=120&auto=format&fit=crop" alt="">
<div
class="h-8 w-8 rounded-full bg-neutral-800/70 ring-1 ring-neutral-700/80 flex items-center justify-center text-[11px] text-neutral-400">
+3</div>
</div>
<button class="mt-4 inline-flex items-center gap-2 text-sm text-indigo-300 hover:text-indigo-200 transition-colors">
Add people
<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="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
</button>
</div>
<!-- Second row, right side - first 2 cols -->
<div
class="col-span-1 md:col-span-2 rounded-xl border border-neutral-800/80 bg-neutral-900/60 p-5 hover:border-neutral-700 transition-colors">
<div class="flex items-center gap-2 text-xs text-neutral-300">
<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="layout-template" class="lucide lucide-layout-template h-4 w-4 text-indigo-400">
<rect width="18" height="7" x="3" y="3" rx="1" class=""></rect>
<rect width="9" height="7" x="3" y="14" rx="1" class=""></rect>
<rect width="5" height="7" x="16" y="14" rx="1" class=""></rect>
</svg>
<span class="font-medium tracking-tight">Choose a template</span>
</div>
<div class="mt-3 grid grid-cols-3 gap-2">
<div
class="rounded-lg border border-neutral-800/80 bg-neutral-900/60 p-2 hover:border-neutral-700 transition-colors">
<div class="h-14 rounded-md bg-gradient-to-br from-neutral-800 to-neutral-900 ring-1 ring-neutral-700/50">
</div>
<div class="mt-2 text-[11px] text-neutral-300">Kanban</div>
</div>
<div
class="rounded-lg border border-neutral-800/80 bg-neutral-900/60 p-2 hover:border-neutral-700 transition-colors">
<div class="h-14 rounded-md bg-gradient-to-br from-neutral-800 to-neutral-900 ring-1 ring-neutral-700/50">
</div>
<div class="mt-2 text-[11px] text-neutral-300">Docs</div>
</div>
<div
class="rounded-lg border border-neutral-800/80 bg-neutral-900/60 p-2 hover:border-neutral-700 transition-colors">
<div class="h-14 rounded-md bg-gradient-to-br from-neutral-800 to-neutral-900 ring-1 ring-neutral-700/50">
</div>
<div class="mt-2 text-[11px] text-neutral-300">Sprint</div>
</div>
</div>
<button class="mt-4 inline-flex items-center gap-2 text-sm text-indigo-300 hover:text-indigo-200 transition-colors">
Browse all
<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="chevrons-right" class="lucide lucide-chevrons-right h-4 w-4"><path d="m6 17 5-5-5-5" class=""></path><path d="m13 17 5-5-5-5" class=""></path></svg>
</button>
</div>
<!-- Third row - 3 equal columns -->
<div
class="col-span-1 md:col-span-2 rounded-xl border border-neutral-800/80 bg-neutral-900/60 p-5 hover:border-neutral-700 transition-colors">
<div class="flex items-center gap-2 text-xs text-neutral-300">
<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="plug"
class="lucide lucide-plug h-4 w-4 text-sky-400">
<path d="M12 22v-5" class=""></path>
<path d="M9 8V2" class=""></path>
<path d="M15 8V2" class=""></path>
<path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" class=""></path>
</svg>
<span class="font-medium tracking-tight">Connect tools</span>
</div>
<div class="mt-4 grid grid-cols-4 gap-2">
<div
class="h-10 rounded-md border border-neutral-800/80 bg-neutral-900/60 flex items-center justify-center hover:border-neutral-700 transition-colors">
<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="github" class="lucide lucide-github h-4 w-4 text-neutral-300">
<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="h-10 rounded-md border border-neutral-800/80 bg-neutral-900/60 flex items-center justify-center hover:border-neutral-700 transition-colors">
<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 h-4 w-4 text-neutral-300">
<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>
</div>
<div
class="h-10 rounded-md border border-neutral-800/80 bg-neutral-900/60 flex items-center justify-center hover:border-neutral-700 transition-colors">
<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="mail"
class="lucide lucide-mail h-4 w-4 text-neutral-300">
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path>
<rect x="2" y="4" width="20" height="16" rx="2" class=""></rect>
</svg>
</div>
<div
class="h-10 rounded-md border border-neutral-800/80 bg-neutral-900/60 flex items-center justify-center hover:border-neutral-700 transition-colors">
<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="database" class="lucide lucide-database h-4 w-4 text-neutral-300">
<ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse>
<path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path>
<path d="M3 12A9 3 0 0 0 21 12" class=""></path>
</svg>
</div>
</div>
<p class="mt-3 text-xs text-neutral-400">Sync commits, events, and docs automatically.</p>
</div>
<div
class="col-span-1 md:col-span-2 rounded-xl border border-neutral-800/80 bg-neutral-900/60 p-5 hover:border-neutral-700 transition-colors">
<div class="flex items-center gap-2 text-xs text-neutral-300">
<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="palette" class="lucide lucide-palette h-4 w-4 text-fuchsia-400">
<path
d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
class=""></path>
<circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle>
<circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle>
<circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle>
<circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle>
</svg>
<span class="font-medium tracking-tight">Personalize</span>
</div>
<div class="mt-4 grid grid-cols-3 gap-2">
<button class="h-9 rounded-md border border-neutral-800/80 bg-neutral-900/60 text-[12px] text-neutral-300 hover:border-neutral-700 hover:text-neutral-100 transition-colors">Dark</button>
<button class="h-9 rounded-md border border-neutral-800/80 bg-neutral-900/60 text-[12px] text-neutral-300 hover:border-neutral-700 hover:text-neutral-100 transition-colors">Light</button>
<button class="h-9 rounded-md border border-neutral-800/80 bg-neutral-900/60 text-[12px] text-neutral-300 hover:border-neutral-700 hover:text-neutral-100 transition-colors">System</button>
</div>
<div class="mt-3 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="wand-2"
class="lucide lucide-wand-2 h-4 w-4">
<path
d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
class=""></path>
<path d="m14 7 3 3" class=""></path>
<path d="M5 6v4" class=""></path>
<path d="M19 14v4" class=""></path>
<path d="M10 2v2" class=""></path>
<path d="M7 8H3" class=""></path>
<path d="M21 16h-4" class=""></path>
<path d="M11 3H9" class=""></path>
</svg>
<span>Choose what feels right. You can change anytime.</span>
</div>
</div>
<div
class="col-span-1 md:col-span-2 rounded-xl border border-neutral-800/80 bg-neutral-900/60 p-5 hover:border-neutral-700 transition-colors">
<div class="flex items-center gap-2 text-xs text-neutral-300">
<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="file-input" class="lucide lucide-file-input h-4 w-4 text-amber-400">
<path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" class=""></path>
<path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
<path d="M2 15h10" class=""></path>
<path d="m9 18 3-3-3-3" class=""></path>
</svg>
<span class="font-medium tracking-tight">Import data</span>
</div>
<div class="mt-4 flex flex-col gap-2">
<button class="inline-flex items-center gap-2 rounded-lg border border-neutral-800/80 bg-neutral-900/60 px-3 py-2 text-sm text-neutral-300 hover:border-neutral-700 hover:text-neutral-100 transition-colors">
<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="upload" class="lucide lucide-upload h-4 w-4"><path d="M12 3v12" class=""></path><path d="m17 8-5-5-5 5" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path></svg>
Upload CSV
</button>
<button class="inline-flex items-center gap-2 rounded-lg bg-neutral-800/90 px-3 py-2 text-sm text-neutral-200 hover:bg-neutral-700/80 transition-colors">
<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="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>
Migrate tools
</button>
</div>
<p class="mt-3 text-xs text-neutral-400">Bring tasks and docs from other tools.</p>
</div>
</div>
<!-- Footer CTAs -->
<div class="mt-6 sm:mt-8 flex flex-col sm:flex-row sm:items-center gap-3">
<div class="text-xs text-neutral-500">Need help? Check the quick guide.</div>
<div class="sm:ml-auto flex items-center gap-2">
<button class="inline-flex items-center gap-2 rounded-lg border border-neutral-800/80 bg-neutral-900/60 px-3.5 py-2 text-sm text-neutral-300 hover:border-neutral-700 hover:text-neutral-100 transition-colors">
<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="book-open" class="lucide lucide-book-open h-4 w-4"><path d="M12 7v14" class=""></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" class=""></path></svg>
Guide
</button>
<button class="inline-flex items-center gap-2 rounded-lg border border-neutral-800/80 bg-neutral-900/60 px-3.5 py-2 text-sm text-neutral-300 hover:border-neutral-700 hover:text-neutral-100 transition-colors">
<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="life-buoy" class="lucide lucide-life-buoy h-4 w-4"><circle cx="12" cy="12" r="10" class=""></circle><path d="m4.93 4.93 4.24 4.24" class=""></path><path d="m14.83 9.17 4.24-4.24" class=""></path><path d="m14.83 14.83 4.24 4.24" class=""></path><path d="m9.17 14.83-4.24 4.24" class=""></path><circle cx="12" cy="12" r="4" class=""></circle></svg>
Support
</button>
</div>
</div>
</div>
</div>