Shadcn UI Contact Block
Contact11 has a centered headline and description with a two-column layout below, separated by a vertical divider on desktop. The left column shows three stacked sections: corporate office address, two email contacts (Careers and Press) with category labels, and social media icons for Facebook, Twitter, and LinkedIn. The right column contains an inquiry form with fields for name, work email, company (optional), employee count (optional), and message.
Clean white background with a visible vertical border dividing the columns on larger screens. Typography uses semibold section headers with muted foreground for supporting text. Social icons are muted and change on hover. The form uses standard input styling with right-aligned submit button. Optional fields are clearly marked.
Balanced and professional with clear information hierarchy. The vertical divider creates strong visual separation between contact info and form. Multiple email addresses with category labels make it easy for users to reach the right department. The social links add connectivity without overwhelming the layout.
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 |