Quote-Led CTA

Social-proof-driven call-to-action where a large testimonial quote is the visual hero of the section, followed by the author's avatar, name, and role, then primary/secondary action buttons.

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 avatar, avatar-initials, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/quote-led-cta.json

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

Usage

The file also exports cta20Demo, 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 { Cta20, cta20Demo } from "@/components/blocks/cta/cta20";

export default function Page() {
  return <Cta20 {...cta20Demo} />;
}

Props

Prop	Type	Default	Description
quote	string	none	The oversized hero testimonial quote.
authorName	string	none	Name of the person quoted.
authorRole	string	none	Role or company of the person quoted.
authorAvatar	{ src: string; alt: string }	none	Optional avatar photo for the author; falls back to initials when omitted.
primaryLabel	string	"Start your free trial"	Label for the primary button.
primaryHref	string	"#"	Link target for the primary button.
secondaryLabel	string	"See how it works"	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

Fully static: the quote and attribution are hand-authored copy, not a fetched or rotating review.
The author avatar falls back to initials (via `AvatarFallback`/`initialsFromName`) when `authorAvatar` is omitted.
Both buttons are inert links, not wired to a real signup or product-tour flow.

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.