Shadcn UI Contact Block
Contact34 uses an asymmetric grid with the image taking 3/5 width on desktop. The image has generous rounded corners and a floating contact info card positioned at the bottom overlaying the image. The card displays email, phone, and address in a three-column grid with uppercase labels. The narrower right column contains a compact form with tagline, headline, and three fields.
The floating card uses a translucent white background with backdrop blur and shadow, creating depth over the image. The image uses a portrait aspect ratio on desktop and landscape on mobile. The form side has a vertically centered layout. The submit button includes an arrow-up-right icon.
Premium and editorial with the asymmetric split creating visual hierarchy favoring the image. The floating card technique adds sophistication while keeping contact details visible. Works well for architecture studios, luxury real estate, design agencies, or hospitality brands wanting a gallery-like presentation.
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 |