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