Case study result card

Build a case study proof block with Tailwind CSS. Use a max-w-5xl grid of two cards on lg, each a bordered rounded-2xl white card split into an upper quote area and a lower results strip. The upper area holds a small customer wordmark in muted uppercase, a pull quote of two sentences in larger relaxed type with the key clause wrapped in a span carrying a neutral-100 highlight, and an attribution row with an avatar circle, a name in medium weight and a role line. The lower strip is a neutral-50 area divided into three cells by vertical hairlines, each with a large figure, a tiny uppercase label and an arrow glyph coloured green for improvements. End each card with a footer link reading "Read the full story" and an arrow. Include two examples with different industries and different metric sets.

<section class="mx-auto max-w-5xl px-6 py-16">
  <div class="mb-10 max-w-xl">
    <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Proof</p>
    <h2 class="mt-3 text-3xl font-semibold tracking-tight text-neutral-900">Quotes with a number attached</h2>
  </div>

  <div class="grid gap-5 lg:grid-cols-2">
    <article class="flex flex-col overflow-hidden rounded-2xl border border-neutral-200 bg-white">
      <div class="flex-1 p-7">
        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-neutral-400">Fernbrook Health</p>
        <blockquote class="mt-5 text-lg leading-relaxed text-neutral-800">
          "We stopped writing the reconciliation script every quarter. <span class="rounded bg-neutral-100 px-1">Three days of finance work turned into a scheduled job</span> that nobody has touched since March."
        </blockquote>
        <div class="mt-6 flex items-center gap-3">
          <span class="grid h-10 w-10 place-items-center rounded-full bg-neutral-900 text-xs font-medium text-white">AT</span>
          <div>
            <p class="text-sm font-medium text-neutral-900">Aiko Tan</p>
            <p class="text-xs text-neutral-500">Financial Controller</p>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-3 divide-x divide-neutral-200 border-t border-neutral-200 bg-neutral-50">
        <div class="px-4 py-5 text-center">
          <p class="text-xl font-semibold text-neutral-900">−94%</p>
          <p class="mt-1 text-[10px] uppercase tracking-widest text-neutral-400">Close time</p>
        </div>
        <div class="px-4 py-5 text-center">
          <p class="text-xl font-semibold text-neutral-900">3 days</p>
          <p class="mt-1 text-[10px] uppercase tracking-widest text-neutral-400">Saved monthly</p>
        </div>
        <div class="px-4 py-5 text-center">
          <p class="text-xl font-semibold text-green-600"><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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg> 2×</p>
          <p class="mt-1 text-[10px] uppercase tracking-widest text-neutral-400">Audit coverage</p>
        </div>
      </div>
      <a href="#" class="border-t border-neutral-200 px-7 py-4 text-sm font-medium text-neutral-900 underline-offset-4 hover:underline">Read the full story <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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
    </article>

    <article class="flex flex-col overflow-hidden rounded-2xl border border-neutral-200 bg-white">
      <div class="flex-1 p-7">
        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-neutral-400">Kestrel Logistics</p>
        <blockquote class="mt-5 text-lg leading-relaxed text-neutral-800">
          "The rollout took a fortnight, not a quarter. <span class="rounded bg-neutral-100 px-1">Depot managers were building their own reports by week two</span>, which is not how these projects usually go."
        </blockquote>
        <div class="mt-6 flex items-center gap-3">
          <span class="grid h-10 w-10 place-items-center rounded-full bg-amber-500 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</p>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-3 divide-x divide-neutral-200 border-t border-neutral-200 bg-neutral-50">
        <div class="px-4 py-5 text-center">
          <p class="text-xl font-semibold text-neutral-900">14 days</p>
          <p class="mt-1 text-[10px] uppercase tracking-widest text-neutral-400">To live</p>
        </div>
        <div class="px-4 py-5 text-center">
          <p class="text-xl font-semibold text-green-600"><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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg> 41%</p>
          <p class="mt-1 text-[10px] uppercase tracking-widest text-neutral-400">On-time drops</p>
        </div>
        <div class="px-4 py-5 text-center">
          <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>
      <a href="#" class="border-t border-neutral-200 px-7 py-4 text-sm font-medium text-neutral-900 underline-offset-4 hover:underline">Read the full story <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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
    </article>
  </div>
</section>