Skip to content

Redesign: new light theme across the whole site - #77

Merged
getvindicated2day merged 11 commits into
mainfrom
claude/new-session-9rbbfp
Sep 30, 2026
Merged

getvindicated2day merged 11 commits into
mainfrom
claude/new-session-9rbbfp

Conversation

@getvindicated2day

@getvindicated2day getvindicated2day commented Sep 30, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Ports the redesign handoff prototype into the Next.js app, page by page: a new light theme (Plus Jakarta Sans, purple #9533A5), a new header and footer, and every page from the handoff.

Page Route What's new
Home / Hero with rotating words, research strip, phone notifications, stat rows, Price Is Right preview, campus chapters, follow links, AI scams, pillars, founder strikes, free resources
About /about Scroll-zoom photo slideshow, mission, founder strikes, founder video, quote band, what we provide
Team /team Campus filters incl. Leadership, outlined cards, video intros in a native <dialog> (portrait and landscape)
Projects /research 11 projects in 4 tracks, sticky scroll-spy nav, Price Is Right demo, 6-week timeline
Inspection /inspection Inspect-it-yourself engine explorer, where to get a PPI, accordion, scroll-driven PPI road
Fraud /fraud Pink slip tour, red flags as chats, yo-yo scene, four-square, fee receipt, APR slider, law cards, flip cards, brochure
Documents /documents Carfax page 1 and 2 scroll tours, Buyers Guide
Get Involved /join Chapters, roles, application (existing Brevo action, prefilled via ?chapter=&role=), general contact form
Dealer Map /map (new, unlisted) VINdisclaimer gate, methodology, category guide, link to the satellite map, news cards

How it's built

  • Styles: app/redesign.css is generated from the prototype by scripts/scope-prototype-css.py. Every selector is scoped under .rd, and keyframes get an rd- prefix, so legacy pages (/rights) are unaffected. Hand-written adjustments live in app/redesign-overrides.css.
  • Copy: all copy is in lib/i18n/dictionaries/en.json, under one namespace per page. Other locales fall back to English through the existing dictionary merge. The new page types are derived from en.json.
  • Components: sections live in components/sections/<page>/. Shared pieces are in components/sections/shared/: ScrollTour, CtaBand, PageHero, Rich, useInView, usePrefersReducedMotion.
  • Motion: every animation and scroll effect respects prefers-reduced-motion.
  • Roster: the team roster moved to lib/team.ts, with video intros added. Bios and positions still come from team.members.
  • Map: the handoff's Leaflet map is served from public/vindimap/index.html in snapshot-only mode. The Supabase publishable key is left out until the read-only policies in the handoff SQL have been run.
  • Cleanup: the old Nav, Footer, and section components that nothing imported anymore are removed.

Launch safety net (last commit)

  • Dealer Map: /map is removed from the header, footer, and sitemap and marked noindex until its legal review is done. It still works by direct URL.
  • California law cards: a notice now sits above them saying SB 766 takes effect Oct 1, 2026 and the section is being updated, with a link to CalMatters' summary. I also removed the "no automatic cooling-off period" claim.

Still to do

  • Project Legal: final wording for the California law cards under SB 766, then remove the notice.
  • Legal review of the Dealer Map, then add it back to the nav, footer, and sitemap and drop noindex.
  • Run the Supabase SQL, then paste the publishable key into SUPABASE_KEY in public/vindimap/index.html for live data.
  • Remaining handoff checklist: stock car photos, Carfax screenshots, fee and cap numbers, brochure copy.

Testing

  • pnpm build passes, all routes statically prerendered; eslint has no errors.
  • Checked every page at 1440px and 390px, with no horizontal overflow, in en, es, and fa (RTL).
  • Exercised the interactive parts in Playwright: game, engine inspector, scroll tours, receipt, APR slider, team videos, and form validation and prefill.
  • Forms were not submitted end to end, because that would send real email.

🤖 Generated with Claude Code

https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq

Ports the Home page from the redesign prototype into
components/sections/home/, with all copy in en.json (homePage).
Adds Plus Jakarta Sans, the scoped redesign stylesheet (app/redesign.css),
the new logo/favicon, and the handoff images and videos. Pages not yet
ported keep their dark styling under the new header and footer.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
- Port About (scroll-zoom slideshow, mission pillars, founder strikes,
  founder video, quote band, what we provide, CTA) into
  components/sections/about/, copy in en.json (aboutPage).
- Generate app/redesign.css from the prototype with
  scripts/scope-prototype-css.py (all selectors scoped under .rd,
  keyframes prefixed rd-); hand-written tweaks move to
  app/redesign-overrides.css.
- Shared helpers (CtaBand, PageHero, useInView, icons) in
  components/sections/shared/.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
Roster moves to lib/team.ts (unchanged members, now with their video
intros); positions and bios still come from team.members translations.
New TeamRoster renders the bold outlined cards, a Leadership filter,
and a native <dialog> player for portrait and landscape intros.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
Eleven projects in four tracks with a sticky, scroll-spying track nav,
the Price Is Right demo (state picker, three rounds, animated price
breakdown), and the six-week build timeline. Project buttons prefill the
Get Involved form via ?chapter= and ?role=.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
Inspect-it-yourself engine explorer (hotspots, zoom, per-part
checklists, guided mode, progress), where to get a PPI with dealer
locators, the what-inspectors-check accordion, founder quote, and the
scroll-driven PPI road. Adds a small Rich renderer for bold runs in
dictionary copy.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
Pink slip scroll tour, red flags as animated chats, the yo-yo scam
scroll scene, the four-square animation, a tappable fee receipt, the
APR slider with California markup cap, federal and California law
cards, flip cards, and the brochure card. Adds a shared ScrollTour
(also used by Documents) and loads Caveat only on this page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
Carfax page one and two scroll tours on the existing carfax-p1/p2
screenshots, and the Buyers Guide explained section by section. Scroll
tours no longer zoom out below 1x on wide spotlight areas.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
Chapters, open roles, and the volunteer application in the new design,
still submitting through the existing submitVolunteerApplication
(Brevo) action with the same chapter/role values. Campus cards and
project buttons preselect the chapter and role via query params.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
New route with the VINdisclaimer gate (methodology, tiers, category
guide) that reveals a link to the satellite map, plus the Learn from
others news cards. The handoff's Leaflet map is served from
public/vindimap/ in snapshot-only mode: the Supabase publishable key is
left out until the read-only policies in the handoff SQL have been run.
Adds /map, /research and /join to the sitemap.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
- /contact redirected to a General Contact tab on /join that the new
  Get Involved design dropped; add it back as an "Or just say hello"
  section (same submitContactForm action) and point /contact and the
  footer's Get in Touch at /join#contact.
- Delete the old Nav, Footer, LanguageSwitcher and home/about/team
  section components that nothing imports anymore, plus lib/constants
  and lib/i18n/home-dict.
- RTL: anchor header dropdowns to the right.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
@getvindicated2day getvindicated2day changed the title Redesign home page with new light theme and components Redesign: new light theme across the whole site Sep 30, 2026
- Remove /map from the header, footer and sitemap and mark it noindex
  until the map's legal review is done (still reachable by URL).
- Add a notice above the California law cards that SB 766 takes effect
  Oct 1, 2026 and the cards are being updated, linking to CalMatters'
  summary; drop the "no automatic cooling-off period" claim that the
  new law makes inaccurate. Project Legal to write the final wording.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QzNDQSmhjgKE63rwUnwcMq
@getvindicated2day
getvindicated2day merged commit 4c12821 into main Sep 30, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants