Shadcn UI Contact Block
Contact17 is an elaborate lead generation section with a muted background. A small breadcrumb-style label sits at the top. The main area uses a two-column grid: the left has a large headline, three process steps with checkmark icons, a trust statement, and an eight-logo company grid. The right column contains a bordered form card with first name, last name, email, budget dropdown, message textarea, referrer field, and privacy/terms acknowledgment text. A footer section below has two text blocks linking to FAQ and Resources.
Muted section background with a white bordered form card. Checkmarks use small circular backgrounds. Company logos are arranged in a four-by-two grid with dark-invert support. The form uses React Hook Form for field management. Select dropdown offers budget ranges. Small-text privacy links below the submit button.
Feature-rich and trust-focused with multiple social proof elements. The process steps set expectations while the logo grid establishes credibility. The budget dropdown qualifies leads before submission. A comprehensive approach suited for B2B services or agencies. Requires eight company logos to look complete.
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 |
select @shadcn | Registry |
textarea @shadcn | Registry |