// Editorial — new marketing-page components for the 2026 redesign. // Built to express the asset / sovereignty / democratization positioning. // --------------------------------------------------------------------------- // EditorialHero — left-aligned headline with vertical fire rule + side image // title accepts plain string or array; wrap an italic-fire span via // --------------------------------------------------------------------------- const EditorialHero = ({ eyebrow, title, body, ctas = [], image, imageAlt = "", caption, variant = "default", // "default" | "compact" }) => (
{eyebrow ?
{eyebrow}
: null}

{title}

{body ?

{body}

: null} {ctas.length ? (
{ctas.map((cta, i) => ( ))}
) : null}
{imageAlt}
); // --------------------------------------------------------------------------- // AssetNumbers — three confident serif callouts (replaces SpecBar in hero) // --------------------------------------------------------------------------- const AssetNumbers = ({ items }) => (
{items.map((it, i) => (
{it.label}
{it.value}
{it.sub ?
{it.sub}
: null}
))}
); // --------------------------------------------------------------------------- // EditorialHeader — section heading with optional index + side lede column // --------------------------------------------------------------------------- const EditorialHeader = ({ index, title, lede, layout = "split" }) => (
{index ?
{index}
: null}

{title}

{lede ?

{lede}

: null}
); // --------------------------------------------------------------------------- // RolesGrid — three-column card system for the three Pyrra relationships // items: [{ num, name, who, gets, cta: { label, onClick } }] // --------------------------------------------------------------------------- const RolesGrid = ({ items }) => (
{items.map((it, i) => (
{it.num}

{it.name}

{it.gets}

Who they are{it.who}
{it.cta ? ( { e.preventDefault(); it.cta.onClick && it.cta.onClick(); }} > {it.cta.label} ) : null}
))}
); // --------------------------------------------------------------------------- // RolesGraphic — two-party relationship diagram. The Owner-Host (the same // entity who buys the Node and hosts it on their property) on the left, // Pyrra in the center, the Inference Buyer on the right. Animated orange // flow lines connect each party to the hub. Stacks on narrow viewports. // items: [{ tag, name, who, benefits: [{ tag, text }], cta }] // --------------------------------------------------------------------------- const RolesGraphic = ({ items = [] }) => { const slots = ["left", "right"]; return (
PYRRA Network
{items.slice(0, 2).map((it, i) => (
{it.tag || ""}

{it.name}

{it.who ?

{it.who}

: null} {it.benefits ? (
    {it.benefits.map((b, j) => (
  • {b.tag} {b.text}
    • ))}
) : it.gets ? ( {it.gets} ) : null} {it.cta ? ( { e.preventDefault(); it.cta.onClick && it.cta.onClick(); }} > {it.cta.label} ) : null}
))}
); }; const PillarsNum = ({ items }) => (
{items.map((it, i) => (
{it.tag ?
{it.tag}
: null}

{it.title}

{it.body}

))}
); // --------------------------------------------------------------------------- // DarkSection — full-bleed ink-900 panel for sovereignty / asset class moment // --------------------------------------------------------------------------- const DarkSection = ({ eyebrow, title, lede, principles = [] }) => (
{eyebrow ?
{eyebrow}
: null}

{title}

{lede ?

{lede}

: null}
{principles.length ? (
{principles.map((p, i) => (
{p.num || `0${i + 1}`}

{p.text}

))}
) : null}
); // --------------------------------------------------------------------------- // HostsGrid — 5-column broader fit grid (residential, campus, office, etc.) // --------------------------------------------------------------------------- const HostsGrid = ({ items }) => (
{items.map((it, i) => (
{it.icon}

{it.name}

{it.body}

))}
); // --------------------------------------------------------------------------- // HostsImageCards — boxed cards with real images and subtext beneath. // items: [{ name, body, image }] // --------------------------------------------------------------------------- const HostsImageCards = ({ items = [] }) => (
{items.map((it, i) => (

{it.name}

{it.body}

))}
); // --------------------------------------------------------------------------- // HostsBoxes — single composite "skyline" graphic. Five stylized building // silhouettes share a baseline; each contains a small fire-colored Node box // at the mechanical-room position; labels and one-liners sit beneath. // items: [{ name, body }] in skyline order. // --------------------------------------------------------------------------- const HostsBoxes = ({ items = [] }) => { // SVG silhouettes — each renders inside its own viewBox so widths can vary. // The Node marker is the small fire-orange square at the building's MEP spot. const buildings = { Residential: ( ), Universities: ( ), "Office Parks": ( ), Industrial: ( ), Government: ( ), }; return (
{items.map((it, i) => (
{buildings[it.name] || buildings.Residential}

{it.name}

{it.body ?

{it.body}

: null}
))}
); }; // --------------------------------------------------------------------------- // EditorialCta — full-bleed dark CTA strip (replaces the cta-band image) // Pass bgImage to use a photographic background with a darkening gradient. // --------------------------------------------------------------------------- const EditorialCta = ({ title, body, ctaLabel, onCta, bgImage }) => (
{bgImage ?
: null}

{title}

{body ?

{body}

: null}
); // --------------------------------------------------------------------------- // MechSteps — 3-step staircase (how it works) // --------------------------------------------------------------------------- const MechSteps = ({ items, variant }) => (
{items.map((it, i) => (
{it.image ? (
) : null}
{it.num || `0${i + 1}`}

{it.title}

{it.body}

))}
); // --------------------------------------------------------------------------- // BriefBlock — large left headline + multi-paragraph right column // --------------------------------------------------------------------------- const BriefBlock = ({ headline, paragraphs = [] }) => (

{headline}

{paragraphs.map((p, i) =>

{p}

)}
); // --------------------------------------------------------------------------- // PullStatement — big serif manifesto line with eyebrow + bold orange mark. // Used as a typographic breathing room between dense sections. // --------------------------------------------------------------------------- const PullStatement = ({ tag, children, attribution }) => (
{tag ?
{tag}
: null}

{children}

{attribution ?
{attribution}
: null}
); // --------------------------------------------------------------------------- // NodeAdvantage — bold dark callout that pairs three quick stat cards with a // large-type statement contrasting Pyrra Nodes against traditional data // centers. Used on the Nodes page as a featured visual moment. // --------------------------------------------------------------------------- const NodeAdvantage = () => (
The Pyrra advantage
<30ft² Smaller than a coat closet
Local Faster inference, better rates
0 New environmental or community impact

Pyrra nodes provide faster inference at better rates and require less space than a coat closet. All the benefits with none of the negative environmental or community impacts.

); // --------------------------------------------------------------------------- // Marquee — single oversized display word as a typographic section divider. // Use sparingly for visual rhythm between sections. // --------------------------------------------------------------------------- const Marquee = ({ children }) => ( ); // --------------------------------------------------------------------------- // ScarcityNote — first-run callout. Giant numeral on the left, body and supply // facts on the right. Used on Home and Nodes pages to make the limited // initial allotment explicit. // --------------------------------------------------------------------------- const ScarcityNote = ({ onCta, ctaLabel = "Buy a node", compact = false }) => { if (compact) { return (
Own The First 100

Only one hundred nodes ship in the inaugural run.

Nvidia silicon is allocated by quarter and host buildings have to qualify before a node is committed. Reservations are first-come, first-served.

); } return (
Own The First 100 nodes worldwide

Be among the first to own a Pyrra node.

  • GPU supply Nvidia silicon is contracted by quarter, supply is limited.
  • Host qualification Site approval is required before a node is allocated.
  • Allocation order First-come, first-served by reservation date.
); }; Object.assign(window, { EditorialHero, AssetNumbers, EditorialHeader, RolesGrid, RolesGraphic, PillarsNum, DarkSection, HostsGrid, HostsBoxes, HostsImageCards, EditorialCta, MechSteps, BriefBlock, PullStatement, Marquee, NodeAdvantage, ScarcityNote, });