refactor: redesign /x/ landing page

[crowlKats]

the total modules counter is currently disabled; will enable it in a follow-up to switch to algolia search

[ije]

let's use twind's default font family, currently the font will tingle from serif to sans-serif when load is slow

[crowlKats]

@ije fixed, PTAL. regarding the font, i added a fallback sans-serif font, so that should make the flash a lot less evident. we kinda need to use this font right now because the arrow in the footer for job application relies on a ligature available in that font

[kitsonk]

What would it take to change the list to something ordered by the popularity score? While the design looks great, the impression of the list with lodash at the top is really a problem.

[crowlKats]

@kitsonk I will switch to use the algolia-based search (so same algolia index as what the global search uses) in a follow-up, that would fix that problem

[ije]

because the arrow in the footer for job application relies on a ligature available in that font

why not use icon instead, "inter" font is also missed in windows for most users. or can we add inter web font?

[crowlKats]

we could add an import for the font, but yea, maybe icon makes most sense?

[ije]

i added the icon in figma

[crowlKats]

@ije done

[ije]

and there are other too UX things in "add module" page can be improved i think:

1. set the error text "Invalid Name/Name has been taken!" a fixed height to avoid the page tingle
2. let's move the "waiting..." spin to the bottom (or maybe only show after copy), please check the figma

[crowlKats]

can I keep those changes for a follow-up PR?

[rojvv]

@crowlKats Can't we add some filtering feature for the search or just naturally place the more relevant results on the top?

[crowlKats]

as i have stated before, search will be fixed in a follow-up...

[rojvv]

ah, alright.