🔒 Premium Site Section

Before / During / After Journey — Mid-Page Sales Section

A mid-sales-page section that walks the buyer through the emotional arc of a program — where they are now, what changes inside, and how life looks after — pilots a coaching program but the pattern fits any transformation-driven offer.

Best for: Course creators, coaches, and program sellers who want to anchor the emotional stakes of their offer between hero and pricing.

Live preview — scroll inside the frame to see the full page.

What it does

  • Three-stage emotional arc — parallel "before / during / after" blocks let the buyer feel the program's pacing rather than just read about it
  • Friction-rich "before" block — names the buyer's current frustrations in their own language so they recognize themselves
  • Supported "during" block — describes what life inside the program looks and feels like, week to week
  • Calm "after" block — paints the post-program reality with concrete wins and emotional shifts, not just outcomes
  • Visual progression cues — color, iconography, or pacing shifts subtly across the three stages to reinforce the arc
  • Bridge to pricing — ends with a transition line that hands the buyer off to the pricing or CTA section below

Best use cases

  • Course creators — selling a transformation-driven program where emotional arc matters more than feature lists
  • Coaches — anchoring the shift their clients feel from week one to graduation
  • Wellness and mindset educators — describing the inner journey in stages buyers can recognize
  • Membership site owners — showing what life looks like before joining, while inside, and after a year of membership
  • Consultants — framing engagements as a clear before/during/after for skeptical buyers

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

  • Colors — three-stage palette where each block carries its own register (heavier or muted for "before," warming or active for "during," bright or calm for "after")
  • Fonts — one display font for stage headings and a clean body font for the descriptive copy underneath
  • Copy — three stage headlines, three short descriptive paragraphs, optional bullet lists per stage, and the bridge line into pricing
  • Images — optional supporting visual per stage (icon, illustration, or photo) to anchor each block's mood
  • Behavior — choose whether stages stack vertically on mobile, fade in on scroll, or sit static; tune visual contrast between stages

How remixing works

From "swiped it" to "shipped it" in three steps.

01

Pick a remix

Browse the library, find one that fits — like this one.

02

Run it through your DNA

The remix skill uses your CCOS DNA to swap colors, fonts, copy, and structure so it lands as yours.

03

Ship it

Paste the finished HTML into Thinkific, Kajabi, WordPress, or any platform that takes embed code.