Add header images to tutorials and guides

[MattatDirectus]

Currently there is a lot of text, and it is hard to navigate this section without getting a bit overwhelmed.

I think a good way to set-up this section is similar to how Bryant built the content rep for us -

Makes it much more engaging and easy to find what I want (filters, tags, etc.)

[linear[bot]]

DX-802 Add header images to tutorials and guides

[hola-soy-milk]

Thank you for this, @MattatDirectus! This has been brought up by @hanneskuettner as well, that the cards are hard to read.

Given that these docs were built with the intent of forgoing the header images, I'd lean towards shifting this view to have more of a list-like look.

Would appreciate any thoughts, please!

[MattatDirectus]

Oh, interesting - did not realize it was by design. Any specific reason why you opted to forgo images? To me, the first thing I'm going to see/notice are the big logos I know - Next.js, Nuxt, Vue, etc. That's what captures my attention, and its easier to visually sift through a page vs. text alone.

[hola-soy-milk]

Thanks, @MattatDirectus! This was not my decision, but Kevin's. @rijkvanzanten any chance you know why?

[bryantgillespie]

Throwing my hat in the ring on this one. Very difficult to parse this Tutorials page and find relevant the items with the current layout and lack of images. Especially since a lot of the article titles are super similar.

Even if we move to a "list" instead of a "grid", I'd like to see the images return because they add important context.

[phazonoverload]

Making images is a pain in the ass. That's basically it. The original redesign had technology tags as nice lil icons which made these much kinder on the eye.