Mythril Website - Misc Updates and Fixes

In this challenge you will make misc updates and fixes for Mythril website, which is powered by ReactJS and uses the same tech stack as our community-app. You will find all necessary assets in the challenge forum. During the work, please remember that both mobile and desktop views are in scope.

Scope

1. Connect API key page to the api sign-up functionality. On success, the page should show generated API key, with a warning that it should be stored, as it won't be possible to see the API key again, nor register another key with the same email. On error, it should show human-redable error message. reCaptcha should be used to protect registration flow.
    
2. Fix the splash screen shown at the first visit to the website (Mythril logo pulsing above white background; it uses browser cookie to remember that it was shown, thus does not show up the next time you visit the site in a normal way):
   - When you enter the website for the very first time (check in Incognito window of your browser) you first see the website for a moment, then the splash screen appears. The splash screen should be properly shown right away.
   - Currently, splash screen fades out into white background, which is then switched to the dark blue background of the home page. According to the design, the splash screen should fade directly into the dark blue background, and the animation of home page should start after the fade.
    
3. Add animation of elements in the home page, as per design.
    
4. When the webiste is accessed in mobile view it shows with the head nav menu open - correct this. Also, opened menu should block the scrolling of website.
    
5. As per design, opacity of the background mesh, and of the head nav menu, changes when the website is scolled (or, better say, they depend on the currently displayed section, white or dark). We should implement this, so that it works automatically on all pages. As a suggestion, we probably can use react-waypoint components added to background sections, to track which section visible, store that information in Redux, and rely on that to trigger changes of background mesh opacity, and of the head navigation menu background / logo visibility.
    
6. In mobile view, the mesh in background seems too dence, compared to desktop view and designs - fix this.
    
7. Fix big logo at home page: its 3d perspective is a bit incorrect:
   
   
    

 

Final Submission Guidelines

Submit Git patch against the commit 467a1e9ad7cfabfc7dea370f84a6c0d29efd21a2, and a brief verification video.