Revamp demo page and add EE demo

[erwanMarmelab]

Problem

The page in https://marmelab.com/react-admin/Demos.html doesn’t mention the EE demo, but it’s a great one!

The section should highlight the most important features.

It’s a good opportunity to revamp the demos page, e.g. following https://mui.com/toolpad/examples/ design

Solution

Revamp the demo page, add EE demo, and highlight important features

Todo

• Revamp demo page
• Add EE demo
• Highlight important features
• Adapt mobile version
• Fix video
• Change iframe to video for the 1st demo

Screenshots

Before

After

[adguernier]

I'm a bit lost when I click the links anchor. I would have imagined dedicated pages for each sections instead, that explain further what they demonstrate.
What do you think about it?

[erwanMarmelab]

I'm a bit worried about the number of pages this will create. won't it overload the navbar?

[slax57]

For the record, I disagree with @adguernier , IMO the anchors are fine and we should keep them that way.
To be discussed with @fzaninotto then.

[fzaninotto]

The new layout is rad!

I think the anchor experience is fine and we shouldn't add more pages.

However, there are two adjustments you need to make:

1. The cards shouldn't show an autoplay video of each demo, because these videos are too small, and it makes the page change too much. Instead, the cards should only show a still image extracted from each demo, and the section below would show the video.
2. The video for the Ee edition is too large to be leaded as a mp4 file. We need to host it in a video provider (Vimeo). I'll host it with the Marmelab account and we'll adjust the embed.