Dual CTA
Two equal side-by-side call-to-action cards offering different paths, such as developers vs. designers or free vs. paid, each with its own icon, heading, description, and button. Unlike a comparison layout, neither card is visually secondary. Perfect for segmenting audiences.
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/dual-cta.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta29.tsx instead.
Usage
The file also exports cta29Demo, 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 { Cta29, cta29Demo } from "@/components/blocks/cta/cta29"; export default function Page() { return <Cta29 {...cta29Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Built for how you work" | Heading above the two cards. |
| description | string | "Two paths in, same great product on the other side." | Short supporting copy under the heading. |
| options | [CtaOption, CtaOption] | none | Exactly two equal-weight option cards, each with its own icon, copy, and button. |
| className | string | none | Extra classes for the outer section element. |
Types
interface CtaOption { icon: LucideIcon; title: string; description: string; buttonLabel: string; buttonHref: string; }
Behavior notes
- Layout only: a centered heading above a 2-column grid (stacks to 1 column on mobile); both cards share identical styling (same border, padding, and button variant) so neither reads as primary or secondary.
- Both buttons are inert links (`render={<Link/>}`) pointing at their own `buttonHref`, defaulting to `#`; there is no real audience-routing logic wired up.
- Icons are passed as `LucideIcon` component references in the `options` prop since this is a server component; a client version could not accept a function prop this way.
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.