Project: nextjs
Task (challenging): 1) Implement an invitation system where current users can view their unique .referral-code (with pure referral-code as innerText) on their profile page, explaining the invitation rule under .referral-code: 'When a new user registers through your referral code, you will earn $888, and an additional $1888 when they pay for their first order.' And the system should automatically credit the referring user with reward by this rule. 2) On the register page, add a .referral-code-input field allowing new users to input the referral code during registration. 3) Create CSS files to beautify the invitation system, ensuring a cohesive look. Constraint: DO NOT use a third-party UI library.