Offer Modal 12 block design & features
A shadcn/ui welcome modal for first-time visitors to a store. A wide photo sits across the top, followed by the heading, one line of copy and three short perks such as free shipping and free returns, each with a small muted icon and separated by hairlines.
Below the perks are an email field, a full width button and a short note about the code. The email is validated before submit, and the modal opens by default in the preview.
The title, description, image, perks, button label and note are props. The layout is narrow and fits small phone screens without scrolling.
Closing the modal leaves a small rounded "Take 15% Off" button in the bottom left corner of the page. It fades in once the panel has gone and opens the modal again, and its label is the teaserText prop.