Interview-style testimonial

Design a long-form customer interview with Tailwind CSS. Open with a header block: a small "Customer interview" label, a headline, and a byline row with an avatar, the interviewee name and role, the company, and a muted reading time. Under it, a bordered fact strip of four cells with tiny uppercase labels and values — industry, team size, using since and the plan. The body is a max-w-2xl column of alternating question and answer blocks: questions in medium-weight neutral-900 preceded by a small monospaced "Q", answers in relaxed grey prose. After the second answer, break the column with a full-width pull quote in large type with a left rule; after the fourth, a bordered result box with three inline metrics. End with a closing question, a short answer, and a footer line linking to two other interviews.

<article class="mx-auto max-w-3xl px-6 py-16">
  <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Customer interview</p>
  <h1 class="mt-3 text-3xl font-semibold leading-tight tracking-tight text-neutral-900 sm:text-4xl">
    "We stopped rewarding the person who could hold it all in their head"
  </h1>

  <div class="mt-6 flex flex-wrap items-center gap-3">
    <span class="grid h-11 w-11 place-items-center rounded-full bg-neutral-900 text-xs font-medium text-white">PM</span>
    <div>
      <p class="text-sm font-medium text-neutral-900">Priya Mahal</p>
      <p class="text-xs text-neutral-500">Head of Operations, Kestrel Logistics</p>
    </div>
    <span class="ml-auto text-xs text-neutral-400">9 minute read</span>
  </div>

  <div class="mt-8 grid grid-cols-2 gap-px overflow-hidden rounded-xl border border-neutral-200 bg-neutral-200 sm:grid-cols-4">
    <div class="bg-white px-4 py-3"><p class="text-[10px] uppercase tracking-widest text-neutral-400">Industry</p><p class="mt-1 text-sm font-medium text-neutral-900">Logistics</p></div>
    <div class="bg-white px-4 py-3"><p class="text-[10px] uppercase tracking-widest text-neutral-400">Team</p><p class="mt-1 text-sm font-medium text-neutral-900">240 people</p></div>
    <div class="bg-white px-4 py-3"><p class="text-[10px] uppercase tracking-widest text-neutral-400">Using since</p><p class="mt-1 text-sm font-medium text-neutral-900">March 2025</p></div>
    <div class="bg-white px-4 py-3"><p class="text-[10px] uppercase tracking-widest text-neutral-400">Plan</p><p class="mt-1 text-sm font-medium text-neutral-900">Scale</p></div>
  </div>

  <div class="mt-12 space-y-8">
    <div>
      <p class="flex gap-3 text-base font-medium text-neutral-900"><span class="font-mono text-sm text-neutral-300">Q</span> What did the week look like before?</p>
      <p class="mt-3 pl-7 leading-relaxed text-neutral-600">
        Two spreadsheets and a man called Dennis. Dennis knew which depots could absorb a late lorry and which would quietly fail, and none of that was written down anywhere. When Dennis was on holiday we simply did worse.
      </p>
    </div>

    <div>
      <p class="flex gap-3 text-base font-medium text-neutral-900"><span class="font-mono text-sm text-neutral-300">Q</span> Was there a moment it stopped being tolerable?</p>
      <p class="mt-3 pl-7 leading-relaxed text-neutral-600">
        A Tuesday in January. Four depots reported the same pallet, so we sent three trucks to collect one thing. It cost about eleven thousand euros and nobody had done anything wrong — the system just let it happen.
      </p>
    </div>
  </div>

  <blockquote class="my-12 border-l-2 border-neutral-900 pl-6 text-2xl font-medium leading-snug tracking-tight text-neutral-900">
    The point was never the dashboard. It was that a planner on their second week can now make the call Dennis would have made.
  </blockquote>

  <div class="space-y-8">
    <div>
      <p class="flex gap-3 text-base font-medium text-neutral-900"><span class="font-mono text-sm text-neutral-300">Q</span> How did the rollout actually go?</p>
      <p class="mt-3 pl-7 leading-relaxed text-neutral-600">
        Faster than anyone predicted, which made me suspicious. We started with six depots for a fortnight, then did the remaining fifty-six over three weeks. The training was a forty-minute call and a one-page sheet.
      </p>
    </div>

    <div>
      <p class="flex gap-3 text-base font-medium text-neutral-900"><span class="font-mono text-sm text-neutral-300">Q</span> What changed in the numbers?</p>
      <p class="mt-3 pl-7 leading-relaxed text-neutral-600">
        On-time drops went from sixty-one to eighty-six percent, and duplicate collections effectively stopped. The one I care about most is that overtime fell, because the planners stopped firefighting at five o'clock.
      </p>
    </div>
  </div>

  <div class="my-10 grid grid-cols-3 divide-x divide-neutral-200 rounded-xl border border-neutral-200 bg-neutral-50 py-5 text-center">
    <div><p class="text-xl font-semibold text-neutral-900">+41%</p><p class="mt-1 text-[10px] uppercase tracking-widest text-neutral-400">On-time drops</p></div>
    <div><p class="text-xl font-semibold text-neutral-900">62</p><p class="mt-1 text-[10px] uppercase tracking-widest text-neutral-400">Depots live</p></div>
    <div><p class="text-xl font-semibold text-neutral-900">−18%</p><p class="mt-1 text-[10px] uppercase tracking-widest text-neutral-400">Overtime hours</p></div>
  </div>

  <div>
    <p class="flex gap-3 text-base font-medium text-neutral-900"><span class="font-mono text-sm text-neutral-300">Q</span> What would you tell someone starting now?</p>
    <p class="mt-3 pl-7 leading-relaxed text-neutral-600">
      Pick the six sites with the loudest complaints, not the easiest ones. If it works there, the rest is administration.
    </p>
  </div>

  <p class="mt-12 border-t border-neutral-200 pt-6 text-sm text-neutral-500">
    More conversations: <a href="#" class="font-medium text-neutral-900 underline underline-offset-4">Fernbrook Health on ward rotas</a> and <a href="#" class="font-medium text-neutral-900 underline underline-offset-4">Oakline on audit season</a>.
  </p>
</article>