∞ forever components

Marketing Sections

CTA Banner

A centered call-to-action band on a slowly shifting amber-to-tan gradient, with a rotating eyebrow tag, a bold headline, a subline, a white primary button with a sweeping sheen and a ghost outline button.

csslight complexitysubtle motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Closing sections of landing pages, marketing hero footers, signup/upgrade prompts, or any spot that needs a single strong conversion moment.

When not to

When you need multiple competing actions, a form, or dense information — a CTA banner should carry one primary intent, not a menu.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit the headline (.ctb-head), subline (.ctb-sub), button labels (.ctb-primary / .ctb-ghost) and the rotating eyebrow tags array to your own copy. Recolor the band by changing --pro-accent and --pro-accent-2. Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent), and update the catalog bg field to match. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
  • gradient accents (--pro-accent, --pro-accent-2) and band shape (--pro-radius, .ctb-band width/padding)
  • copy (headline .ctb-head, subline .ctb-sub, button labels .ctb-primary/.ctb-ghost)
  • rotating eyebrow tags (tags array) and rotation interval (loop setTimeout 2800ms)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • :root --pro-* token block (renaming breaks the shared pro theming API)
  • role=img + aria-label on .ctb-stage
  • IIFE wrapper
  • prefers-reduced-motion guard (CSS media query + JS early return to the static first tag)
  • visibilitychange pause on the eyebrow rotation
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
  • Single centered banner with two actions by design — not a multi-column layout
  • Button labels are non-wrapping (white-space:nowrap); very long CTA text will stack rather than reflow inside a button

ctacall-to-actionbannermarketingconversiongradientherobutton

More Marketing Sections components

  • Logo Wall MarqueeA 'Trusted by teams at' social-proof section: two rows of invented, purely geometric company marks on chips, marqueeing in opposite directions on a…