docs: website design uplift

[webrdaniel]

Deployed here: https://webrdaniel.github.io/:
It is not possible to navigate to the updated /python page as it lives in different repo.

Changes:

• navigation header (different on index page and javascript pages)
• footer
• search modal
• new index page
• new /js page

TODO:
I have not found which links to use for the buttons on the landing page and header, so I just used some that make sense to me. But please check if they are really correct.

Figma design files are here

Content file: https://www.notion.so/apify/Crawlee-homepage-value-props-12af39950a2280d29d20edb080b2ece9?pvs=4

[diodames]

Hey, great work!
Few things. The code snippet horizontal scroll seems unnecessary (attached screenshot).

On the /Javascript page the code snippet of the benefits seems the spacing of the elements inside is a bit too much.

Probably similar issue below it (attached), can we not have it scrollable maybe so the code fits the text area?

[diodames]

One more thing that I noticed, it seems like when I click on the menu it's hard to read the text (attached) screenshot, not sure why I see it that way. Specifically the /Javascript and /Python

[webrdaniel]

Updated the code blocks by decreasing the paddings and spacings.
Unfortunetely those does not support wrapping the text to the next line to prevent the scrolling.
We can add some custom css but it wont look good because of the various indents.

[katzino]

Logo dropdown jumps during initial page laod

Screen.Recording.2025-03-07.at.13.16.47.mov

[katzino]

Those circles get shrunk by 2px

Screen.Recording.2025-03-07.at.13.19.59.mov

[webrdaniel]

@rezaczu did some fixes. It would be quite hard to do the closing menu if clicking on the item you are currently on, so I left that is it is.

[katzino]

super nit, but there is an inconsistency in how boolean value is highlighted 🧐

[B4nan]

regarding this particular example, nowadays you can as well use string literals instead of the enum values to make it less wide

fingerprintOptions: {
    fingerprintGeneratorOptions: {
        operatingSystems: ['windows'],
        browsers: ['chrome'],
        devices: ['desktop'],
    },
},

[adelamikk]

Looking great, thanks lot! ❤️ I have just few comments ✨

[adelamikk]

This should be actually a clickable card element, here are defined the hover states for the cards and each section should lead to a specific docs part. I will ask Banán, where it should exactly lead 🙏

[webrdaniel]

Ok, shouldn't we also use the action links as in the cards below, to indicate it is clickable?

[adelamikk]

No no, it is different kind of element and the clickable indication should be the hover state 🙏

[mnmkng]

Very cool! ❤️ Sorry, I did not read the whole conversation (and did not check the whole website 😅), but a few things I noticed:

On the master page:

• when I change the code example to python
  • there's no run on apify button
  • the install command below the code example doesn't change to pip install
• the animation is very nice, but it's kinda blurry on Chrome, and it's megablurry on Safari

On the JS page:

• the code examples look kinda awkward when there's such a big gap of whitespace below them, can we fix this somehow? Maybe if there's no "good" way of doing it, we could at least try aligning the top of the example with the top of the heading to see if it looks better?

Thanks! Looking forward to seeing this live.

[rezaczu]

Noticed this in Safari’s tab overview-some circles appear around the animation. It doesn’t break the web or anything, so just a visual nit. Only flagging in case we want to look into it. 🙏🏻

[adelamikk]

Noticed few more last nits, but we are getting there ❤️ Thanks a lot!

[adelamikk]

Just noticed that the fonts feel a bit thicker then in designs but in code the font-weight is correct, do you know what could be the problem? If not we can let it be 🤓

[baldasseva]

It probably depends on the font files we're using. I remember we had a similar issue in web and it was solved by using a different font file.
In the code we have some font definitions like this:

@font-face {
    font-family: 'Lota Grotesque';
    src:
        url('/font/lota.woff2') format('woff2'),
        url('/font/lota.woff') format('woff');
    font-weight: 600;
}

So I suppose the Lota.woff file we have is for a 600 thickness. We should change the file or add a file for a 400 thickness. If you feel like this is important, could you find us the lota.woff (and lota.woff2) files that have the correct thickness, or tell us where to find them? Thanks.

[adelamikk]

Alrighty, let's release it without the 400 weight and I will check if we can find something and we can possibly change it next week ✨

[webrdaniel]

I've changed the way we insert the animated logo so it is no longer blurry in Safari.
But now it is lagging on safari 😄