Headroom Bars Pricing Block for React

Edit the LIMITS array at the top of the file. Each limit has its label, Lucide icon, the free and pro values as written, the multiplier shown on its chip and monthly, which writes "/ mo" after the label. The bars size themselves from the multipliers, so there's no width to set. FREE_PRICE, PRO_PRICE and CURRENCY fill the prices. Keep each multiplier equal to the Pro value divided by the Free one, since the chip claims it.

On a log scale: the largest multiplier fills the track and the others take their share of it (Math.log10(multiplier) against the largest), with a floor of 20% so a small gap still reads as a bar. A linear scale would turn a 10× next to a 50× into a sliver. The track keeps room for the chip at its end (3.5rem), and the chip sits just past the bar's far edge on a solid backing, so it rides along as the bar grows and never runs off the card. The Free baseline is painted on top of the bar at a fixed 12% of that range, so the bars show the jump, not the exact ratio: the chip and the values carry the numbers.

The header, prices and card fade up, each bar grows from the start of its track with a CSS width transition (staggered row by row) and each chip's number rolls up from zero once it scrolls into view. Widths, not transforms, so the chip stays undistorted and the bars grow from the right in a right-to-left layout. Under reduced motion the bars are drawn at full length at once and the numbers change without rolling.

The limit's name, then the two values, each prefixed with its plan in visually hidden text ("Free: 5", "Pro: 100"); the visual column labels are hidden, since every value already names its plan. The bar is one image named for the gap, "Pro gives 20 times the Free limit", so its segments and chip aren't read piece by piece, and "/ mo" is read as "per month". The prices are a description list of Free and Pro.

The call to action is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point its href at your checkout with the plan, for example /checkout?plan=pro. For signed-in Free users, upgrade the existing subscription on the server rather than starting a new one, so their monitors and history carry over.

The card is a bg-card panel with a Guides frame around it: solid hairlines on all four sides and a + mark on each corner. The section itself draws only the page's two side lines and one rule along its top, so it joins the section above and below without doubling a line. The frame is decoration and is hidden from assistive technology.