Update Streamshub site design

[joekent123]

Description

A few changes are required to the Streamshub site as follows:

• De-emphasise the Flink items on the site due to that work being de-prioritised.
• Improve the site navigation and hierarchy to make it more able to contain multiple sub-projects under the StreamsHub umbrella.
• Simplify and improve the sub-project navigation when it comes to documentation, including adding an archive of older docs versions so we don't clutter the main nav.
• Add a quick start page for Console which can be a pattern other sub-projects follow.
• Investigate the best way to show the UI on the Console sub-project home page.

Owners

Design: Joe Kent
Dev: Tom Cooper, Jan Kalinič

[joekent123]

Proposed design for the website can be found here: https://www.figma.com/proto/mIR10rPlpqujAkeVw4gYnx/Streamshub.io-design-ideas?page-id=230%3A374&node-id=230-375&viewport=226%2C273%2C0.27&t=8iOyQBfERk1SVJ90-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=230%3A375

Password to view the prototype is task-skid-niche-paper

Please add any comments/feedback on the design as comments in this issue.

[tomncooper]

Thanks for putting this together @joekent123

I think this is a much better landing page than the current one. A diagram is much more understandable for seeing how all the different components fit together.

However, we might need to work on the intro blurb. But that can be discussed on the implementation PR.

[kornys]

Thanks! It looks nice.

I have just one question about sub-header. Im not sure how it will look when we will have for example 6 main projects (maybe 10)? Like Console, MCP, Quickstarts, Flink-sql-runner etc.... Do we want to have it all in sub-header?

[Frawless]

Thanks! It looks nice.

I have just one question about sub-header. Im not sure how it will look when we will have for example 6 main projects (maybe 10)? Like Console, MCP, Quickstarts, Flink-sql-runner etc.... Do we want to have it all in sub-header?

Also I think it would be nice to have there some icon of the project which is mainly used? It will make navigation a little byt prettier, but not sure if it makes sense. Regarding multiple projects, maybe some dropdown menu will be better? Like having just there just Console, Strimzi, Kroxy for example and when you click on it more detailed examples/links will be show? However, it is hard to imagine it now, guess we can change it in the future as we will have more stuff to put on the docs site?

Shouldn't we have more color variants? All these dark blue/green tones, at some places it is hard to read the text, for example at the top right menu. Maybe even this:

the white text is not very well readable from my POV as well (but maybe I should buy glasses).

[joekent123]

Thanks for the comments folks.

@kornys good point about scalability. I think up to about 4 projects that sub-header would work ok, more than that would probably need to think of a different solution. I think we could end up with a main nav that scales but looks empty with only a couple of projects for a while, or one that doesn't scale that looks ok with fewer (what I've gone with for now). I'd be tempted to say we go with the latter and revisit if we need to. Thoughts?

@Frawless Icons would be nice although not sure we have existing icons for individual projects within StreamsHub such as Console? Could make some though.

Good feedback on the colours as well - I've changed those labels to this: