Shadcn UI Contact Block
Contact1 is a two-column demo booking section with social proof elements on the left and a comprehensive form on the right. The left column contains a headline, description, overlapping avatar stack, three benefit checkmarks with icons, and a company logo strip. The right column has a form card with seven fields: full name, company, phone, email, country select, company size select, and a referral source select.
Soft radial gradient backgrounds in accent colors with a subtle dot pattern overlay create visual depth. The form sits in a bordered card with shadow. Avatars overlap with negative margins and have visible borders. Benefit checkmarks use muted icons. Company logos invert in dark mode. Spacious vertical rhythm with clear visual hierarchy.
Feature-rich and elaborate compared to simpler contact forms. The combination of social proof elements (avatars, logos, benefits) alongside the detailed form creates a lead-generation focused design typical of B2B SaaS products. Requires avatar images and company logos to look complete.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react | NPM |
| react-hook-form | NPM |
| zod | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
field @shadcn | Registry |
input @shadcn | Registry |
select @shadcn | Registry |