Improve design of example repos

[chrifro]

Problem

• currently the project name is not displayed
• the name of the language is shown twice, once visually and once written
• the language-icons are too big
• the section takes a lot of space

Proposal

before	after
	A
	B

[chrifro]

What do you think @gtsiolis ? By the way, I stole your issue layout 😬 It gives a really nice overview :)

[chrifro]

I'd suggest going with design A, as it requires the least changes. Could you address this when you find time @nisarhassan12 ? Let me know if need a mockup file

[gtsiolis]

@ChristinFrohne this slipped between the cracks! Adding some thoughts below per point:

1. praise: Layout and typography looks improved!
2. Not sure if repository names could add much value as repository names sometimes can be brief or misleading. In the long run, for each specific project template, I'd expect to see the core technology involved as well as other technologies and functionalities included. Also, I'm not sure if Theia is a good indicative TypeScript example as a project template.
3. Explicitly mentioning language names still seems helpful as not everyone is familiar with every language logo and most logos do not contain the language name, right?
4. proposal: In this context, adding a short description on what the example contains could be helpful. WDYT?

Other topics that seem out of the scope for this proposal and we should probably open separate issues:

1. Having example projects available only for users that signed up through a specific git provider could be an issue for many users. We could resolve this by mirroring examples to all providers. This is also related to https://github.com/gitpod-io/gitpod/issues/2409.
2. Providing links to configuration could be also helpful. Some could be interested in what configuration (.gitpod.yml, etc) makes a Spring Boot project work with Gitpod.
3. Showcasing the Prebuilds feature could be also nice. For example, project templates could showcase that Prebuilds has been enabled for each project and how much time has been saved or something similar.
4. Adding templates like WordPress could help showcase the Root Access feature, once the feature graduates from Feature Preview. /cc @jankeromnes

[chrifro]

Thanks a lot for your feedback @gtsiolis

I made some changes, and I'm curious to hear your thoughts on them. What changed:

• I added a link to docs/configuration in the headline
• each example can unfold with more information about the project, prebuild time, technologies, etc.
• the language and project name is always visible

Proposal

folded	unfolded