Shadcn UI Contact Block
Contact2 is a two-column contact section with information on the left and a message form on the right. The left column contains a large headline, supporting paragraph, and three minimal contact links for phone, email, and website, each with a small icon. The right column holds a form with fields for first name, last name, email, subject, and message, all inside a rounded container with a subtle muted background.
The form uses React Hook Form with Zod validation. Required fields are marked with red asterisks. Validation only triggers on submit, not while typing. A loading spinner appears on the submit button during submission, and a green success message fades in after completion. The form resets automatically after successful submission.
Light, spacious layout with generous gaps between elements. The form container uses a semi-transparent muted background with rounded corners. Icons are small and muted. Text links underline on hover. Inputs have a white background to stand out against the form container. Minimal and functional styling close to shadcn defaults.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react | NPM |
| react-hook-form | NPM |
| zod | NPM |
button @shadcn | Registry |
field @shadcn | Registry |
input @shadcn | Registry |
textarea @shadcn | Registry |