5 program boxes — colors, copy, CTAs (2 + 3 layout)
● Current state — verified on live v230
LIVE /v230/our-programs has only 3 cards: Freshness Guarantee, Pickup & Delivery, Sessions Rewards (confirmed in DOM).
◎ Target outcome
5 cards in a 2-then-3 layout: Freshness Guarantee #b2d34d (CTA Shop fresh flower→flower), Everyday Deals #75abdb (CTA Shop Everyday Deals), Ashley's Picks #f05a7b (no CTA), Senior Discounts #b192c3 (no CTA), Student Discounts #0077b7 (no CTA). Full copy per feedback; remove numbered copy.
✓ Output — closed & verified
CLOSED & VERIFIED. v235 (Chat B). 5 program cards in a 2+3 layout with correct accents (#b2d34d / #75abdb / #f05a7b / #b192c3 / #0077b7), Sophie's verbatim copy and CTAs (Shop fresh flower / Shop our Everyday Deals). Chrome-verified on /v235/our-programs.
Assets, colours & references
Reference: Sophie's feedback doc — page 6.
Technical steps to achieve it
- Replace the 3-card array with the 5 programs (data-driven: title, color, body, optional CTA).
- Grid: row of 2 then row of 3; per-card accent color from the list.
- Paste Sophie's exact body copy for each; drop the numbered stat lines.
- Wire CTAs: Freshness→/shop?cat=flower, Everyday Deals→/shop?on_sale=1.
Files to change
src/pages/StaticPages.jsx (OurProgramsPage)Testing
- Canary: 5 cards, correct colors + copy, 2+3 layout, CTAs route.
Milestones
Verify live
Progress URL updates here when this task ships to its target /vN/. Current column always points at the live baseline.