Rebuild the About page from the current marketing frames #89

Merged
an.di merged 2 commits from adilallo/feature/CR-228-about-page into main 2026-11-04 02:30:32 +00:00
Member

Overview

Replaces the old About page with the current marketing page: the centered header, opening statement, history, participant selection, four questions, rebuild process, narrative, your turn, and credits, followed by the existing ask-an-organizer section. Copy comes from the frames. Three sentences that are still waiting on approval stay off the page.

The standard header (every page except Home) uses the filled white Create rule button from that navigation variant. Home keeps the ghost button beside the yellow folder.

Changes

  • New sections: Centered Header, History, Participant Selection, Four Questions, Rebuild Process, Narrative Block, Your Turn, and Credits, each with a Storybook story.
  • Opening statement reuses the quote block and keeps its two paragraphs stacked at every width.
  • Removed the old About header, stats, book downloads, triple text block, and FAQ from /about.
  • Page title stays “About”, so the site template renders “About — CommunityRule”. Description: “Why the Media Economies Design Lab at CU Boulder rebuilt CommunityRule, what organizers told us and who builds it.”
  • Headline is one string for screen readers: “Every community has rules written or not”. No headline animation.
  • Four Questions uses the desktop study sentences at every breakpoint.
  • Your Turn includes the kit sentence and the dashed illustration placeholder with its caption.
  • Rebuild Process is the heading and body only. The four steps are hidden in the frame and are not built.
  • Standard-header Create rule is a filled white pill with black text and the avatar stack. Below 430px the avatars hide, matching the small frame. The folder header on Home stays a ghost button with the yellow label.

Screenshots

01-top.png

How to Test

  1. npm run dev, then open /about at about 390px, 768px, and 1280px.
  2. Confirm the section order: centered header, opening statement (two paragraphs), history, participant selection, four questions, rebuild, narrative, your turn, credits, ask an organizer.
  3. Confirm these are gone: the old stats block, both book downloads, and the FAQ accordion.
  4. Confirm these sentences are absent: cards and templates in the public domain, a Rule staying private unless it is shared, and co-op lawyers designing the Rule format.
  5. On the centered header, a screen reader should hear one heading: “Every community has rules written or not”.
  6. Create rule in the header and in Your Turn both open /create/informational. Share your experiences and ask an organizer open the inquiry dialog. Help build opens https://git.medlab.host in a new tab. Read the FAQ goes to /learn#faq. Talk to a facilitator goes to /workshops.
  7. On /about, /learn, and /workshops, Create rule is a white pill. On /, it stays clear with the yellow label.
  8. npx tsc --noEmit, npm run knip, and npx vitest run tests/pages/about.test.tsx tests/components/Top.test.tsx tests/unit/QuoteBlock.test.jsx.

Notes

  • The Your Turn illustration is the dashed placeholder from the frame, captioned “[People sitting around a circular table discussing drafts]”.
  • /learn#faq points at the FAQ that moves to Learn with that page. The anchor is not on Learn yet.03-opening.png04-history.png06-four-questions.png07-rebuild.png
## Overview Replaces the old About page with the current marketing page: the centered header, opening statement, history, participant selection, four questions, rebuild process, narrative, your turn, and credits, followed by the existing ask-an-organizer section. Copy comes from the frames. Three sentences that are still waiting on approval stay off the page. The standard header (every page except Home) uses the filled white Create rule button from that navigation variant. Home keeps the ghost button beside the yellow folder. ## Changes - New sections: Centered Header, History, Participant Selection, Four Questions, Rebuild Process, Narrative Block, Your Turn, and Credits, each with a Storybook story. - Opening statement reuses the quote block and keeps its two paragraphs stacked at every width. - Removed the old About header, stats, book downloads, triple text block, and FAQ from `/about`. - Page title stays “About”, so the site template renders “About — CommunityRule”. Description: “Why the Media Economies Design Lab at CU Boulder rebuilt CommunityRule, what organizers told us and who builds it.” - Headline is one string for screen readers: “Every community has rules written or not”. No headline animation. - Four Questions uses the desktop study sentences at every breakpoint. - Your Turn includes the kit sentence and the dashed illustration placeholder with its caption. - Rebuild Process is the heading and body only. The four steps are hidden in the frame and are not built. - Standard-header Create rule is a filled white pill with black text and the avatar stack. Below 430px the avatars hide, matching the small frame. The folder header on Home stays a ghost button with the yellow label. ## Screenshots ![01-top.png](attachments/af353078-1dc0-45e6-9200-98735416dcc0) ## How to Test 1. `npm run dev`, then open `/about` at about 390px, 768px, and 1280px. 2. Confirm the section order: centered header, opening statement (two paragraphs), history, participant selection, four questions, rebuild, narrative, your turn, credits, ask an organizer. 3. Confirm these are gone: the old stats block, both book downloads, and the FAQ accordion. 4. Confirm these sentences are absent: cards and templates in the public domain, a Rule staying private unless it is shared, and co-op lawyers designing the Rule format. 5. On the centered header, a screen reader should hear one heading: “Every community has rules written or not”. 6. Create rule in the header and in Your Turn both open `/create/informational`. Share your experiences and ask an organizer open the inquiry dialog. Help build opens `https://git.medlab.host` in a new tab. Read the FAQ goes to `/learn#faq`. Talk to a facilitator goes to `/workshops`. 7. On `/about`, `/learn`, and `/workshops`, Create rule is a white pill. On `/`, it stays clear with the yellow label. 8. `npx tsc --noEmit`, `npm run knip`, and `npx vitest run tests/pages/about.test.tsx tests/components/Top.test.tsx tests/unit/QuoteBlock.test.jsx`. ## Notes - The Your Turn illustration is the dashed placeholder from the frame, captioned “[People sitting around a circular table discussing drafts]”. - `/learn#faq` points at the FAQ that moves to Learn with that page. The anchor is not on Learn yet.![03-opening.png](attachments/176a5b4c-d2d1-4e8a-8a23-62a70ae0beae)![04-history.png](attachments/d32f0225-b63e-4b94-84cd-ec6dd97fe75d)![06-four-questions.png](attachments/b80c1e27-fd31-4419-9708-e78b78046e2c)![07-rebuild.png](attachments/b0ddf854-1818-4344-8e6b-40cd6ce5a790)
an.di added 2 commits 2026-11-04 02:24:42 +00:00
an.di self-assigned this 2026-11-04 02:24:54 +00:00
an.di merged commit 974a5ace4c into main 2026-11-04 02:30:32 +00:00
an.di deleted branch adilallo/feature/CR-228-about-page 2026-11-04 02:30:33 +00:00
Sign in to join this conversation.
No Reviewers
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#89