Add footer to index

components/footer.js

@@ -0,0 +1,35 @@
+import React, {useState} from 'react'
+import {Container, Link, makeStyles, Typography} from '@material-ui/core'
+import CGUDialog from './cgu/cgu-dialog'
+
+const useStyles = makeStyles(theme => ({
+  footer: {
+    padding: theme.spacing(3, 2),
+    marginTop: 'auto',
+    backgroundColor:
+      theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
+  },
+  text: {
+    fontWeight: 'bold'
+  }
+}))
+
+export default function Footer() {
+  const classes = useStyles()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <CGUDialog open={open} setOpen={setOpen} />
+      <footer id='cgu' className={classes.footer}>
+        <Container>
+          <Typography className={classes.text} align='center' variant='body1'>
+            <Link href='#cgu' onClick={() => setOpen(true)}>
+              Voir les CGU et la politique de confidentialité
+            </Link>
+          </Typography>
+        </Container>
+      </footer>
+    </>
+  )
+}

pages/index.js

@@ -10,6 +10,7 @@ import OndemandVideoIcon from '@material-ui/icons/OndemandVideo'
 import KatKayLa from '../components/kat-kay-la'
 import HeadLayout from '../components/head-layout'
 import Carousel from '../components/carousel'
+import Footer from '../components/footer'
 import {jwennTeksKantite, jwennAwtisKantite} from '../lib/oki-api'
 
 export default function Home({kantiteAwtis, kantiteTeks}) {
@@ -27,86 +28,89 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
 
   return (
     <HeadLayout tab={0}>
-      <Container align='center'>
-        <Image
-          alt='Logo #OKi'
-          width={192}
-          height={110}
-          src='/logo-192x110.png'
+      <div style={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
+        <Container align='center'>
+          <Image
+            alt='Logo #OKi'
+            width={192}
+            height={110}
+            src='/logo-192x110.png'
+          />
+          <Typography variant='h6' component='h1'>
+            Organisation KA Internationale
+          </Typography>
+        </Container>
+        <Container style={{marginTop: '1.5em'}}>
+          <Grid container spacing={3}>
+            {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} kantite={k.kantite} route={k.route} />)}
+          </Grid>
+        </Container>
+        <Container style={{marginBlock: '1.5em'}} align='center'>
+          <Grid container spacing={2}>
+            <Grid item xs={12} md={3}>
+              <Button
+                startIcon={<HelpIcon size='large' style={{fontSize: 40}} />}
+                size='small'
+                variant='contained'
+                color='primary'
+                onClick={handleClick}
+              >
+                <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
+                  Guide
+                </Typography>
+              </Button>
+            </Grid>
+            <Grid item xs={12} md={3}>
+              <Link href='https://pale.o-k-i.net'>
+                <Button
+                  startIcon={<ChatIcon size='large' style={{fontSize: 40}} />}
+                  size='small'
+                  variant='contained'
+                  color='primary'
+                >
+                  <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
+                    Palé
+                  </Typography>
+                </Button>
+              </Link>
+            </Grid>
+            <Grid item xs={12} md={3}>
+              <Link href='https://gade.o-k-i.net'>
+                <Button
+                  startIcon={<OndemandVideoIcon size='large' style={{fontSize: 40}} />}
+                  size='small'
+                  variant='contained'
+                  color='primary'
+                >
+                  <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
+                    Gadé
+                  </Typography>
+                </Button>
+              </Link>
+            </Grid>
+            <Grid item xs={12} md={3}>
+              <Link href='https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki'>
+                <Button
+                  startIcon={<GroupAddIcon size='large' style={{fontSize: 40}} />}
+                  size='small'
+                  variant='contained'
+                  color='primary'
+                >
+                  <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
+                    Adhérer
+                  </Typography>
+                </Button>
+              </Link>
+            </Grid>
+          </Grid>
+        </Container>
+        <Carousel
+          isMobile={matches}
+          handleOpen={handleOpen}
+          setHandleOpen={setHandleOpen}
         />
-        <Typography variant='h6' component='h1'>
-          Organisation KA Internationale
-        </Typography>
-      </Container>
-      <Container style={{marginTop: '1.5em'}}>
-        <Grid container spacing={3}>
-          {kantite.map(k => <KatKayLa key={k.id} tit={k.tit} kantite={k.kantite} route={k.route} />)}
-        </Grid>
-      </Container>
-      <Container style={{marginTop: '1.5em'}} align='center'>
-        <Grid container spacing={2}>
-          <Grid item xs={12} md={3}>
-            <Button
-              startIcon={<HelpIcon size='large' style={{fontSize: 40}} />}
-              size='small'
-              variant='contained'
-              color='primary'
-              onClick={handleClick}
-            >
-              <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
-                Guide
-              </Typography>
-            </Button>
-          </Grid>
-          <Grid item xs={12} md={3}>
-            <Link href='https://pale.o-k-i.net'>
-              <Button
-                startIcon={<ChatIcon size='large' style={{fontSize: 40}} />}
-                size='small'
-                variant='contained'
-                color='primary'
-              >
-                <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
-                  Palé
-                </Typography>
-              </Button>
-            </Link>
-          </Grid>
-          <Grid item xs={12} md={3}>
-            <Link href='https://gade.o-k-i.net'>
-              <Button
-                startIcon={<OndemandVideoIcon size='large' style={{fontSize: 40}} />}
-                size='small'
-                variant='contained'
-                color='primary'
-              >
-                <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
-                  Gadé
-                </Typography>
-              </Button>
-            </Link>
-          </Grid>
-          <Grid item xs={12} md={3}>
-            <Link href='https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki'>
-              <Button
-                startIcon={<GroupAddIcon size='large' style={{fontSize: 40}} />}
-                size='small'
-                variant='contained'
-                color='primary'
-              >
-                <Typography style={{fontSize: '2em'}} variant='subtitle1' component='span'>
-                  Adhérer
-                </Typography>
-              </Button>
-            </Link>
-          </Grid>
-        </Grid>
-      </Container>
-      <Carousel
-        isMobile={matches}
-        handleOpen={handleOpen}
-        setHandleOpen={setHandleOpen}
-      />
+        <Footer />
+      </div>
     </HeadLayout>
   )
 }