GF3-002: Rebuild the landing page structure to match GMX

[IbrahimIjai]

Context

With the theme in place (GF3-001), the landing page at / is rebuilt section-by-section
to mirror GMX's Home page. Read the GMX code as you build:
github.com/gmx-io/gmx-interface/tree/release/landing
— every component referenced below lives under landing/src/pages/Home/. The full
spec — render order, layouts, responsive behavior, reference screenshots, and a
GMX→SO4 section map — is 002_landing_page.md, with
permalinks to every GMX source file at the pinned commit. GMX's order is: HeaderMenu →
HeroSection (animated headline, CTA, live stats, feature grid) → LaunchSection (light
band) → LiqiuditySection (light band) → SponsorsSection (light band) → ProgramCards →
FaqSection → RoadmapSection → SocialSection (which includes the footer link row — GMX
has no separate footer). This issue is structure only: layout, components,
responsiveness, and wiring, using placeholder copy and placeholder visuals. Content
perfection is GF3-003.

Scope

• Rebuild apps/web/src/ui/landing/* into GMX's nine sections (rename/replace the
  existing hero/stats/features/markets/how-it-works/infrastructure/final-cta/footer
  set per the section map in 002_landing_page.md), composed from
  apps/web/src/routes/index.tsx.
• Fixed HeaderMenu with desktop nav, mobile burger full-screen menu (hairline-divided
  links, bottom social row), and btn-landing "Open app" → /trade.
• Hero: 100px display headline with the rotating-word slot (framer-motion
  AnimatePresence, 2.5s cycle, y 98→0→−98 — see AnimatedTitle.tsx permalink in
  the spec), "Trade now" CTA, subheadline, and the 3-stat row (Traders / Open interest /
  Total volume) reading from SO4's stats source with - loading placeholders.
• Feature card grid (lg:grid-cols-3 lg:grid-rows-3, six rounded-20 cards including
  one bg-blue-400 and one col-span-2 CTA card).
• Light bands: LaunchSection (chain launcher grid), LiqiuditySection (live total +
  pool cards with hover lift), SponsorsSection (logo card row) — pure-white and
  #F4F5F9 surfaces exactly as specced.
• Dark sections: ProgramCards (two program cards over the glow treatment), FaqSection
  (grid-rows accordion, no JS height measurement), RoadmapSection (horizontal
  quarter timeline with completed/upcoming states), SocialSection (marquee skeleton,
  community stats + newsletter form, footer link row).
• Newsletter form, social links, and footer links wired to SO4's real endpoints/URLs
  (placeholder handlers where a backend doesn't exist yet).
• prefers-reduced-motion respected for the marquee and title rotation.

Acceptance criteria

• All nine sections render in GMX's order at /, responsive at 390px / 768px /
  1440px, matching the layouts in 002_landing_page.md.
• Light/dark band rhythm matches the spec (hero dark → launch white →
  liquidity/sponsors #F4F5F9 → programs→footer dark).
• Stats render live values when available and - while loading; no layout shift
  when values arrive.
• FAQ accordion, mobile menu, and roadmap scroll work with keyboard and touch;
  focus states visible.
• bun run check:tokens, typecheck, and test pass; visual-regression baselines
  for / regenerated and reviewed in the PR.
• Placeholder copy is clearly marked (TODO(GF3-003)) so finishing work is
  greppable.

Out of scope

• Final copy, real partner/tweet content, recreated image assets, and pixel-perfect
  parity polish — all GF3-003.
• Theme tokens themselves (GF3-001); this issue consumes them.
• The /builders, /trader-affiliate-program, and terms pages GMX also ships.

[codefather2026]

Hi maintainer, i will like to solve this issue

[0xMegie]

Hi @IbrahimIjai — I'd like to be assigned to GF3-002.

My reading of the issue

GF3-001 landed the theme; this issue spends those tokens. It is the skeleton pass:
nine sections in GMX's exact render order at /, correct layout, responsive behaviour
and full wiring — but with placeholder copy and placeholder visuals, every one marked
TODO(GF3-003) so the finishing work stays greppable. The moment I'm polishing copy or
recreating hero art, I've crossed into #511 and I stop.

Render order I'm building to: HeaderMenu → HeroSection → LaunchSection → LiqiuditySection → SponsorsSection
→ ProgramCards → FaqSection → RoadmapSection → SocialSection

The band rhythm is the structural spine, not decoration: dark hero → pure-white Launch →
#F4F5F9 Liquidity/Sponsors → dark from ProgramCards through the footer row. GMX ships
no separate <footer> — the footer link row lives inside SocialSection, so today's
footer/ component gets folded in rather than kept alongside.

Concretely this is a rename/replace of apps/web/src/ui/landing/* (currently
hero/stats/features/markets/how-it-works/infrastructure/final-cta/footer) per the
GMX→SO4 section map, recomposed from apps/web/src/routes/index.tsx. I'll read
landing/src/pages/Home/ in gmx-io/gmx-interface at the pinned commit alongside the
spec rather than eyeballing the live site.

Plan

One PR, reviewable commit per section, so the band rhythm can be judged as a whole:

1. Shell — fixed HeaderMenu: desktop nav, mobile burger full-screen overlay with
   hairline-divided links and the bottom social row, btn-landing "Open app" → /trade.
   Section scaffold and the 1200px column go in here so spacing is reviewable on day one.
2. Hero — 100px display headline with the rotating-word slot: AnimatePresence,
   2.5s cycle, y 98 → 0 → −98, following AnimatedTitle.tsx. The slot gets fixed
   width/height so rotation never reflows the headline. Then the "Trade now" CTA,
   subheadline, and the 3-stat row (Traders / Open interest / Total volume) from SO4's
   stats source, rendering - while loading with reserved width so values landing
   causes no shift.
3. Feature grid — lg:grid-cols-3 lg:grid-rows-3, six rounded-20 cards, one
   bg-blue-400, one col-span-2 CTA card; collapsing cleanly at 768 and 390.
4. Light bands — LaunchSection (chain launcher grid), LiqiuditySection (live total +
   pool cards with hover lift), SponsorsSection (logo card row), on exactly the specced
   pure-white and #F4F5F9 surfaces.
5. Dark tail — ProgramCards over the glow treatment; FaqSection as a
   grid-template-rows: 0fr → 1fr accordion so there is no JS height measurement, as
   specced; RoadmapSection as a horizontal quarter timeline with completed/upcoming
   states; SocialSection with marquee skeleton, community stats, newsletter form and the
   footer link row.
6. Motion, a11y, gates — prefers-reduced-motion kills the marquee translation and
   pins the title to one word (no cross-fade substitute). Keyboard paths: FAQ rows are
   button + aria-expanded, mobile menu traps focus, closes on Esc and locks scroll,
   roadmap scrolls by keyboard as well as touch, focus rings visible on the dark and
   light bands both. Then bun run check:tokens, typecheck, test, and regenerated
   visual-regression baselines for / reviewed in the PR.

Verified at 390 / 768 / 1440 against the spec layouts, with screenshots at all three
widths in the PR description.

Defaults I'll take unless you'd rather otherwise

• Placeholder visuals as neutral token-coloured blocks at the final aspect ratio,
  each carrying TODO(GF3-003) — so GF3-003: Landing page finishing — content, assets, and pixel parity #511 is a swap, not a re-layout.
• Newsletter, social and footer links wired to SO4's real endpoints/URLs where they
  exist; where no backend exists yet, a typed no-op handler plus marker rather than a
  dead button.
• LiqiuditySection — keeping GMX's spelling to match the spec and upstream file
  unless you want it corrected in SO4's tree.
• Stats — consuming whatever hook the app routes already use rather than adding a
  new fetch layer. Point me at the intended one if it isn't obvious.

Two blockers I'd like cleared

1. The spec link in the issue body resolves to
   github.com/SO4-Markets/interface/issues/002_landing_page.md and 404s — looks like a
   relative path rendered against the issues route. Could you confirm the real location
   (I'm assuming docs/gf_3/002_landing_page.md)? Everything above is reconstructed from
   the issue body plus GMX source; I want the section map, the pinned permalinks and the
   reference screenshots in hand before I start, since GF3-003: Landing page finishing — content, assets, and pixel parity #511 is judged against them.
2. Visual-regression baselines — regenerated locally and committed, or produced by CI on
   the PR? I'll follow whatever the repo already does.

Why me

I work daily in TypeScript/React with Tailwind and framer-motion, and this is exactly the
kind of build I'm fast at: reading a reference implementation closely and reproducing its
structure and motion rather than approximating it. I've shipped DeFi front-ends end to
end (hackathon wins at Base Onchain Summer and WalletConnect Build-On) and I'm already
familiar with this codebase's conventions — the token gate, the route structure, and the
landing tree as it stands today. Prior work in this org: #, #.

Timeline

Draft PR with shell + hero within 3 days of assignment so the band rhythm and title
motion can be reviewed early; all nine sections with every gate green within 7 days.
I'll comment if anything slips, and I'll un-assign rather than sit on it.

[grantfox-oss]

🦊 GrantFox — @0xMegie has been assigned to this issue as part of the Third Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #510)
2. Your PR will be reviewed by the SO4-Markets maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Third Campaign campaign!

@0xMegie's PR #616 was approved and merged by @IbrahimIjai.

🏆 @0xMegie: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (392 total points). Track your full progress on GrantFox.

👏 Great work, @0xMegie! Keep contributing to SO4-Markets.