Revert "remove the splash image as it requires too many dependencies to be worth it"

This reverts commit ddcd94e4ff.

src/routes/Start.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react"
 import { Helmet } from "react-helmet"
 import { Link, StaticQuery, graphql } from "gatsby"
+import { GatsbyImage } from "gatsby-plugin-image"
 import styled from "@emotion/styled"
 import { withTheme } from "@emotion/react"
 
@@ -99,6 +100,63 @@ 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",
+            marginTop: 30,
+            maxHeight: 350,
+          }}
+        >
+          <StaticQuery
+            query={graphql`
+              query {
+                landingGraphicLight: file(
+                  relativePath: { eq: "landing-graphic-light.png" }
+                ) {
+                  childImageSharp {
+                    gatsbyImageData(layout: CONSTRAINED)
+                  }
+                }
+                landingGraphicDark: file(
+                  relativePath: { eq: "landing-graphic-dark.png" }
+                ) {
+                  childImageSharp {
+                    gatsbyImageData(layout: CONSTRAINED)
+                  }
+                }
+              }
+            `}
+            render={data => {
+              return theme.name === "LIGHT" ? (
+                <GatsbyImage
+                  alt="splash"
+                  style={{
+                    maxWidth: 320,
+                    width: "100%",
+                    maxHeight: 350,
+                    height: "100%",
+                  }}
+                  image={data.landingGraphicLight.childImageSharp.gatsbyImageData}
+                  layout="constrained"
+                />
+              ) : (
+                <GatsbyImage
+                  alt="splash"
+                  style={{
+                    maxWidth: 320,
+                    width: "100%",
+                    maxHeight: 350,
+                    height: "100%",
+                  }}
+                  image={data.landingGraphicDark.childImageSharp.gatsbyImageData}
+                  layout="constrained"
+                />
+              )
+            }}
+          />
+        </div>
         <div
           style={{
             margin: "60px 0px",