Shadcn UI Contact Block
Contact29 is a two-step contact flow on a full-viewport muted background. Step one displays a centered grid of five service cards, each with a large icon in a circular container, service name, and short description. Clicking a card selects it with a primary ring border and shadow. A Continue button advances to step two.
Step two uses a two-column layout with a large headline and description on the left, and a white form card with shadow on the right. The form collects name, email, company (optional), and message with a back link to change the service selection. After submission, a full-page success state appears.
Immersive design that treats service selection as a first-class interaction. The large icon cards make services visually distinct and easy to scan. The form step maintains context by showing the selection. Works well for agencies, consultancies, home services, or any business with clearly differentiated service offerings.
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 |