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.

Hero Clinician

Kev's clinician-LP hero, ported from Figma Hero_Option 1 — 1121:1941 with the mobile stack from Mobile/Hero_Option 4 — 1112:9448 (2026-09-10, the four clinician pages: Froese, Tatem, Szal, Barnes-Lentz).

Not full-bleed on purpose. Kev asked to move the clinician pages off the Influencer Special card. The portrait sits LEFT in its own rounded card with a name + credential caption pinned to its bottom-left corner; the copy sits RIGHT: member rating line, H1, three check rows, one CTA. No subhead. The section ships no nav of its own, it goes directly under the regular Navbar section.

Measured ladder at 1512: card 732 × 885 inset 8px, radius 12; copy column 560 starting 96px after the card and vertically centred; caption inset 24 at 24/32. Below 992 the card becomes a full-width square (8px inset), the caption drops to 18/24 inset 12, and the copy stacks at 24px side padding with a 40/42 headline and a full-width CTA. Both breakpoints crop ONE upload with object-cover, so a portrait export works for both.

Reveal runtime LAST so no sibling index moves (slot paths are positional). Fold cap (2026-09-15, Gabriel: the hero ran past 100vh on desktop): Kev's 732×885 card plus the nav is 965px, taller than a 900px laptop viewport, so at 992+ the card keeps its 48.93% column (the split screen) and is h-[calc(100dvh - 5.5rem)] (nav 80px + the 8px inset) with aspect-auto, so hero + nav fill the first screen exactly on every desktop height and the portrait crops top/bottom to fit (a shrunk card left the copy floating left, and the earlier 885px cap left a gap under short heroes on tall screens; Gabriel 2026-09-15). At 100dvh = 973 it is pixel-for-pixel Kev's frame. Same paragraph on purpose: a new block before the toggle shifts the document index every slot path starts with.

Hero Clinician (Subhead)

Kev's clinician hero, second pass (2026-09-15, Kayla Barnes-Lentz + Sara Szal sign-off round). Same card-left / copy-right anatomy as Hero Clinician above, with the one addition Connor and DQ drew into the Figma copy pass: a 24/32 subhead between the H1 and the check rows (Hero_Option 1 — 1108:1255). Appended as its own variant so the four saved clinician pages on Hero Clinician keep their slot paths (an inserted sibling would have shifted every check-row and CTA edit).

The portrait carries an explicit sizes (48.93vw on desktop, full width below 992) so the optimizer's srcset lands on the 2× of the rendered card instead of a 100vw guess.

Hero Clinician (Frame 09-17)

Kev's clinician hero redrawn 2026-09-17 on all four frames (Ashley 1121:1941, Sara 1175:632). Three changes from Hero Clinician (Subhead), which is why this is appended rather than edited — #19 is live on /lp/kayla-barnes and every saved edit there is keyed to its slot paths. (1) The columns swap: copy left, portrait right. DOM order is unchanged — the portrait is still the first child, so mobile keeps image-over-copy — and min-[62rem]:flex-row-reverse does the swap; with the same 48.93% / 35rem / 6rem gap that reproduces Kev's geometry exactly (portrait 732 wide ending 8px off the right edge, copy starting at x=116 on his 1512 frame). (2) The name chip leaves the portrait and becomes a 48px round avatar + name + "Updated on 9/2026" directly under the H1 (1438:4934); the three check rows stay in the markup under the subhead for pages that still want them, hidden per page with a hide edit. (3) A badge bar (1438:4902, 686×167, inset 23px from the portrait's bottom corners) sits over the photo — bg-black/16 + backdrop-blur-[2.25rem] is a real blur over the portrait, not a baked gradient, so the freshly baked portrait stays its own layer. EVERY measure inside it — the 23px inset off the card, the 28px padding, the 44.036px/21.719px type, the 258px seal, the 73px gutter — is a cqw fraction of the card (@container), because the card is a fixed fraction of the viewport: at 992 it is 479px wide and a fixed 44px "100+ Clinicians" would overflow the bar. The inset has to be cqw too, not inset-x-6: a fixed inset eats a bigger share of a small card, which squeezed the flexible text column harder than the type shrank and wrapped the headline at 992. The laurel seal is Kev's artwork exported whole (/lp-assets/clinicians-choice-seal-e075c9.svg, node 1438:4907 with the Figma page background stripped) and is deliberately NOT a slot — never rebuild the wreath by hand. Fold cap as on #18/#19: h-[calc(100dvh-5.5rem)] on the portrait at 992+, so hero + nav fill the first screen exactly and the portrait crops top/bottom instead of the column shrinking. One deliberate difference from #19: the copy column is NOT shrink-0. Between 992 and ~1100 the 48.93% card + 6rem gap + 35rem copy is wider than the row, and a shrink-0 copy column is pushed out of the row — to the left here, where flex-row-reverse puts the overflow, so the headline would be cut off by the section's overflow-hidden. Letting it shrink costs nothing above ~1100 (there is 108px of slack at 1512, so the column still measures 560 and still starts at x=116) and keeps the text on screen below it.

Hero Symptom Tags

Kev's women's symptom listicle hero (2026-09-25, desktop 2300:9890, mobile 2290:2840). Copy left, photo right, and seven glass symptom tags over the photo instead of #20's badge bar. The photo is its own layer (the Figma rectangle 2300:9892 exported at 2x) and every tag is live text, so a page can rename a symptom without a re-export. The card sits flush under the nav and 8px off the right edge exactly as drawn (calc(50% - 1.5rem) wide, 732 at 1512), with the same fold cap as #18–#20: its height is Kev's 885/732 ratio but never more than 100dvh minus the nav, so hero + nav fit the first screen and the photo crops instead. Tags are positioned in % of the card (mobile values from the 377² frame, desktop from the 732×885 card) and sized in cqw, so they scale with the card: 56/732 tall on desktop, 28/377 on mobile, the same 7.6% either way. On mobile the card is square with 8px side margins and the copy sits under it. Kev's 09-28 round moved the three trust badges into the hero, under the CTA (left-aligned on desktop, centred on mobile), so pages on this variant drop the separate LP Badges section.

Hero Clinician (Wide Copy)

Hero Clinician (Frame 09-17) with a 35rem copy column instead of 32.1875rem, so a two-word line like "recommends Superpower" (544px at 48px) stays on one row (Sara Szal, 2026-10-01: the type size stays, the portrait gives way). The portrait is min(40rem, row - 37rem) wide and square, so the 35rem column plus a 2rem gap always fit: 640 at 1440+, 608 at 1280. Same DOM as #20, so a page swaps between the two without losing a single edit.

Hero Partner Tint

Port of the Webflow co-branded hero on superpower.com/sequoia (also /alliantpnw, /transformation-capital): a rounded full-width card over a wave photo, superpower | partner lockup, gradient headline, white pill CTA and a tablet render bleeding off the bottom. The partner logo is a slot. The card's colour comes from the page's heroTint add-on: applyLiveHeroTint derives four tones from one picked colour and stamps them as --lp-hero-tint-* on [data-lp-hero-tint]; unset, every var falls back to the Sequoia green.

Hero Superpower Tint (No Logo)

Hero Partner Tint without the partner: Superpower's wordmark alone and a fixed graphite card, for partners whose logo or colour does not hold up on the photo (Renee, 2026-10-07: "no client logo at all, just superpower and fixed background"). Not wired to the heroTint add-on on purpose. Same DOM as #23 minus the divider and logo, so the copy slots line up for editors.

Hero Symptom List (Cutout)

Alex's hero image test arm for the women's symptom listicle (2026-10-08, Figma 2593:14884, "Hero image B · older woman"). Same copy column and DOM as #21, so a page swaps between the two without losing an edit; only the photo card differs. Instead of #21's glass tags the seven symptoms run down the left as a list (the active one full white, the rest at 60/40%) beside a tick ruler, and the subject is a cutout of the same photo laid OVER the list, so the words pass behind her head. Three layers, never flattened: background photo, list + ruler, cutout. The photo is width-fit with object-top everywhere and the list is placed in cqw, so it stays registered to her head at any card height; on mobile the square card crops the bottom of the shirt.