Audience Index Influencer 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 creator inbox or CRM: details holds what the creator makes, the channel name and the email, kind the kind of channel and stop the index of the audience stop.

They are fixed example numbers. STOPS holds a low and a high rate per post for each audience stop on a photo feed; KINDS holds a factor (short video 0.8, long video 1.6) that scales both, and rateAt rounds the result to the nearest 10 dollars. The readout and the confirmation both say "Example only", and the MDX of your own page should say what your real rates depend on. Swap in your own rate card, or drop the readout if you don't publish one.

They are two controls for one value. The slider has five steps and says the audience in words ("About 100,000 people") to a screen reader; the buttons are real buttons that keep aria-pressed, one per stop, so a tap lands exactly. Pressing a button moves the slider, and sliding presses the matching button. The slider's range and thumb take the text colour, not the primary colour.

The three kinds of channel are generic on purpose, "Photo feed", "Short video" and "Long video", with icons drawn from the icon set rather than any brand's logo, so the block never names a product it doesn't own. Rename them in KINDS to match your own brief.

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.

The header and the frame stack in one column. In the channel switch the icon sits above each label, the slider keeps its five stops lined up with the buttons below it, the name and email go one per row, and the submit button goes full width, so nothing scrolls sideways at 320 pixels.