Bring over the homepage work from the download-flow-refactor branch (#683), along with the per-platform download routes it depends on, and fixes some issues of the original design. This does not include the download page redesign itself.

Homepage:

• Replace the old hero with the DownloadCTA hero: a dark hero with "Download Processing" and "Read the docs" buttons, a "Runs on" row of platform icons, and a screenshot of the editor for the detected platform. Add the dark and outline Button variants it uses.
• Encode the editor screenshots at quality 100. Gatsby's default quality of 50 made the UI text in them blurry. This fixes an issue with the original PR.
• Show "Runs on" followed by the platform icons on one row, centered under the buttons, at every width. Each icon link has an aria-label with the platform name.
• Keep the button labels on one line at every width. Between 961 and 1234px, shrink the buttons and the intro text so they fit next to the screenshot. Stack the buttons on small screens.
• Hide the screenshot below 961px rather than showing it under the text. Above that, fit it to the height of the hero, aligned right, with a minimum height that grows with the window width.
• Open the sketch editor by default under a "Sketch with code" intro.
• Add an introduction to the examples section.

Download routes:

• Add /download/windows, /download/macos, /download/linux and /download/raspberry-pi. Each one renders the download page for that platform instead of the one detected from the user agent. The routes are built from content/download/platforms, and the homepage platform icons link to them.

Navbar:

• Refactor the navbar into context-based NavbarItems and add a donate button.
• Render Documentation, Learn and About as plain divs. They have no href, so they rendered as a Link with to={undefined} and their submenu links were nested inside that anchor. Browsers split nested anchors when they parse the server HTML, which caused a hydration mismatch.

Screenshots

BEFORE

AFTER