Shadcn UI Contact Block
Contact28 is a three-step contact wizard on a full-viewport muted background. A two-column layout shows the progress on the left and the form card on the right. The progress area displays a large headline and three vertical step items that highlight as completed. The form card contains the current step's fields, with navigation buttons at the bottom.
Step 1 collects inquiry type dropdown and optional budget. Step 2 gathers name, email, company, and phone. Step 3 has a message textarea. Each step validates its own fields before allowing progression. The form card uses white background with shadow on the muted section background.
Immersive full-viewport design that feels like a standalone page rather than a section. The vertical progress list provides clear context of where the user is in the process. The chunked approach reduces cognitive load for longer forms. After submission, a full-page success state with large checkmark icon replaces the form.
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 |
select @shadcn | Registry |