Onboarding Checklist

<div class="w-full max-w-lg mx-auto bg-zinc-900 border border-zinc-800 rounded-2xl p-8 font-sans">
        <h3 class="text-xl font-bold text-white mb-2">Getting started</h3>
        <p class="text-sm text-zinc-500 mb-8">Follow these steps to integrate Hub into your stack.</p>
        <div class="space-y-6">
            <div class="flex gap-4 items-start group cursor-pointer">
                <div class="w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center shrink-0">
                    <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path d="M5 13l4 4L19 7" stroke-width="4"></path>
                    </svg>
                </div>
                <div>
                    <h5 class="text-sm font-bold text-white group-hover:text-indigo-400 transition-colors">Verify your
                        domain</h5>
                    <p class="text-xs text-zinc-500">Configure DNS settings to enable custom endpoints.</p>
                </div>
            </div>
            <div class="flex gap-4 items-start group cursor-pointer">
                <div class="w-6 h-6 rounded-full border-2 border-indigo-500 flex items-center justify-center shrink-0">
                    <div class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></div>
                </div>
                <div>
                    <h5 class="text-sm font-bold text-white group-hover:text-indigo-400 transition-colors">Generate API
                        keys</h5>
                    <p class="text-xs text-zinc-500">Create production-ready keys for authentication.</p>
                </div>
            </div>
            <div class="flex gap-4 items-start opacity-50">
                <div class="w-6 h-6 rounded-full border-2 border-zinc-700 flex items-center justify-center shrink-0">
                </div>
                <div>
                    <h5 class="text-sm font-bold text-zinc-300">Connect cloud provider</h5>
                    <p class="text-xs text-zinc-600">Authorize AWS or GCP for automatic scaling.</p>
                </div>
            </div>
        </div>
        <div class="mt-10 h-1 bg-zinc-800 rounded-full overflow-hidden">
            <div class="h-full bg-indigo-500 w-1/3 shadow-[0_0_10px_rgba(99,102,241,0.5)]"></div>
        </div>
        <div class="mt-2 text-[10px] text-zinc-600 font-bold text-right uppercase tracking-widest">33% Complete</div>
    </div>