Shadcn UI Contact Block
Contact3 is a full contact directory page with three distinct sections. The header has a centered large headline with two CTAs (primary demo button and outlined trial button) and a reassuring note about no payment required. The middle section displays four department cards in a two-column grid, each with an icon, title, description, and text link for Support, Sales, Inquiries, and Verification. The bottom section lists five global office locations in a three-column card grid with colored rectangle indicators representing country flags.
Light background with clear section separation through generous vertical spacing. Department icons are large and positioned above the content. Office cards have rounded borders with subtle shadows. Each office card shows a colored rectangle as a simplified flag representation. Text links use underlines on hover. The layout is text-heavy with minimal decoration.
A practical contact hub design that consolidates multiple contact channels into one page. The multi-section approach works well for organizations with distinct departments and multiple office locations. The simplified flag indicators add visual interest without requiring actual flag images. Content-driven with five office locations needed to populate.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
button @shadcn | Registry |