Copy 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> 