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:

• create settings entry
• create products, productDisplayer components
• use MUI Card component
• create basic layout
• create a basic display to the card
• create online presence buttons
• use pictures as heading
• delete learn more
• technologies icons
• recreate the layout: fit 4-5 columns in a row on full-screen
• rewrite and separate sc components
• add optional settings logic
• update documentation
• place products below TCC
• rename ProductDisplayer
• 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: #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. :)

[gomorizsolt]

LGTM! Left two comments.

[thisismydesign]

Please fix Zsolt's outstanding comment, otherwise approved from my side.