Agenda Builder Demo Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your sales inbox or CRM: details holds the name, email and team size, and chosen holds the ids of the parts the visitor pressed. Show the confirmation when the request succeeds, and an error line in the form when it doesn't. The confirmation promises a reply, not a time; no slot is booked.

MODULES lists each part with its minutes. partsOf puts the introduction (3 minutes) first, the parts you pressed in their fixed order, then the closing questions (5 minutes). rowsOf adds up the minutes before each part to get the minute it starts at, and callFor picks the shortest call length in CALLS that holds the total. All of it is plain arithmetic at module scope, so you can change the minutes, add a part or add a 60-minute call without touching the layout.

No. The agenda always lists every part, in the same six rows: a part you haven't pressed stays where it would be, quiet and marked "Left out", and lights up when you press it, so nothing is inserted or removed. The numbers and start minutes of the rows change in place. The bar's segments change width with a short transition, which is off under reduced motion, and the total and the badge change in place; the badge keeps one width for both of its sentences.

The label above it names the select's button for screen readers. The select's trigger takes the id, and the label points to it with htmlFor.

Submitting shows "Choose at least one part to see." under the choices and moves focus to the first of them. The choices are real toggle buttons that keep the pressed state in aria-pressed, so a screen reader hears each part as on or off, and arrow keys move between them where the base's toggle group supports it. The pressed ones fill with the text colour on the page colour, never the primary colour.

The header, the form and the agenda stack in one column, in that order, with a hairline between them. The four parts sit one per row below 26rem and two per row above it; the name and email go one per row, and the submit button goes full width. The agenda's rows wrap their text rather than scroll, so nothing moves sideways at 320 pixels.