enhance(onboard): simplify Overview, extract shared OnboardingCard, use theme tokens

[plind-junior]

Summary

Onboard page cleanup: reduces the Overview tab to a focused two-audience layout (miner / maintainer), extracts the OnboardingCard styling pattern into a shared component, and replaces local hex color constants with existing theme tokens.

Changes

Overview tab (AboutContent.tsx)

• Reduced from 823 → ~73 lines.
• Stripped landing-page-style decoration (hero animations, count-up stats, gradient CTAs, decorative section markers).
• Rewrote around two audience cards aligned with the homepage panel:
  • Become a miner (blue accent) → /onboard?tab=getting-started
  • Become a maintainer (green accent) → /repository-registration
• Each card has primary CTA + Read docs secondary link.

Shared OnboardingCard (src/components/onboarding-card.tsx)

• New reusable component matching the existing homepage panel pattern:
  • surface.subtle background, border.medium border
  • 3px top accent stripe + top-down gradient glow
  • kicker / heading / body / two CTAs
• Accepts accent={(theme) => ...} so callers can recolor without hardcoding hex.
• Used by AboutContent to remove duplicated styling.

Onboard page (OnboardPage.tsx)

• Dropped the obsolete "Scoring" tab; merged "Languages" content back to a dedicated Languages tab.
• Active tab label now renders white (Mui-selected → common.white).
• Replaced the custom sliding-indicator nav with stock MUI <Tabs> / <Tab>.
• Removed decorative background grid + glow blobs.

Setup tab (GettingStarted.tsx)

• Replaced local const YELLOW = '#facc15' with STATUS_COLORS.info (blue) from the theme.
• Replaced local const GREEN = '#3fb950' with STATUS_COLORS.merged.
• Removed unused ArrowBackIcon import.

Rewards source (Scoring.tsx)

• Replaced local const AMBER = '#facc15' with theme token reference.

Why

• Page-level: trims marketing-style flourishes that don't belong on a documentation/onboarding page.
• Component-level: pulls the OnboardingCard pattern into one place so the homepage panel and the overview cards share styling rather than drifting.
• Theme: enforces the repo convention of referencing palette tokens (STATUS_COLORS, theme.palette.*) rather than redeclaring hex constants inline.

Test plan

• Visit /onboard — Overview tab shows two cards side-by-side (miner / maintainer).
• Click each card's primary CTA — navigates to /onboard?tab=getting-started and /repository-registration respectively.
• Switch between tabs — active label is white.
• Setup tab — blue accent appears where yellow used to (step pills, gradient bar, next-step button background).
• No console errors on tab switching.
• npm run type-check passes.

Out of scope

• Homepage panel deduplication: this PR extracts the shared OnboardingCard component but does not yet refactor HomePage.tsx to use it. That refactor is left as a follow-up to keep this change focused on the onboard page.

Screencast.from.2026-05-13.01-31-09.mp4

[plind-junior]

@xiao-xiao-mao double check

[ventura-oss]

Holding off on merge — the structural refactor is great (extracting OnboardingCard, slimming AboutContent 392→92, simplifying OnboardPage), but the color implementation runs counter to what the PR title says about "using theme tokens." The diff actually adds 52 hardcoded hex literals across GettingStarted.tsx (34) and Scoring.tsx (18):

Hex	Count	Notes
#ffffff	48	text/bg/border colors — theme.palette.common.white or theme.palette.text.primary
#facc15	4	yellow card accent — pick a status token (palette.status.warning etc.) or define a new one
#1d37fc	1	already exported as UI_COLORS.primary / theme.palette.primary.main
#000000	1	theme.palette.common.black

Two reasons this needs fixing before merge:

1. Project rule — components must route every color through theme.palette.* / alpha(theme.palette.*, ...) / named token exports, never raw #hex.
2. Light-mode regression risk — feat(theme): implement GitHub-aligned light mode with centralized col… #898 (GitHub-aligned light mode) is still open. color: '#ffffff' for body text would be invisible against the white canvas it introduces; alpha(theme.palette.common.white, X) will at least adapt to alpha(theme.palette.common.black, X) via overrides if you set the base from the theme.

Could you replace the hex literals with the semantic palette tokens? The structural extraction itself is solid — once the colors are reanchored to the theme, this is good to merge.

[plind-junior]

Thanks for the review. Will push the update soon

[anderdc]

Structural extraction is solid, but four things block merge:

1. Delete Scoring.tsx — don't rewrite it. This PR drops the Scoring tab from OnboardPage.tsx, so src/components/onboard/Scoring.tsx has no render site, yet the diff still rewrites it (+323/-118) as dead code. Remove the file. src/components/onboard/ has no index.ts, so there's no barrel entry to clean up. Also drop the now-dangling "See the Scoring tab for how rewards are calculated" line in GettingStarted.tsx — that tab no longer exists.

2. Export the new component through the barrel. src/components/onboarding-card.tsx sits under src/components/, which has an index.ts exporting every sibling component. Add export * from './onboarding-card'; to that barrel and change the import in AboutContent.tsx from '../onboarding-card' to '..'.

3. Update the PR description to match the diff. It describes the GettingStarted.tsx change as a color-constant swap that "removed unused ArrowBackIcon import" — the diff is a full copy/layout rewrite and adds the ArrowBackIcon import. Rewrite it to describe the actual Overview/Setup/Rewards redesign.

4. Drop the hardcoded emission percentages. The "two ways to earn" cards in GettingStarted.tsx show fixed shares ("30% emissions" / "10% emissions"). Emission share is now allocated per-repo per-competition, so a single global number isn't accurate — and baking an exact figure into the copy means the page has to be re-edited and re-reviewed every time the split changes. Describe the two tracks generically, without committing to a percentage.