Shadcn UI Cta Block
The Cta22 component is a dynamic, visually engaging section designed to enhance user interaction by promoting an application download and a newsletter subscription. This component combines elements of modern design and practical functionality, offering users an interactive experience through a vibrant call-to-action layout. It presents two primary actions within the interface: a promotional download area with vivid imagery and branded buttons, and a subscription form for capturing user interest via email.
In more detail, the component splits into two main segments: a visually appealing section that promotes a note-taking app with options to download via iOS or Android, and a compelling newsletter signup form. The download section balances engaging graphics and fluid text alignment, incorporating branded icons from the Apple and Google Play stores to add familiarity and appeal. Meanwhile, the newsletter portion is subtly designed, featuring an input field validated with schema definitions to ensure correct email formatting, enhancing form usability and data integrity. The use of a shadcn block ensures consistent visual aesthetics and intuitive element placement, aligning with modern UI expectations.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react-hook-form | NPM |
| react-icons | NPM |
| zod | NPM |
button @shadcn | Registry |
form @shadcn | Registry |
input @shadcn | Registry |