feat(www): Updated blog and newsletter section on homepage (#10024)

* feat(www): rebase Ecosystem and Blog sections

feat(www): add Ecosystem section to Homepage

feat(www): homepage WIP

wip

feat(www): finish sections style for mobile

feat(www): add Ecosystsem featured items to Hompage

feat(www): homepage ecosystem section styling WIP

feat(www): add arrow to action button

fix(www): fix code formating

fix(www): fix code formating and eslint errors

fix(www): fix hovering effect on Featured Item

fix(www): fix hovering effect sequel

fix(www): fix hover bug

fix(www): update texts (intro & link labels)

feat(www): add scroller observer to Home page

refactor(www): use imported scrollers observer

fix(www): change link labes on Ecosystem page

fix(www): fix some small style issues

refactor(www): refator combineEcosystemFeaturedItems and reorder some css properties

feat(www): add Blog section to Homepage

feat(www): mobile styles for Blog section

feat(www): mobile styles for Blog section

feat(www): desktoop style for Blog section WIP

feat(www): desktoop style for Blog section WIP

feat(www): desktop style for Homepage Blog section WIP

feat(www): finish desktop style of Blog section

feat(www): finish desktop style of Blog section

* fix(www): fix stylelint error

* feat(): finish styles of Blog section

* fix(www): add cover to one post for development

* fix(www): update margins for section action btns

* fix(www): update margins of Blog section

* refactor(www): email-cature-form

* refactor(www): email-cature-form

* feat(www): add ornaments to assets

* feat(www): update colors palette

* feat(www): add Homepage variant style to newsletter form

* feat(www): add Homepage variant style to newsletter form

* feat(www): mobile style for Homepage Newsletter section

* refactor(www): refactor homepage-section

* fix(www): fix homepage section padding

* refactor(www): refactor ecosystem scroollers

* fix(www): fix some styles

* fix(www): add cover image to one post

* fix(www): add border-radius to cover image

* fix(www): add automaticExcerpt if the handwritten one does not exists

* feat(www): add conditional formating to post dates

* fix(www): fix hover effect on Blog cards

* fix(www): remove 'Submit an article button'

docs/blog/2018-11-07-gatsby-for-apps/index.md

@@ -8,6 +8,7 @@ tags:
   - applications
   - beyond static
 excerpt: Gatsby is great for not only static sites but also traditional web applications. Using Gatsby enables the benefits of both static and web applications so you don't have to sacrifice the advantages of one approach to reap the benefits of the other.
+cover: images/what-if-i-told-you.jpg
 ---
 
 Gatsby is great for static sites. You probably know this! It’s equally great for web applications. You may not know this. Gatsby is great for building web experiences that leverage the benefits of both so called static sites and web applications -- simultaneously. You don't have to sacrifice the advantages of one approach to reap the benefits of the other.

www/src/assets/ornaments.js

@@ -0,0 +1,3 @@
+import NewsletterFormOrnament from "!raw-loader!./newsletter-form-ornament.svg"
+
+export { NewsletterFormOrnament }

www/src/components/ecosystem/ecosystem-featured-item.js

@@ -4,6 +4,8 @@ import styled from "react-emotion"
 import { Link } from "gatsby"
 import Img from "gatsby-image"
 
+import { HorizontalScrollerItem } from "../shared/horizontal-scroller"
+
 import StarIcon from "react-icons/lib/md/star"
 import ArrowDownwardIcon from "react-icons/lib/md/arrow-downward"
 
@@ -12,17 +14,12 @@ import presets, { colors } from "../../utils/presets"
 
 const MAX_DESCRIPTION_LENGTH = 100
 
-const EcosystemFeaturedItemRoot = styled(`li`)`
-  width: 85vw;
-  margin: 0 2px 0 0;
-  padding: 5px;
-
-  :last-child {
-    margin-right: 0;
-  }
+const EcosystemFeaturedItemRoot = styled(HorizontalScrollerItem)`
+  margin-right: ${rhythm(options.blockMarginBottom)};
 
   ${presets.Tablet} {
     border-bottom: 1px solid ${colors.gray.superLight};
+    box-shadow: none;
     margin: 0;
     padding: 0;
     width: auto;

www/src/components/ecosystem/ecosystem-featured-items.js

@@ -2,18 +2,19 @@ import React from "react"
 import PropTypes from "prop-types"
 import styled from "react-emotion"
 
+import {
+  HorizontalScroller,
+  HorizontalScrollerContent,
+} from "../shared/horizontal-scroller"
+
 import presets, { colors } from "../../utils/presets"
 import { rhythm, options } from "../../utils/typography"
 import { scrollbarStyles } from "../../utils/styles"
 import { SCROLLER_CLASSNAME } from "../../utils/scrollers-observer"
 
-export const EcosystemFeaturedItemsRootBase = styled(`div`)`
-  overflow-x: scroll;
+const EcosystemFeaturedItemsRoot = styled(HorizontalScroller)`
   margin: ${rhythm(0.1)} -${rhythm(options.blockMarginBottom)};
-  -webkit-overflow-scrolling: touch;
-`
 
-const EcosystemFeaturedItemsRoot = styled(EcosystemFeaturedItemsRootBase)`
   ${presets.Tablet} {
     border-top: 1px solid ${colors.gray.superLight};
     margin-top: ${rhythm(0.4)};
@@ -31,7 +32,10 @@ export const ListBase = styled(`ul`)`
   padding: 0 calc(${rhythm(options.blockMarginBottom)} - 5px) 4px;
 `
 
-const List = styled(ListBase)`
+const List = styled(HorizontalScrollerContent)`
+  padding-left: ${rhythm(options.blockMarginBottom)};
+  padding-right: ${rhythm(options.blockMarginBottom)};
+
   ${presets.Tablet} {
     flex-direction: column;
     padding: 0;