UX Overhaul, add user guide

[kartikcho]

Resolves #125

Changes made in this PR

• Add loading spinner when a profile is being processed (the app used to freeze the tab with no visual feedback about loading earlier).
• Add a modal explaining the profiler's different elements, events and a legend key about the event colors.
• Slightly changed landing content.

Screenshots:

We should update the explanations if they're not clear enough. Also, the legend keys look out of place in my opinion, we should think of a better layout. Maybe add another image explaining resize bar and scroll?

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more). To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/mlh-fellowship/scheduling-profiler-prototype/qctzjq752
✅ Preview: https://scheduling-profiler-prototype-git-ux-overhaul.mlh-fellowship.vercel.app

[kartikcho]

What do you think about using labelled images like below?

[taneliang]

Cool! First impressions:

• Could we left-align the text instead? The gaps between the words make them a bit hard to read
• The text animates in 2 phases when the window is resized, like #65
• The images are too small to be seen when the window is narrow. Could we move the images above the text in those situations?

legend keys look out of place in my opinion

Yep, I agree

What do you think about using labelled images like below?

That looks okay, but we need to explain what React measures are

[kartikcho]

Could we left-align the text instead?

Sure

The text animates in 2 phases

It's because of the 'lazy' transition when overlay is loaded, not really an issue.

Could we move the images above the text in those situations?

Changed layout to single column, removed event legend key, moved images below text though.