Shadcn UI Contact Block
Contact4 combines department contact cards with an interactive office location carousel. The top section has a left-aligned headline and three bordered cards in a row for Sales, Support, and General Inquiries. Each card contains a title, description, and text link. Below, a full-width carousel cycles through office location slides with a fade transition. Each slide displays a map image with a floating info card positioned at the bottom left showing the location name, address, and a link.
Rounded cards with visible borders. The carousel uses a fade effect between slides rather than sliding. Navigation arrows sit in the bottom right corner of the carousel. The floating info card on each slide has a white background and sits directly on top of the map image with rounded corners. On mobile, the info card becomes full-width at the bottom.
Interactive and visually engaging with the map carousel as the focal point. The fade transition between locations feels smooth and purposeful. Requires map images for each location which adds visual complexity. A distinctive pattern compared to simpler contact forms.
Dependencies
| Package | Type |
|---|---|
| embla-carousel-fade | NPM |
carousel @shadcn | Registry |