Bring / and the site header in line with the current marketing frames: folder-top navigation, Home hero with a static rule card, and a three-mark logo wall with no heading.
The old header “avatars” were SVG wrappers around broken embedded PNGs, so the Create rule circles downloaded but did not paint. Those files are real PNGs now. The wall uses the three pilot marks in a centered cluster instead of stretching six logos edge to edge.
Changes
Top nav: Workshops in the cluster; Log in sits in the folder tab on the phone; Create rule stays ghost. Header avatars are hidden below sm, and they scale up with the folder header from md.
Home: Hero copy and breakpoint CTAs from the current frames. One h1 via ContentLockup. Feature cards stay static. Card steps 1–2 still use the prototype lines pending design approval of one set.
Hero Banner: Split into container / view / types. Pairs the lockup with a non-interactive Rule card.
Logo wall: Street Medics, Food Not Bombs, and Mutual Aid Colorado as lettered SVGs, 60% opacity, no “Trusted by…” label. Centered cluster with a fixed gap (38px, 48px from lg) so three marks do not space-between across a wide page. Medics alt is “Boulder Street Medics” until the group confirms its public name.
Create rule portraits: Replace the SVG wrappers with PNG composites of the Figma tints (Street Medics, Mutual Aid Colorado, Food Not Bombs). Preload them as image/png.
Copy lives in messages/. Footer is unchanged.
Screenshots
How to Test
npm run dev and open http://localhost:3000/.
320: Folder tab holds logo, Workshops / Learn / About, and Log in without overlap. No header avatars. Logo wall stacks in the center.
430+: Three circles appear beside Create rule. Logo wall is a tight centered row.
640 / 1024 / 1440: Folder header, hero lockup plus rule card, and the same centered three-mark cluster (it should not march to the edges as the page widens).
Hover and focus Create rule (ghost). Confirm a single h1 on the page.
Workshops in the header is expected to 404 until that page exists.
Logo-wall cluster and avatar PNG swap are still uncommitted on this branch. Commit those (and drop the ?v=2 cache-bust on AVATAR_1) before opening the PR.
*.png is gitignored. Add !public/assets/marketing/avatar-*.png (same pattern as the OG images) and git add -f the three files or they will not ship.
Figma’s Logo Wall component is still the six-logo space-between row. Home only has three pilots, so this PR clusters them instead of copying that alignment.
/workshops is not in this pass. Footer stays as staging until the redesign.
## Overview
Bring `/` and the site header in line with the current marketing frames: folder-top navigation, Home hero with a static rule card, and a three-mark logo wall with no heading.
The old header “avatars” were SVG wrappers around broken embedded PNGs, so the Create rule circles downloaded but did not paint. Those files are real PNGs now. The wall uses the three pilot marks in a centered cluster instead of stretching six logos edge to edge.
## Changes
- **Top nav:** Workshops in the cluster; Log in sits in the folder tab on the phone; Create rule stays ghost. Header avatars are hidden below `sm`, and they scale up with the folder header from `md`.
- **Home:** Hero copy and breakpoint CTAs from the current frames. One `h1` via ContentLockup. Feature cards stay static. Card steps 1–2 still use the prototype lines pending design approval of one set.
- **Hero Banner:** Split into container / view / types. Pairs the lockup with a non-interactive Rule card.
- **Logo wall:** Street Medics, Food Not Bombs, and Mutual Aid Colorado as lettered SVGs, 60% opacity, no “Trusted by…” label. Centered cluster with a fixed gap (38px, 48px from `lg`) so three marks do not space-between across a wide page. Medics alt is “Boulder Street Medics” until the group confirms its public name.
- **Create rule portraits:** Replace the SVG wrappers with PNG composites of the Figma tints (Street Medics, Mutual Aid Colorado, Food Not Bombs). Preload them as `image/png`.
- Copy lives in `messages/`. Footer is unchanged.
## Screenshots
<!-- Add image tags if visual changes exist, otherwise leave this section empty -->
## How to Test
1. `npm run dev` and open `http://localhost:3000/`.
2. **320:** Folder tab holds logo, Workshops / Learn / About, and Log in without overlap. No header avatars. Logo wall stacks in the center.
3. **430+:** Three circles appear beside Create rule. Logo wall is a tight centered row.
4. **640 / 1024 / 1440:** Folder header, hero lockup plus rule card, and the same centered three-mark cluster (it should not march to the edges as the page widens).
5. Hover and focus Create rule (ghost). Confirm a single `h1` on the page.
6. Workshops in the header is expected to 404 until that page exists.
7. Storybook: Top, HeroBanner, LogoWall, Avatar / AvatarContainer.
8. `npx tsc --noEmit`, `npx vitest run tests/components/Top.test.tsx tests/components/HeroBanner.test.tsx tests/unit/LogoWall.test.jsx tests/pages/home.test.jsx tests/components/Avatar.test.tsx`.
## Notes
- Logo-wall cluster and avatar PNG swap are still uncommitted on this branch. Commit those (and drop the `?v=2` cache-bust on `AVATAR_1`) before opening the PR.
- `*.png` is gitignored. Add `!public/assets/marketing/avatar-*.png` (same pattern as the OG images) and `git add -f` the three files or they will not ship.
- Figma’s Logo Wall component is still the six-logo space-between row. Home only has three pilots, so this PR clusters them instead of copying that alignment.
- `/workshops` is not in this pass. Footer stays as staging until the redesign.
Puts Workshops in the header, pairs the hero with a static rule card and breakpoint CTAs, and shows the three pilot marks with no wall label.
Co-authored-by: Cursor <cursoragent@cursor.com>
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
/and the site header in line with the current marketing frames: folder-top navigation, Home hero with a static rule card, and a three-mark logo wall with no heading.The old header “avatars” were SVG wrappers around broken embedded PNGs, so the Create rule circles downloaded but did not paint. Those files are real PNGs now. The wall uses the three pilot marks in a centered cluster instead of stretching six logos edge to edge.
Changes
sm, and they scale up with the folder header frommd.h1via ContentLockup. Feature cards stay static. Card steps 1–2 still use the prototype lines pending design approval of one set.lg) so three marks do not space-between across a wide page. Medics alt is “Boulder Street Medics” until the group confirms its public name.image/png.messages/. Footer is unchanged.Screenshots
How to Test
npm run devand openhttp://localhost:3000/.h1on the page.npx tsc --noEmit,npx vitest run tests/components/Top.test.tsx tests/components/HeroBanner.test.tsx tests/unit/LogoWall.test.jsx tests/pages/home.test.jsx tests/components/Avatar.test.tsx.Notes
?v=2cache-bust onAVATAR_1) before opening the PR.*.pngis gitignored. Add!public/assets/marketing/avatar-*.png(same pattern as the OG images) andgit add -fthe three files or they will not ship./workshopsis not in this pass. Footer stays as staging until the redesign.