1  import { Trans } from '@lingui/macro';
 2  import { Box, Button, Paper, Typography, useTheme } from '@mui/material';
 3  import Link from 'next/link';
 4  import { useEffect } from 'react';
 5  import { ContentContainer } from 'src/components/ContentContainer';
 6  import { TopInfoPanel } from 'src/components/TopInfoPanel/TopInfoPanel';
 7  import { MainLayout } from 'src/layouts/MainLayout';
 8  import { useRootStore } from 'src/store/root';
 9  
10  export default function Aave404Page() {
11    const theme = useTheme();
12    const trackEvent = useRootStore((store) => store.trackEvent);
13  
14    useEffect(() => {
15      trackEvent('Page Viewed', {
16        'Page Name': '404 Error',
17      });
18    }, [trackEvent]);
19    return (
20      <>
21        <TopInfoPanel />
22        <ContentContainer>
23          <Paper
24            sx={{
25              display: 'flex',
26              flexDirection: 'column',
27              alignItems: 'center',
28              justifyContent: 'center',
29              textAlign: 'center',
30              p: 4,
31              flex: 1,
32              backgroundColor: theme.palette.mode === 'dark' ? 'transparent' : '',
33            }}
34          >
35            <Box sx={{ maxWidth: 444, m: '0 auto' }}>
36              <img width="100%" height="auto" src="/404/404.svg" alt="404 - Page not found" />
37            </Box>
38            <Typography variant="display1" sx={{ mt: 2 }}>
39              <Trans>Page not found</Trans>
40            </Typography>
41            <Typography sx={{ mt: 3, mb: 5, maxWidth: 480 }}>
42              <Trans>Sorry, we couldn&apos;t find the page you were looking for.</Trans>
43              <br />
44              <Trans>We suggest you go back to the Dashboard.</Trans>
45            </Typography>
46            <Link href="/" passHref>
47              <Button variant="outlined" color="primary">
48                <Trans>Back to Dashboard</Trans>
49              </Button>
50            </Link>
51          </Paper>
52        </ContentContainer>
53      </>
54    );
55  }
56  
57  Aave404Page.getLayout = function getLayout(page: React.ReactElement) {
58    return <MainLayout>{page}</MainLayout>;
59  };