Centered Store Buttons CTA Block for React

Each link is an ordinary anchor inside a button, href="#" for now: replace it with your App Store and Google Play URLs, or with one smart link that picks the store from the visitor's device. The labels say where each goes without carrying a store's logo. If you have permission to use the official badges, put them in place of the two buttons and keep the labels as the links' accessible names. Each button renders the link it's given with render, with nativeButton={false}.

No: the send is simulated in send. After the number passes the check, the button shows its spinner for LATENCY (0.8 seconds) and then the confirmation replaces the form. Replace the timer with a request to your SMS provider through your own server, sending dial and phone together, and set the state to "done" on success. If it fails, set it back to "idle" and put the message in error.

The form has noValidate, and send counts the digits in the field: between 7 and 12 are accepted, whatever spaces, dashes or brackets are around them. A wrong number shows its message under the field, marks the field invalid and sends focus back to it; typing clears the message. This is a length check, not a carrier check, so validate the number again on your server.

The select is named "Country code" and the field "Phone number", the latter with a visually hidden label. The select is the browser's own, so it works with the keyboard and on phones with their native picker. After a successful send, the form is hidden and inert and focus moves to the "Link sent" heading, so the confirmation is read aloud. The number is kept left to right, so it reads in order in right-to-left pages.

Yes. The card is bg-card with a soft shadow and a ring, inside a tinted bg-muted/50 shell, so it is light on a light page and dark on a dark one, in any preset. The Shine Button is the only primary control; the Android link is the outline variant and the text button is the secondary variant.

The two download links wrap onto two lines when they don't fit side by side. In the form the country select and the phone field stay on one row and the button goes full width below them; from the sm breakpoint all three share one row. On a phone the shell sits a little inside the page rails.