feat(giveback): redesign impact journey, sponsor badges, and claim feedback by tsahimatsliah · Pull Request #6210 · dailydotdev/apps

tsahimatsliah · 2026-06-17T20:57:08Z

Changes

Full design pass over the giveback page, end to end.

Warm-up funnel (new)

A full-screen 4-step intro (why → how it works → pick causes → impact) shown once for everyone, replayable via "How it works". Single mounted explainer video that docks to the corner across steps; hidden on mobile after step 1. Final step is compacted to fit above the fold on mobile.

Hero

Reworked brand row + "How it works" entry, sharper messaging ("Big tech buys ads. We fund the causes you pick."), 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 highlighted as a single coherent row (face + card + progress), and a claim celebration on the Claim button (expanding ring + sparkle burst, 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 + explicit colored tier pill (Gold / Silver / Bronze).

Cleanup

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

Events

Did you introduce any new tracking events?

Yes — funnel lifecycle events (start / view step / complete) and giveback take-action / claim / cause events in lib/log.ts.

Experiment

Did you introduce any new experiments?

No (added featureGivebackSponsors flag, defaulted off, gating the sponsor tiers).

🤖 Generated with Claude Code

Preview domain

https://claude-ecstatic-dewdney-c90ea5.preview.app.daily.dev

…edback Impact tab: - Drop the funding-progress section; the tab now shows only the personal reward-ladder journey, retitled "Your impact". - Rework the journey rail: rounded-square nodes (matching the level badge), a consistent green "completed" trail across nodes and connectors, and a glowing halo on the next target instead of dimming the node. - Replace confetti with a claim celebration on the Claim button (expanding claim-ring + sparkle burst, node pops into its checkmark). Sponsors: - Redesign sponsor cards to be self-describing: flat surface card, white logo tile for contrast, and an explicit colored tier pill (Gold/Silver/ Bronze sponsor) so the level is spelled out. Contribution summary: - Square (rounded) profile image instead of a circle. - Recolor "to go" progress text green (here and in the roadmap). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel · 2026-06-17T20:57:15Z

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

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Jun 27, 2026 1:23pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		Jun 27, 2026 1:23pm

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

Gold cards read biggest and step down to bronze (classic sponsor-wall hierarchy). Bronze pill switches from bacon (red) to burger (brown). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

One row per tier keeps cards uniform within a row and reads the gold→bronze hierarchy top-down instead of mixed sizes wrapping raggedly. Cards are now border-only (no surface fill). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Replace the two-line cards with content-width chips: small logo tile, name, and an inline tier marker (medal icon + short tier word) at the end of the name. Cuts the section's footprint while keeping the per-tier rows and gold>silver>bronze size hierarchy. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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

Sponsors now render as big brand logos on white cards (no company name — the logo carries the brand). One row per tier with a small tier label; card/logo size steps down gold -> silver -> bronze. Name shows only as a fallback when a sponsor has no logo. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drop the white logo cards for flat hairline-border chips. Logos render monochrome (forced light tint) at rest and reveal full color on hover — the standard dark-theme sponsor-wall treatment (Vite/Astro/Tailwind). Keeps per-tier rows and gold>silver>bronze size hierarchy. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

A sponsor logo only counts once it actually decodes (onLoad with non-zero naturalWidth); until then — still loading, hung, CSP-blocked, 404, zero-size, or no URL — the sponsor name shows instead. Previously a logo that failed to fire onError (e.g. hung/blocked) left an empty chip. Also drops loading=lazy so the hidden-until-loaded image still loads. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Per-tier columns (gold/silver/bronze) as equal cards in a centered 3-up grid (stacks on mobile). Logos sit on white tiles so brand colors stay visible; name fallback still covers any logo that fails or hangs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drop the per-tier card borders for divider lines between the three columns. Each logo chip is a flat bordered tile with a monochrome logo at rest and fills white with the full-color logo on hover. Logo size steps down gold > silver > bronze. Layout stays horizontal (stacks on mobile). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drop the unreliable naturalWidth===0 onLoad check (browsers report 0 for viewBox-only SVGs, which wrongly blanked valid logos) — rely on onError. Render monochrome logos at full strength instead of dimmed. Bump gold logo larger and bronze smaller for a more prominent hierarchy (silver unchanged). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Root cause: brand SVGs that ship with only a viewBox (no width/height) — e.g. GitHub, Supabase, Datadog, Algolia from svgl.app — collapse to zero width under 'w-auto max-h-*' and render blank. Use a fixed logo height so the browser derives width from the viewBox aspect ratio; every logo now shows. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Render the sponsor strip in a near-full-width container (max-w-[120rem]) instead of the standard page column so the tier columns get more room and logos only wrap when there are genuinely many. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The action sat in the top-right slot and overflowed the highlighted card on narrow widths. For the current goal it now renders full-width below the progress bar (claim/done/lock still use the right-hand slot for other rows). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- More horizontal breathing room at tablet/laptop widths (column + tab strip px scales up), so content isn't edge-tight around ~1140px. - Hero: "How it works" is fully visible again; the "Giveback" label shrinks on mobile (Body -> Title3 at tablet) so the button fits beside it. - Funnel: on mobile the explainer video only shows inline on step 1 and is dropped afterwards (no floating corner player overlapping the content/footer). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Clicking a category filter in the action catalog or causes tab now scrolls the tab strip back to the top (smooth), so the narrowed list always starts in view instead of the page jumping from the previous scroll position — same behavior as switching the main tabs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Matches the now-flat loaded layout so it no longer flashes from a card into a flat row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The hero, tab content and footer already share one column const; bump its horizontal padding (tablet:px-8, laptop:px-12) and match the tab strip so the left/right gutter is consistent and less edge-tight at mid widths. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Hero: "How it works" is text-only (dropped the icon to save header space); the charm is smaller on mobile (h-32) and hangs to the left instead of centered (logo/label already shrink on mobile). - Contribution level badge is now flat: purple text on a subtle bordered surface, instead of the solid gradient pill. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Use the primary background instead of the translucent surface-float so the badge reads as a solid dark box, not see-through over the avatar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Reserve a viewport-tall tab content area (min-h) so a short/filtered list can still scroll the sticky tabs to the top — no spring-back jump. - Current-goal roadmap card uses a plain subtle border (regular box), not the bright brand ring/glow. - Hero brand ~20% smaller on mobile (logo h-4, "Giveback" Footnote). - Funnel finale value props are horizontal (icon left, copy right) on mobile and only stack/center in the 3-up grid on tablet+, cutting the final page height. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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

…e funnel video - Roadmap 'You're here' now rides the active goal row (face + card + progress on one node) instead of splitting across last-cleared/next. - Force-clear toast timer is tracked and cleared on unmount / re-save. - Funnel docked-video reposition is coalesced to one measure per frame. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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

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

…n stat Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Lead with the honest trade — devs help us grow, we redirect the ad budget to causes they pick. Why-framed, gain-framed, plain dev-brand voice. Updates text-asserting specs to match. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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

…real causes.' Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…es you pick Replace abstract 'help us grow' with the concrete ask (help more developers discover daily.dev) and the concrete why (we grow through devs, not ads) across hero, funnel intro, how-step and FAQ. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…ewport The funnel rendered inside the app content card (overflow-clip + rounded + sidebar offset), so the fixed overlay was confined to the card instead of the viewport. Portal it to document.body via RootPortal; wrap funnel spec renders in a QueryClientProvider (RootPortal reads request protocol). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…es/subtitles Take action / Your impact / Causes / FAQ now render their heading through one component (Title2 bold, Callout/Secondary subtitle, gap-2, max-w-2xl), so size, color, gap and width can't drift between tabs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

… inside Heading and the numbered timeline now share a single centered max-w-md column (aligned left edges, no stray left gap), and each row's text uses min-w-0 flex-1 so the copy always wraps inside the container instead of overflowing. Tighter tile/gap reads cleaner on mobile. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

tsahimatsliah · 2026-06-27T16:24:17Z

Superseded by #6247 — the engineering-ready port rebased clean onto main, reviewed and hardened (cause-selection stale-closure + rollback, claim-celebration reset, shared anchorDefaultRel), with all CI checks green. Closing this design mock-up in favor of that PR.

vercel Bot deployed to Preview – daily-webapp June 17, 2026 21:02 View deployment

style(giveback): fix prettier formatting and tailwind class order

c02c34b

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

vercel Bot deployed to Preview – daily-webapp June 17, 2026 21:08 View deployment

style(giveback): fix prettier formatting in tailwind config

c0976d6

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

vercel Bot deployed to Preview – daily-webapp June 17, 2026 21:16 View deployment

chore: re-run CI (flaky useFeeds test, unrelated to changes)

b42a451

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

vercel Bot deployed to Preview – daily-webapp June 17, 2026 21:24 View deployment

feat(giveback): size sponsor cards by tier and use brown for bronze

a2ce6b3

Gold cards read biggest and step down to bronze (classic sponsor-wall hierarchy). Bronze pill switches from bacon (red) to burger (brown). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp June 17, 2026 21:34 View deployment

vercel Bot deployed to Preview – daily-webapp June 17, 2026 21:46 View deployment

tsahimatsliah and others added 2 commits June 18, 2026 00:52

chore: re-trigger stuck Vercel preview deploy

f66f6d3

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

vercel Bot deployed to Preview – daily-webapp June 17, 2026 22:29 View deployment

vercel Bot deployed to Preview – daily-webapp June 17, 2026 22:39 View deployment

vercel Bot deployed to Preview – daily-webapp June 18, 2026 18:18 View deployment

tsahimatsliah and others added 2 commits June 18, 2026 21:24

vercel Bot deployed to Preview – daily-webapp June 18, 2026 18:32 View deployment

vercel Bot deployed to Preview – daily-webapp June 18, 2026 18:42 View deployment

vercel Bot deployed to Preview – daily-webapp June 18, 2026 19:04 View deployment

vercel Bot deployed to Preview – daily-webapp June 19, 2026 04:57 View deployment

tsahimatsliah and others added 2 commits June 25, 2026 21:47

vercel Bot deployed to Preview – daily-webapp June 25, 2026 18:57 View deployment

vercel Bot deployed to Preview – daily-webapp June 25, 2026 19:05 View deployment

fix(giveback): flat loading skeleton for the contribution stat

8d3abcc

Matches the now-flat loaded layout so it no longer flashes from a card into a flat row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp June 25, 2026 19:13 View deployment

vercel Bot deployed to Preview – daily-webapp June 26, 2026 04:49 View deployment

vercel Bot deployed to Preview – daily-webapp June 26, 2026 04:57 View deployment

fix(giveback): solid dark background for the level badge

12e85f4

Use the primary background instead of the translucent surface-float so the badge reads as a solid dark box, not see-through over the avatar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp June 26, 2026 09:42 View deployment

tsahimatsliah and others added 15 commits June 26, 2026 21:48

fix(giveback): compact funnel finale height on mobile

bc1d274

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

fix(giveback): tab clicks swap content without scrolling to the tab s…

dd5bf20

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

fix(giveback): bleed gradient under card padding so the corner isn't cut

2c2ad0a

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

fix(giveback): drop 'unlocked for your causes' label from contributio…

4a6875b

…n stat Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

fix(giveback): drop reserved min-height on impact/FAQ tabs to remove gap

4eb29ce

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

copy(giveback): remove em dashes from user-facing copy

578e809

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

fix(giveback): match FAQ title size to other tab headings (Title2)

a4ade47

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

copy(giveback): new hero headline 'Ad budgets buy clicks. Ours funds …

bcdeea9

…real causes.' Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

tsahimatsliah mentioned this pull request Jun 27, 2026

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

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(giveback): redesign impact journey, sponsor badges, and claim feedback#6210

feat(giveback): redesign impact journey, sponsor badges, and claim feedback#6210
tsahimatsliah wants to merge 90 commits into
mainfrom
claude/ecstatic-dewdney-c90ea5

tsahimatsliah commented Jun 17, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jun 17, 2026 •

edited

Loading

Uh oh!

tsahimatsliah commented Jun 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

tsahimatsliah commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Events

Experiment

Preview domain

Uh oh!

vercel Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tsahimatsliah commented Jun 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

tsahimatsliah commented Jun 17, 2026 •

edited

Loading

vercel Bot commented Jun 17, 2026 •

edited

Loading