Process Steps on Gradient

// "How it works": headline with an italic serif line, then four numbered
// step cards on a soft gradient background.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Step = { title: string; text: string };

type Props = {
  eyebrow?: string;
  heading?: [string, string];
  steps?: Step[];
};

const DEFAULT_STEPS: Step[] = [
  { title: "Discovery call", text: "Thirty minutes on your business, customers, goals and competitors. No jargon, just an honest conversation about what it takes to win." },
  { title: "Strategy & design", text: "We map the site structure, write search-focused copy and share a clickable prototype before a line of code is written." },
  { title: "Build & QA", text: "Built with performance and accessibility first. Every page is tested across devices, browsers and speed benchmarks." },
  { title: "Launch & grow", text: "We handle domains, hosting and monitoring, then hand over the keys with full training so you're never dependent on us." },
];

export default function ProcessGradientSteps({
  eyebrow = "How it works",
  heading = ["From brief to live site", "in as little as 14 days"],
  steps = DEFAULT_STEPS,
}: Props) {
  return (
    <section className="bg-[radial-gradient(ellipse_at_top_left,#d9f99d_0%,transparent_50%),radial-gradient(ellipse_at_bottom_right,#bae6fd_0%,transparent_55%)] bg-white px-6 py-24 font-sans antialiased md:px-12">
      <div className="mx-auto max-w-7xl">
        <div className="mb-14">
          <div className="mb-5 flex items-center gap-2 text-sm uppercase tracking-[0.18em] text-black">
            <span className="h-px w-5 bg-black" />
            {eyebrow}
          </div>
          <h2 className="text-[clamp(36px,4vw,60px)] font-bold leading-[1.05] tracking-[-0.025em] text-black">
            {heading[0]}
            <br />
            <span className="font-serif font-normal italic">{heading[1]}</span>
          </h2>
        </div>

        <ol className="grid grid-cols-1 overflow-hidden border-l border-t border-black/10 md:grid-cols-2 lg:grid-cols-4">
          {steps.map((s, i) => (
            <li key={s.title} className="border-b border-r border-black/10 bg-white/80 p-6 backdrop-blur-sm sm:p-8">
              <div className="mb-6 text-[72px] font-bold leading-none tracking-[-0.04em] text-black/15">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="mb-3 text-xl font-bold text-black">{s.title}</h3>
              <p className="text-base leading-[1.7] text-neutral-500">{s.text}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}