diff options
Diffstat (limited to 'src/pages/404.tsx')
-rw-r--r-- | src/pages/404.tsx | 64 |
1 files changed, 24 insertions, 40 deletions
diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 972f139..7dcd580 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,49 +1,33 @@ import * as React from "react" -import { Link, HeadFC, PageProps } from "gatsby" +import type { HeadFC, PageProps } from "gatsby" -const pageStyles = { - color: "#232129", - padding: "96px", - fontFamily: "-apple-system, Roboto, sans-serif, serif", -} -const headingStyles = { - marginTop: 0, - marginBottom: 64, - maxWidth: 320, -} +import logo from "../images/logo.svg"; +import PageLayout, { generateHeader } from "../layout/page"; +import styled from "styled-components"; -const paragraphStyles = { - marginBottom: 48, -} -const codeStyles = { - color: "#8A6534", - padding: 4, - backgroundColor: "#FFF4DB", - fontSize: "1.25rem", - borderRadius: 4, -} +const CenterImage = styled.img` + display: block; + margin: 0 auto; + margin-top: 50px; + width: 70%; + height: auto; + max-width: 600px; +` -const NotFoundPage: React.FC<PageProps> = () => { +const NotFound: React.FC<PageProps> = () => { return ( - <main style={pageStyles}> - <h1 style={headingStyles}>Page not found</h1> - <p style={paragraphStyles}> - Sorry 😔, we couldn’t find what you were looking for. - <br /> - {process.env.NODE_ENV === "development" ? ( - <> - <br /> - Try creating a page in <code style={codeStyles}>src/pages/</code>. - <br /> - </> - ) : null} - <br /> - <Link to="/">Go home</Link>. - </p> - </main> + <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 NotFoundPage +export default NotFound -export const Head: HeadFC = () => <title>Not found</title> +export const Head: HeadFC = generateHeader("Not Found", "Page could not be found."); |