feat(client): add hero section landing page anonymous users (#2885)

[andre-code]

PR to add new hero section for landing page anonymous users.

Note: Get Started btn is covered in the issue #2891

Fix #2885
/deploy renku=2891-get-started-section extra-values=global.renku.cli_version=2.7.0 #persist

[RenkuBot]

You can access the deployment of this PR at https://renku-ci-ui-2890.dev.renku.ch

[lorenzo-cavazzi]

I really like this new section!

The code looks good overall! There are a few things to fix; I added comments inline. Mainly just minor classes/styles improvements, apart from a problem with one of the SVG files.

Here is another comment, still in the category "minor classes/styles improvements" but it doesn't fit inline.
The Renku logo on top looks misaligned on the left, particularly on smaller screens. The PR doesn't directly introduce this, but it's more evident now that the text in the hero section is left-justified. Adding a left margin on the logo is enough to get it aligned with the rest of the application -- here is a GIF to better explain what I mean

[lorenzo-cavazzi]

There are a few things to adjust with this image:

• That's actually a rather heavy image for the size; looking closer, the SVG seems wrong. If you open it with a text editor, you will notice it includes an image image id="image0_301_201" width="4096" height="2560" while the parent SVG element is svg width="1400" height="594". For comparison, a correctly generated SVG looks like "Visual_Head.svg" (or the other new SVG in this PR) and should include a bunch of g and path elements instead of an image. Could you re-export that as native SVG?
• We should still upload the solid image and play with the CSS property opacity if we need semi-transparent images. I know there is no background-opacity and that's tedious when using images as backgrounds, but there are many easy pure CSS "workarounds" (E.G: this)
• (non-blocking): this image and "Visual_Head.svg" seem to overlap quite a bit. A better approach would be uploading one image and taking the desired slice. Ofc that's not always the best solution, but I feel it would work well here because the 2 single images would be bigger, and they are shown on the same page (i.e. we never load just 1). This is non-blocking, but something to keep in mind in these cases

[lorenzo-cavazzi]

Not sure about the differentiation between "Assets" and "Graphics" here. This isn't blocking for this PR, but since you are restructuring the landing page, I think we can move all the images together, perhaps moving all the files from the Assets folder to the Graphics folder -- they are all SVG images

[lorenzo-cavazzi]

This isn't used anywhere else. Should we remove it instead of exporting it, or do you plan to use it later?

[andre-code]

Yes, I keep it because there is a high probability of using it in another section.

[lorenzo-cavazzi]

Ok 👍
Could you add a comment, something like "Currently not used; planned for #shapeup-issues"? We can later remove the comment once the function is used. Should we not use it, the comment will remind us why we kept this.

[lorenzo-cavazzi]

At line 132 there is already something just for .btn-secondary. Should we merge the code? It will be something like:

.btn-secondary {
  -#{$prefix}btn-active-bg: #{$rk-green-highlight};
  &:focus { ... }
}

[andre-code]

@lorenzo-cavazzi Thanks for your review 🙏🏼
I added your suggestions in the last commit.

[lorenzo-cavazzi]

Looks great! 🚀

[RenkuBot]

Tearing down the temporary RenkuLab deplyoment for this PR.