Shadcn UI Offer Modal Block
The OfferModal4 component is a specialized modal designed to capture user email addresses for promotional purposes. It is presented with a visually appealing design that encourages users to subscribe for special offers. The component highlights a call-to-action with a customizable overline and title, making it useful for businesses looking to increase user engagement. Through its integration with form validation and Google Fonts, it ensures a seamless and engaging user experience, capturing emails efficiently.
In detail, OfferModal4 utilizes a shadcn block to create an elegant modal with a dual-section layout. The top section can display an eye-catching image to draw user attention, while the lower section focuses on the form. The form includes a stylized input field with an inline icon for email entry, and buttons for submission. Shadcn UI components like Dialog, Form, and InputGroup manage modal display and form interactions effectively, ensuring the form is both functional and aesthetically pleasing. The component uses a smooth entrance animation, enhancing user engagement, and can be customized with a set of default texts for dynamic content presentation.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react-hook-form | NPM |
| zod | NPM |
button @shadcn | Registry |
dialog @shadcn | Registry |
form @shadcn | Registry |
input-group @shadcn | Registry |