Skip to content

feat(giveback): full design pass — warm-up funnel, reward-ladder impact, causes tab#6247

Open
tsahimatsliah wants to merge 1 commit into
mainfrom
claude/zen-moore-6f5323
Open

feat(giveback): full design pass — warm-up funnel, reward-ladder impact, causes tab#6247
tsahimatsliah wants to merge 1 commit into
mainfrom
claude/zen-moore-6f5323

Conversation

@tsahimatsliah

@tsahimatsliah tsahimatsliah commented Jun 27, 2026

Copy link
Copy Markdown
Member

Changes

Full design pass over the giveback page, end to end. This is the engineering-ready port of the design mock-up in #6210 (rebased clean onto main, reviewed, hardened, and verified green).

Warm-up funnel (new)

  • Full-screen 4-step intro (why → how it works → pick causes → impact), shown once for everyone and replayable via "How it works". A single mounted explainer video docks to the corner across steps; hidden on mobile after step 1.

Hero

  • Reworked brand row + "How it works" entry, sharper messaging, live funding summary, charm mascot. Brand scales down on mobile.

Impact tab

  • Reward-ladder journey rail: rounded-square nodes, a consistent green "completed" trail across nodes and connectors, the active goal as one coherent row, and a claim celebration (expanding ring + sparkle burst) that respects prefers-reduced-motion.

Causes tab (new)

  • Manage-your-causes view: your picks up top, discovery grid below with category filters. Add/remove auto-saves (no Save step).

Contribution summary

  • Flat layout, rounded-square avatar with a level badge, money-unlocked as the hero number.

Sponsors

  • Self-describing sponsor cards (white logo tile + colored tier pill), gated behind featureGivebackSponsors (defaulted off).

Cleanup

  • Deleted dead code (GivebackFundingBar, GivebackCampaignPanel, GivebackCommunityGoalProgress, GivebackEditCausesModal, GivebackSelectedCauses, GivebackBudgetStory, ConfettiSvg) and their stories/specs. Added Storybook coverage for the new surfaces and updated affected RTL tests.

Engineering hardening over the mock-up

  • useGivebackCauseSelection.toggleAndSave now reads the freshest selection via a ref (no stale closure on back-to-back toggles) and rolls back the optimistic change if the save fails.
  • Roadmap claim celebration auto-clears after it plays, so it can replay on retry and never leaves the reward-pop class stuck on.
  • GivebackCauseCard uses the shared anchorDefaultRel constant instead of a duplicated literal.

Verification

  • ✅ Strict typecheck on changed files + full tsc on shared (no giveback errors)
  • ✅ ESLint clean across the giveback feature
  • ✅ 53 tests pass across 12 suites
  • ✅ No dangling references to any deleted component

Events

Yes — funnel lifecycle events (start / view step / complete) and How-it-works in lib/log.ts.

Experiment

No. Added featureGivebackSponsors, defaulted off, gating the sponsor wall.

🤖 Generated with Claude Code

Preview domain

https://claude-zen-moore-6f5323.preview.app.daily.dev

…ct, causes tab

Redesigns the giveback page end to end:

- Warm-up funnel: full-screen 4-step intro (why -> how -> pick causes ->
  impact), shown once and replayable via "How it works". Single mounted
  explainer video docks to the corner across steps.
- Hero: reworked brand row, sharper messaging, live funding summary, mascot.
- Impact tab: reward-ladder journey rail with a consistent green completed
  trail, the active goal as one coherent row, and a claim celebration that
  respects prefers-reduced-motion.
- Causes tab: manage-your-causes view with auto-save (no Save step).
- Contribution summary: flat layout, money-unlocked as the hero number.
- Sponsors: self-describing cards behind featureGivebackSponsors (off by
  default).
- Cleanup: removed dead code (GivebackFundingBar, GivebackCampaignPanel,
  GivebackCommunityGoalProgress, GivebackEditCausesModal, GivebackSelectedCauses,
  GivebackBudgetStory, ConfettiSvg) and their stories/specs. Added Storybook
  coverage for the new surfaces and updated affected RTL tests.

Engineering hardening over the design mock-up:
- useGivebackCauseSelection.toggleAndSave now reads the freshest selection via
  a ref (no stale closure on back-to-back toggles) and rolls back the
  optimistic change if the save fails.
- Roadmap claim celebration auto-clears after it plays, so it can replay on a
  retry and never leaves the reward-pop class stuck on.
- GivebackCauseCard uses the shared anchorDefaultRel constant.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
daily-webapp Ready Ready Preview Jun 27, 2026 2:10pm
storybook Building Building Preview Jun 27, 2026 2:10pm

Request Review

tsahimatsliah added a commit that referenced this pull request Jul 1, 2026
The `overflow-x-clip` on the GivebackPage root (added to guard the
funnel's Android sizing) also clipped GivebackBackground's
`laptop:-inset-1` corner bleed, leaving a dark crescent inside the app
card's rounded corner. The funnel now locks the document at the `html`
level while open, so it no longer needs this page-level guard; stray
horizontal bleed is still caught by the global `body { overflow-x:
hidden }` and the card's own `laptop:overflow-clip`. Matches the
structure in the design pass (#6247).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant