About this block

Journey Quotes Timeline tells one customer story across a year instead of collecting many at once. A centered heading and lede set up the arc, then an avatar, a name, and a role introduce the single customer speaking. Below that a vertical timeline walks through four dated stops, day one, week six, month six, and year one, each carrying the quote that customer would have given at that moment, so the section reads as a change of mind you can follow.

The four stops live in one typed array, and the last entry is flagged current, which fills its marker to show the present. Markers and the connecting rail are plain divs built from theme tokens, so the timeline ships with no external images and reads correctly in light and dark. Swap the stages, quotes, or the customer by editing the array.

When to use

Reach for this block when the strength of your proof is the arc, not a single line. It suits a product whose value compounds over time, where a skeptic on day one becomes an advocate by renewal, and that turn is more persuasive than any one quote. Placed late on a page, after the rational case is made, it answers the quiet worry that the honeymoon fades once the demo is over.

A natural flow around it on a Marketing Pro page:

Before

• Feature sections to make the rational case before one customer makes the emotional one
• Case Studies for the detailed proof behind the arc this timeline summarizes

After

• FAQs to answer the doubts a skeptic raises at the start of the story
• CTAs to capture the decision while the renewal is fresh in mind

What you can display

The obvious fit is one customer at four points across their first year. A few other ways to use the frame:

• An onboarding arc. Track the first ninety days, from kickoff to full adoption, for a product that takes time to land.
• A single migration. Walk one team from the decision to switch through rollout to the results a quarter later.
• A relationship over years. Stretch the stops across multiple renewals to show a partnership that deepened rather than stalled.

Tip: keep the quotes close in length so the timeline reads as even steps. Leave the final stop as the current marker so the eye lands on the present, where the payoff and the renewal live.