About 7 - Product Story with Offset Images

Pro

A narrative about section with offset image layout, product philosophy text, team photos, and careers CTA button.

Shadcn About 7 block

Component Data

  • ID:about7
  • Access:pro
  • Created:Dec 20, 2024
  • Type:block

About 7 block design & features

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.