Plan Upgrade Success Block for React

Nothing was upgraded or charged: the page describes a change that already happened. The limits are typed in LIMITS (the Free and Pro figure of each), the price in cents and the two dates in PLAN. To wire it, read the customer's old and new plan from your billing system, build LIMITS from them (list only what changed), and set the dates from the subscription. Point the button at the product.

It's hidden: the layer carries motion-reduce:hidden, so a visitor who asked for less motion sees no pieces at all, not a still scatter. Otherwise it's a low count of pieces in the foreground, muted and primary colors, falling slowly behind the content and fading out toward the bottom of the page. It's decoration only: it's hidden from assistive technology and takes no clicks.

They're worked out as the Pro figure minus the Free figure for each limit and formatted with its unit ("+49 GB"), so changing a limit in the data changes its badge. Assistive technology reads each Pro figure with "up from" and the old one, so the comparison is in the words, not only in the layout.

Free stacks over Pro, each a short list of three rows with the label at the start and the figure at the end, and the Shine Button is pinned to the bottom of the screen while the page scrolls under it, so it is on the first screen. From the small breakpoint up it sits in the flow, and the two plans sit side by side from the medium breakpoint with a divider between them.

They are ISO dates written into the data and shown as real time elements with a month name, never read from the clock, so the page is the same on the server and in every visitor's time zone. In your product they come from the subscription.

The Shine Button is a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}.