Shadcn UI Contact Block
Contact30 is a full-viewport hero contact section with a muted background. A two-column layout shows an oversized headline and subtitle on the left with three contact methods below, each with an icon in a white circular container with shadow. The right column contains a white form card with shadow collecting name, email, phone (optional), and message.
The section fills minimum screen height with content vertically centered. Typography uses very large sizes with tight tracking. Contact method icons use white circles with drop shadows creating a floating effect. The form card has generous rounded corners and padding with prominent shadow lift.
Bold and premium with the full-height design treating contact as a page-level destination. The icon circles and form card shadows create depth on the flat muted background. Works well as a standalone contact page for agencies, studios, or businesses that want their contact section to feel significant.
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 |