Issue 21 product showcase

[nkapolcs]

Issue #21
This section is to showcase products that are not open source or have a bigger scope so they cannot be showcased as git repositories.

Changes:

• [x] create settings entry
• [x] create products, productDisplayer components
• [x] use MUI Card component
• [x] create basic layout
• [x] create a basic display to the card
• [x] create online presence buttons
• [x] use pictures as heading
• [x] delete learn more
• [x] technologies icons
• [x] recreate the layout: fit 4-5 columns in a row on full-screen
• [x] rewrite and separate sc components
• [x] add optional settings logic
• [x] update documentation
• [x] place products below TCC
• [x] rename ProductDisplayer
• [x] fallback for socialIcons

Visual:

[thisismydesign]

Looks cool :)

Adjusted a few requirements:

• Let's make it 1 row, N columns
  • example picture below
  • use pictures as heading for the cards (similar to mui example)
  • use pictures with ~7:3 ratio (do not constrain ratio but ~7:3 examples make sense)
  • fit 4-5 columns in a row on full-screen
• technologies are in the same row as the name, aligned to the right

Additionally:

• no need for learn more link, let's replace that with online presence icons aligned to the left

Examples:

[nkapolcs]

• Let's make it 1 row, N columns

  • example picture below
  • use pictures as heading for the cards (similar to mui example)
  • use pictures with ~7:3 ratio (do not constrain ratio)
  • fit 4-5 columns in a row on full-screen
• technologies are in the same row as the name, aligned to the right

Additionally:

• no need for learn more link, let's replace that with online presence icons aligned to the left

Oh i misunderstood the logo, thank for clarifying :)

[nkapolcs]

There is a design decision, and I'm curious about your opinion: So we have two options how we display the product grid, the first:

We have fix grid element width as you can see above, and the second:

Where we always fill the width of the container, no matter there is one grid element in the row or four. Which one to choose?

[thisismydesign]

Looks great!

Few comments regarding display:

• Since there're pictures involved let's stick with your first proposed option. Then 4 products would be the limit, right?
• Place products below TCC

I like the decision to match the height of the boxes to the biggest text. Created a follow-up for that: https://github.com/c-hive/c-hive.dev/issues/88 (but don't worry about it for now).

[nkapolcs]

• Since there're pictures involved let's stick with your first proposed option. Then 4 products would be the limit, right?

Yes in one row 4 is the max (5 was too small).

Example:

[gomorizsolt]

Btw, sorry for not reviewing the last few PRs, I was unsubscribed from the notifications for some reason. :)