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 "data product" hero. The composition is two halves: a centered headline + CTA pair on top, and a full dashboard mock below. Behind everything sits a faint 10-ring concentric SVG backdrop, masked top and bottom with a radial vignette + linear fade. The dashboard itself is a verbatim port of the prod-03 copy/hero-dashboard from the source project — workspace header, document tab bar, left navigation sidebar (Dashboard / Queries / Reports + Databases + Chat History) and a Stock Analysis data table with sentiment / market-cap / signal columns. The bottom of the dashboard fades into the page via a linear-gradient mask.
Key Features:
| Element | Purpose |
|---|---|
Heading | Eyebrow pill, headline, lede paragraph and the two CTA buttons |
ConcentricBackdrop | 10-ring SVG positioned absolutely behind the dashboard, with radial + linear masks fading the top and bottom into the page |
DashboardWrapper | Width-bounding container (max-w-7xl) plus the bottom-fade mask that dissolves the dashboard into the page |
DashboardCard | Outer chrome — bordered card with workspace header, content header, sidebar and the main content area in a 2×2 grid (lg:grid-cols-[272px_1fr]) |
WorkspaceHeader | Top-left cell on lg+ — workspace logo, name, dropdown chevron and a side-panel icon |
ContentHeader | Top cell — current document name with star, plus three quick-action icons |
DashboardSidebar | Left column (lg+) — search bar + three NavSections (main / databases / chat history) |
NavSection / NavItem | Sidebar primitives — section label with chevron + clickable rows with optional active state |
SearchInput / SearchButton | Two pill-style search controls in the sidebar header |
DataModelContent | Main content area — toolbar, filter bar and the Stock Analysis grid |
StockRow / HeaderCell / Cell | Table primitives — render the 6-column rows with separators |
StatusPill / DomainPill / SignalIndicator / CompanyLogo | Visual primitives reused inside StockRow |
bg-card, border-foreground, text-muted-foreground, text-border) so the outer hero adapts to light/dark while the inner dashboard preview stays anchored.linear-gradient(to bottom, black 0%, black 92%, transparent 100%) — change the 92% breakpoint to dissolve more or less of the dashboard.min-w-[640px] + overflow-x-auto) so the columns never clip mid-cell on mobile.