Plan-Led Centered CTA
A centered call-to-action led by an image tile with a floating pricing card overlaid on it (plan name, price, and a couple of features), followed below by an eyebrow, a large light heading, a paragraph, two accent buttons, and a small monospace reassurance line.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/plan-led-centered-cta.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta76.tsx instead.
Usage
The file also exports cta76Demo, 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 { Cta76, cta76Demo } from "@/components/blocks/cta/cta76"; export default function Page() { return <Cta76 {...cta76Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| image | MediaSlotImage | none | Image shown in the top tile. |
| planName | string | "Growth" | Plan name shown in the floating price card. |
| planPrice | string | "$49/mo" | Plan price shown in the floating price card. |
| planFeatures | string[] | none | Up to 2 short features shown in the floating price card. |
| eyebrow | string | "Simple pricing" | Small pill label above the heading. |
| heading | string | "Pick a plan and start today" | Light-weight centered headline. |
| description | string | none | Short supporting paragraph. |
| primaryLabel | string | "Choose Growth" | Label for the primary button. |
| primaryHref | string | "#" | Link target for the primary button. |
| secondaryLabel | string | "Compare plans" | Label for the secondary (outline) button. |
| secondaryHref | string | "#" | Link target for the secondary button. |
| reassuranceNote | string | "No credit card required" | Small monospace reassurance line below the buttons. |
| className | string | none | Extra classes for the outer section element. |
Behavior notes
- The floating price card is a static, absolutely-positioned mock with fixed demo copy; it does not reflect any live pricing/billing data.
- Both buttons are inert links (`render={<Link/>}`); no checkout or form logic is 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.