src/pages/404.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import * as React from "react"
import type { HeadFC, PageProps } from "gatsby"

import logo from "../images/logo.svg";
import PageLayout, { generateHeader } from "../layout/page";
import styled from "styled-components";

const CenterImage = styled.img`
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  width: 70%;
  height: auto;
  max-width: 600px;
`

const NotFound: React.FC<PageProps> = () => {
  return (
    <PageLayout>
      <main>
        <CenterImage src={logo} alt="DevOps Logo" />
        <div>
          <h1>404: Not Found</h1>
          <p>The page you are looking for does not exist.</p>
        </div>
      </main>
    </PageLayout>
  )
}

export default NotFound

export const Head: HeadFC = generateHeader("Not Found", "Page could not be found.");