const STEPS = [
  { id: "01", label: "Connect your repo", done: true },
  { id: "02", label: "Invite your team", done: true },
  { id: "03", label: "Add your first project", done: false, active: true },
  { id: "04", label: "Set up billing", done: false },
];

export function OnboardingStepCard() {
  const completed = STEPS.filter((s) => s.done).length;
  const progress = Math.round((completed / STEPS.length) * 100);

  return (
    <div className="bg-[#F2F1EC] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-md rounded-2xl border border-[#1111111A] bg-white p-6 hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)] transition-shadow">
        <div className="flex items-center justify-between">
          <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-[#6B6B66]">
            ◆ Get started — {completed}/{STEPS.length}
          </p>
          <span className="font-mono text-[11px] text-[#111111] tabular-nums">{progress}%</span>
        </div>

        <h3
          className="mt-3 text-[24px] leading-[1.1]"
          style={{
            fontFamily: "var(--font-instrument-serif), Georgia, serif",
            letterSpacing: "-0.02em",
          }}
        >
          Two more steps to go.
        </h3>

        {/* Progress */}
        <div className="mt-4 h-1.5 w-full rounded-full bg-[#1111111A] overflow-hidden">
          <div
            className="h-full rounded-full transition-[width] duration-700"
            style={{
              width: `${progress}%`,
              background: "linear-gradient(90deg, #2A3D2F, #5E7F66)",
            }}
          />
        </div>

        {/* Steps */}
        <ol className="mt-6 space-y-3">
          {STEPS.map((s) => (
            <li
              key={s.id}
              className={`group/step flex items-center gap-3 rounded-lg border p-3 transition-all ${
                s.active
                  ? "border-[#2A3D2F]/30 bg-[#2A3D2F]/[0.04]"
                  : "border-[#1111111A] hover:bg-[#FBFAF6]"
              }`}
            >
              {s.done ? (
                <span className="grid h-6 w-6 place-items-center rounded-full bg-[#2A3D2F] text-white text-[12px]">
                  ✓
                </span>
              ) : s.active ? (
                <span className="relative grid h-6 w-6 place-items-center rounded-full border-2 border-[#2A3D2F]">
                  <span className="h-2 w-2 rounded-full bg-[#2A3D2F]" />
                  <span className="absolute inset-0 rounded-full border-2 border-[#2A3D2F]/40 animate-ping" />
                </span>
              ) : (
                <span className="grid h-6 w-6 place-items-center rounded-full border-2 border-[#1111111A] text-[10px] font-mono text-[#6B6B66]">
                  {s.id}
                </span>
              )}
              <span
                className={`text-[13.5px] ${
                  s.done ? "text-[#6B6B66] line-through" : "text-[#111111] font-medium"
                }`}
              >
                {s.label}
              </span>
              {s.active && (
                <span
                  className="ml-auto text-[12px] font-medium text-[#2A3D2F] transition-transform group-hover/step:translate-x-1"
                  aria-hidden
                >
                  →
                </span>
              )}
            </li>
          ))}
        </ol>

        <button
          type="button"
          className="mt-5 text-[12px] font-medium text-[#6B6B66] hover:text-[#111111] transition-colors"
        >
          Skip for now
        </button>
      </article>
    </div>
  );
}
Onboarding Step Card

Two more steps to go.
