aboutsummaryrefslogtreecommitdiffstats
path: root/src/pages/404.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages/404.tsx')
-rw-r--r--src/pages/404.tsx64
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.");