Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A two-column About-Us block built on an editorial stagger pattern. The left column carries the primary heading and description above a three-image cluster; the right column inverts that order — image cluster on top, secondary heading and supporting paragraphs beneath. On lg+ the right column is pushed down 12rem (lg:pt-48) so the columns interlock vertically, creating diagonal eye flow rather than a flat grid.
Key Features:
lg:pt-48 creates the staggered editorial rhythmlg+ReactNode, so consumers can pass multi-paragraph content with their own styling--color-muted-foreground| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Our story" | Main heading at the top of the left column. |
description | string | Remote-first team paragraph | Description beneath the main heading. |
secondaryTitle | string | "Where we work" | Secondary heading rendered below the right-column image cluster. |
secondaryDescription | ReactNode | 2-paragraph default | Secondary description. Pass JSX for multi-paragraph layouts with your own styling. |
images | AboutStaggeredImage[] | 6 default Unsplash photos | Six images. Indices 0–2 fill the left cluster, 3–5 fill the right cluster. |
className | string | undefined | Additional CSS classes on the outer <section>. |
Each cluster (left and right column) is a three-image group with the same shape:
md:w-1/2 (full width on mobile)md:w-1/2The aspect ratios differ between clusters so the page reads as composed, not duplicated:
| Index | Position | Aspect ratio |
|---|---|---|
| 0 | Left — large | 0.7 (portrait) |
| 1 | Left — top of stack | 1.1 (slight landscape) |
| 2 | Left — bottom of stack | 0.7 (portrait) |
| 3 | Right — large | 0.9 (near-square) |
| 4 | Right — top of stack | 0.8 (portrait) |
| 5 | Right — bottom of stack | 0.9 (near-square) |
The two columns each have lg:w-1/2. Without intervention they'd start at the same top, producing a symmetric two-column grid. Adding lg:pt-48 (12rem) to the right column offsets it downward only at lg+, so the right cluster begins where the left text ends — an editorial pattern that rewards scrolling and avoids a static "two halves" feel. Below lg, the columns stack vertically and the offset becomes a smaller pt-12 (3rem) gap between blocks.
Drop this on an About page or as a mid-marketing-page section when you have real photography of your team, workspace, or product. The layout shines when the six images are visually varied (people, place, detail close-ups) — repeated subjects flatten the editorial rhythm.
If you only have one or two images, this is the wrong block; reach for a simpler hero-with-image variant instead.