New thumbnails for courses

[honzajavorek]

We're heading towards the structure of courses as described in #1015:

flowchart TB
    subgraph start["Getting started"]
        direction LR
        beginner_js(Web scraping basics<br>for JavaScript devs)
        beginner_py(Web scraping basics<br>for Python devs)
        beginner_js ~~~ beginner_py
    end

    subgraph advanced["Learning advanced techiques"]
        direction LR
        browsers(Web scraping with browsers)
        apis(Web scraping with APIs)
        anti(Navigating anti-scraping protections)
        browsers ~~~ apis
    end

    start --> advanced

Loading

To support the changes, I think the homepage deserves a new set of thumbnails for the courses:

What I'd like to address with the new thumnails

• The old JS course and new Python course share the same thumbnail. Their image should tell the reader they're (almost) the same courses, but the main programming language differs, preferably with the logos of JS and Python respectively.
• The thumbnails are uninformative. They're vague clusters of lines and boxes, which don't have any meaning and are mostly disconnected from what the particular course is about. I can even imagine photos instead: API scraping = view of the engine in an open car trunk, anti-scraping protections = hurdling or parkour, scraping with browsers = riding on a pig 🤣 Just kidding, but you probably get what I mean, the images could be more illustrative, even though metaphorically.
• The thumbnails don't work as teasers for people to explore the content. Compare with YouTube video thumbnails or social media teasers.
• I'd like them to have vivid colors and not be all the same blue (and a single one yellow, out of nowhere), preferably each course sporting a different dominant color (except maybe the beginner ones, which cover the same topic, just with a different language?).

Technicalities

• Maybe we could include the images not just on the homepage, but also on the intro page of each course, e.g. https://docs.apify.com/academy/scraping-basics-python.
• It would be awesome if we could use them also for the social media link previews, to keep their branding, but that would be probably too much work with Docusaurus—I'm not sure.

Inspiration

I like e.g. Fireship's thumbnails for XYZ in 100 seconds videos, or his course thumbnails are okay. I checked out thumnails of courses at Udemy, but those are mostly terrible design-wise and always feature someone's head—which is probably good for engagement, but I guess we don't want to do that.