Two Path Closing CTA
A closing call-to-action offering two routes side by side, separated by a vertical rule (a top rule on mobile). Each column has a title, a short pitch, a dotted-rule list of what to expect, and its own pill button, the left column solid, the right column outline.
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-path-closing-cta.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta80.tsx instead.
Usage
The file also exports cta80Demo, 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 { Cta80, cta80Demo } from "@/components/blocks/cta/cta80"; export default function Page() { return <Cta80 {...cta80Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Two ways to get started" | Centered heading above the two columns. |
| paths | [PathColumn, PathColumn] | none | Exactly two path columns: left renders with a solid button, right with an outline button. |
| className | string | none | Extra classes for the outer section element. |
Types
interface PathColumn { title: string; pitch: string; expect: string[]; actionLabel: string; actionHref: string; }
Behavior notes
- Both column buttons are inert links (`render={<Link/>}`); the left column always renders the solid/primary variant and the right column always renders the outline variant regardless of content.
- The 'what to expect' list items are separated by dashed hairline rules (`border-t border-dashed`) purely for visual rhythm, not an interactive checklist.
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.