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. Ported 1:1 from Figma Paid-Ads-LPs → Latest, desktop node 796:72 (1512 × 972) and mobile node 847:11094 (393 × 855).

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

No navbar sits above this. The reference frame starts at y=0 with the hero, which is deliberate for paid traffic. The template ships without a navbar section rather than with a hidden one.

Want the warm version? Pick Hero Author / Tinted below instead — it is a sibling variant, not a toggle on this one. Two variants rather than one variant plus a page add-on because the two need different assets: the tinted hero stands a cut-out portrait on a gradient, and this one seats a studio portrait in a rounded card.

The portrait fades out at the bottom via a mask-image, not an overlay. An overlay has to pick a colour, and the first pass picked white — which is right where the desktop gradient ends but wrong on mobile, where the portrait sits at the TOP of a section that is grey there. A mask fades to whatever is behind it, so one rule works at both breakpoints.

Two portrait uploads, desktop and mobile, for the same reason as Hero Influencer Special: the desktop crop is a 624 × 780 portrait and mobile is a 345 square, and one file cannot serve both. Both are loading="lazy" so exactly one downloads per device, and fetchpriority="high" keeps the visible one an LCP candidate. Unlike the Aoki hero there is no scrim — the copy sits beside the photo, not on it.

Measured ladder: section padding 1.6875rem/1.5rem block on mobile → 6rem at 992; copy column 32.1875rem wide against a 39rem × 48.75rem visual, justify-between inside the 80rem container; child gap 1rem → 1.5rem. Type steps 40/42 → 60/64 on the headline, 16/22 → 18/26 on the body, and both carry -0.005em/-0.025em tracking measured off the reference rather than the type-* ladder, which steps at different sizes.

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

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.