[docs] Improve the onboarding

[oliviertassinari]

Brings what I can from #10616 to HEAD. The other branch might be on hold for quite some time.

[mbrookes]

I'm no designer, but this feels like it should perhaps have consistent horizontal alignment between one column and two column sections:

[oliviertassinari]

Any better idea?

[mbrookes]

Perhaps put the installation and usage into Cards, so their sections have defined bounds, giving them equal visual weight.

Then remove all the excess text from the Sponsors section, put the gold sponsors side-by-side (centered) without reference to Patreon or OpenCollective or dollar amounts, then add a row below smaller logos of silver sponsors (I think it's a mistake not to mention Facebook on the home page).

Links to sponsorship platforms can go below that.

CT's logo could link to the free Material theme (for now), and in the interest of fairness, the CEA one should link probably to their site rather than OC.

[oliviertassinari]

Perhaps put the installation and usage into Cards, so their sections have defined bounds, giving them equal visual weight.

It should be good like this. The imbalance will be address with the themes. I don't think that adding an elevation with a Paper will improve the situation. It look fine on Bootstrap side.

Then remove all the excess text from the Sponsors section

I have already tried to remove anything non-important.

put the gold sponsors side-by-side (centered) without reference to Patreon or OpenCollective

It's encouraging people to contribute first to Patreon then to OpenCollective.

then add a row below smaller logos of silver sponsors (I think it's a mistake not to mention Facebook on the home page)

It's giving them and other potential contributors to give more. I agree that having Facebook as a sponsor is a good thing. You can find them in https://material-ui.com/discover-more/backers/.

CT's logo could link to the free Material theme (for now), and in the interest of fairness, the CEA one should link probably to their site rather than OC.

The OpenCollective sponsors are handled by their CDN right now. The nice thing about it is that we have nothing to handle. New contributors will be added automatically, as well as being sorted by the total number of money they donated DESC.

[mbrookes]

[mbrookes]

The imbalance will be address with the themes.

Somewhat

I don't think that adding an elevation with a Paper will improve the situation. It look fine on Bootstrap side.

It isn't about elevation, it's about giving the containers a visible size so they appear more balanced when the content has differing visual weight. It works as well without the shadow. In fact, I just noticed Bootstrap have done the same.

I have already tried to remove anything non-important.

I think you're missing that the purpose of this section os to promote the sponsors. The sponsorship opportunity is implicit. Links to Patreon and OC is enough.

It's encouraging people to contribute first to Patreon then to OpenCollective.

Yes, I guessed the motivation. It's taken care of.

It's giving them and other potential contributors to give more.

So is having a second tier labelled silver sponsors, with smaller logos, but I missed that FB are only Bronze, thought they were silver, so it isn't necessary.

The CEA one should link probably to their site rather than OC.

I missed that this redirects to the sponsor, rather then to their OC profile page, so yes, it's fine.

[oliviertassinari]

It works as well without the shadow.

I agree. I think that it's much better without the shadow. What about reducing the contrast between the white and the grey? So we can soften the container borders.

I think you're missing that the purpose of this section os to promote the sponsors. The sponsorship opportunity is implicit. Links to Patreon and OC is enough.

Yeah, why not. I was following webpack here but I have no objection to go into vue side.

Yes, I guessed the motivation. It's taken care of.

It's more implicit in your proposal. I do prefer the vue approach:

[mbrookes]

What about reducing the contrast between the white and the grey?

I thought the same - it was just a mockup.

I do prefer the vue approach

Perhaps when there are enough sponsors to justify the distinction?

[oliviertassinari]

@mbrookes I'm moving forward. I'm going to complete #10616. I have added a white border to make the separation cleaner. I'm not opposed to the other changes you are suggesting, but I don't see them clearly improving the situation. I will spend my energy on different topics.