Move customs errors to app directory

app/error.js

@@ -1,20 +1,19 @@
-import {Container, Typography} from '@mui/material'
-import Link from 'next/link'
-import Image from 'next/image'
+'use client'
 
-export default function Custom500() {
+import Image from 'next/image'
+import {Container, Typography} from '@mui/material'
+
+export default function Error() {
   return (
-    <Container maxWidth='sm'>
-      <Link passHref href='/'>
-        <Image
-          alt='Logo OKI'
-          width={512}
-          height={512}
-          src='/logo-512x512.png'
-          quality={20}
-        />
-      </Link>
-      <Typography variant='h2' align='center' >500 - Erreur du serveur 🥺</Typography>
+    <Container sx={{textAlign: 'center', minHeight: '100vh'}} maxWidth='sm'>
+      <Image
+        alt='Logo OKI'
+        width={192}
+        height={192}
+        src='/logo-192x192.png'
+        quality={20}
+      />
+      <Typography variant='h2' align='center' >500 - Erreur du serveur 😭</Typography>
       <Typography style={{marginTop: '1em', color: 'green'}} variant='h3' align='center'>Nous mettons tout en œuvre pour rétablir le site dans les plus brefs délais 💪🏾</Typography>
     </Container>
   )

app/not-found.js

@@ -1,16 +1,16 @@
-import {Container, Typography} from '@mui/material'
 import Link from 'next/link'
 import Image from 'next/image'
+import {Container, Typography} from '@mui/material'
 
-export default function Custom404() {
+export default function NotFound() {
   return (
-    <Container maxWidth='sm'>
+    <Container sx={{textAlign: 'center'}} maxWidth='sm'>
       <Link passHref href='/'>
         <Image
           alt='Logo OKI'
-          width={512}
-          height={512}
-          src='/logo-512x512.png'
+          width={192}
+          height={192}
+          src='/logo-192x192.png'
           quality={20}
         />
       </Link>