Centered ROI Calculator Hero Block for React

savingsFor turns a team size into the yearly savings: each seat saves PER_SEAT_SAVING, plus a flat AUTOMATION_BONUS. Replace it with your own model, such as hours saved times an hourly rate, or a table of tiers; the figure, the working beneath it, the announcement and anything you send on all come from it, so change the note on the left and the two rows of the working to match. MIN_SEATS and MAX_SEATS bound the slider, CURRENCY is the sign shown before the figure, and the team size starts at 25.

The slider's last step stands for any larger team: seatsText writes it as 100+ seats, both beside the slider and in what screen readers hear, and the estimate there is the one for 100 seats. Bigger teams usually talk to sales, which is the second call to action. Raise MAX_SEATS to cover larger teams on the slider itself.

The slider is labelled Team size and reads its value as seats, such as 25 seats, rather than a bare number: getAriaValueText receives the formatted value, the number and the thumb's index. The savings figure keeps its full value in visually hidden text, so its rolling digits are never read. Once a drag or a key press ends, a polite live region says the new estimate, such as $26,250 estimated annual savings for 25 seats; nothing is announced on load or on every step of a drag.

The figure is a SlidingNumber: when the estimate changes, only the digits that changed roll to their new value, in 400 milliseconds, with CSS transitions. The page loads with the real estimate already written, so nothing counts up from zero. With reduced motion the digits change in place, and the hero skips its entrance. The slider's fill and thumb are drawn in the foreground tone, so the Shine Button stays the one primary control.

Put it in the links' href, such as /signup?seats=40, from the seats state, so the next page can start from the visitor's own number. To learn which sizes visitors settle on, send an analytics event from the same callback that sets the announcement, onValueCommitted, which fires once when a drag or a key press ends rather than on every step.

The actions sit above the calculator, so the Shine Button ends about 350 px down the first screen and the slider starts just below it. The calculator's two sides stack, the slider side first, with a hairline between them instead of the vertical divider; the figure drops from text-6xl to text-5xl.