Design System

Sticky mobile CTA

The persistent bottom conversion bar on mobile (<768px), present for the entire scroll. It was the single highest-leverage missing element on the site: a visitor 6,000px into an 8,700px mobile scroll had to hunt for a CTA. Mounted on /weight-loss, the home page, and both PDPs — same build, several times the conversion surface.

It renders two things, and the second is the load-bearing one. The fixed bar, and an in-flow spacer of the same height. The page therefore grows by exactly the bar height on mobile and by nothing on desktop, which is how the footer's MSO/503A disclosure is guaranteed to clear it — rather than every consuming page remembering to add its own bottom padding, which is the kind of thing that survives review once and regresses on the next page.

It is a server component: no state, no effects, no JavaScript. The bar is in the HTML and works with JS disabled, which matters because it is the primary conversion path on a page required to render without it.

The statusDot prop exists and nothing passes it. An availability signal may render only if it is truthful and dynamically sourced; @halwel/serviceability is still Phase 0 with a hardcoded launch state and an explicit “structural placeholder, not a compliance assertion” warning, so there is no honest source. A hardcoded “in stock” line is a claim, not decoration. The prop is here so wiring it later is a prop change rather than a redesign.

import from @halwel/ui/components/marketing/StickyMobileCta

Variants

Pill only — what ships today

… the tail of a long scroll. On the real page this is 8,700px of content, and before this component the visitor had no CTA in reach anywhere below the hero.

With an availability line — BLOCKED, shown for reference

… the tail of a long scroll. On the real page this is 8,700px of content, and before this component the visitor had no CTA in reach anywhere below the hero.

Check your eligibility →

Example only — not a real supply signal

do not ship this until the text comes from live serviceability/inventory state