Price Savings CTA Block for React

Edit PRODUCTS (a name and a price each) and BUNDLE_PRICE at the top of the file. The full bar's total, the saving in the headline, the percentage in the intro and the length of the bundle bar are all worked out from those, so changing a price updates every figure and the drawing. Keep the bundle price below the total, or the "You save" box has nothing to show.

The bundle bar's share of the full bar is the bundle price over the separate total in whole percent, rounded down ($29 of $40 is 72%), written once as a CSS variable on the row. The "You save" box takes whatever is left, so the two always fill the row exactly. The saving's percentage uses the same arithmetic ($11 of $40 is 27%), so it can't drift from the figures.

Yes. Every bar carries its own text: "Bought separately $40", "Bundle $29" and "You save $11" are real text in reading order, and the pills are a named list of the three products with their prices. The bars add the sense of scale, not information the text lacks.

The card keeps its shell and padding, the bars shrink with it, and the "You save" box stacks its label over the amount so it stays readable when it is only a few dozen pixels wide. The pills wrap onto a second line. Amounts keep a left-to-right direction in a right-to-left page so the currency sign stays beside the figures.

Get the bundle is a real link (href="#"): point it at your bundle's checkout. It is a ShineButton with render set to an a element and nativeButton={false}.

The parts fade up one after another when the section loads, and the two bars are drawn from their start (from the end in a right-to-left page) with a clip-path transition. With reduced motion everything is simply there. Nothing loops.