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 poster-scale About block built around three editorial moves:
box-decoration-clone so it survives line breaks, and a hard-stopped vertical gradient so it reads like a Sharpie swipe (not a flat sticker rectangle).Key features
bg-zinc-950 text-white) — the white serif + electric-blue highlight is a dark-theme statement, so the block intentionally does not invert on light themes--strip-h CSS variable per image, applied only at md+ (mobile keeps a uniform compact height so the scroll-strip looks ordered)| Prop | Type | Default | Description |
|---|---|---|---|
images | StripImage[] | 5 demo photos | The staggered strip of portrait images. Each entry has src, alt, and a designed height (px on md+) |
className | string | – | Additional classes on the outer <section> |
interface StripImage {
src: string
alt: string
/** Height on md+ in px — drives the staggered skyline */
height: number
}| Element | Purpose |
|---|---|
| Headline | 4-line serif statement; 3 of the words sit behind a marker-style blue band |
Highlight | The chunky-blue marker effect — gradient hard-stops + box-decoration-clone |
| Photo strip | 5 bottom-aligned portrait images; varying heights form a "skyline" silhouette |
| Closing band | Serif sub-headline + body paragraph (max-w-3xl) |
bg-zinc-50 text-zinc-950, swap bg-zinc-900 placeholder to bg-zinc-100, etc.) and pick a deeper blue for the highlight so the marker stays legible on white.font-serif fallback chain. For the exact Playfair-Display-leaning feel in the reference, pair this component with next/font/google Playfair and override font-serif at the project level.