Add badges for tools

[egekorkan]

I have started adding the badges to the tools. It is still a WIP due to following points:

• Not sure how to put the badges under the description of each tool without making the place that each tool takes somewhat bigger vertically
• My frontend development knowledge barrier: It would be better if these badges are some sort of a CSS class so that each tool only inherits the badge instead of copy pasting. I have copy pasted for playground now

fixes #319

[netlify]

✅ Deploy Preview for wot-marketing ready!

Name	Link
🔨 Latest commit	5679ef6
🔍 Latest deploy log	https://app.netlify.com/sites/wot-marketing/deploys/62a75ba28cbbb90009e678cf
😎 Deploy Preview	https://deploy-preview-323--wot-marketing.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[danielpeintner]

Personally I don't like the intro for the badges (looks a bit chaotic to me).

It lists all badges and I have still to hover over to see the text. I would rather put the text there (left-aligned) without hovering OR remove the intro for the badges at all. People will know what to do.

The only down-side of leaving away the intro is mobile where it will not work. But it will not work in the current fashion either..

[danielpeintner]

Note: One more visual feedback from my side. I think the initial icons/text for "TD Tooling", "WoT Development Tools" etc seems rather big.. but maybe it is just my feeling..

[egekorkan]

I can regroup like that. It is true that hovering is simply not going to work in mobile :/ I wanted to not have so much text taking place

Regarding the logos, I can make them smaller :)

[egekorkan]

@danielpeintner I have made the icons in the beginning smaller and added an alternative badge intro

[egekorkan]

Call of 24.05:

• Alternative 1 is not picked by anyone, alternative 2 can stay
• We should not add any more badges, 11 is already quite a lot
• In the section where the tools are listed, it might be better to put a table with tool name, description, badges -> This is what the group has picked
• Another proposal is that when a category is selected, the other tools are hidden

[danielpeintner]

I missed the last call and based on the current preview I am not quite sure what is meant to stay and what not 🙃

[egekorkan]

I missed the last call and based on the current preview I am not quite sure what is meant to stay and what not 🙃

I have started the work in this but it got messy and I did not have time. The current preview should not be taken seriously ^_^

[egekorkan]

We can also use shields.io for the badges as well. Might solve the class issue mentioned above.