feat(www): add Ecosystem section to Homepage

[greglobinski]

• add featured items to IndexRoute's pageContext
• add new version of Button//
• add className props to Ecosystem components for restyling
• refactor ecosystem/ecosystem-featured-items.js for restyling
• create universal HomepageSection component
• create HomepageEcosystem component with all content of Ecosystem section
• change GraphQL query for IndexRoute (+ refactor data destructing )
• add new color Lemon to the pallete, the featured items cards colors used in the Ecosystem section are defined in the code. (@fk would you have the also in the palette?)

[greglobinski]

• Please take a close look at the restyled/reused Emotion components in https://github.com/gatsbyjs/gatsby/pull/9783/files#diff-623d03a8cfeefafaac1d88a99eb22dd2 derived from /ecosystem/* components in the context of our emerging 'way of styling'

• the 'fake' scroll effect is not implemented, it should probably wait till feat(www): add 'lead' animation to the Ecosystem horizontal scrollers #9606 will be merged

[amberleyromo]

@greglobinski revisit the card hover state?

[greglobinski]

@amberleyromo , yeah I thought that I fixed it but seams that not, thanks

[amberleyromo]

A few content changes, as well (from #9747)

• Change the intro text (below Plugins & Starters) to:

With over 527 plugins, 86 starters, and dozens of tutorials, the Gatsby ecosystem has tools to help you build your Gatsby projects.

(I agree with @lindaleebumblebee, i think it needs to be shorter, let's go with this one)

• Change the text of two of the links under Plugins section
  • "Plugin Docs" => "Using Plugins"
  • "Plugin Authoring" => "Creating Plugins"
• For consistency, change the text of the link under Starters section also
  • "Starter Docs" => "Using Starters"

[greglobinski]

@amberleyromo

• hover bug fixed
• intro & label texts changed

Should I also make a PR with the changes for the link labels on the Ecosystem page?

[amberleyromo]

This looks great to me!

I'd say go ahead and make the content changes to the ecosystem landing page as part of this PR -- it's not a huge change. Thanks for thinking about it.

I'm good to go on this personally, but would also love @DSchau's eye also on your review request re: styling... style.

Please take a close look at the restyled/reused Emotion components in https://github.com/gatsbyjs/gatsby/pull/9783/files#diff-623d03a8cfeefafaac1d88a99eb22dd2 derived from /ecosystem/* components in the context of our emerging 'way of styling'

[greglobinski]

@amberleyromo

• move scrollers intersectionObserver to an outer module, so both pages Index and Ecosystem use the same code www/src/utils/scrollers-observer.js
• refactor featuredItems observer to scrollerWithLead observer, it's ready now to work with another scrollers which will appear in coming Homepage sections (e.g. Blog)
• change buttons labels on Ecosystem page for consistency with Homepage Ecosystem section

[DSchau]

Looks good from my end. Left a few comments!

[fk]

@greglobinski Sorry for not seeing this earlier.

add new color Lemon to the pallete, the featured items cards colors used in the Ecosystem section are defined in the code. (@fk would you have the also in the palette?)

Yay 🍋! ;-)

Yes, I would add those featured item card colors to colors, too. I like to think this gives us a better starting point for eventually refactoring colors — I think we should abandon the "named" color model sooner or later, and move to base color and shades similar to what Material Design does or is outlined here, or a simpler and tighter definition like http://www.carbondesignsystem.com/guidelines/color/swatches; in any case, abandon names like lavender or wisteria.

[greglobinski]

I think we should abandon the "named" color model sooner or later,

I agree with that, but for now what names I should use to add the Starter/Plugins colors to the palette?
@fk

[fk]

@greglobinski Here's how I've (inconsistently 🙄) named them in Figma for now:

I think we're using

• accentLight
• accentDark
• skyDark
• skyLight

for the "Plugins" and "Starter" card labels with the 90° rotated text.

[fk]

Would be nice IMO to remove setting a width for the starter/plugin cards container, and adding a couple more colors to the palette, both as discussed inline.

Other than that LGTM, too! 💜🙏

[greglobinski]

@amberleyromo @fk

• remove width setting for the scroller container
• add plugins/starters colors to the palette
• update featured starter list