Fix Footer to bottom

pages/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import Image from 'next/image'
-import {Container, Grid, Typography, Button} from '@mui/material'
+import {Container, Grid, Typography, Button, Box} from '@mui/material'
 import GroupIcon from '@mui/icons-material/Group'
 import MusicNoteIcon from '@mui/icons-material/MusicNote'
 import {Pleroma, Peertube, Paypal} from '@icons-pack/react-simple-icons'
@@ -62,7 +62,8 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
 
   return (
     <HeadLayout tab={0}>
-      <div style={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
+      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
+        <Box sx={{flexGrow: 1}}>
           <Container align='center'>
             <Image
               alt='Logo #OKi'
@@ -99,8 +100,9 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
               {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} soutit={k.soutit} kantite={k.kantite} route={k.route} />)}
             </Grid>
           </Container>
+        </Box>
         <Footer />
-      </div>
+      </Box>
     </HeadLayout>
   )
 }