Move Discord icon, "hero" and CTA button to component

* inline hero background SVGs
* add brand, sidebar, and hero background colors to presets
* procrastination bonus: silly CTA button hover effect

www/src/components/cta-button.js

@@ -0,0 +1,51 @@
+import Link from "gatsby-link"
+import { rhythm, scale, options } from "../utils/typography"
+import presets from "../utils/presets"
+
+import { css } from "glamor"
+
+let bounce = css.keyframes({
+  "0%": { backgroundPosition: `0 0` },
+  "100%": { backgroundPosition: `30px 60px` },
+})
+
+const ctaButtonStyles = {
+  ...scale(1 / 5),
+  display: `inline-block`,
+  fontFamily: options.headerFontFamily.join(`,`),
+  padding: `${rhythm(1 / 3)} ${rhythm(1 / 2)}`,
+  borderRadius: `3px`,
+  // Increase specificity
+  [presets.Mobile]: {
+    ...scale(2 / 5),
+    padding: `${rhythm(1 / 2)} ${rhythm(1)}`,
+  },
+  "&&": {
+    border: `1px solid #744c9e`,
+    boxShadow: `none`,
+    //boxShadow: `0 5px 50px (0,0,0,0.2)`,
+    color: `#744c9e`,
+    backgroundColor: presets.heroBright,
+    backgroundSize: `30px 30px`,
+    transiton: `all .15s ease-out`,
+    ":hover": {
+      backgroundSize: `30px 30px`,
+      backgroundColor: `#744c9e`,
+      backgroundImage: `
+        linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent)`,
+      color: `white`,
+      animation: `${bounce} 2.8s linear infinite`,
+    },
+    ":after": {
+      content: ``,
+      display: `block`,
+    },
+  },
+}
+
+const CtaButton = ({ to, children }) =>
+  <Link css={ctaButtonStyles} to={to}>
+    {children}
+  </Link>
+
+export default CtaButton

www/src/components/discord.js

@@ -0,0 +1,27 @@
+const DiscordIcon = () =>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 28 28"
+    xmlSpace="preserve"
+    fill="currentColor"
+    height="1em"
+    width="1em"
+    preserveAspectRatio="xMidYMid meet"
+    style={{ verticalAlign: `middle` }}
+  >
+    <g>
+      <path d="M11.5,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6
+                C12.9,12.4,12.3,11.7,11.5,11.7L11.5,11.7z M16.6,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6
+                S17.4,11.7,16.6,11.7L16.6,11.7z" />
+      <path d="M23.4,0H4.6C3,0,1.8,1.3,1.8,2.9v18.9c0,1.6,1.3,2.9,2.9,2.9h15.9l-0.7-2.6l1.8,1.7l1.7,1.6
+                l3,2.7V2.9C26.2,1.3,25,0,23.4,0L23.4,0z M18,18.3c0,0-0.5-0.6-0.9-1.1c1.8-0.5,2.5-1.7,2.5-1.7c-0.6,0.4-1.1,0.6-1.6,0.8
+                c-0.7,0.3-1.4,0.5-2,0.6c-1.3,0.3-2.6,0.2-3.6,0c-0.8-0.2-1.5-0.4-2.1-0.6c-0.3-0.1-0.7-0.3-1-0.5c0,0-0.1,0-0.1-0.1c0,0,0,0-0.1,0
+                c-0.3-0.1-0.4-0.2-0.4-0.2s0.7,1.1,2.4,1.7c-0.4,0.5-0.9,1.2-0.9,1.2c-3.1-0.1-4.3-2.1-4.3-2.1c0-4.5,2-8.2,2-8.2
+                c2-1.5,3.9-1.5,3.9-1.5L12,6.7C9.5,7.4,8.3,8.5,8.3,8.5s0.3-0.2,0.8-0.4c1.5-0.7,2.7-0.8,3.2-0.9c0.1,0,0.2,0,0.2,0
+                c0.9-0.1,1.8-0.1,2.8,0c1.3,0.2,2.8,0.5,4.2,1.3c0,0-1.1-1.1-3.5-1.8l0.2-0.2c0,0,1.9,0,3.9,1.5c0,0,2,3.7,2,8.2
+                C22.3,16.2,21.1,18.2,18,18.3L18,18.3z" />
+    </g>
+  </svg>
+
+export default DiscordIcon

www/src/components/hero.js

@@ -0,0 +1,242 @@
+import CtaButton from "./cta-button"
+import { rhythm, scale, options } from "../utils/typography"
+import presets from "../utils/presets"
+import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"
+
+const vP = rhythm(presets.vPR)
+const vPHd = rhythm(presets.vPHdR)
+const vPVHd = rhythm(presets.vPVHdR)
+const vPVVHd = rhythm(presets.vPVVHdR)
+
+const vPOff = rhythm(presets.vPR - presets.logoWidth)
+const vPHdOff = rhythm(presets.vPHdR - presets.logoWidth)
+const vPVHdOff = rhythm(presets.vPVHdR - presets.logoWidth)
+const vPVVHdOff = rhythm(presets.vPVVHdR - presets.logoWidth)
+
+const verticalPadding = {
+  paddingLeft: vP,
+  paddingRight: vP,
+  [presets.Hd]: {
+    paddingLeft: vPHd,
+    paddingRight: vPHd,
+  },
+  [presets.VHd]: {
+    paddingLeft: vPVHd,
+    paddingRight: vPVHd,
+  },
+  [presets.VVHd]: {
+    paddingLeft: vPVVHd,
+    paddingRight: vPVVHd,
+  },
+}
+
+const HeroUnitBackground = ({ position }) =>
+  <div
+    className="heroUnitBackground"
+    css={{
+      position: position,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      zIndex: -1,
+      background: `white`,
+    }}
+  >
+    <div
+      css={{
+        position: `absolute`,
+        width: vPOff,
+        bottom: 0,
+        left: 0,
+        top: 0,
+        zIndex: -10,
+        background: presets.heroBright,
+        [presets.Hd]: {
+          width: vPHdOff,
+        },
+        [presets.VHd]: {
+          width: vPVHdOff,
+        },
+        [presets.VVHd]: {
+          width: vPVVHdOff,
+        },
+      }}
+    />
+    <div
+      className="heroUnitBackground-right"
+      css={{
+        position: `absolute`,
+        right: 0,
+        bottom: 0,
+        left: position === `absolute` ? `25%` : `0`,
+        top: 0,
+        width: `100%`,
+        height: `100%`,
+        zIndex: -1,
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 400 400"
+        preserveAspectRatio="xMinYMin slice"
+        style={{ width: `100%`, height: `100%` }}
+      >
+        <style type="text/css">
+          {`
+            .st0 { fill: ${presets.heroMid}; }
+    	      .st1 { fill: ${presets.heroDark}; }
+            .lg {
+              display: none;
+            }
+            @media screen and (min-width: 960px) and (min-height: 600px) {
+              .lg {
+                display: block;
+              }
+            }
+          `}
+        </style>
+        <polygon
+          className="st0 sm"
+          points="-230,571.8 456.8,-115 1090,-115 1090,571.8 "
+        />
+        <polygon
+          className="st1 sm"
+          points="-130,571.8 556.8,-115 1586.2,-115 1586.2,571.8 "
+        />
+
+        <polygon
+          className="st0 lg"
+          points="-200,460 486.8,-226.8 1120,-226.8 1120,460 "
+        />
+        <polygon
+          className="st1 lg"
+          points="-140,460 546.8,-226.8 1576.2,-226.8 1576.2,460 "
+        />
+      </svg>
+    </div>
+    <div
+      className="heroUnitBackground-left"
+      css={{
+        position: `absolute`,
+        right: 0,
+        left: vPOff,
+        top: 0,
+        bottom: 0,
+        zIndex: -2,
+        [presets.Hd]: {
+          left: vPHdOff,
+        },
+        [presets.VHd]: {
+          left: vPVHdOff,
+        },
+        [presets.VVHd]: {
+          left: vPVVHdOff,
+        },
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 10000 10000"
+        xmlSpace="preserve"
+        preserveAspectRatio="xMinYMin slice"
+        style={{ width: `100%`, height: `100%` }}
+      >
+        <style type="text/css">
+          {`.st9{ fill:${presets.heroBright}; }`}
+        </style>
+        <polygon
+          className="st9"
+          points="-5000,-5000 15000,15000 -5000,15000 "
+        />
+      </svg>
+    </div>
+  </div>
+
+const HeroUnit = () =>
+  <div
+    className="heroUnit"
+    css={{
+      padding: rhythm(3 / 4),
+      paddingLeft: rhythm(1.5),
+      paddingTop: rhythm(4),
+      paddingBottom: rhythm(4),
+      position: `relative`,
+      width: rhythm(14),
+      [presets.Mobile]: {
+        //background: `rgba(255,255,0,0.2)`,
+      },
+      [presets.Phablet]: {
+        width: rhythm(17),
+        //background: `rgba(255,200,0,0.1)`,
+      },
+      [presets.Tablet]: {
+        width: rhythm(17),
+        //background: `rgba(255,100,0,0.1)`,
+      },
+      [presets.Desktop]: {
+        width: rhythm(17),
+        //background: `red`,
+        paddingTop: rhythm(5),
+      },
+      [presets.Hd]: {
+        paddingLeft: vPHd,
+        width: rhythm(22),
+      },
+      [presets.VHd]: {
+        paddingLeft: vPVHd,
+        width: rhythm(29),
+      },
+      [presets.VVHd]: {
+        paddingBottom: rhythm(6),
+        paddingLeft: vPVVHd,
+        width: rhythm(30),
+      },
+    }}
+  >
+    <h1
+      css={{
+        color: presets.brand,
+        ...scale(0.8),
+        margin: 0,
+        marginBottom: `1.2em`,
+        padding: 0,
+        lineHeight: 1,
+        [presets.Mobile]: {
+          fontSize: scale(1).fontSize,
+        },
+        [presets.Tablet]: {
+          fontSize: scale(1.2).fontSize,
+        },
+        [presets.Hd]: {
+          fontSize: scale(1.4).fontSize,
+        },
+        [presets.VHd]: {
+          fontSize: scale(1.75).fontSize,
+        },
+      }}
+    >
+      Blazing-fast static site generator for React
+    </h1>
+    <CtaButton to="/docs/">
+      <span css={{ verticalAlign: `middle` }}>Get Started</span>
+      {` `}
+      <ArrowForwardIcon
+        css={{ verticalAlign: `baseline`, marginLeft: `.2em` }}
+      />
+    </CtaButton>
+  </div>
+
+const Hero = () =>
+  <div
+    css={{
+      position: `relative`,
+    }}
+  >
+    <HeroUnitBackground position="fixed" />
+    <HeroUnit />
+  </div>
+
+export default Hero

www/src/components/sidebar-body.js

@@ -38,6 +38,7 @@ class SidebarBody extends React.Component {
                 fontStyle: headerStyle,
                 textTransform: headerTextTransform,
                 marginTop: index === 0 ? 0 : false,
+                color: presets.heroMid,
               }}
             >
               {section.title}