{"size": 985, "ext": "js", "max_stars_repo_path": "src/pages/404.js", "max_stars_repo_name": "lukejohnbrown/lukebrown", "max_stars_repo_stars_event_min_datetime": "2020-05-05T01:58:42.000Z", "max_stars_repo_stars_event_max_datetime": "2020-05-05T01:58:42.000Z", "max_issues_repo_path": "src/pages/404.js", "max_issues_repo_name": "lukejohnbrown/lukebrown", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/404.js", "max_forks_repo_name": "lukejohnbrown/lukebrown", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.9210526316, "max_line_length": 76, "alphanum_fraction": 0.6182741117}
import React from "react"
import styled from "styled-components"

import { Layout, Container, Seo, Title, Footer } from "../components/shared"

const Cat = styled.img`
  width: 100%;
`

const Subtitle = styled.p`
  font-size: ${({ theme }) => theme.fontSize[200]};
  margin-bottom: ${({ theme }) => theme.space[3]};
`

const Disclaimer = styled.p`
  margin-top: ${({ theme }) => theme.space[1]};
`

const NotFoundPage = () => (
  <Layout>
    <Seo title="Page not found" />
    <Container>
      <Title>Oh dear, that page can't be found!</Title>
      <Subtitle>
        Sorry about that, here is a random cat gif to make it up to you...
      </Subtitle>
      <Cat src={`https://cataas.com/cat/gif?size=50&cache=${Date.now()}`} />
      <Disclaimer>
        ☝️ This gif truly is randomly generated, sorry if it is somehow
        inappropriate!
      </Disclaimer>
      <Footer buttonText="Take me home" buttonLink="/" />
    </Container>
  </Layout>
)

export default NotFoundPage
