More text fiddling + remove segment as they don't use Gatsby any long…

…er (#12244)

* More text fiddling + remove segment as they don't use Gatsby any longer

* Cleanup segment

www/src/assets/logos.js

@@ -2,7 +2,6 @@ import JSIcon from "./js.svg"
 import GraphQLIcon from "./graphql.svg"
 import WebpackIcon from "./webpack.svg"
 import ReactJSIcon from "./react.svg"
-import SegmentIcon from "./segment.svg"
 import FormidableIcon from "./formidable.svg"
 import FabricIcon from "./fabric.svg"
 import NetlifyIcon from "./netlify.svg"
@@ -12,7 +11,6 @@ export {
   GraphQLIcon,
   WebpackIcon,
   ReactJSIcon,
-  SegmentIcon,
   FormidableIcon,
   FabricIcon,
   NetlifyIcon,

www/src/components/cards.js

@@ -1,21 +1,24 @@
 import React from "react"
 import presets from "../utils/presets"
 
-const Cards = ({ children }) => (
-  <div
-    css={{
-      display: `flex`,
-      flex: `0 1 auto`,
-      flexWrap: `wrap`,
-      background: `#fff`,
-      borderRadius: presets.radiusLg,
-      boxShadow: `0 5px 20px rgba(25, 17, 34, 0.1)`,
-      transform: `translateZ(0)`,
-      width: `100%`,
-    }}
-  >
-    {children}
-  </div>
-)
+const Cards = props => {
+  return (
+    <div
+      className={props.className}
+      css={{
+        display: `flex`,
+        flex: `0 1 auto`,
+        flexWrap: `wrap`,
+        background: `#fff`,
+        borderRadius: presets.radiusLg,
+        boxShadow: `0 5px 20px rgba(25, 17, 34, 0.1)`,
+        transform: `translateZ(0)`,
+        width: `100%`,
+      }}
+    >
+      {props.children}
+    </div>
+  )
+}
 
 export default Cards

www/src/components/diagram.js

@@ -259,12 +259,11 @@ const Diagram = () => (
       >
         <h1
           css={{
-            marginTop: rhythm(1 / 4),
+            marginTop: 0, //rhythm(1 / 4),
             marginBottom: rhythm(3 / 4),
             ...scale(0.9),
             [presets.Tablet]: {
-              marginTop: rhythm(1),
-              marginBottom: rhythm(1.5),
+              marginTop: rhythm(3 / 4),
             },
           }}
         >
@@ -275,6 +274,10 @@ const Diagram = () => (
             Gatsby is a free and open source framework based on React for
             building blazing fast websites and apps
           </FuturaParagraph>
+          <br />
+          <FuturaParagraph>
+            Pull data from <em>anywhere</em> in minutes
+          </FuturaParagraph>
         </div>
 
         <Segment className="Source">

www/src/components/masthead.js

@@ -32,7 +32,7 @@ const MastheadContent = () => (
       [presets.Hd]: {
         paddingTop: rhythm(5),
         paddingLeft: vPHd,
-        paddingBottom: rhythm(3),
+        paddingBottom: rhythm(2),
       },
       [presets.VHd]: {
         paddingTop: rhythm(6),

www/src/components/used-by.js

@@ -2,7 +2,7 @@ import React from "react"
 import typography, { rhythm, scale } from "../utils/typography"
 import presets from "../utils/presets"
 import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters"
-import { FormidableIcon, FabricIcon, SegmentIcon } from "../assets/logos"
+import { FormidableIcon, FabricIcon } from "../assets/logos"
 
 const Icon = ({ icon, alt, href }) => (
   <li
@@ -136,7 +136,6 @@ const UsedBy = () => (
           alt="Fabric"
           href="https://meetfabric.com/careers"
         />
-        <Icon icon={SegmentIcon} alt="Segment" href="https://segment.com" />
         <Icon
           icon={FormidableIcon}
           alt="Formidable"