Prettify About, Team and upcoming FAQ pages

[ivan-aksamentov]

We need to make these a bit prettier, because right now it's a pure horror.

Unleash your imagination! 👨‍🎨

Related: https://github.com/neherlab/covid19_scenarios/issues/147

P.S. FAQ page can be found on branch feat/faq

[kimuraz]

Hi, can I work on this issue? I'm not a designer. However, I've been working with frontend development for a while and saw some opportunities to adopt patterns that are commonly used on some other applications. If approved, I'd be glad to implement it.

Two points that concerns the whole application, would be: 1) Add a padding-top for all the containers with 20px, making the spacing between the navbar and the content better. 2) Change a little bit the layout for the navbar, making your logo more visible and pushing the links to the right.

3) For the Team page, following the layout of the about page, something like:

4) For the FAQ page, just use an "Accordion" like this, that can be achievement on reactstrap as well. This can highlight the question and make it easier to the user to search for it, also focus on a single answer at the time.

What do you think?

[ivan-aksamentov]

@kimuraz , sure, go ahead! Make sure you roughly align the style with https://github.com/neherlab/covid19_scenarios/pull/195

(preview: https://covid19-scenarios-kr9r4tzcm.now.sh/)

You may save some time and take the team snippet from https://github.com/neherlab/covid19_scenarios/blob/master/README.md#initial-development feel free to use MDX for pages or just for components, when needed.

You can also add "Contributors" section to the team page. We auto-generate this snippet: https://github.com/neherlab/covid19_scenarios/blob/master/src/assets/text/contributors-generated.md with https://github.com/all-contributors/all-contributors we insert it in the "Contributors" section as well as into this separate file, so that you can just import it as a component with MDX (https://mdxjs.com/)

In fact, maybe we should rename "Team" and /team to "Acknowledgements" /acknowledgements and just reuse the section from the readme? What do you think?

Important: all the main content (the article and the Q/A sections) in About and FAQ pages should be in MD or MDX, so that Richard could update it more easily, without struggling with JSX :) Page layout can be in JSX.

Not sure about accordeon, but ids and "Go to top" would probably be very cool.

Also, is there a way to automatically generate a Contents section with the list of questions?

And feel free to add yourself there to test how it works in the end :) See their CLI documentation for how to do that.

Please create a draft PR and keep rebasing it and add commits there. Feel free to experiment and to try different things!

[kimuraz]

On it @ivan-aksamentov, will post some updates here when need. Thanks for the guidance.

[ivan-aksamentov]

Mostly resolved by #263