feat: Rebrand the homepage(colors and hero-brand)

[vasucp1207]

Summary

• Some global styles are broken for the markdown code tab.
• Need some improvement in responsiveness.
• Need feedback for the Community section(I think it's a bit empty for now).

cc @ematipico

Test Plan

[ematipico]

Can you rebase the website with main so we can check the preview?

[ematipico]

Would you like to remove the linter tab or just the benchmarks part?

For the time being, yes please.

Can you upload a InteiiJ plugin screenshot here?

We can do that later in a different PR. What do I need to upload?

The community section uses the autogenerated Contributors.astro so these are random avatars.

We have a script that applies the randomness. I suppose you want to do something similar:

biome/website/src/frontend-scripts/index.ts

Lines 25 to 31 in d6a0923

	const creditsPeopleLists = document.querySelectorAll(".credits-people-list");
	for (const list of creditsPeopleLists) {
	const items = list.querySelectorAll("li");
	for (const li of randomShuffle(Array.from(items))) {
	list.appendChild(li);
	}
	}

[vasucp1207]

Sure, you can upload screenshot in resources.

[ematipico]

Sure, you can upload screenshot in resources.

We can do that later :)

What's missing? I am very exited to start merging things!

[vasucp1207]

Sure, you can upload screenshot in resources.

We can do that later :)

What's missing? I am very exited to start merging things!

Refactor code according to required changes and also apply some media queries, check now.

[ematipico]

Thank you for starting things! Here's some advice on how to do better PRs and help us to make god reviews, and some feedback for this PR:

• in general, in open source, it's better to do small and localized PRs
• my suggestion is to break down this PR in smaller ones, for example:
  • new logo and colours
  • contributor component
  • the performance component
• we are adding all new assets and they are not used anywhere and I can't understand why; we should add only those images that we use. No need to create a new folder, we can replace the ones the currently have (or delete them)
• you have a typo in folder, srcipts instead of scripts. Also, we already have a folder for that, called frontend-scripts
• please remove the images we don't use;

Maybe, as a starting point, we can make this PR as a colour change and new logo. What do you think?

[ematipico]

to remove

[ematipico]

In general, I am not a fan fan of px, unless they are really needed. For example, font sizes can use rem or em. Can we use rem or em instead?

[ematipico]

For colours and sizes, we should use starlight colours, or create our own CSS variables and use them here.

[ematipico]

These styles that have strange letters are auto-generated, which means that they might change in the future. We can't override the styles like this.

[vasucp1207]

@ematipico, thanks for the guidance, now this PR only targets the colors changes, hero-brand update and cards component. I will open separate PRs for the other components.

[ematipico]

Unfortunately, the light blue doesn't work when the light theme is enabled. We get a lot of issues with contrast not being enough:

Maybe we should just use the black 🤔

[vasucp1207]

Can you check the new version?

[ematipico]

Still nothing, but we can figure it out later :) I think for now we can merge it and continue with other works. Thank you!