Redesign startpage

Closes #1003 (closed) #970 (closed)

What does this MR do?

https://www.figma.com/file/PueFErrFB2yRpaNV0BqyJ2/Foodsharing?node-id=337%3A6584

How confident are you it won't break things if deployed?

I think not. It's just the start page. I was hoping Clara would do a design review directly through the branch. Unfortunately, the wish did not come true. So the design review can only be done when the MR is in master.

Checklist

• added a test, or explain why one is not needed/possible...
• no unrelated changes
• asked someone for a code review
• set a "for:" label to indicate who will be affected by this change
• use "state:" labels to track this MR's state until it was beta tested
• added an entry to CHANGELOG.md
• add a short text that can be used in the release notes
• Once your MR has been merged, you are responsible to create a testing issue in Beta Testing Repo:
  • Consider writing a detailed description in German.
  • Describe in a few sentences, what should be tested from a user perspective.
  • Also mention different settings (e.g. different browsers, roles, ...). how this change can be tested.
  • Be aware, that also non technical people should understand.

Release notes text

(A short text that will appear in the release notes and describes the change for non-technical people. Not always necessary, e.g. not for refactoring.)