Stats CTA
A data-driven conversion section: a row of large stat tiles builds credibility before a centered heading, supporting paragraph, and primary/secondary action buttons. Perfect for closing a sales page with proof rather than just a promise.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/stats-cta.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta12.tsx instead.
Usage
The file also exports cta12Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Cta12, cta12Demo } from "@/components/blocks/cta/cta12"; export default function Page() { return <Cta12 {...cta12Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Trusted at scale" | Small label above the heading. |
| heading | string | none | Main call-to-action heading. |
| description | string | none | Supporting paragraph under the heading. |
| stats | StatItem[] | none | Row of 3-4 stat tiles shown above the heading. |
| primaryLabel | string | "Get started free" | Label for the primary button. |
| primaryHref | string | "/signup" | Link for the primary button. |
| secondaryLabel | string | "Talk to sales" | Label for the secondary button. |
| secondaryHref | string | "/contact" | Link for the secondary button. |
| className | string | none | Extra classes for the outer section element. |
Types
interface StatItem { value: string; label: string; }
Behavior notes
- Fully static: stats, heading, and buttons are all presentational; both buttons are real links (`render={<Link/>}`) but point at placeholder routes.
- The stat grid stacks to two columns on mobile and four across on larger screens.
More CTA Blocks
View all →centered-newsletter-cta
Centered Newsletter CTA
Minimal centered call-to-action with heading, description, and action buttons.
split-layout-newsletter-cta
Split Layout Newsletter CTA
Two-column call-to-action with a decorative image on one side and a feature list plus subscribe form on the other.
newsletter-social-proof-cta
Newsletter CTA with Social Proof
Newsletter call-to-action with an avatar stack, subscriber count, and a testimonial quote.
banner-cta
Banner CTA
Horizontal banner call-to-action with heading and action buttons side by side.
multi-card-cta
Multi-Card CTA
Three action cards side by side, each offering a different path to conversion.
benefit-checklist-cta
Checklist CTA
Call-to-action with a vertical list of benefit checkmarks and action buttons.