Offer Modal 11 block design & features
A compact shadcn/ui offer modal for a first-order discount. A short photo header of shopping bags runs across the top, and a white pill showing the discount sits on its bottom edge. Below come a bold title, a short description, an email field, a full-width Claim Your Discount button and a small privacy note.
A round close button sits in the top right corner of the photo. The email field is validated before submit. The title, description, discount label, image and privacy text are props.
Closing the modal leaves a small rounded "Get 25% 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.