feat: implement new images for courses

[honzajavorek]

Closes #1574 Thanks to @hanatsai for the designs!

[apify-service-account]

Preview for this PR was built for commit ad430c61 and is ready at https://pr-2025.preview.docs.apify.com!

[hanatsai]

Hi @honzajavorek thanks for making it happen! I'm just wondering whether it's possible to make the image stretched like this? 🙏

I also exported the image with existing 2,3:1 ratio:

[honzajavorek]

I tried to change dimensions of the cards, but the card component is at many places in the docs, the dimensions don't seem to be configurable, and I was afraid to break something else.

I see you posted images with different dimensions - I can use those and implement them, yes!

[apify-service-account]

Preview for this PR was built for commit 98aa022 and is ready at https://pr-2025.preview.docs.apify.com!

[hanatsai]

Thank you! Is it possible to have different images for the dark mode?

[honzajavorek]

I'll see what can I do. There seems to be a precedent, the gumloop.svg logo image. It contains a built-in media query, which makes it responsive to the theme:

<svg viewBox="120 145 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            fill: black;
        }
        @media (prefers-color-scheme: dark) {
            path {
                fill: white;
            }
        }
    </style>
    <path d="M148.832 150.512C150.776 149.685 ..."/>
</svg>

It's a simple image with one shape which has one color, so I'm not sure if it's gonna be this simple to adjust the images for the courses, but I'll see what I can do or if LLM can help.

[honzajavorek]

I managed to convert these. These are SVGs which display different colors under different color schemes. I visually checked them and I think they're correct in both schemes. I'm still working on the remaining two.

[apify-service-account]

Preview for this PR was built for commit 44eee514 and is ready at https://pr-2025.preview.docs.apify.com!

[apify-service-account]

Preview for this PR was built for commit 60e601e and is ready at https://pr-2025.preview.docs.apify.com!

[honzajavorek]

Just tried it in the preview deployment:

[hanatsai]

Nice! Thanks for the effort ❤️

[honzajavorek]

@hanatsai Thanks for designing the images! It was a nice collaboration, I think the new thumbnails actually solve a lot of issues and make the docs a much better place now - modern, in line with the brand, related to the topics of the courses, responsive to the theme… I'm really happy about it!