Add 'How to install' section to the main page

[arcticbear]

Regarding the legal requirements, there must be a section on the website with a description of how to download and/or install the software.

Suggesting to add:

• A ghost 'install' button in the header on the top right. A click will show a simple flyout dialog. It closes after clicking everywhere outside the menu or after pressing the 'OK' button. The command copy button would be very useful here.
  

• A button 'Download' in the Hero section. It should redirect to the 'https://github.com/iterative/cml#install-cml-as-a-package' page with an anchor, as well as link 'More in documentation' in the popover.

Design mockups → Open in Figma.

Full mockup example

[arcticbear]

@julieg18 Added hovered and pressed states for the flyout dialog elements and the download button. (Open specs in Figma)

Example

[arcticbear]

@julieg18 And almost forgot one important thing. It would be great if UI gives feedback to a user when the command is successfully copied. Green label should disappear after several seconds (let's try 3 sec). (Link to mockup)

[julieg18]

@julieg18 Added hovered and pressed states for the flyout dialog elements and the download button. (Open specs in Figma)

Example

@arcticbear The styles look great! Is the focus styles supposed to look just like the default styles for the OK button? I don't see any difference between the two. 🤔

[arcticbear]

@julieg18 Yes, it would be enough having two styles. One for default and pressed states, and another for hovering. The pressed state could be seen only after hovered state, so in motion it would be fine.