Shadcn UI Contact Block
Contact32 splits the viewport into two equal columns. The left column displays an abstract image with a dark overlay and bottom-aligned text showing an uppercase label and subtitle. The right column contains a vertically centered contact form with headline, description, inline email and phone links with icons, and fields for first name, last name, email, and message.
The image overlay creates text readability with bottom positioning for visual weight. Contact links appear inline above the form with hover underlines. The submit button includes an arrow icon. On mobile, the image side is hidden to focus on the form.
Dramatic and editorial with strong visual impact from the full-height abstract image. The split layout creates visual balance while keeping the form accessible. Works well for creative agencies, photography studios, or luxury brands wanting a gallery-like contact experience as a standalone page.
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 |