Feat/onboarding game

[luxumbra]

Overview

Fixed all known bugs and breakages.

Feedback has been responded to and implemented

TODO:

• [x] Responsive work

What features/fixes does this PR include?

• ~~Adds an extra section to the landing page for the Onboarding Game.~~ Onboarding game is now on its own page /onboarding (linked to from 'Join' in the #join-us section) in response to feedback.
• adding better accessibility on the landing page by checking the prefersReducedMotion user preference in the OS, setting the pref in localStorage and disabling transitions, animations and Spring. Also includes a toggle to give the option to those who want it. This should just affect the landing & onboarding pages.
• Chiev claim functionality is now 100% working ~~albeit on Mumbai rn~~ and is using 'ChieveMint contracts 🥳.
• I have styled up the Web3Modal so it is now much more part of our brand & vibe.
• I also added a friendlier message to the signer message in Metamask so doesn't just show gibberish (to the web3 n00bz)
• All images on the landing page have been optimised and responsive sizes added in some cases.
• General tidy up on some font-sizes & alignment issues
• Includes a styled (in webkit) scrollbar that is currently global (i like it but interested in others thoughts)
• I have added a 'Matrix Rain' effect component for the background of the onboarding game
• Also added the effect to the previous 'WhatDo' & 'Join Us' sections (where there's a pc screen image) - this is also toggle-able from the toggle switch in the header

No issue number

Follow up Improvement Ideas

• [x] Responsive work has not been done. Focus to date has been on hooking everything up and making ure the game is playable. responsive work will follow
• [ ] Add in either new 3d render or a 3d scene - probably running out of time for that for v1.
• [ ] I'd like to add in some more interactivity
• [ ] add 'bloom' effect with a shader to enhance the rain

Implementation

paired-with: @dysbulic & @tenfinney

Describe technical (nontrivial / non-obvious) parts of your code

Side effects Globally styles the scrollbar for the landing page & the rest of the application. It could be isolated to the landing page but personally I like the design pattern and took inspiration from QuestChains UI (props to @davort & co 🙏🏻)

Assets

[Include screenshots/videos if it makes reviewing easier.]

[dysbulic]

@luxumbra, I don't think you can put the paired-with inline. I think it has to be on its own line at the end.

[luxumbra]

@luxumbra, I don't think you can put the paired-with inline. I think it has to be on its own line at the end.

moved to the 'Implementation' section

[luxumbra]

I gave it a quick look and left a bunch of comments.

Amazing! Thank you for the time taken to check this over @dan13ram. I've responded or emoji'd all comments and will address them over the next couple of days.

Overall this is just amazing!!! Fantastic work @luxumbra pray

I appreciate that, thanks. 😊

I'll take another look once you fix these comments :)

I appreciate you. 🐙

[luxumbra]

My eyes sorta glazed over at times, but I didn't see anything that looked like it'd blow up in the near term. joy_cat

The most common one is something @dan13ram said as well: colorname.num rather than var(--chakra-color-colornamenum). I'm uncertain about the dots. I would expect the format to be the same as with system props.

Thanks for taking the time on this @dysbulic. Now I am back in Chakra mode, yes, I think it can just be referenced as colornamenum in Chakra attributes. Will address feedback and push again in a cpl days. 🙏🏻

[github-actions[bot]]

Successfully undeployed the Preview of this Pull Request