Hero Header

Figma source: Node 2-1200

Each option is one responsive JSX block — desktop has wider layouts, larger headlines, and side-by-side CTAs; mobile stacks vertically with full-width buttons.

Node Inventory

Option 1

Option 2

Option 3

Option 4

Option 5

Option 6

Option 7

Option 8

Hero with Quote

Hero with Quote (Inverted)

Partnership Hero

Hero Podcast 1

Hero Podcast 2 (Description)

Hero Influencer Special

Ported 1:1 from the live wf.superpower.com/landing/steve-aoki section_sp2-home-hero.is-aoki-hero. A near-full-viewport rounded card: background photograph, copy left, and a KPI row pinned to the bottom. Built for portraits shot with the subject on the right and negative space on the left, which is what keeps the headline legible.

Two background uploads. The live page ships one pre-overlaid .avif; this variant takes a desktop image AND a mobile image, because the composition that works in landscape does not survive a portrait crop. The markup authors them loading="lazy", but at render time the shared media policy (live-media-policy.ts) flips hero-role images to eager, strips the img-level priority hint, and the server emits a media-qualified high-priority head preload per crop — the viewport's crop fetches first and at full priority; the hidden crop costs one low-priority duplicate download. A gradient scrim sits above both so white copy stays legible on any upload — the live Aoki asset has that gradient baked in, which a fresh upload will not.

The KPI row sits bottom left, under the copy, exactly as the reference renders it. To move it right instead, add self-end and swap pl for pr on that row.

Ladder measured at 1512 / 900 / 700 / 390: card height 100dvh - 5.5rem with a 5.5rem top margin on desktop, full 100dvh and no margin below 992; inner padding 4rem → 3rem → 1.5rem bottom with the left inset dropping to 0 at ≤767 (the copy carries 1.5rem/1.25rem of its own there); radius 0.75rem on desktop, square below 992 where it goes edge to edge.

Hero Partnerships

Built from Kevin's co-branded frame (Co-branded Landing Pages, node 1429-4082). Differs from Partnership Hero in three ways that matter, which is why it is its own variant rather than an edit of that one:

• The partner mark stands alone above the headline at ~45px, instead of sitting in a superpower | partner lockup at 15px. Superpower's own wordmark is carried by the navbar. A 15px slot suits a pure wordmark like VAST's; it strands any logo that has a symbol in it (YPO's triangle rendered 39x15 against Superpower's 151x22).
• The media column is 4:5 portrait and sized larger than the copy column (624 vs 515 in the design), for a full-bleed composite rather than a square product shot.
• The copy column is vertically centred against that taller media, not stretched to match it.

The media slot takes a single composite export — the digital twin with its annotation callouts is one flattened image, not rebuilt as DOM. Leader lines and floating value cards depend on exact positions against the render; reproducing them in markup would drift the moment the image is swapped, and the whole point of the slot is that partners swap it.

Hero Author / Light

The opener of the Doctor / Paid Ads layout, rebuilt against Website-CRO → Latest on 2026-08-22 — desktop node 398:5778 (1512 × 896), mobile 414:8016 (393 × 855). The earlier Paid-Ads-LPs 796:72 frame is history.

An editorial hero: a byline under the headline puts a named clinician's authority on the page before anything else does. Copy left and a square media card right on desktop; on mobile the card goes first, full-width, and the copy follows — that inversion is in the reference and it is what makes the photograph the first thing on a paid-traffic mobile landing.

No navbar sits above this. The reference frame starts at y=0 with the hero. Pages that want one add the minified nav section; the template does not ship a hidden one.

One upload, not two. The desktop and mobile exports were byte-for-byte the same composition at 1035 and 1408, so this hero ships the 1408 only: a 44rem box at 2× and a 345 box at 4×. That also sidesteps a trap worth knowing — a hero rendered as two CSS-hidden crops downloads both files on every visit, because display:none does not cancel an eager fetch and live-media-policy sets loading="eager" on everything carrying data-lp-media-role="hero". Measured at 1.6Mbps: 175KB fetched to paint a 100KB picture. srcset does not fix it either, because the preload emitter writes a plain href instead of imagesrcset, so the preload and the srcset pick different candidates.

The media card is a baked composite. The reference layers dashboard cards between two copies of the photograph (so the cards read as behind her) and then sets the Clinicians' Choice lockup over the bottom. All of it is one upload per breakpoint — replacing either file loses the dashboard cards and the lockup, so re-export 409:7140 / 414:8752 instead of swapping in a bare photo. The card is square at both breakpoints (704 desktop, 345 mobile), which is why there is no aspect switch.

Measured ladder: section padding 1.6875rem / 1.5rem block on mobile → 6rem at 992; copy column 32.1875rem (515) against a 44rem (704) card, justify-between inside the 80rem container; child gap 1rem → 1.5rem. Type steps 40/42 → 60/64 on the headline and 16/22 → 20/28 on the body, whose colour is the reference's literal #52525b. The body is capped at 29.4375rem (471) because the reference sets it narrower than the column it sits in.

Deleting any row is safe: the copy column spaces its children with gap, never margins, so removing the rating line, the byline or the paragraph closes the space instead of leaving a hole.

Want the warm version? Pick Hero Author / Tinted below instead — it is a sibling variant, not a toggle on this one, because the two need different assets.

Hero Author / Tinted

The warm sibling of Hero Author / Light. Ported 1:1 from Figma Hero_V2 — 798:1446.

Why a variant, not a toggle. The first pass shipped this as a page-level add-on (addOns.heroTint) that recoloured the light hero. Gabriel, 2026-08-07: it belongs to choosing this hero, not to the page. It is also not a recolour — the two heroes need different assets:

Recolouring could never get there: the light hero's portrait carries its own pale studio backdrop, which reads as a panel floating on the tint rather than a subject standing in it. That was the visible defect in the add-on version.

The gradient is five measured stops of CSS, not an image. The reference composes it from a peach texture plus a rotated mix-blend-darken shape — the first pass shipped only the texture and came out visibly pinker and flatter, because all the depth lives in the blended layer. Sampling the composed result at six points and fitting one 107° ramp lands the same colour, weighs nothing, and means retinting the hero is a five-value edit rather than a new asset.