Process Steps

const steps = [
  { n: "01", title: "ヒアリング", body: "目的・ターゲット・現状の課題を整理します。" },
  { n: "02", title: "設計・提案", body: "構成とデザインの方向性をご提案します。" },
  { n: "03", title: "制作", body: "デザインから実装まで一貫して進めます。" },
  { n: "04", title: "公開・改善", body: "公開後もデータを見ながら改善します。" },
];

return function ProcessSteps() {
  return (
    <ol className="grid w-full max-w-3xl gap-x-6 gap-y-8 sm:grid-cols-4">
      {steps.map((step, i) => (
        <li key={step.n} className="relative">
          {i < steps.length - 1 && (
            <span
              className="absolute top-4 left-10 hidden h-px w-[calc(100%-1rem)] bg-gray-200 sm:block"
              aria-hidden="true"
            />
          )}
          <span className="relative z-10 inline-flex size-8 items-center justify-center rounded-full border border-amber-200 bg-amber-50 font-mono text-xs font-bold text-amber-700">
            {step.n}
          </span>
          <h3 className="mt-3 text-sm font-bold text-gray-900">{step.title}</h3>
          <p className="mt-1 text-xs leading-relaxed text-gray-500">{step.body}</p>
        </li>
      ))}
    </ol>
  );
}