Styled-components-website: Add header to showcase page similar to homepage

[mxstbr]

The showcase insert on the homepage has some really nice phrasing:

We should add some similar text to the dedicated /showcase page that explains what it is, something like:

---

Showcase

styled-components is used by teams all around the world to create beautiful websites like these:

[neusaguera]

Hello! Do you like something like this?

[mxstbr]

@neusaguera we probably do not want to copy the same style from the homepage, just the phrasing. We likely want to make this more into an actual page and add a heading "Showcase" and a subtitle/intro paragraph which says the "s-c is used by teams..." thing.

I also really like how the homepage showcase shows the name of the website below the screenshot, we should copy that style too and remove the big heading with the name of the website.

Combined together we'd arrive at something like:

---

Showcase

styled-components is used by teams all around the world to create beautiful websites like these:

--screenshot--
[Ticketmaster]

---

Does that make sense?

[neusaguera]

Hi @mxstbr! what do you think about these screenshots? Do you want to keep the link to the sites?

[mxstbr]

This is looking much better! @el1f any feedback?

[el1f]

Great work! Is the subtitle using the standard body font size? Also, I'm not a super fan of the balloon for the site name and link. Is it shown on hover like on the homepage? All in all, I'm quite positive about the mobile version but skeptic about the balloon. Can you try to make the desktop version look a little more like the mobile version?

[neusaguera]

Hi @mxstbr and @el1f,

The font weight of subtitle was thicker than the standard, in this version I show the same font weight. What do you think about this version? In mobile version of the button dropdown doesn't work and the menu is fixed, this is correct?

[el1f]

I like the direction this is going towards @neusaguera. Actually, I'd like to build upon your interpretation to add some extra functionality to the showcase page. Would you mind opening a PR for the layout changes?

[el1f]

As this issue has been dormant for a while I decided to try and take a shot at it :)
Here is my proposal for the restructuring of the page. What do you think about it @mxstbr ?

I took inspiration from the next.js showcase and a little from the electron.js apps section. This also proposes the addition of the quick contribution from #573 and a proposal to add categories like in the next.js showcase to allow users to browse the showcase based on their categories of interest.

It also adds an optional description field (won't render for the ones that lack one) and a Github link to incentivize styled-components users who have an OS project to share the repo to the project and possibly get a little extra traffic on their projects.

Awaiting feedback before going ahead with the mobile version and the actual coding.

P.S. It would be interesting to share the mockup assets for the website somewhere to help out anyone who wants to propose visual changes to the website, any idea on where to share the assets to make them easily available?

[mxstbr]

That's beautiful! Love it :fire: Let's do it!

[el1f]

Here are the mobile and landscape mobile variants. These will need to handle more edge cases (looking at you iPhone SE and Co. in the wild) as I've taken advantage of the extra screen real estate available in the 18:9 phones. This is the best-case scenario.
Anything you guys think can be improved? I think I'll start coding it at some point during the week.

Mobile Portrait

Mobile Landscape