Revamp /referral with the Give & Endowment design language#908
Draft
TylerDiorio wants to merge 4 commits into
Draft
Revamp /referral with the Give & Endowment design language#908TylerDiorio wants to merge 4 commits into
TylerDiorio wants to merge 4 commits into
Conversation
Convert /referral into a standalone immersive landing page that mirrors /give and /endowment: cosmos hero with AnimatedGlobe, scroll-triggered top bar with back button, styled-jsx sections (Cal Sans headings, gradient accents, hover-lift cards), light-blue impact band, cosmos calculator, and a FAQ accordion, ending in the shared LandingPageFooter. All existing functionality is preserved: referral link copy/QR/social share with analytics, live impact metrics with GSAP count-up and credits tooltip CTAs, paginated referred-users list with expiration UX, and the 10% bonus calculator. Share/copy/social logic is centralized in a useReferralShare hook. Removes the now-unused components/Referral dashboard files.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Add a min-width to the hero and top-bar copy buttons so swapping the label to 'Copied!' no longer shrinks the button or nudges the adjacent 'See how it works' CTA.
Replace the give-style starfield + AnimatedGlobe hero visuals with a referral-specific treatment: a vibrant brand-blue field with a static connection-mesh background (ReferralMesh) and a custom animated referral-network centerpiece (ReferralNetworkGraphic) showing 'you' at the hub branching to the funders you refer, with RSC-orange pulses flowing outward. This keeps the page in the brand family while giving it a distinct hero from give (globe/cosmos) and endowment (tree/light). Also format the calculator's 'You receive' / 'Funder receives' amounts as whole dollars (no cents) to match the contribution input.
Use 'Refer a funder, get rewarded.' rather than 'get paid': the bonus is non-redeemable Funding Credits that can only fund research, so 'paid' would imply personal cash compensation that doesn't exist. 'Rewarded' is accurate for non-cash program benefits, and the lead now clarifies the credits go toward funding research.
|
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
2 participants
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.
Summary
Revamps
/referralinto a standalone, immersive landing-style page that is a visual sibling of/giveand/endowment, while preserving 100% of existing referral functionality.Like give/endowment, the page now drops the
PageLayoutapp shell in favor of its own standalone layout, a scroll-triggered top bar (with a back button viauseSmartBackso users return into the app), styled-jsx sections, and the sharedLandingPageFooter. All root providers (UserProvider,ToasterProvider, etc.) wrap every page, so functionality is fully preserved withoutPageLayout. The route stays auth-gated by middleware andnoindexviagetReferralMetadata.New section flow
Starfield+ indigo gradient + blob),AnimatedGlobecenterpiece, Cal Sans headline with blue accent, assurance badges, Copy-link + "See how it works" CTAs.CosmosPixelFade+PixelBackdrop); link input + Copy + QR + X/LinkedIn/Bluesky, reusingQRCodeModaland preserving all analytics events./public/referral/*.webpillustrations.my_metricsdata, GSAP count-up, credits tooltip CTAs, and error/skeleton states.network_detailspagination, avatars/AuthorTooltip, and expired/expiring-soon UX, plus empty/error/skeleton states.Implementation notes
app/referral/components/(mirrors give/endowment).useReferralSharehook (single source of truth for the link, clipboard copy, social intents, and analytics events).components/Referraldashboard files (ReferralDashboard,ReferralHeader,ReferralLinkCard,HowItWorksSection,ReferralImpactSection,ReferredUsersList,ReferralCalculator, and the three skeletons) and trimmed the barrel (retainedQRCodeModal, which the new share card reuses). The moderator dashboard at/moderators/referraluses separate components/hooks and is unaffected.Testing
npm run type-check— passes.npx eslint app/referral components/Referral/index.ts— passes.