Redesign the home hero around a tree-ring cross-section - #16
Merged
Conversation
Replaces the centered logo/title/button stack with an asymmetric hero: a stacked display wordmark, tagline, and CTA on the left, and a dendrochronology figure on the right — growth rings drawn in walnut ink with the woodcut artwork vignetted at the pith. - New TreeRings component: ring geometry generated once at module load from a fixed seed (deterministic across renders/tests); irregular ring spacing, wobble, and occasional latewood weights; a green cambium ring under the bark; the logo image clipped so its caption band falls outside the pith circle - Rings draw outward from the pith on load via pathLength/dash staggered per ring; fully disabled under prefers-reduced-motion - New --ring-ink and --pith tokens (light/dark variants); the pith disc stays parchment-light in dark mode so the black-ink figures remain visible - Hero logo <img> removed; the artwork now appears only in the header and at the pith
✅ Deploy Preview for treepolitics-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the centered logo/title/button hero with an asymmetric composition: stacked Fraunces wordmark, tagline, and CTA on the left; a dendrochronology figure on the right. Growth rings record history the way the blog does — that's the concept.
TreeRingscomponent (src/components/tree-rings.tsx): all geometry generated at module load from a fixed seed (deterministic across renders and tests, no hydration drift). Irregular ring spacing/wobble and occasional heavy latewood bands; one green ring just under the bark (the cambium — the living layer); the existing woodcut artwork sits vignetted at the pith, with its caption band positioned to fall outside the clip circle.pathLength={1}+ dash offset, ~70ms stagger per ring), fully disabled underprefers-reduced-motion.--ring-inkand--pithwith light/dark variants; the pith disc stays parchment-light in dark mode so the black-ink figures remain visible.<img>is removed — the artwork now appears only in the header and at the pith.No new dependencies, no new image assets; the figure is ~20 SVG paths.
Testing