File size: 904 Bytes
201b13c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | export default function ProcessFlow({ steps, compact = false }) {
return (
<div className={`grid gap-3 ${compact ? "" : "lg:grid-cols-2"}`}>
{steps.map((step, index) => (
<div key={step.title} className="rounded-[28px] border border-white/10 bg-white/5 p-4">
<div className="flex items-start gap-4">
<span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-slate-950/70 text-sm font-semibold text-slate-100">
{String(index + 1).padStart(2, "0")}
</span>
<div>
<p className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-100/80">
{step.title}
</p>
<p className="mt-2 text-sm leading-7 text-slate-300">{step.detail}</p>
</div>
</div>
</div>
))}
</div>
)
}
|