Загрузка...
Карточка шага процесса с иконкой и прогресс-баром. Tailwind CSS компонент для онбординга, дорожных карт, туториалов. Адаптивный UI.
<article class="sm:p-6 flex flex-col min-h-[420px] bg-white/10 ring-1 ring-white/15 backdrop-blur rounded-2xl pt-5 pr-5 pb-5 pl-5 justify-between edit-mode-selected max-w-xl">
<div class="space-y-5">
<div class="flex items-center gap-3">
<div class="h-12 w-12 rounded-full bg-white/20 ring-1 ring-white/25 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="compass" class="lucide lucide-compass h-5 w-5 text-white/90"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path><circle cx="12" cy="12" r="10"></circle></svg>
</div>
<div>
<h3 class="text-lg font-semibold text-white font-geist tracking-tight">01. Discover</h3>
<p class="text-xs text-white/60 font-geist uppercase tracking-wider">Exploration Phase</p>
</div>
</div>
<p class="text-sm text-white/80 font-geist">Tell us your vibe and let NomadIQ understand what makes you tick. Every journey starts with knowing yourself.</p>
<div class="flex items-center gap-2 text-white/60">
<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 h-4 w-4"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
<span class="text-xs font-geist">2-3 minutes</span>
</div>
</div>
<div class="mt-4 h-1.5 bg-white/10 rounded-full overflow-hidden">
<div class="h-full bg-white/40 rounded-full" style="width: 25%;"></div>
</div>
</article>