1import React from 'react';
 2
 3import { makeStyles } from '@material-ui/core/styles';
 4import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 5
 6const useStyles = makeStyles((theme) => ({
 7  main: {
 8    maxWidth: 1000,
 9    margin: 'auto',
10    marginTop: theme.spacing(10),
11  },
12  logo: {
13    height: '350px',
14    display: 'block',
15    marginLeft: 'auto',
16    marginRight: 'auto',
17  },
18  icon: {
19    display: 'block',
20    marginLeft: 'auto',
21    marginRight: 'auto',
22    fontSize: '80px',
23  },
24  backLink: {
25    textDecoration: 'none',
26    color: theme.palette.text.primary,
27  },
28  header: {
29    fontSize: '30px',
30    textAlign: 'center',
31  },
32}));
33
34function NotFoundPage() {
35  const classes = useStyles();
36  return (
37    <main className={classes.main}>
38      <h1 className={classes.header}>404 – Page not found</h1>
39      <img
40        src="/logo-alpha-flat-outline.svg"
41        className={classes.logo}
42        alt="git-bug Logo"
43      />
44      <a href="/" className={classes.backLink}>
45        <h2 className={classes.header}>Go back to start page</h2>
46        <ArrowBackIcon className={classes.icon} />
47      </a>
48    </main>
49  );
50}
51
52export default NotFoundPage;