404

src/components/404/Image.js

@@ -0,0 +1,21 @@
+import Img from 'gatsby-image'
+import React from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+
+const Image = () => (
+  <StaticQuery
+    query={graphql`
+      query {
+        placeholderImage: file(relativePath: { eq: "404.png" }) {
+          childImageSharp {
+            fluid(maxWidth: 800) {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
+      }
+    `}
+    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
+  />
+)
+export default Image

src/components/404/index.js

@@ -0,0 +1 @@
+export { default as Image } from './Image'

src/components/common/layout/Footer.js

@@ -17,7 +17,16 @@ const Footer = () => (
         <div className='col col-copyright'>
           <div className='logo'>
             <Logo />
-            <span>Powered by Pivotal</span>
+            <span>
+              Powered by{' '}
+              <a
+                target='_blank'
+                rel='noreferrer noopener'
+                href='https://pivotal.io/'
+              >
+                Pivotal
+              </a>
+            </span>
           </div>
           <div className='copyright-links'>
             <div className='social'>

src/components/common/layout/Header.js

@@ -7,12 +7,12 @@ import Navigation from './Navigations'
 const Header = () => (
   <div className='header'>
     <div className='container'>
-      <h1 className='logo'>
+      <div className='logo-dataflow'>
         <Link to='/'>
           <Logo />
           Spring Cloud <strong>Data Flow</strong>
         </Link>
-      </h1>
+      </div>
 
       <Navigation />
     </div>

src/pages/404.js

@@ -1,18 +1,51 @@
+import '../styles/app.scss'
+
 import React from 'react'
+import { Link } from 'gatsby'
 
-import { Layout } from '../components/common/layout'
+import Footer from '../components/common/layout/Footer'
+import Logo from '../components/common/layout/Logo'
+import { Image } from '../components/404'
 import { Seo } from '../components/common/seo'
 
 const NotFoundPage = () => (
-  <Layout>
-    <Seo title='404' />
+  <div className='page-404'>
+    <Seo title='Spring Cloud Data Flow - 404' />
+
     <div className='container'>
-      <div class='layout-basic'>
-        <h1>NOT FOUND</h1>
-        <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-      </div>
+      <main>
+        <div className='logo-dataflow'>
+          <Link to='/'>
+            <Logo />
+            Spring Cloud <strong>Data Flow</strong>
+          </Link>
+        </div>
+
+        <Image />
+        <h1>Page not found...</h1>
+        <p>You just land nowhere... the sadness.</p>
+
+        <ul>
+          <li>
+            <Link to='/'>Homepage</Link>
+          </li>
+          <li>
+            <Link to='/features/'>Features</Link>
+          </li>
+          <li>
+            <Link to='/docs/'>Documentation</Link>
+          </li>
+          <li>
+            <Link to='/getting-started/'>Getting Started</Link>
+          </li>
+          <li>
+            <Link to='/community/'>Community</Link>
+          </li>
+        </ul>
+      </main>
+      <Footer />
     </div>
-  </Layout>
+  </div>
 )
 
 export default NotFoundPage

src/styles/_main.scss

@@ -46,41 +46,47 @@ h5 {
   padding: 32px 0;
   line-height: $spring-8points * 4;
   border-bottom: 1px solid darken($spring-gray-color, 5);
-  h1.logo {
-    margin: 0;
-    padding: 0;
+  height: $spring-8points * 5;
+}
+
+div.logo-dataflow {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  font-weight: normal;
+  font-size: 20px;
+  letter-spacing: -0.5px;
+
+  height: 40px;
+  line-height: 40px;
+
+  a {
     display: inline-block;
-    font-weight: normal;
+    position: relative;
+    color: lighten($spring-color, 10);
+    font-family: $spring-font-family-special;
+    text-decoration: none;
     font-size: 20px;
-    letter-spacing: -0.5px;
-    a {
-      display: inline-block;
-      position: relative;
-      color: lighten($spring-color, 10);
-      font-family: $spring-font-family-special;
-      text-decoration: none;
-      font-size: 20px;
-      padding-left: 55px;
-      font-weight: 400;
-      strong {
-        font-weight: 600;
-        color: $spring-color;
-        @include transition(all $spring-transition-duration);
-      }
+    padding-left: 55px;
+    font-weight: 400;
+    strong {
+      font-weight: 600;
+      color: $spring-color;
+      @include transition(all $spring-transition-duration);
+    }
+    svg {
+      width: 52px;
+      position: absolute;
+      top: -2px;
+      left: 0;
+      width: 50px;
+      color: $spring-primary-color;
+      @include transition(all $spring-transition-duration);
+    }
+    &:hover {
+      strong,
       svg {
-        width: 52px;
-        position: absolute;
-        top: -6px;
-        left: 0;
-        width: 50px;
-        color: $spring-primary-color;
-        @include transition(all $spring-transition-duration);
-      }
-      &:hover {
-        strong,
-        svg {
-          color: darken($spring-primary-color, 3);
-        }
+        color: darken($spring-primary-color, 3);
       }
     }
   }
@@ -139,6 +145,11 @@ h5 {
     strong {
       font-weight: 600;
     }
+    a {
+      color: lighten($spring-dark-color, 20);
+      &:hover {
+      }
+    }
     svg {
       position: absolute;
       top: 0;
@@ -402,6 +413,9 @@ h5 {
     margin: 0;
     margin-top: $spring-8points * 2;
     font-size: $spring-font-size - 1;
+    &.no-margin {
+      margin-top: 0;
+    }
     ul {
       list-style: none;
       padding: 0;

src/styles/pages/_404.scss

@@ -0,0 +1,30 @@
+.page-404 {
+  .container {
+    text-align: center;
+    max-width: 500px;
+  }
+  main {
+    padding: $spring-8points * 8 0;
+    p {
+      margin: 0;
+      padding: 0;
+    }
+    h1 {
+      margin: 0;
+      padding: 0;
+      font-size: 20px;
+    }
+    ul {
+      margin: 0;
+      @include links;
+      color: #666;
+      padding: 24px 0;
+      display: inline-block;
+      text-align: left;
+    }
+  }
+  .gatsby-image-wrapper {
+    width: 457px;
+    margin: 36px auto;
+  }
+}

src/styles/pages/_pages.scss

@@ -3,3 +3,4 @@
 @import 'getting-started';
 @import 'documentation';
 @import 'home';
+@import '404';

src/templates/documentation.js

@@ -91,7 +91,11 @@ class DocumentationTemplate extends React.Component {
                             version={this.props.data.page.fields.version}
                           />
                         )}
-                        <div className='box'>
+                        <div
+                          className={`box ${
+                            optionVersions.length === 0 ? 'no-margin' : ''
+                          }`}
+                        >
                           <SidebarNav page={page} tree={tree} />
                         </div>
                       </div>