Statement CTA

Bold full-width call-to-action on a dark panel with dual buttons: one oversized heading statement, a short supporting line, and a primary and secondary button side by side. The panel uses the foreground/background token pair so it stays a guaranteed dark surface in both light and dark theme.

By Staaarter Team

CTA

Docs

Live preview

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/statement-cta.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta64.tsx instead.

Usage

The file also exports cta64Demo, 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 { Cta64, cta64Demo } from "@/components/blocks/cta/cta64";

export default function Page() {
  return <Cta64 {...cta64Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	"Build faster. Ship sooner."	The bold, oversized statement heading.
description	string	"Everything your team needs to go from idea to production, in one place."	Short supporting copy under the heading.
primaryLabel	string	"Get started"	Label for the primary button.
primaryHref	string	"#"	Link target for the primary button.
secondaryLabel	string	"Contact sales"	Label for the secondary button.
secondaryHref	string	"#"	Link target for the secondary button.
className	string	none	Extra classes for the outer section element.

Behavior notes

Layout only: the panel uses `bg-foreground text-background` (semantic tokens, not a literal color) so it renders as a guaranteed-dark surface regardless of light/dark theme; the secondary button is a manually re-tinted outline variant using `border-background/30`/`text-background` since the default outline styling assumes a light surface.
Both buttons are inert links (`render={<Link/>}`) pointing at `#` by default; there is no real signup or contact-sales flow wired up.

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.

stats-cta

Stats CTA

Call-to-action section with impressive statistics and trust indicators above action buttons.

multi-card-cta

Multi-Card CTA

Three action cards side by side, each offering a different path to conversion.