feat(homepage): editorial redesign — sage palette, typography hero, plant category grid#1
Open
RSBromley wants to merge 1 commit into
Open
Conversation
- Replace bright mint (#77E8C6) with sage green (#8FBC8F) across design
tokens, LinkButton, and table stripe
- Add --semantic-background-warm (#FAFAF8) warm off-white token
- Redesign LandingHero to typography-led two-column layout: large Source
Serif 4 headline as primary visual anchor, editorial accent photo right
- Add PlantCategoryGrid — new "Find your perfect plant" section with
3-column responsive editorial cards, positioned after hero
- Restyle TestimonialSlider: remove dark background, use warm off-white,
pull-quote typographic treatment with sage quotation mark, dot pagination
- Update homepage spacing: 100px/140px section rhythm (up from 80px/120px)
- Switch isLight={false} on MainLayout for correct dark logo on white hero
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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
#77E8C6) with sage green (#8FBC8F) across all token references; add new--semantic-background-warm(#FAFAF8) warm off-white token. Update hardcoded hex values inLinkButton.styled.tsxand table zebra stripes.LandingHerorewritten from full-bleed background image + floating white card → editorial two-column layout. Large Source Serif 4 headline fills the left column as the primary visual anchor; editorial accent photo sits in the right column on desktop. Decorative sage rule above the headline.imageAltprop bug fixed (was declared but never passed to<img>).PlantCategoryGrid— "Find your perfect plant" 3-column responsive editorial grid with portrait-ratio cards, full-card link pattern, hover lift, and Storybook story. Hardcoded with 3 starter categories (Low Light, Easy Care, Pet-Friendly); CMS integration is a follow-up."quotation mark in sage, dot pagination (rendered from React state), sage arrow buttons.80px/120px→100px/140pxfor editorial breathing room.isLight={false}— switches to dark logo now that hero background is white.Testing
src/Post-Deploy Monitoring & Validation
No additional operational monitoring required: all changes are purely presentational (Styled Components + JSX structure). No new data fetching, API calls, or state management changes. Visual QA on staging is the primary validation.
Follow-up
PlantCategoryGridcategories to a CMS minilist so editors can manage them#8FBC8Fcontrast ratio on warm white#FAFAF8with browser DevTools (WCAG AA: 4.5:1 for text, 3:1 for UI)/static/img/categories/