feat(giveback): warm-up funnel + reworked hero#6256
Merged
Conversation
Replaces the inline cause-picker onboarding with a full-screen 4-step warm-up funnel (why -> how it works -> pick causes -> impact), shown once for everyone via a persisted giveback:funnel_seen flag and replayable from the hero's 'How it works'. A single mounted explainer video docks from inline to a floating corner player across steps; hidden on mobile after step 1. The hero is reworked around the new GivebackHeadline + charm mascot + live funding summary, with 'How it works' as its only onboarding entry (the funnel auto-shows for first-timers). Removes the old StartPanel join CTA, the inline picker, GivebackOnboardingBar and the sticky GivebackFundingBar. Adds the funnel lifecycle log events and the funnel-step-in / coin-drop keyframes. Sponsors stay unrendered (no flag), per the prior PR. Note: the docked video uses fixed positioning + scroll/resize listeners; worth a real-app smoke test (not just Storybook).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…ft, split funnel Onboarding: - The funnel now shows automatically for any eligible visitor who hasn't saved causes (gated on selection.hasSavedCauses), not a local giveback:funnel_seen flag, so it keeps appearing until they pick. - Hold the whole page body until the campaign status and saved picks resolve. The funnel is a full-screen overlay on the same background, so revealing the hero/tabs first flashed them before it covered them and popped the tabs in once the picks landed. Now only the shared background shows while resolving: no flash, no shift. Hero layout shift: - The mascot <img> had a fixed height but auto width and lazy loading, so it reflowed the hero row (and the tab bar/content below) when it loaded. Pinned the charm's 2812x2024 aspect ratio so the width is reserved up front. Funnel split (was ~630 lines): - givebackFunnelTypes.ts: STEP_KEYS / StepKey / CauseSelection - GivebackFunnelVideo.tsx: the docked explainer video - GivebackFunnelSteps.tsx: the per-step content - GivebackFunnel.tsx: the orchestrator shell (state, nav, footer, portal)
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
Fifth step of the giveback design pass from #6247 (PR 5/6). The big one: the warm-up funnel and reworked hero, replacing the old inline-picker onboarding.
Warm-up funnel (new)
GivebackFunnel: full-screen 4-step intro (why → how it works → pick causes → impact finale), shown once for everyone via a persistedgiveback:funnel_seenflag, and replayable on demand from the hero's "How it works".funnel-step-inreveals + a glow stage, allmotion-safe/prefers-reduced-motionaware.origin: 'funnel'); a forced first run drops them into the campaign, a replay just closes.Hero (reworked, lands here per the earlier re-sequencing)
GivebackHeadline, charm mascot, live funding summary, mobile scaling.Removed
GivebackStartPanel(+ spec) and the oldisResolving/join-CTA flowGivebackCauseSelectionpicker wiring +GivebackOnboardingBar(+ spec)GivebackFundingBarSupporting
StartGivebackFunnel/ViewGivebackFunnelStep/CompleteGivebackFunnel/ClickGivebackHowItWorks)funnel-step-in+coin-droptailwind keyframespx-4 tablet:px-8 laptop:px-12) and filterable-tabmin-hto stop the scroll jumpGivebackMascotimage override,GivebackActionCataloggainsonFilter(scrolls the tab strip like the causes tab)Scope notes / decisions
featureGivebackSponsors.GivebackFaqdirectly (noGivebackFaqPanelwrapper), consistent with PR4.The docked explainer video uses
position: fixed+ scroll/resize listeners measuringgetBoundingClientRect. Tests + Storybook pass, but this should be eyeballed in the running webapp (docking, z-index, mobile) before merge.Verification
tsc: no new errors (27 pre-existing, unrelated)GivebackFunnel.spec)Preview domain
https://feat-giveback-funnel-hero.preview.app.daily.dev