Worth Keeping CTA
A minimal, full-bleed closing call-to-action on an inverted (bg-foreground text-background) monochrome treatment: a giant, faint word-marquee loops behind a single centered circular seal-style button, with no heading or paragraph at all.
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/worth-keeping-cta.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta69.tsx instead.
Usage
The file also exports cta69Demo, 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 { Cta69, cta69Demo } from "@/components/blocks/cta/cta69"; export default function Page() { return <Cta69 {...cta69Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| buttonLabel | string | "Worth keeping" | Label inside the circular seal button. |
| buttonHref | string | "#" | Href for the seal button. |
| marqueeText | string | "BUILT TO LAST" | Word/phrase repeated in the looping background marquee. |
| marqueeSpeed | number | 30 | Marquee loop duration in seconds, lower is faster. |
| className | string | none | Extra classes for the outer section element. |
Behavior notes
- The marquee is pure CSS: a scoped @keyframes translateX loop on a duplicated, doubled-width text row (aria-hidden, non-interactive, `motion-reduce:animate-none`), no JavaScript animates it.
- Deliberately monochrome/inverted (`bg-foreground text-background`) as a one-off closing-CTA treatment, same semantic-token discipline as the rest of the category, just flipped; the seal button overrides the outline variant's default colors with `border-background`/`text-background` so it reads correctly against the dark section.
- No heading or paragraph by design, just the marquee and a single button, this is the minimal 'last thing on the page' variant.
- Fully static Server Component: no event handlers, no client state.
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.