feat(referral): redesign invite settings page around 3-invites Plus promo#6367
Open
tsahimatsliah wants to merge 3 commits into
Open
feat(referral): redesign invite settings page around 3-invites Plus promo#6367tsahimatsliah wants to merge 3 commits into
tsahimatsliah wants to merge 3 commits into
Conversation
…romo Rebuild /settings/invite as a campaign surface: a marketing-inspired hero with a cabbage-to-onion gradient headline promoting "invite 3 friends, get 1 month of Plus free", a 3-slot progress chain filled with referred users' avatars ending in a Plus reward chip, a how-it-works step grid, and a giveback cross-promo card (gated on featureGiveback) inviting users to contribute to the community. The reward framing is driven by referredUsersCount from the generic referral campaign; share link input, social share list, and the referrals list stay intact. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…ions Replace the aurora hero and per-section bespoke styling with one visual language: every block is a standard settings AccountContentSection, the progress chain shrinks to a compact inline row (size-8 avatar slots + neutral connectors + a single Plus-accent chip), how-it-works becomes a flat numbered list, and the giveback promo becomes a plain float card with a gift icon instead of gradients and mascot art. No gradients, glows, blend modes, or animations — one accent color, one card treatment, one section rhythm. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Reuse the visual language of GivebackFoundingAward for the invite page's giveback promo: a 1px avocado/cabbage/cheese gradient frame over an opaque base washed with the same gradient at 8% via color-mix, a gradient-text eyebrow, callout title, footnote body, primary CTA, and the Giveback charm on a glow. Co-Authored-By: Claude Fable 5 <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
Rebuilds
/settings/inviteas a compact, flat campaign surface. Every block uses the same settings-page rhythm (AccountContentSectionheading + description), one card treatment, and a single accent color — no gradients, glows, mascots, or animations:referredUsersCountfrom the generic referral campaign, display capped at 3.featureGiveback) flat float card with a gift icon and a secondary "Explore Giveback" button into/giveback; honest-trade copy per the giveback voice guide.AccountInvitePage.tsxcovers promo render, 0/2/3 progress states, and giveback gating on/off.Note
The "1 month of Plus free" grant is frontend framing only — there's no backend mechanic granting Plus at 3 referrals yet. The completed state celebrates the unlock without promising a timeline; fulfillment needs backend work.
Events
No new event names. One existing event fires from a new surface:
target_id: invite friends pageExperiment
No new experiments. The giveback section reuses the existing
givebackflag viauseConditionalFeature.Manual Testing
Caution
Please make sure existing components are not breaking/affected by this PR
The page is auth-gated, so visual review is best done on the Vercel preview at
/settings/invite. Jest (__tests__/AccountInvitePage.tsx), ESLint, and the strict typecheck guard pass locally; the progress row and giveback card stack vertically below the tablet breakpoint and should get a sanity pass at MobileL/Tablet/Laptop widths on the preview.🤖 Generated with Claude Code
Preview domain
https://claude-refer-friend-settings-red.preview.app.daily.dev