[gregv]

Summary

Follow-up to the judging work: the pages that were still on the old look (assorted MUI Papers, LayoutContainer/TitleContainer from the retired nonprofit styles, gradient CTAs) now use the refined civic-editorial design that covers the rest of the site. Presentation only — every page keeps its Head meta, getStaticProps/getStaticPaths, JSON-LD and GA events; where SEO plumbing was wrong it was fixed (see below).

New shared pieces (src/components/design/)

• RefinedPage.js — RefinedPage (RefinedRoot + .ohx-wrap section that clears the 64px NavBar), PageMasthead (eyebrow → the page's one <h1> with an optional italic accent → lead), BackLink, Prose, LinkRow (one primary + soft links), CtaBand (navy closing band).
• .ohx-prose in refined.js — long-form typography (Fraunces h2/h3, 70ch measure, accent list markers, navy links) that also restyles MUI Typography inside it, so the existing /about/why article bodies read correctly.

Pages migrated (15)

• /404 — random sleeping image in a reserved 4:3 card, one primary CTA; 404_error GA event kept.
• /contact — form logic untouched (validation, reCAPTCHA, ?type= / ?hearts= prefill, contact_form_submit/_error events). MUI fields under refinedFormTheme; 2:1 layout on desktop, stacked on phones. Fixed a pre-existing bug: the "Common inquiries" quick picks for Mentor/Judge now go through the same read-the-guide-first dialog as the dropdown.
• /feedback, /about/why, /about/why/[title] (the 10 src/components/content/*Content.js bodies now use component="h2" and no inline 14px so they inherit the prose scale).
• /about/privacy-policy (the "Last updated" line printed today's date on every visit; it is now the date the text last changed, Oct 8 2026), /hack/liability-waiver, /hack/photo-release — legal text verbatim.
• /praise/[id], /hack/[event_id]/results, /hack/results — chrome only; HackathonResults/HackathonFunnel unchanged, with reserved heights so the ssr:false widgets don't shift the page.
• The four /about/success-stories/<slug> case studies are now plain story data objects rendered by src/components/SuccessStories/SuccessStoryLayout.js. Text is preserved field for field. Fixed on the way: their og:url pointed at a non-existent /success-stories/… path, two og:images 404'd (now CDN images), no canonical, no JSON-LD (Article + BreadcrumbList via serializeJsonLd), and two pages fired a duplicate manual pageview().
• /about/success-stories index: dropped the no-op <RefinedFonts/>, fixed a card grid that clipped at 375px, replaced its 404'ing og:image.

Still not refined (listed in CLAUDE.md for the next batch): the SEO pillar pages (/coding-for-nonprofits, /hackathon-for-social-good, /hackathon-judge-opportunities, /hackathon-judging-criteria, /volunteer/professional-development-volunteering, /about/hackers/software-engineering-career-path, /about/locations/asu-tempe-arizona), the tutorial pages (/about/judges/overview, /about/mentors/overview, /judge/overview), /about/hearts, /community-champions, /blog/[blog_id], /cert, /hack/[event_id]/{media,agenda}, /store/*. Intentionally left bespoke: the 12-years report, the style guide, print pages, the planning board.

Verification

• npx jest --ci: 77 suites, 564 passed.
• npx eslint on every touched file: clean.
• npm run build against the local backend: exit 0 (after the review fixes).
• Reviewed by Claude Opus 5.1; all should-fix items addressed (why-article prose styling, contact quick-pick dialog bypass, privacy date, unrelated file out of the commit) plus the nits (praise <h1>, results reserved heights + en-US number formatting, success-stories index, 404 priority, BackLink arrow aria-hidden).
• Not clicked through in a browser.

Test plan (please click through)

1. /contact — desktop: form left (wider) and aside right; phone: stacked, no horizontal scroll. Pick Mentor Opportunities from the dropdown and from the "Common inquiries" pills → both open the "read the Mentor Guide first" dialog; Cancel leaves the field unset, Continue sets it. Pick Hackathon Information → the "we have a page for that" note appears. Submit empty → inline errors; submit valid → "Thank you for reaching out." Open /contact?type=claim_reward&hearts=12 → type preselected and the message prefilled.
2. /about/why → cards per career stage with topic links and two highlight tags each; the "Make an impact" grid links work. Open any article (e.g. /about/why/open-source-contribution): image + title masthead, highlights card, body in Fraunces headings / 17px text (not tiny 14px), related-topic buttons, login block at the bottom.
3. /about/privacy-policy, /hack/liability-waiver, /hack/photo-release — narrow prose column, numbered/bulleted lists with terracotta markers, one primary "Become a sponsor" plus two text links at the bottom. Privacy "Last updated: October 8, 2026".
4. /about/success-stories/matthews-crossing-data-automation (and the other three): masthead, overview facts, challenge/solution cards, resources (open in new tab), impact band, navy CTA band. View source: <link rel="canonical" href="https://www.ohack.dev/about/success-stories/…">, og:url matching, two application/ld+json blocks. Saving One Life and Vidyodaya show their demo video in a 16:9 card.
5. /about/success-stories index at 375px wide: cards no longer clipped.
6. /hack/fall-2026/results and /hack/results: masthead + stat row, results/funnel widgets render below without the page jumping; back links work.
7. /praise/<id> from the praise board: <h1> reads "X praised Y", card below, "← Praise board" link.
8. /feedback logged out → login block; logged in → navy band linking to /myfeedback.
9. Any bad URL (e.g. /nope) → refined 404 with the sleeping image, homepage CTA, "let us know" link to /contact?type=technical.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
frontend-ohack-dev	Ready	Preview	Oct 22, 2026 7:02am UTC