feat: add gatsby image

gatsby-config.js

@@ -2,6 +2,8 @@ module.exports = {
   plugins: [
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-offline`,
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
     {
       resolve: `gatsby-plugin-emotion`,
     },
@@ -32,5 +34,22 @@ module.exports = {
         icon: `src/img/splash.png`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `images`,
+        path: `${__dirname}/src/img`,
+      },
+    },
+    {
+      resolve: "gatsby-plugin-module-resolver",
+      options: {
+        root: "./src",
+        aliases: {
+          components: "./components",
+          img: "./img",
+        },
+      },
+    },
   ],
 }

package.json

@@ -10,12 +10,17 @@
     "emotion-theming": "^10.0.10",
     "firebase": "^5.9.0",
     "gatsby": "^2.4.3",
+    "gatsby-image": "^2.1.0",
     "gatsby-plugin-create-client-paths": "^2.0.5",
     "gatsby-plugin-emotion": "^4.0.6",
     "gatsby-plugin-manifest": "^2.1.1",
+    "gatsby-plugin-module-resolver": "^1.0.3",
     "gatsby-plugin-offline": "^2.1.0",
     "gatsby-plugin-prefetch-google-fonts": "^1.4.2",
     "gatsby-plugin-react-helmet": "^3.0.12",
+    "gatsby-plugin-sharp": "^2.0.37",
+    "gatsby-source-filesystem": "^2.0.36",
+    "gatsby-transformer-sharp": "^2.1.19",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-feather": "^1.1.6",

src/components/screens/Start/Start.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react"
-import { Link } from "gatsby"
+import { Link, StaticQuery, graphql } from "gatsby"
+import Img from "gatsby-image"
 import styled from "@emotion/styled"
 import { withTheme } from "emotion-theming"
 
@@ -8,6 +9,8 @@ import { Button, P } from "../../elements"
 import { todayUrl } from "../../../utils/date"
 import Icon from "../../Icon"
 import Logo from "../../Logo"
+import LandingGraphicLight from "../../../img/landing-graphic-light.svg"
+import LandingGraphicDark from "../../../img/landing-graphic-dark.svg"
 
 const StartGrid = styled.div`
   margin-top: 30px;
@@ -101,6 +104,55 @@ class Start extends Component {
         <Link to={`/app${todayUrl()}`} style={{ textDecoration: "none" }}>
           <Button colors={theme.colors}>Start Writing</Button>
         </Link>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            margin: "30 auto",
+            maxHeight: 350,
+          }}
+        >
+          <StaticQuery
+            query={graphql`
+              query {
+                landingGraphicLight: file(
+                  relativePath: { eq: "landing-graphic-light.png" }
+                ) {
+                  childImageSharp {
+                    fluid(maxWidth: 320) {
+                      ...GatsbyImageSharpFluid
+                    }
+                  }
+                }
+                landingGraphicDark: file(
+                  relativePath: { eq: "landing-graphic-dark.png" }
+                ) {
+                  childImageSharp {
+                    fluid(maxWidth: 320) {
+                      ...GatsbyImageSharpFluid
+                    }
+                  }
+                }
+              }
+            `}
+            render={data => {
+              return theme.name === "Light" ? (
+                <Img
+                  style={{
+                    maxWidth: 320,
+                    width: "100%",
+                    maxHeight: 350,
+                    height: "100%",
+                  }}
+                  fluid={data.landingGraphicLight.childImageSharp.fluid}
+                />
+              ) : (
+                <Img fluid={data.LandingGraphicDark.childImageSharp.fluid} />
+              )
+            }}
+          />
+        </div>
         <div
           style={{
             margin: "60px 0px",