// components/hero-mark.jsx // // Unified hero brand mark — single SVG containing both rows of the // "Sports, but for the rest of us." graphic-match. The cream → peach // color split lands at the same X coordinate on both rows (verified // in scraps/option-a-alignment-check.html), so the entrance reads as // one coherent visual idea instead of two independently-sized SVGs. // // Row order (Y position): headline ON TOP, wordmark BELOW. The user // flipped this after the first build so the brand mark lands as a // "signature" after the thesis statement. The original Figma export // had wordmark on top — we keep its absolute path coordinates intact // and use two static wrappers to swap // the rows visually while leaving the X-alignment of the cream→peach // split untouched. // // Four animated groups, four-beat cadence with a pronounced pause // between the headline and the wordmark: // // Beat 1 — #g-sports "Sports," slides from LEFT @ 200ms // Beat 2 — #g-rest "but for the rest of us." slides from RIGHT @ 700ms // ── PAUSE ──────────────────────────────────────────────────────────── // Beat 3 — #g-fan "fan" slides from LEFT @ 1700ms // Beat 4 — #g-ish "ish." + dot slides from RIGHT @ 2200ms // // Path data extracted verbatim from the Figma-exported combined SVG // (uploaded as uploads/COPY-...svg, archived as scraps/option-a-combined.svg). // // Replaces the prior split HeroWordmark + HeroHeadline components. Those // files remain on disk for reference but are no longer loaded. const HERO_MARK_HEADLINE_TY = -350; // headline rises into the top slot const HERO_MARK_WORDMARK_TY = 380; // wordmark drops further for breathing room const HERO_MARK_WORDMARK_TX = 695; // and shifts right to center horizontally, // breaking the cream→peach X-alignment with // the headline (intentional, per user). // Wordmark mid-X in original paths = 1155; // viewBox mid-X = 1850 → shift = 695. // Gap between rows after translates = (752 + 380) − (1260 − 350) = 222 SVG // units. Tweak these constants if the user wants tighter/looser spacing. function HeroMark() { return (

); } window.HeroMark = HeroMark;