Sticky CTA Bar

A persistent bottom CTA bar for mobile/tablet (lg:hidden) — the highest-value real estate on a phone. Slides in once the visitor scrolls past the hero, keeping the primary conversion one thumb-tap away.

src/components/growth/StickyCtaBar.tsx · live demo: /components/sticky-cta-bar

Usage

Mount once at the app shell:

---
import StickyCtaBar from '../components/growth/StickyCtaBar.tsx';
---
<StickyCtaBar client:idle />

Props

Prop	Type	Default	Description
`enabled`	`boolean`	`true`	Master switch.
`label`	`string`	`Get Velocity X — from $4,995`	Button text.
`href`	`string`	`/pricing`	Button target.
`showAfter`	`number`	`700`	Show after scrolling this many px (past-the-hero intent).
`excludePaths`	`string[]`	checkout/contact/…	Path prefixes to suppress on.

Behaviour

Mobile/tablet only — desktop is excluded because the header CTA is always visible there.
Appears after showAfter px of scroll (an intent signal), slides up from the bottom.
Dismissible; stays dismissed for the session (velocity.stickycta.dismissed).
Respects the iOS safe-area inset.

Events

Fires cta_clicked with { location: 'sticky_bar', label } on tap.

Accessibility

Real <a> link (keyboard + screen-reader friendly), visible dismiss button with aria-label, dark-mode, reduced-motion aware.