Two-Tier CTA
Stacked two-tier call-to-action with a prominent primary offer on top and a smaller, quieter secondary alternative below, separated by a horizontal divider labeled 'or'. Perfect for presenting a main conversion path alongside a lower-commitment fallback.
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/two-tier-cta.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta23.tsx instead.
Usage
The file also exports cta23Demo, 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 { Cta23, cta23Demo } from "@/components/blocks/cta/cta23"; export default function Page() { return <Cta23 {...cta23Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| primaryHeading | string | "Start your free trial" | Heading for the top, primary offer. |
| primaryDescription | string | "Get full access to every feature for 14 days, no credit card required." | Short supporting copy for the primary offer. |
| primaryButtonLabel | string | "Start free trial" | Label for the primary offer's button. |
| primaryButtonHref | string | "#" | Link target for the primary offer's button. |
| dividerLabel | string | "or" | Text shown in the middle of the horizontal divider. |
| secondaryHeading | string | "Not ready yet?" | Heading for the bottom, secondary offer. |
| secondaryDescription | string | "See how it works with a short, guided product tour instead." | Short supporting copy for the secondary offer. |
| secondaryButtonLabel | string | "Watch the tour" | Label for the secondary offer's button. |
| secondaryButtonHref | string | "#" | Link target for the secondary offer's button. |
| className | string | none | Extra classes for the outer section element. |
Behavior notes
- Layout only: the primary offer sits in a bordered, muted panel with a large heading and solid button; the divider is a plain two-line rule with a centered label (`role="separator"`); the secondary offer below uses smaller type and a ghost button to read as lower priority.
- Both buttons are inert links (`render={<Link/>}`) pointing at `#` by default; there is no real trial-start or tour playback 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.