Before and after split

Build a two-column contrast section with Tailwind CSS that sets the old workflow against the new one. A centered heading and subline, then two panels side by side on md and up. The left panel is muted — dashed border, neutral-50 background, an "Without Acme" label, and a list of five pain points each prefixed by a small grey ✕ tile, with the text in a softer grey. The right panel is the hero: solid neutral-900 background, a "With Acme" label in a translucent pill, the same five topics rewritten as outcomes, each prefixed by a white ✓ tile, and a footer strip inside the card quoting a hard number such as "Median setup time: 9 minutes". Keep both lists on the same baseline so the rows read across, and stack them with the muted panel first on mobile.

<section class="mx-auto max-w-5xl px-6 py-16">
  <div class="mx-auto mb-12 max-w-xl text-center">
    <h2 class="text-3xl font-semibold text-neutral-900">Same work, two-thirds less of it</h2>
    <p class="mt-2 text-neutral-500">Here is what a release week looks like on either side of the switch.</p>
  </div>

  <div class="grid gap-6 md:grid-cols-2">
    <div class="rounded-2xl border border-dashed border-neutral-300 bg-neutral-50 p-8">
      <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Without Acme</p>
      <ul class="mt-6 space-y-4 text-sm text-neutral-500">
        <li class="flex gap-3"><span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-neutral-200 text-[11px] text-neutral-500"><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="M6 6l12 12M18 6 6 18"/></svg></span> Config lives in three places and drifts apart</li>
        <li class="flex gap-3"><span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-neutral-200 text-[11px] text-neutral-500"><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="M6 6l12 12M18 6 6 18"/></svg></span> Every environment needs a hand-written script</li>
        <li class="flex gap-3"><span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-neutral-200 text-[11px] text-neutral-500"><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="M6 6l12 12M18 6 6 18"/></svg></span> Nobody can say who changed the staging key</li>
        <li class="flex gap-3"><span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-neutral-200 text-[11px] text-neutral-500"><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="M6 6l12 12M18 6 6 18"/></svg></span> Rollbacks mean a call with the one person who knows</li>
        <li class="flex gap-3"><span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-neutral-200 text-[11px] text-neutral-500"><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="M6 6l12 12M18 6 6 18"/></svg></span> Onboarding an engineer takes most of a week</li>
      </ul>
    </div>

    <div class="rounded-2xl bg-neutral-900 p-8 shadow-xl">
      <p class="inline-block rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white">With Acme</p>
      <ul class="mt-6 space-y-4 text-sm text-neutral-300">
        <li class="flex gap-3"><span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-white text-[11px] text-neutral-900"><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> One file describes every environment</li>
        <li class="flex gap-3"><span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-white text-[11px] text-neutral-900"><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> Preview environments open with the pull request</li>
        <li class="flex gap-3"><span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-white text-[11px] text-neutral-900"><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> Every change is attributed and reversible</li>
        <li class="flex gap-3"><span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-white text-[11px] text-neutral-900"><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> Rollback is one command, from anyone on call</li>
        <li class="flex gap-3"><span class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-white text-[11px] text-neutral-900"><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> New engineers deploy on day one</li>
      </ul>
      <div class="mt-8 rounded-xl bg-white/5 px-4 py-3 text-sm text-neutral-300">
        Median setup time across 1,200 teams: <span class="font-semibold text-white">9 minutes</span>
      </div>
    </div>
  </div>
</section>