[FEAT] Reorganize the demo section in the HTML home page

[tbouffard]

Is your feature request related to a problem? Please describe.

In the HTML home page, the demos are not stored in a specific order. They are added as they are added, following the existing list.

Demos provided by this repository are mixed with demos provided by external repositories.
Some demos are dedicated to a use case, others have been done for events and presentations and cover several topics.

The following screenshot shows the available demos of version 0.39.0. The external demos are marked with a blue rectangle to better identify them in the screenshot (they are not highlighted in the actual live environment).

Describe the solution you'd like
I suggest we better sort the demos to make this clearer for users.
We may introduce a dedicated sections for the demo done for an event.

Tasks

• Decide of a new layout (this proposition can be totally rejected and the issue closed) with @csouchet
• Update the page and add a new section if required
• Update the README to reflect the new organization

[csouchet]

Some examples of propositions

 

[tbouffard]

I realized that the "external" bubble in my screenshot was confusing.
I added it not as an example of something that I had in mind but only to show where the external demos are currently placed 😢

My proposal was to move them in a dedicated section or move them all to the end of the list.

That's being said, your proposals @csouchet are also great. I prefer the 2nd one as it is more discrete. I think we don't need to highlight a lot that the demo and the code are hosted externally, just pass the information.
We could add an "info" icon on the right of the text to explain in a tooltip what it means.

[csouchet]

I just made some tests. 
Your proposition is ok for me too (even if I didn't understand it at the first time 🙂).

We should discuss in person the next week ^^