Timeline Tiers Pricing Block for React

Edit STOPS at the top of the file: each stop has a name, the node's short abbr, a tagline, its discount in percent and the benefits it unlocks. BASE_PRICE is the plan's monthly price before any discount ($40, so the stops read $40, $36, $32 and $28), and each stop's price is worked out from it and rounded to whole units, so changing either keeps the struck and current prices right. PLAN names the plan and CTA is the button's label and link.

CURRENT holds the id of the stop to mark. Work it out from the customer's account age where the page renders, and pass it in instead of the fixed value: that stop gets the filled node, the tinted row and the You are here badge, and its list item carries aria-current="step", so screen readers announce it as the current step. For visitors who aren't signed in, point it at the first stop or at none.

The section only displays them. In your payment provider, create a coupon or price per stop and have a scheduled job (or your subscription webhook) move each customer to the next one on their anniversary. Keep STOPS and those prices in one place, such as a shared config, so the page never promises a discount the invoice doesn't give.

The timeline is one column of rows at every width. Below the lg breakpoint the headline and button stack above it instead of sitting beside it, and the divider between them becomes a rule, so the call to action is on the first screen. Inside a row, the discount and the price sit side by side from sm up and stack below it, the discount figures step down from text-5xl to text-4xl, and the unlocks drop to one column. Nothing scrolls sideways, down to 320 px.

The stops are an ordered list, so they're announced in order with their count, and each row's name is an h3. The nodes and the line are decorative and hidden. Each discount is read as "10% off" rather than its minus sign, Day 1 reads "None yet" instead of the dash, and the struck price is read as "Regular price $40, now" before the new one.

Use the timeline when the price changes over time for the same plan: loyalty discounts, anniversary rewards, price locks. Its line reads as a journey that parallel cards can't show. When customers choose between plans at one moment, use plan cards such as Three Columns Pricing, and for discounts tied to a commitment chosen up front, a commitment or contract-length layout.