Bring Home and About in line with the current marketing file: a black hero CTA, readable word-split headings, the redesigned feature grid, cited About statistics, and the Folder-top header. The header keeps a single set of nav controls (no breakpoint clones) so the 430px logo overlay does not cover Use cases / Learn.
Changes
Home hero: filled lockup CTAs use the inverse (black) palette instead of the white default.
Word-split headings: About header inserts screen-reader spaces between animated words; stacked Section Header lines keep trailing spaces so assistive text does not run together.
Feature grid: copy, layout, and card surfaces match the current Feature-Grid frame. Cards stay presentational; the only CTA is Explore the toolkit → /learn. Mini-tile panels are replaced by in-section cards (icon, title, description) on lavender, lime, rust, and teal.
Toolkit link: Figma hides the lockup Action Group here, so this is underlined white body text, not a pill button. Hover dims slightly; there is no separate pressed chrome. The control uses next/link like other in-app marketing links, hugs the text, and uses a keyboard-only focus outline instead of a full-width padded ring.
Feature-grid glyphs:icon-git-branch, icon-arrow-left-right, icon-door-open, and icon-message-square-share live under public/assets/icons/. Mini-card panel art stays in public/assets/marketing/.
About stats: figures match design (420M+, 24%, 45%, 800+). Each card has its own as-of year and source link (GitHub Octoverse, AmeriCorps, Mutual Aid Hub via NEA).
Folder header: yellow tab hugs below 430px and stretches from 430 up; Use cases / Learn / About sit in the tab after the wordmark below 640, then on the page midline from 640. Log in and Create rule stay outside the tab. Wordmark stays visible on Folder-top. Type and Create rule scale from md on the home header only.
Inner-page header: from 640, equal side columns so Use cases / Learn / About sit on the same page midline as Home (Create rule is wider than the logo, so centering in the leftover column sat off-center). Below 640 the cluster still tucks toward Create rule so it does not sit under the logo.
Skip link: styles live in app/tailwind.css (same sheet as Tailwind). Rules in globals.css never reached the browser, so the link sat in document flow and pushed the yellow tab down.
Screenshots
Home hero (black CTA), feature grid (four colored cards + underlined toolkit link), About header, About stats with year links, and Home vs About headers with the three links on the same midline.
How to Test
npm run dev, open /.
Hero: Learn how CommunityRule works is a black filled button.
Feature grid: four static cards; Explore the toolkit is underlined white text. Hover dims; click goes to /learn. Keyboard focus shows a tight outline around the text, not a wide ring.
Confirm the four card icons load from /assets/icons/icon-*.svg.
Open /about: heading reads as separate words to a screen reader; stats are 420M+, 24%, 45%, 800+ with per-card year links.
Header, 320–429: yellow tab hugs the logo + three links; Log in and Create rule stay on black; skip link is not visible until focused and does not add space above the tab.
Header, 430–639: wordmark on; links still in the tab after the logo; tab stretches toward auth; Log in stays on black (not inside the yellow).
Header, 640+: Use cases / Learn / About on the page midline on both / and /about / /learn. Compare the two pages at the same width.
Tab to the skip link on /: it appears over the header, not as a gap above it.
The 45% AmeriCorps figure is the design number; official volunteer rates differ (roughly 28% formal / 54% informal).
Feature cards still have no destinations; only the lockup link is interactive.
Figma does not specify a distinct pressed state for the toolkit underline. Design-system Link on dark uses the same gray for hover, focus, and active.
Home still has a pre-existing ContentLockup hydration warning from getAssetPath reading window; this branch does not fix that.
At 430–639, Figma’s Folder-top frame has no Log in in chrome; product still shows Log in on black. Staging still paints Log in in the yellow tab via the old overlay — that remaining notch shift is expected.
Inner-page centering uses equal grid columns, not Figma’s left: 50% overlay, so the 430px logo overlay does not come back. The visual center matches the Figma component.
## Overview
Bring Home and About in line with the current marketing file: a black hero CTA, readable word-split headings, the redesigned feature grid, cited About statistics, and the Folder-top header. The header keeps a single set of nav controls (no breakpoint clones) so the 430px logo overlay does not cover Use cases / Learn.
## Changes
- **Home hero:** filled lockup CTAs use the inverse (black) palette instead of the white default.
- **Word-split headings:** About header inserts screen-reader spaces between animated words; stacked Section Header lines keep trailing spaces so assistive text does not run together.
- **Feature grid:** copy, layout, and card surfaces match the current Feature-Grid frame. Cards stay presentational; the only CTA is **Explore the toolkit** → `/learn`. Mini-tile panels are replaced by in-section cards (icon, title, description) on lavender, lime, rust, and teal.
- **Toolkit link:** Figma hides the lockup Action Group here, so this is underlined white body text, not a pill button. Hover dims slightly; there is no separate pressed chrome. The control uses `next/link` like other in-app marketing links, hugs the text, and uses a keyboard-only focus outline instead of a full-width padded ring.
- **Feature-grid glyphs:** `icon-git-branch`, `icon-arrow-left-right`, `icon-door-open`, and `icon-message-square-share` live under `public/assets/icons/`. Mini-card panel art stays in `public/assets/marketing/`.
- **About stats:** figures match design (420M+, 24%, 45%, 800+). Each card has its own as-of year and source link (GitHub Octoverse, AmeriCorps, Mutual Aid Hub via NEA).
- **Folder header:** yellow tab hugs below 430px and stretches from 430 up; Use cases / Learn / About sit in the tab after the wordmark below 640, then on the page midline from 640. Log in and Create rule stay outside the tab. Wordmark stays visible on Folder-top. Type and Create rule scale from `md` on the home header only.
- **Inner-page header:** from 640, equal side columns so Use cases / Learn / About sit on the same page midline as Home (Create rule is wider than the logo, so centering in the leftover column sat off-center). Below 640 the cluster still tucks toward Create rule so it does not sit under the logo.
- **Skip link:** styles live in `app/tailwind.css` (same sheet as Tailwind). Rules in `globals.css` never reached the browser, so the link sat in document flow and pushed the yellow tab down.
## Screenshots
Home hero (black CTA), feature grid (four colored cards + underlined toolkit link), About header, About stats with year links, and Home vs About headers with the three links on the same midline.
## How to Test
1. `npm run dev`, open `/`.
2. Hero: **Learn how CommunityRule works** is a black filled button.
3. Feature grid: four static cards; **Explore the toolkit** is underlined white text. Hover dims; click goes to `/learn`. Keyboard focus shows a tight outline around the text, not a wide ring.
4. Confirm the four card icons load from `/assets/icons/icon-*.svg`.
5. Open `/about`: heading reads as separate words to a screen reader; stats are 420M+, 24%, 45%, 800+ with per-card year links.
6. Header, 320–429: yellow tab hugs the logo + three links; Log in and Create rule stay on black; skip link is not visible until focused and does not add space above the tab.
7. Header, 430–639: wordmark on; links still in the tab after the logo; tab stretches toward auth; Log in stays on black (not inside the yellow).
8. Header, 640+: Use cases / Learn / About on the page midline on both `/` and `/about` / `/learn`. Compare the two pages at the same width.
9. Tab to the skip link on `/`: it appears over the header, not as a gap above it.
10. Optional: `npx vitest run tests/components/FeatureGrid.test.tsx tests/components/type/ContentLockup.test.tsx tests/components/type/AboutHeader.test.tsx tests/components/cards/Stat.test.tsx tests/components/HeroBanner.test.tsx tests/pages/about.test.tsx tests/pages/home.test.jsx tests/components/Top.test.tsx tests/components/Logo.test.tsx`
## Notes
- The 45% AmeriCorps figure is the design number; official volunteer rates differ (roughly 28% formal / 54% informal).
- Feature cards still have no destinations; only the lockup link is interactive.
- Figma does not specify a distinct pressed state for the toolkit underline. Design-system Link on dark uses the same gray for hover, focus, and active.
- Home still has a pre-existing ContentLockup hydration warning from `getAssetPath` reading `window`; this branch does not fix that.
- At 430–639, Figma’s Folder-top frame has no Log in in chrome; product still shows Log in on black. Staging still paints Log in in the yellow tab via the old overlay — that remaining notch shift is expected.
- Inner-page centering uses equal grid columns, not Figma’s `left: 50%` overlay, so the 430px logo overlay does not come back. The visual center matches the Figma component.
Park the skip link in the Tailwind sheet so it cannot sit in document flow and push the yellow tab down.
Co-authored-by: Cursor <cursoragent@cursor.com>
an.di
self-assigned this 2026-09-10 03:41:37 +00:00
an.di
merged commit ddf7b0ef7a into main2026-09-10 03:41:44 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Overview
Bring Home and About in line with the current marketing file: a black hero CTA, readable word-split headings, the redesigned feature grid, cited About statistics, and the Folder-top header. The header keeps a single set of nav controls (no breakpoint clones) so the 430px logo overlay does not cover Use cases / Learn.
Changes
/learn. Mini-tile panels are replaced by in-section cards (icon, title, description) on lavender, lime, rust, and teal.next/linklike other in-app marketing links, hugs the text, and uses a keyboard-only focus outline instead of a full-width padded ring.icon-git-branch,icon-arrow-left-right,icon-door-open, andicon-message-square-sharelive underpublic/assets/icons/. Mini-card panel art stays inpublic/assets/marketing/.mdon the home header only.app/tailwind.css(same sheet as Tailwind). Rules inglobals.cssnever reached the browser, so the link sat in document flow and pushed the yellow tab down.Screenshots
Home hero (black CTA), feature grid (four colored cards + underlined toolkit link), About header, About stats with year links, and Home vs About headers with the three links on the same midline.
How to Test
npm run dev, open/./learn. Keyboard focus shows a tight outline around the text, not a wide ring./assets/icons/icon-*.svg./about: heading reads as separate words to a screen reader; stats are 420M+, 24%, 45%, 800+ with per-card year links./and/about//learn. Compare the two pages at the same width./: it appears over the header, not as a gap above it.npx vitest run tests/components/FeatureGrid.test.tsx tests/components/type/ContentLockup.test.tsx tests/components/type/AboutHeader.test.tsx tests/components/cards/Stat.test.tsx tests/components/HeroBanner.test.tsx tests/pages/about.test.tsx tests/pages/home.test.jsx tests/components/Top.test.tsx tests/components/Logo.test.tsxNotes
getAssetPathreadingwindow; this branch does not fix that.left: 50%overlay, so the 430px logo overlay does not come back. The visual center matches the Figma component.