feat(giveback): redesign impact journey, sponsor badges, and claim feedback#6210
Open
tsahimatsliah wants to merge 32 commits into
Open
feat(giveback): redesign impact journey, sponsor badges, and claim feedback#6210tsahimatsliah wants to merge 32 commits into
tsahimatsliah wants to merge 32 commits into
Conversation
…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>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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>
Collapse the tall three-column cards into one compact, content-width bordered box. 'Sponsored by' moves inline at the start; a divider separates each tier section. Smaller logos, monochrome at rest, white + full color on hover. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bump tier logo sizes (gold h-10, silver h-7, bronze h-5) for a clearer hierarchy and a slightly bigger strip; grow box padding and divider to match. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Widen the per-tier logo step (gold h-14, silver h-8, bronze h-4) for a much clearer hierarchy; divider grows to match. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Wide wordmark logos were all hitting a shared max-w-[120px] and shrinking, which flattened the height hierarchy (gold and silver looked the same). Scale each tier's width cap with its height (gold 260px, silver 150px, bronze 80px) so gold renders large. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Render the sponsor strip in the standard page column (like the hero/video/ action sections) instead of an extra-wide container, and let the bordered box fill that width so it lines up with the rest of the page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Pull the label out of the bordered box and place it above, left aligned. Dividers now separate only the tier sections inside the box. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the pill-shaped (rounded-full) step connector with a crisp 3px rectangular track so it no longer reads as an oval. Also constrain the 'ready to claim' gift icon size so it stays proportional in its pill. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
New users were confused about what the campaign is, whether it costs them, and where the money goes. Add a full-screen 6-step funnel (what it is → how it works → pick causes → your impact → see it work → start) that answers each question one beat at a time, with an animated community-pot 'aha'. - Reuses the existing cause picker for the 'pick causes' step and saves on completion, so it replaces the standalone first-run picker. - Forced once for everyone via a persisted seen-flag (usePersistentContext), no skip; relaunchable any time from a new 'How it works' button. - Cause step never traps the user (only blocks when causes exist and none picked). New analytics events for funnel start/step/complete. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Apply interface-craft principles (jakub.kr / Interfaces): signature enter animation (rise + de-blur + fade, staggered 90ms per element), replayed on every step; living glow behind each stage; coin drops into the community pot; text-wrap balance/pretty; will-change — all motion-safe guarded. Makes the flow feel like a serious, considered campaign. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…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>
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>
- 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>
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>
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>
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.
Changes
Design polish across the giveback page, focused on the Impact tab, sponsor badges, and reward feedback.
Impact tab
prefers-reduced-motion.Sponsors
Contribution summary
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