Shadcn UI About Block
About7 is a narrative-driven about section with an asymmetric layout. It opens with a muted subheading and large headline, followed by two overlapping images where one is offset and bordered. Multiple text sections explain product philosophy with alternating left and right alignment. A two-column image grid shows team photos. The block closes with team description text and an outline button linking to open roles.
The block uses a mint-tinted background color that shifts in dark mode. The offset image treatment creates depth with one image overlapping another using translate utilities and a thick border. Text sections alternate between left-aligned and right-aligned positioning. The careers button uses an outline variant with an arrow icon.
This has a distinctive editorial layout that breaks from standard grid patterns. The offset images and alternating text alignment create visual rhythm. The narrative format suits product-focused companies explaining their approach. Requires four images and substantial copy.
On mobile, the offset image effect is preserved with the secondary image positioned absolutely. Text sections all become left-aligned. The image grid stacks to single column.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
button @shadcn | Registry |