Offer Modal 15 block design & features
A Shadcn UI welcome modal built around a choice rather than a single discount. Under a heading and one line of copy sit three selectable offer cards for 15% off, free shipping and a free tote, each with a photo, a bold title, a short condition and a round check. An email field and a claim button run across the bottom with a short privacy note.
Selecting a card outlines it and fills its check, and the claim button label changes to match, such as Claim free shipping or Claim my free tote. The cards behave as a native radio group with a visible focus ring for keyboard use. Styling is light and even, with hairline borders, rounded photo tiles and colour transitions only.
The modal reads as a friendly, considered alternative to a fixed signup discount. It needs one photo per offer, and offers, copy and the privacy note are props. On small screens the cards become compact rows with a square thumbnail beside the text.