Case study layout

Build a customer case study page with Tailwind CSS. The header spans full width: a small "Case study" label, a headline naming the outcome, a subhead, and a row of three headline metrics separated by vertical rules. Below, a two-column grid: the narrative column carries three labelled sections — The situation, What we did, What changed — each with a small uppercase heading, two paragraphs, and one section containing a bulleted list of four items with check glyphs; the sticky rail on the right holds a client card with a wordmark, industry, size and region rows, a quote block with an avatar and attribution, and a bordered "Download the PDF" button. Close with a full-width strip carrying a related-story link on the left and a dark "Talk to us about your rollout" button on the right.

<article class="mx-auto max-w-6xl px-6 py-16">
  <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Case study</p>
  <h1 class="mt-3 max-w-3xl text-4xl font-semibold leading-tight tracking-tight text-neutral-900 sm:text-5xl">
    Sixty-two depots on one plan, in a fortnight
  </h1>
  <p class="mt-4 max-w-2xl text-lg leading-relaxed text-neutral-500">
    How Kestrel Logistics replaced two spreadsheets and a very knowledgeable colleague with something the whole planning team could use.
  </p>

  <div class="mt-10 grid grid-cols-1 divide-neutral-200 rounded-2xl border border-neutral-200 bg-white py-6 text-center sm:grid-cols-3 sm:divide-x">
    <div class="px-6 py-3"><p class="text-3xl font-semibold tracking-tight text-neutral-900">+41%</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">On-time drops</p></div>
    <div class="px-6 py-3"><p class="text-3xl font-semibold tracking-tight text-neutral-900">14 days</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">To full rollout</p></div>
    <div class="px-6 py-3"><p class="text-3xl font-semibold tracking-tight text-neutral-900">−18%</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">Overtime hours</p></div>
  </div>

  <div class="mt-12 grid gap-12 lg:grid-cols-[1fr_300px]">
    <div class="max-w-2xl">
      <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">The situation</p>
      <p class="mt-3 leading-relaxed text-neutral-600">
        Kestrel moved 4,000 pallets a day across sixty-two depots, planned in two spreadsheets that only one person fully understood. When he was on holiday, on-time performance fell by eleven points, every year, predictably.
      </p>
      <p class="mt-4 leading-relaxed text-neutral-600">
        The failure that finally forced the issue cost eleven thousand euros in one afternoon: four depots reported the same pallet and three trucks were sent to collect it. Nobody had made a mistake.
      </p>

      <p class="mt-10 text-xs font-semibold uppercase tracking-widest text-neutral-400">What we did</p>
      <p class="mt-3 leading-relaxed text-neutral-600">
        We started with the six depots that complained loudest rather than the six that were easiest, on the theory that anything surviving them would survive the rest.
      </p>
      <ul class="mt-4 space-y-2.5 text-neutral-600">
        <li class="flex items-start gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> <span>Modelled depot capacity from two years of historical loads</span></li>
        <li class="flex items-start gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> <span>Replaced the overnight spreadsheet export with a live source</span></li>
        <li class="flex items-start gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> <span>Wrote one page of training, tested on a new starter</span></li>
        <li class="flex items-start gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> <span>Left the spreadsheets running in parallel for three weeks</span></li>
      </ul>
      <p class="mt-4 leading-relaxed text-neutral-600">
        The parallel run mattered more than anything else. It let the planners check the new numbers against instinct until instinct stopped disagreeing.
      </p>

      <p class="mt-10 text-xs font-semibold uppercase tracking-widest text-neutral-400">What changed</p>
      <p class="mt-3 leading-relaxed text-neutral-600">
        Duplicate collections effectively stopped. On-time drops rose from 61% to 86% within two months and have held there since. Overtime fell, because the five o'clock scramble largely disappeared.
      </p>
      <p class="mt-4 leading-relaxed text-neutral-600">
        The measure Priya cares about is different: a planner in their second week now makes the call that used to require six years of experience.
      </p>
    </div>

    <aside class="space-y-4 lg:sticky lg:top-24 lg:self-start">
      <div class="rounded-2xl border border-neutral-200 bg-white p-6">
        <p class="text-sm font-semibold uppercase tracking-[0.18em] text-neutral-400">Kestrel</p>
        <dl class="mt-4 space-y-3 border-t border-neutral-100 pt-4 text-sm">
          <div class="flex items-center justify-between"><dt class="text-neutral-500">Industry</dt><dd class="font-medium text-neutral-900">Logistics</dd></div>
          <div class="flex items-center justify-between"><dt class="text-neutral-500">Size</dt><dd class="font-medium text-neutral-900">240 people</dd></div>
          <div class="flex items-center justify-between"><dt class="text-neutral-500">Region</dt><dd class="font-medium text-neutral-900">Benelux</dd></div>
          <div class="flex items-center justify-between"><dt class="text-neutral-500">Plan</dt><dd class="font-medium text-neutral-900">Scale</dd></div>
        </dl>
      </div>

      <div class="rounded-2xl border border-neutral-200 bg-neutral-50 p-6">
        <blockquote class="text-sm leading-relaxed text-neutral-700">"The rollout plan fitted on one page. That has never been true here before."</blockquote>
        <div class="mt-4 flex items-center gap-3">
          <span class="grid h-9 w-9 place-items-center rounded-full bg-neutral-900 text-[11px] 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</p></div>
        </div>
      </div>

      <a href="#" class="block rounded-xl border border-neutral-200 py-2.5 text-center text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Download the PDF</a>
    </aside>
  </div>

  <div class="mt-14 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-neutral-50 px-7 py-6">
    <p class="text-sm text-neutral-600">
      Next: <a href="#" class="font-medium text-neutral-900 underline underline-offset-4">Fernbrook Health on ward rotas</a>
    </p>
    <a href="#" class="rounded-xl bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Talk to us about your rollout</a>
  </div>
</article>