Shadcn UI Contact Block
Contact31 wraps a split layout in a rounded container with muted background. The left half displays a full-height image using absolute positioning and object-cover. The right half contains a form area with headline, description, and fields for name, email, company (optional), and message. The entire unit sits centered on the page.
The container has generous rounded corners creating a card-like appearance. The image is hidden on mobile, showing only the form. Form inputs have white backgrounds to contrast with the muted container. Padding increases at larger breakpoints for comfortable spacing.
Contained and polished with the rounded wrapper distinguishing this block from edge-to-edge layouts. The architectural photography adds visual interest while the form remains the focus. Works well for real estate, architecture, luxury brands, or businesses wanting a refined, bounded contact section that feels separate from surrounding content.
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 |