Update Not Found page

src/components/client/campaigns/InlineDonation.tsx

@@ -217,7 +217,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     textAlign: 'center',
 
     '&:hover': {
-      'text-decoration': 'underline',
+      textDecoration: 'underline',
       transform: 'scale(1.01)',
       cursor: 'pointer',
       transition: 'all 0.3s ease',

src/components/client/layout/Footer/Footer.styled.tsx

@@ -69,7 +69,7 @@ export const SubscribeLinkWrapper = styled(Grid)(({ theme }) => ({
   },
 
   '&:hover': {
-    'text-decoration': 'underline',
+    textDecoration: 'underline',
     transform: 'scale(1.03)',
     cursor: 'pointer',
     transition: 'all 0.3s ease',

src/components/common/errors/NotFoundPage/NotFoundPage.styled.tsx

@@ -0,0 +1,20 @@
+import { Stack, Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+import LinkButton from 'components/common/LinkButton'
+import theme from 'common/theme'
+
+export const Root = styled(Stack)(() => ({
+  alignItems: 'center',
+  gap: theme.spacing(5),
+  marginTop: theme.spacing(8),
+}))
+
+export const ErrorMessage = styled(Typography)(() => ({
+  maxWidth: theme.spacing(80),
+}))
+
+export const BackButton = styled(LinkButton)(() => ({
+  color: theme.palette.primary.dark,
+  borderColor: theme.palette.primary.dark,
+}))

src/components/common/errors/NotFoundPage/NotFoundPage.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'next-i18next'
+import { Grid } from '@mui/material'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+
+import { routes } from 'common/routes'
+import Layout from 'components/client/layout/Layout'
+import NotFoundIllustration from '../assets/NotFoundIllustration'
+
+import { BackButton, ErrorMessage, Root } from './NotFoundPage.styled'
+
+export default function NotFoundPage() {
+  const { t } = useTranslation('common')
+
+  return (
+    <Layout>
+      <Root>
+        <Grid container item xs={12} sm={7} lg={5}>
+          <NotFoundIllustration />
+        </Grid>
+        <ErrorMessage variant="body2">{t('errors.404Message')}</ErrorMessage>
+        <BackButton
+          size="large"
+          startIcon={<ArrowBackIcon />}
+          variant="outlined"
+          href={routes.index}>
+          {t('errors.backButtonLabel')}
+        </BackButton>
+      </Root>
+    </Layout>
+  )
+}

src/pages/404.tsx

@@ -1,7 +1,7 @@
 import { GetStaticProps } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-import NotFoundPage from 'components/common/errors/NotFoundPage'
+import NotFoundPage from 'components/common/errors/NotFoundPage/NotFoundPage'
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => ({
   props: {