Redesign the style of styled-components to improve functionality and add functionality

[el1f]

There are a bunch of issues that seem to require several improvements to the current styled-components landing page, it could be interesting to showcase the library in a more straightforward way (think some illustrations alongside key features of the library) alongside a little design reboot of the website while taking advantage of the occasion to add some long-overdue features like the addition of OpenCollective sponsors (#229), Community interactions (#17) and more. I've started working on some concepts but I would like to know whether it's something you guys would be interested to see more of. For now I've done some exploration to also experiment with Framer X and I'm enjoying how it's going so far.

Here's a little sneak peak of the result of the last couple hours of work, it's still pretty rough but I've been trying to keep some cues that I enjoy about the current design while trying to insert some of the things that I've been thinking about for the last while:

Some of the main points I'd like to tackle:

Issues

• 534

• 230

• 657

• 607

Ideas

• Showcase some features of SC directly on the docs website by dynamically changing its theme through user configuration
• Dark mode

What do you think about it @styled-components/core? Is it something you'd be interested to see more of?

[mxstbr]

There is definitely something here, fantastic job! 😍

• I love the new showcase design! What do you think about that + a variable size layout like nextjs.org/showcase to make it visually more appealing?
• I like the new navbar, much cleaner 👍
• I'm not a fan of the tlted code on the homepage, to me that makes it less easy to know what it feels like. Since we are directly targeting developers I think we should leave that front-and-center, but then explain the motivation on the homepage rather than how to get started? 🤔
• Definitely agree on the dark mode! we need that!

[el1f]

thanks for the feedback @mxstbr! I'm working on some additional mockups and on some illustrations to accompany the various points that I wanted to add to the landing page and I'm also considering the various other pages in the website. If you have any ideas that you'd like to throw in the ring that would be awesome! I'm researching a lot of other OS projects and websites so this could take a little bit of time though :) I'll keep this issue updated with all of the various new mocks I produce to gather more feedback from you guys

That being said, to reply to your comment:

• I've considered the variable size layout and I enjoy it a lot, I'll probably do something similar for the showcase but I wanna see if I can come up with some other way to do it as I've already taken a lot of inspiration from next's website and I'd love to give SC's more personality if possible. Still, it's something that I'm keeping in mind and that I'll probably end up implementing if nothing else that can match it comes to mind
• Thanks :D
• I was playing around a little with perspective and scroll in Framer, the code window actually tilts while scrolling until it snaps to place when it gets to the middle of the page. I still don't know whether it makes sense target-wise but I've been thinking about an animation that I'd like to try and implement before giving it the boot if it results into a disorienting experience.
• Dark mode is always welcome after all :D