Adapt components with new css & NextJs rules

app/awtis/page.js

@@ -1,7 +1,7 @@
 import {notFound} from 'next/navigation'
 import Box from '@mui/material/Box'
 import Container from '@mui/material/Container'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 
 import ChecheAwtis from '../../components/awtis/cheche-awtis'
 import AwtisKat from '../../components/awtis/awtis-kat'

app/error.js

@@ -11,7 +11,8 @@ export default function Error() {
         width={192}
         height={192}
         src='/logo-192x192.png'
-        quality={20}
+        quality={[20, 75]}
+        loading='eager'
       />
       <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>

app/not-found.js

@@ -11,7 +11,8 @@ export default function NotFound() {
           width={192}
           height={192}
           src='/logo-192x192.png'
-          quality={20}
+          quality={[20, 75]}
+          loading='eager'
         />
       </Link>
       <Typography variant='h2' align='center' >404 - La page n’existe pas 😔</Typography>

app/sipote/page.js

@@ -11,10 +11,10 @@ export default function Sipote() {
   const [paymentMethod, setPaymentMethod] = useState(0)
 
   return (
-    <Box sx={{display: 'flex', marginTop: 3, flexDirection: 'column', minHeight: '100vh'}}>
+    <Box sx={{display: 'flex', marginTop: 10, flexDirection: 'column', minHeight: '100vh'}}>
       <Box sx={{flexGrow: 1, marginBottom: 10}}>
         <Container>
-          <Typography gutterBottom sx={{fontWeight: 'bold'}} textAlign='center' variant='h4' component='h1'>
+          <Typography gutterBottom sx={{fontWeight: 'bold', textAlign:'center' }} variant='h4' component='h1'>
             Soutenir ORGANISATION KA INTERNATIONALE !
           </Typography>
           <Paper sx={{padding: 2, marginTop: 3}}>