Skip to content

GF3-003: Landing page finishing — content, assets, and pixel parity #511

Description

@IbrahimIjai

Context

GF3-002 delivers the skeleton; this issue makes it ours and makes it exact. GMX's
landing gets its quality from details: the word-rotation cadence, hairline borders,
the pool-card hover parallax, light-band rhythm, and real numbers. The spec
(002_landing_page.md) embeds reference screenshots captured from https://gmx.io
under docs/gf_3/screenshots/ — this issue is done when SO4's landing matches them
section by section, with SO4 content. It also replaces every placeholder with final
copy and recreated assets (GMX's images are not public — equivalents must be produced,
see the "Assets to recreate" table in the spec).

Scope

  • Final copy pass for every section (headline rotation words, feature cards, FAQ
    questions/answers, roadmap milestones, program cards, footer) — reviewed against
    SO4 messaging; remove all TODO(GF3-003) markers.
  • Recreate visual assets: hero background, feature-card illustrations, chain logos,
    pool-card gradients/coin art, sponsor logos, program-card glow, social avatars —
    exported as optimized SVG/WebP under apps/web/public/landing/ and referenced via
    the theme's asset conventions.
  • Wire real content: live stats formatting (shortFormat/cleanFormatUsd
    equivalents per the spec), pool cards from the pools API, social links and counts,
    curated testimonial cards for the marquee.
  • Parity pass against docs/gf_3/screenshots/: section spacing (1200px column,
    py-80 sm:py-[120px]), hairline separators, type scale/tracking, button hover/active
    gradient overlays, 180ms transitions, marquee pause-on-hover.
  • Accessibility and performance finish: semantic landmarks/heading order, alt text,
    prefers-reduced-motion verified, image width/height set (no CLS), fonts
    preloaded, Lighthouse ≥ 95 on performance/accessibility/best-practices at mobile.

Acceptance criteria

  • Side-by-side screenshots (GMX reference vs SO4 implementation, desktop + mobile,
    every section) posted in the PR description; differences are either SO4 content
    or explicitly called out.
  • No TODO(GF3-003) markers remain; all copy approved by the maintainer.
  • All images optimized (SVG where possible, WebP otherwise) with dimensions set;
    no layout shift on load.
  • Live stats/pool data render real values on mainnet-data and degrade to -
    gracefully.
  • Lighthouse mobile scores ≥ 95 (perf/a11y/best-practices); check:tokens,
    typecheck, test, and the visual-regression suite all pass with updated
    baselines.

Out of scope

  • New sections or content beyond the GMX structure (extra pages, blog, i18n).
  • App-route theming or components outside the landing route.
  • Analytics/tracking events beyond what already exists on the route.

Metadata

Metadata

Assignees

No one assigned

    Labels

    GrantFox OSSIssue tracked in GrantFox OSSMaybe RewardedIssue may be eligible for a GrantFox rewardThird CampaignCampaign: Third Campaign

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions