Conversation
- Redesigned hero section with bold headline emphasizing 0.5% earning potential - Added interactive StepGuide component with expandable cards - Created EarningExplanation component with interactive calculator - Added EarningFlow visualization component - Created NetworkVisualization component for invite network display - Enhanced InviteAndEarnCard with social sharing buttons (Twitter, Discord) - Enhanced CollectRewardsCard with celebration animations and better visuals - Added StatsSection component (ready for API integration) - Improved mobile responsiveness across all components - Modern, engaging design targeting crypto-savvy users aged 18-25
- Replaced dark backgrounds with glass morphism using CSS variables - Updated all cards to use bg-[var(--glass-bg)] and border-[var(--glass-border)] - Applied backdrop-blur-[20px] and rounded-[20px] consistently - Added hover effects with shadow and translate-y transitions - Reduced opacity of gradient overlays for subtler glass effect - Matches the liquid glass aesthetic used in feed items
- Update hero section text to 'Earn up to 0.5% of Every Token Purchase' - Update commission rate stat to 'Up to 0.5%' - Update InviteAndEarnCard description to 'Earn up to 0.5%' - Update EarningFlow badge to 'Up to 0.5% Commission' - Update EarningExplanation percentage display to 'Up to 0.5%'
- Remove AuroraBackground import from Invite.tsx - Remove auroraConfig state and customization controls - Remove AuroraBackground component usage from hero section
✅ Deploy Preview for fancy-gelato-7cdad5 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| }, 200); | ||
|
|
||
| return () => clearInterval(interval); | ||
| }, [inviteCount]); |
There was a problem hiding this comment.
Bug: Unnecessary animation wastes system resources.
The animation interval in NetworkVisualization continues running indefinitely even after all nodes are displayed. Once animatedNodes.length reaches nodes, the interval keeps firing every 200ms but only returns the same state, wasting CPU cycles. The interval should be cleared when animation completes.
paolomolo
force-pushed
the
feat/invite-earn-page-redesign
branch
from
d924650 to
a25fe6b
Compare
| <stop offset="0%" stopColor="#ec4899" stopOpacity="0.5" /> | ||
| <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.5" /> | ||
| </linearGradient> | ||
| </defs> |
There was a problem hiding this comment.
Bug: Shared SVG Gradients Corrupt Visuals
SVG gradient IDs (centerGradient, nodeGradient, lineGradient) are hardcoded without uniqueness. If multiple NetworkVisualization components render on the same page, the gradient IDs will conflict, causing visual rendering issues where gradients from one instance affect others.
| <Share2 className="w-4 h-4" /> | ||
| <span>Share</span> | ||
| </button> | ||
| )} |
There was a problem hiding this comment.
Bug: Graceful Handling for Share API Failures
Calling navigator.share() without error handling can throw exceptions if the user cancels the share dialog or if sharing fails. The unhandled promise rejection could cause console errors and poor user experience in production.
|
Tested on PR -> the design looks great overall, just a few small notes to mentioned: First of all, there is a bug opened for Revoke invites that are not displayed as revoked which would be nice to be resolved soon: #252 Additional gugs on Desktop & mobile: Mobile: WhatsApp.Video.2025-11-11.at.12.19.05.mp4
WhatsApp.Video.2025-11-11.at.12.53.44.mp4Also, one question: do we want the diagram to show all invitations as points, or just the ones claimed? -- because for example if I have 10 invitations, but I revoked 5, I think would be better to shown only 5 points as my network diagram, not all invites generated |
2 participants
Note
Redesigns the Invite & Earn experience with new guides and visuals, enhanced rewards/invite cards, and built‑in social sharing.
src/views/Trendminer/Invite.tsx)localStorage.Invitation/StepGuide.tsx: 4-step how-it-works card with expandable steps and CTA.Invitation/EarningExplanation.tsx: percentage explainer with interactive calculator and visual flow.Invitation/graphics/EarningFlow.tsx: invite→buy→earn visualization.Invitation/graphics/NetworkVisualization.tsx: animated invite network diagram.Invitation/StatsSection.tsx: placeholder community stats (hidden by default).Invitation/index.ts.Invitation/CollectRewardsCard.tsx: refreshed UI, eligibility animations, progress bar, and clearer status/CTA.Invitation/InviteAndEarnCard.tsx: updated copy and layout; adds copy-to-clipboard feedback, Twitter/Discord/native share buttons, and improved validation/error display.Written by Cursor Bugbot for commit a25fe6b. This will update automatically on new commits. Configure here.