feat: Improve the design (Restyle)

[kamaladenalhomsi]

I noticed the website design is poor, so in this PR, I tried to improve the design as much as I can, this design is heavily inspired by the hacktoberfest website,

@paulodiovani if the design is ok, I hope you merge ASAP, so I can complete working in on what you mentioned on #8 (I will complete working on separate PRs, still need two PRs to for the hacktoberfest 😅 )

[paulodiovani]

Nice work, but let me give some suggestions:

• Please, provide a screenshot if possible
• Show PR links (or at least project-name/pull/number) for each PR, the username should be used to group them together
• Make it a bit more narrow, we don't need much vertical space for each PR
• The upper logo barely shows text
• Adding the rank position is nice, as well as the medals, but when two or more users have the same number of pull requests, they should be at the same rank In the screenshot bellow, both #3 and #4 have the same number of PRs

FYI, you must run npm run fetch-prs several times to fill the database enough to get enough users/prs to see in the front-end.

[kamaladenalhomsi]

seems that you have another version of the website, that's what website looks like in my device

[paulodiovani]

ops, I forgot to disable the darkreader (dark mode for all websites extension) :man_facepalming:

Please, check the other suggestions.

[kamaladenalhomsi]

@paulodiovani ok, I am going to work on it

[kamaladenalhomsi]

@paulodiovani can you merge this for now (I am seeking for 2 additional pull requests 😅)

[paulodiovani]

@kamaladenalhomsi sorry man, But we need at least to list the PRs links like it was before. It is just showing the username many times.

I am seeking for 2 additional pull requests

same :boat: here

[kamaladenalhomsi]

@paulodiovani I replaced the "Go to PR" with the "project-name/pull/number", other suggestions will be done in a separate PR.