Before and After

About this block

Before and After is a two card comparison section. A centered heading and subheading introduce the contrast, then two cards sit side by side in a grid. The left card is muted and carries a "Before" label above a list of five pain points, each prefixed with an X icon. The right card is lighter with a ring and carries an "After" label above a matching list of five outcomes, each prefixed with a check icon. Two call to action buttons sit centered below the grid.

Each list is driven by a plain array of strings, so you can swap in your own items, add or remove rows, and rewrite the heading copy without touching the card structure. The two buttons are independent and accept any label and destination you need.

When to use

Reach for this block on a landing page where the core promise is relief from a painful status quo. It works well for healthcare scheduling products where the before state is familiar friction (missed appointments, phone tag, manual reminders) and the after state is calm and automatic. Because the layout keeps both columns in view at once, it lets a prospective customer map their current week to the improved one without scrolling, which makes it sharper than a simple feature list for emotionally loaded switches.

A natural flow around it on a Marketing Pro page:

Before

• A hero section to establish the product promise before the contrast lands
• How It Works to show the steps behind the transformation

After

• A testimonial block to reinforce the "After" outcome with a real customer voice
• The Comparison with Quote block if you also want a structured feature table nearby

What you can display

Replace the demo copy with the real before and after your customers describe in sales calls or support tickets. A few other angles:

• Workflow before and after. Show the exact steps a healthcare coordinator takes today versus the steps they take after onboarding, keeping items parallel so the relief reads instantly.
• Patient experience contrast. List what a patient currently goes through (paper forms, waiting room calls, lost referrals) against the smooth digital path your product provides.
• Team workload shift. Describe the manual overhead a practice manager carries now versus what disappears once the product is live, making the ROI concrete before the pricing section.

Tip: keep both lists to the same number of items and make each pair address the same problem so readers can scan across columns naturally.