Offer Modal 10 block design & features
A two-column shadcn/ui offer modal for a phone case shop. A lifestyle photo fills the left side. The right side has a centered serif heading, a short description, a rounded email field, a full-width rounded Get Discount button and three round social icon links.
A small round close button sits in the top right corner. The email field is validated, with an inline error for invalid addresses. The heading, description, image and social links are props.
On mobile the photo becomes a tall banner above the form.
Closing the modal leaves a small rounded "Get 10% 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.