Modals

Live source: Dr. Leigh Connealy

Modal

Sticky bottom bar

Sticky bottom bar (Doctor)

Figma source: Paid-Ads-LPs → Latest → 847:4047 (mobile 847:4034). The Doctor / Paid Ads bar.

Same component as the bar above — the only differences are content: the clinician's round avatar in place of the product shot, and the offer restated as Free: Dr. Connealy's 8 bonus markers / Auto-applied when you join through this page.

imageSrc and imageRounded are new optional props; the default bar passes neither and renders byte-identically.

Scroll Offer Modal

The Grüns-style once-per-session offer interstitial, built for the PDP recipe. The modal markup lives HERE in the section (every string is a normal builder text slot, the image a normal image slot); ScrollOfferModalPreview (appended last) owns the trigger and presentation state.

On live pages the overlay ships closed (SSR final state — the section is invisible and zero-height) and opens once per session (sessionStorage) when the visitor scrolls past ~45% of the page or, on hover-capable devices, moves the pointer out through the top of the viewport. Dismiss via the X, the backdrop, or Escape; reduced motion drops the transitions. In the builder editor canvas (static preview runtime) the driver never runs and the stylesheet re-flows the overlay as an open in-page band, so everything is visible and editable there.

The default image is a relative /lp-assets/... URL: it resolves on every LP host AND in the builder canvas (dev serves content/lp-assets directly; the deployed builder rewrites /lp-assets/* to the lp-server origin — an asset only 404s remotely until its content commit is pushed). In interactive design-gallery previews the section renders as an empty band (the modal is closed until its trigger fires); use the builder canvas to see it open.

Biomarker Modal

The PDP's "What the 100+ panel measures" dialog (CRO-PDP testing Figma 1SsiG9YladWmn8Xg0Z0KMl, node 133:2, holder 47:2). The modal markup lives HERE in the section — every category name, count, marker line and the CTA are normal builder slots; PdpBiomarkerModalPreview (appended last) owns the trigger and presentation state.

On live pages the overlay ships closed (SSR final state — invisible and zero-height) and opens on any click of a data-pdp-biomarker-modal-trigger element anywhere on the page — the buy box's "+N more" chips and the brand band's "See all 100+ biomarkers" CTA both carry it. Re-openable (it is reference material, not an interstitial); dismiss via the X, the backdrop, or Escape. In the builder editor canvas the stylesheet re-flows it as an open in-page band for editing.

The categories, counts and marker lists are the library's real ones (biomarkers.mdx — Heart & Vascular 17 · Liver 13 · Kidney 9 · Sex Hormones 8 · Nutrients 19 · Thyroid 4, selections shown). Never retype or invent a clinical number; the honest "a selection is shown" note carries the partial lists.

Fullscreen Offer Modal

The PDP's full-screen scroll / exit-intent interstitial (CRO-PDP testing Figma 1SsiG9YladWmn8Xg0Z0KMl, node 251:168): an edge-to-edge clinic photograph, a two-line display headline, the panel's category chips with A/B grade avatars, and one CTA. Reuses the ScrollOfferModalPreview driver (same data-scroll-offer-* contract — once-per-session scroll depth / exit intent, dismiss via X, backdrop, or Escape). The card cancels the overlay's padding with a negative margin so it fills the viewport.

Purchase Toast

The PDP's floating bottom-left social-proof toast: every 15 seconds one real Trustpilot review (names + titles from the review-widget's verified set) slides in for 8 seconds above the sticky bar, with a draining progress bar and a session-wide dismiss. PdpPurchaseToastPreview owns the cycle; the items here are ordinary editable slots.