About this block

Old Way New Way tells the same workflow twice. A centered heading and a one-sentence subheading frame the comparison, then two bordered panels sit side by side below. The left panel is the manual version: each step carries a muted X mark and a heavy per step timing, and the whole thing is styled in muted tones to read as the past. The right panel is the product version: the same shape of list, but with check marks, near zero timings, and a tinted border that lifts it forward. Each panel closes with a summed weekly total across a top border, so the two bottom lines carry the argument.

The two panels are driven by their own step arrays, so you can rewrite every line, retime each step, and change both weekly totals independently. The layout stays balanced as long as both lists hold a similar number of steps, which keeps the before and after reading as a fair comparison rather than a stacked deck.

When to use

Reach for this block when your core pitch is time saved or effort removed, and you can name the exact ritual the product replaces. A weekly report, a month end close, a release checklist, or an onboarding chore all work well here. Showing the manual steps honestly, timings and all, earns the contrast, which makes this stronger than a plain feature list when the before state is something your visitor already dreads doing.

A natural flow around it on a Marketing Pro page:

Before

• A hero section that names the painful ritual, so the comparison lands with context
• A feature section that explains the capabilities behind the faster path

After

• A comparison section that extends the contrast into a fuller feature by feature view
• A CTA to start once the time saved has been made concrete

What you can display

Each panel is a timed walk through one version of a task. A few ways to fill them:

• A reporting ritual. Contrast the manual export, paste, and rebuild loop against a workflow that stays current on its own.
• A close or reconciliation. Show the spreadsheet gymnastics on the left and the reconciled, always ready state on the right.
• A release checklist. Line up the hand run steps against an automated pipeline so the saved hours are impossible to miss.

Tip: keep both step lists to the same length so the two panels stay even and the comparison reads as honest rather than lopsided.