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 marketing hero for products that consolidate scattered customer signals into one profile. The block is composed of two halves: a centered headline plus two CTAs on top, and below that a framed showcase featuring four "signal source" chips (Email, Calendar, Segment, Data sources) connected by hand-tuned curved SVG paths to a contact card. The card itself is split into a profile cell with avatar, action pills and a details list, and a Highlights cell with five mini-cards (Summary, LinkedIn, Upcoming, Company, Sales Outreach) plus a stacked Activity timeline.
Key Features:
bg-card, bg-muted, text-foreground, text-muted-foreground, border-border| Element | Purpose |
|---|---|
Heading | Title, lede paragraph and the two CTA buttons |
Showcase | 3×3 grid that hosts the dashed corner cells, chip row, main panel and check-pattern strip |
ChipRow | Four Chip cards (Email / Calendar / Segment / Data sources) sat above curved connector paths |
ConnectorsDesktop / ConnectorsMobile | Single SVGs rendering the four bezier paths that converge on the panel |
ProfileCell | Avatar, name, title and the row of action pills (Compose email + four icon buttons) |
HighlightsCell | Section label + 5-card grid of summaries, schedule, company, outreach progress |
HighlightCard | Generic card chrome with optional tintClass overlay and accent border for the primary card |
DetailsCell | Six-row label/value list under the profile cell |
ActivityStack | Timeline card with stacked paper-depth and per-row icon, avatar and time |
CheckerStrip | Faint grid-pattern band beneath the panel — purely decorative |
#069, the calendar accent blue, the emerald success state and the gradient sparkle in the Summary card. These are intentional brand cues.pointer-events-none on the showcase wrapper plus select-none keep the visual non-interactive — it is a marketing surface, not a working CRM card.d="" strings.border divs at decreasing horizontal inset, layered behind the foreground card to fake a small paper stack — no shadow plugin needed.