[FEATURE] Update download page for consistency across the website

[FabrizioJordan]

Is your feature request related to a problem? Please describe.

The download page looks old and does not align with a modern design and style.
And the page uses bad practices such as buttons with gradient backgrounds that cannot have animations or transitions, and the buttons have animations with poor accessibility.

Describe the solution you'd like.

Everything with better separation:
I replaced the incorrectly used padding and margin with flex and gap.

This changes are for the Download Page (Realases.js):
I fixed the bad practices in the buttons:
The background now is with one color and in the hover dont have a great change. (Nomally bg-[#1559f0] , in hover: bg-[#0e2ba3])
This change is because simplicity and clarity are better than gradients, and gradient colors cannot be animated in pure CSS.
No scale and no translate animations, because this is not good in a modern web.

I've fixed a bug in the latest version buttons that could overflow the page.

Buttons are now more accessible and clearer.

In the rest of Download page:
The background of the page now is more simple and clear.

All of the colors are subject to change (i use this colors for a example).

A new "hr" to separate the latest and older versions.

More:
Minor changes in Main Section.

Screenshots

Download page:

Mobile:

Tablet:

PC:

Latest Releases:

Past Releases:

Latest Releases with one button normal, one on hover and one on active state:

Additional information

All colors are just to demonstrate a change, they may not be the best colors.

Do you want to work on this issue?

Yes

[github-actions]

Hello 👋! Thank you very much for raising an issue 🙌! The maintainers will get back to you soon for discussion over the issue! 🚀

Meanwhile you can also discuss about the project in our Discord Server 😀

[SaptarshiSarkar12]

@FabrizioJordan Hi Fabricio 👋!
I appreciate the changes especially on the accessibility side. But I recommend choosing any other colours for the buttons. Also, I think it would be better to distinguish between the colours of the buttons in the latest release and that of the past releases, wouldn't it be?

[FabrizioJordan]

Sorry for the delay, I had some things to finish, and I was just completing them.

Are the colors like this okay?
If you want a specific color, let me know, and we can discuss if it works or if it might cause accessibility issues.

I’m not sure if you prefer a light color or a dark color for these buttons in the end.

I think the colors of these buttons are not very important - they are significantly far apart, and the 'latest releases' buttons are much bigger.
But this is a good change to make. Let me know what you think. (I wouldn’t know how to distinguish one from the other beyond this without making them look visually unappealing and breaking the palette)

[SaptarshiSarkar12]

Sorry for the delay, I had some things to finish, and I was just completing them.

It's fine 😄.

Are the colors like this okay? If you want a specific color, let me know, and we can discuss if it works or if it might cause accessibility issues.

@FabrizioJordan Yeah, anything that can look appealing. I think the colour of the button for latest release does not have a good contrast with the background, does it?

I’m not sure if you prefer a light color or a dark color for these buttons in the end.

I do prefer dark as most devs do 🙃. Can you show me an example for dark colour? I can compare.

I think the colors of these buttons are not very important - they are significantly far apart, and the 'latest releases' buttons are much bigger. But this is a good change to make. Let me know what you think. (I wouldn’t know how to distinguish one from the other beyond this without making them look visually unappealing and breaking the palette)

You are right 👍. No change needed then :)

[FabrizioJordan]

I think the colour of the button for latest release does not have a good contrast with the background, does it?

That's right.

I do prefer dark as most devs do 🙃. Can you show me an example for dark colour? I can compare.

I’m not sure what color to use for these buttons, but here are some examples I came up with.

1. ( #151e8f )
   

2. ( #1d29bc )
   

3. ( #0313d5 )
   

4. ( #2c59bc )
   

I’m not sure if you know how to preview these directly on the website to decide which one works best, but feel free to adjust or change these colors.

[SaptarshiSarkar12]

@FabrizioJordan I apologise for the late reply. I was very busy in the last weekend.

I’m not sure if you know how to preview these directly on the website to decide which one works best, but feel free to adjust or change these colors.

I tried like this to preview the colours. Is this what you are talking about?

So, I think we must use the 4th colour (#2c59bc) as the button colour and the 1st one as the colour for on-hover effect. What do you think? Let me know your choice of colours for this scenario.

[FabrizioJordan]

I tried like this to preview the colours. Is this what you are talking about?

Yes, this devtools are great for previewing potential changes to the website

So, I think we must use the 4th colour (#2c59bc) as the button colour and the 1st one as the colour for on-hover effect. What do you think? Let me know your choice of colours for this scenario.

I’m not a big fan of the 4th color for the button, but it’s okay. I’m still unsure about the best colors for me.

Here’s how it looks if I replace the colors with the 4th as the normal button color and the 1st as the hover effect color:

Left in hover, and right normal.

Regardless of which one you want, just let me know and I’ll make it. If the way it looks in the picture is what you want, then I think the PR is ready.

[SaptarshiSarkar12]

@FabrizioJordan Yeah, it looks good. You can proceed 😃

[FabrizioJordan]

Hi @SaptarshiSarkar12 !
Sorry for the delay in sending the PR, but I’ve had very little free time.

I hope to submit the PR within the next few hours and continue helping with the website as long as my schedule allows.