Skip to content

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

Open
tsahimatsliah wants to merge 43 commits into
mainfrom
claude/ecstatic-dewdney-c90ea5
Open

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

Conversation

@tsahimatsliah

@tsahimatsliah tsahimatsliah commented Jun 17, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Member

Changes

Design polish across the giveback page, focused on the Impact tab, sponsor badges, and reward feedback.

Impact tab

  • Removed the funding-progress section — the tab now shows only the personal reward-ladder journey, retitled "Your impact".
  • Reworked the journey rail: rounded-square nodes (matching the level badge), a consistent green "completed" trail across both nodes and connector lines (previously nodes turned green while the line stayed purple), and a glowing halo on the next target instead of dimming the node itself.
  • Replaced confetti with a claim celebration on the Claim button — an expanding ring + sparkle burst, and the node pops into its checkmark. Respects prefers-reduced-motion.

Sponsors

  • Redesigned sponsor cards to be self-describing: a flat surface card with a white logo tile (for contrast/legibility) and an explicit colored tier pill (Gold / Silver / Bronze sponsor), so the sponsor level is spelled out rather than hinted at with a dot.

Contribution summary

  • Profile image is now a rounded square instead of a circle.
  • "to go" progress text recolored green (here and in the roadmap).

Deleted dead code along the way (GivebackCommunityGoalProgress, ConfettiSvg) and updated the affected RTL tests for the new copy.

Events

Did you introduce any new tracking events?

No.

Experiment

Did you introduce any new experiments?

No.

🤖 Generated with Claude Code

Preview domain

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

@tsahimatsliah @claude
feat(giveback): redesign impact journey, sponsor badges, and claim fe…
f559a51 
…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

vercel Bot commented Jun 17, 2026 •
edited
Loading

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 24, 2026 8:49pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
storybook Ignored Ignored Jun 24, 2026 8:49pm

Request Review

@tsahimatsliah @claude
style(giveback): fix prettier formatting and tailwind class order
c02c34b 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
style(giveback): fix prettier formatting in tailwind config
c0976d6 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
chore: re-run CI (flaky useFeeds test, unrelated to changes)
b42a451 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
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>
@tsahimatsliah @claude
feat(giveback): group sponsor cards into per-tier rows, drop card fill
60914ac 
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>
tsahimatsliah and others added 2 commits June 18, 2026 00:52
@tsahimatsliah @claude
feat(giveback): compact single-line sponsor chips
4068700 
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>
@tsahimatsliah @claude
chore: re-trigger stuck Vercel preview deploy
f66f6d3 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(giveback): logo-forward sponsor wall, drop name text
57c811f 
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>
@tsahimatsliah @claude
feat(giveback): flat monochrome sponsor wall
d423cad 
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>
tsahimatsliah and others added 2 commits June 18, 2026 21:24
@tsahimatsliah @claude
fix(giveback): never render a blank sponsor chip
e666276 
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>
@tsahimatsliah @claude
feat(giveback): three-column sponsor cards with white logo tiles
0a3d35d 
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>
@tsahimatsliah @claude
feat(giveback): divider columns + hover-lit monochrome sponsor chips
2cf930b 
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>
@tsahimatsliah @claude
fix(giveback): robust sponsor logo render + stronger tier sizing
c80a3de 
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>
@tsahimatsliah @claude
fix(giveback): render viewBox-only sponsor logos (fixed logo height)
dcc9fcf 
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>
@tsahimatsliah @claude
feat(giveback): widen sponsor wall beyond the page column
5b4383a 
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>
@tsahimatsliah @claude
feat(giveback): wider funnel, punchier copy, bigger visuals, real act…
23de462 
…ion demo

- Widen the funnel to max-w-4xl so content/causes are easier to read and select.
- Rewrite step copy in a confident, explicit voice (Nikita-Bier-style clarity):
  'You act. We pay. Causes win.', 'Your activity funds real causes', etc.
- Enlarge the hero visuals (globe, mascot, community pot) so each step stands out.
- Replace the abstract 'see it work' step with a real, interactive example from
  the take-action list: 'Share daily.dev on X' -> Try it -> a mock posted result
  + '+50 dropped into the pot' so the mechanic is concrete.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
chore(giveback): remove em-dashes from copy and comments
327e21c 
Swap em-dashes for natural punctuation across the giveback feature so the
copy doesn't read as AI-generated.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(giveback): make the funnel real and value-forward
e8a69d1 
- Intro now shows the core idea as a picture: ad budget redirected into real
  causes (muted -> bright), instead of a plain glow icon.
- 'How' shows the entire campaign as a 4-step sequence (act -> pot -> goal ->
  donate) so the whole flow is explicit at a glance.
- Replace the abstract demo with a real community-proof wall: a talk shared on
  X, a YouTube video, and a blog post, each tagged with the real action and its
  real dollar payout to causes.
- Richer gradient icon tiles and bigger hero visuals throughout.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 24, 2026 15:08
@tsahimatsliah @claude
feat(giveback): persistent floating campaign video in the funnel
00f1ce2 
The campaign explainer plays inline on step 1, then docks to a floating
bottom-right player for the rest of the funnel. A single mounted instance is
repositioned (over an in-flow slot on step 1, pinned to the corner after) so
playback never restarts when it moves, with a close button once docked.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(giveback): make the action ask explicit on the proof step
3f29242 
Each community example now leads with a clear header: the action we're asking
for, a one-line description of what to do, and the dollar payout to causes,
with the real post shown below as 'A real example'. Adds a subtitle clarifying
these are actions the user can pick.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 2 commits June 24, 2026 15:50
@tsahimatsliah @claude
feat(giveback): restructure the proof step into uniform action cards
19f01cf 
The mismatched tweet/video/blog cards read as visual noise at different
heights. Replace with three equal-height, consistently structured cards
(color-coded action icon + reward, the ask, then a short real example pinned
to the bottom so dividers align). Cleaner and easier to scan.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(giveback): redesign How it works into a connected milestone track
9f29ac5 
Replace the four identical purple gradient tiles with a connected milestone
track: per-step accent gradients on circular badges, a gradient connector line
showing momentum, and a glowing gold 'unlock the goal' focal point. Reframe the
copy around the community raising the bar together to unlock the budget for
causes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(giveback): trim funnel to four steps with a personal finale
04682da 
Drop the community-proof and standalone start steps so the funnel only
highlights what matters: what it is, how it works, pick causes, and the
impact. Impact becomes the finale, surfacing the visitor's own picked causes
as chips and completing the funnel. Remove now-dead components.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(giveback): slim the page cover - drop video and CTA, fold the me…
0fcc364 
…ter into the headline

Remove the hero campaign video and the right-side join button (onboarding now
lives in the warm-up funnel), and fold the funding progress meter directly
under the headline. Delete the now-dead picker/onboarding-bar path on the page.
The cover is compact, so the action tabs sit higher and more central.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
tsahimatsliah and others added 4 commits June 24, 2026 22:34
@tsahimatsliah @claude
feat(giveback): gate sponsors behind a flag, move How it works into t…
2383c97 
…he tab strip

Sponsors are off at launch (no sponsors yet) behind a giveback_sponsors flag.
The How it works button moves from under the hero to the right of the tab nav.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(giveback): lighter funnel chrome, roomier causes, celebratory fi…
5aef1eb 
…nale

Replace the funnel's heavy top progress bar with carousel dots + Back/Next
buttons. Causes show full descriptions, two per row. The impact finale
celebrates the visitor's specific picks as prominent cards with a thank-you.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
docs(giveback): Storybook coverage for the giveback feature
f4af8d0 
Stories + mock providers (seeded query cache + auth/log contexts) for the
funnel, journey roadmap, cause selection, funding meter/bar, sponsor tiers,
contribution summary, action catalog, submission + edit-causes modals, tab
nav, page cover, and campaign pieces — every state, for fast design iteration.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
docs(giveback): start the funnel story with no causes pre-selected
780d26a 
Match a brand-new user's first-time pick (nothing selected by default).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
fix(giveback): funnel stepper uses rounded-rectangle indicators, not …
9239418 
…ovals

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(giveback): explicit action brief, personal journey, tab split + …
f6de1d3 
…polish

- Submission modal: redesign the top into an explicit "action brief" — platform
  logo, the ask, the reward, full numbered how-to, and a "Go to <platform>"
  button — so it's obvious what to do before the proof fields.
- Impact: rebuild the "levels" header into a proud impact statement and put the
  user's profile picture on the trail as the "you are here" marker; calm the
  palette to one meaning-per-color system (green done / cabbage you+next / gold
  summit-once / neutral locked), circles not squares.
- Tabs: split Campaign into Causes (manage all causes, yours on top) and FAQ
  (the "Big tech buys ads. We fund developers." story + FAQ); delete the dead
  Campaign panel, selected-causes recap, and edit-causes modal.
- Hero + copy: make the why and the ask explicit and proud across surfaces.
- Funnel: reimagine "how it works" as a vertical numbered timeline.
- Background: fade the brand sweep vertically so it fills the top corners and no
  longer reads as "cut" gaps inside the app's rounded content card.
- Extract GivebackPlatformLogo so the card and modal share one logo renderer.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tsahimatsliah @claude
feat(giveback): rework funnel finale + journey roadmap for clarity, c…
e86e6ed 
…ontrast, brand

Funnel:
- Move the carousel dots above each step's title and drop the eyebrow labels;
  every step is now a clear title + subtitle.
- Rebuild the impact finale: two-line message + the user's chosen causes as
  high-contrast, branded CauseEmblem cards (no more low-contrast green-on-green).

Journey roadmap:
- Markers are rounded-rect squircles, not circles, to match daily.dev branding;
  the "you are here" avatar is a rounded square too.
- Contrast-first palette: calm surface tiles by default, green only as a "done"
  check accent, cabbage as the single live/goal accent, summit gets the one
  brand-gradient tile. No washed-out green fills or low-contrast glyphs.
- Summit reward uses a gift icon instead of a medal.
- The current-goal card is a tight, clearly-bounded card so its action button
  stands out instead of a wide sprawly box.
- Stronger claim celebration: flash + expanding ring + brand-colored confetti,
  bigger "Claim reward" button.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@tsahimatsliah