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 "show and tell" feature section. The top half is two side-by-side feature panels — each carries a headline, a paragraph, and an illustrative card. Subgrid keeps the headline rows aligned vertically across the panels regardless of how long the body copy gets, and the illustrations sit inside a three-layer stacked-card frame that fades into the page via a bottom mask. Below the split, a four-tile grid of compact icon + title + description summaries closes the section.
The two illustrations are visually distinct on purpose: an invoice card with a brand-mark gradient, formatted invoice number, headline amount, due-date label, a doc-preview thumbnail with skeleton lines, and three "to / from / address" field rows on the left; a spending-limit visualisation with a tri-section progress bar, a stripped "free" segment that animates on group hover, two large stat numbers, and a channel breakdown legend on the right.
Key Features:
md:grid-cols-2 md:divide-x) that stacks vertically with a horizontal divider on mobile (max-md:divide-y)grid-rows-subgrid with row-span-2 keeps the title rows in both panels at the same heightinset-x-9 top-2 bg-background/50), middle card (inset-x-6 top-4 bg-background), front card (bg-card with shadow)linear-gradient(to bottom, black 65%, transparent)) so the illustrations dissolve into the page rather than ending abruptlylinear-gradient background pattern (no SVG needed)lg+, with top border separator"use client", only lucide-react for icons| Element | Purpose |
|---|---|
SplitPanels | Two-column container that holds both feature panels and the dividers between them |
FeaturePanel | One panel — uses subgrid so its headline aligns with the sibling panel's headline. Receives side to pick the inner padding direction |
StackedFrame | The three-layer card stack — back / middle / front — plus the bottom mask fade. Wraps any illustration |
InvoiceIllustration | Left illustration — brand mark, invoice number, headline amount, due-date label, doc preview thumbnail, three field rows |
BrandMark / DocPreviewThumbnail / FieldRow | Inline SVG brand mark with linear gradient, miniature doc preview with skeleton bars + signature icon, label-and-skeleton row primitive |
DataVizIllustration | Right illustration — amber-highlighted title, sub-label, spending bar, two stat numbers, two channel rows with coloured dots |
SpendingBar | Tri-segment progress bar — solid darker accent, primary segment (animates on group hover), striped "free" segment |
ChannelRow | Coloured dot + label + meta percent in a one-line row |
FeatureTiles | Bottom four-tile grid — icon + title + description, 2 cols on mobile and 4 cols at lg+ |
<linearGradient> with a deterministic id (feature-illustrated-split-brand). If you embed multiple instances of this section on the same page and rename it, give each instance a unique gradient id to avoid collision.SpendingBar is gated by the wrapping group class on StackedFrame. Hovering anywhere on the data-viz card triggers it."use client" boundary — safe to render inside Next.js App Router server pages.