Add footer to index
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
@@ -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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
+83
-79
@@ -10,6 +10,7 @@ import OndemandVideoIcon from '@material-ui/icons/OndemandVideo'
|
|||||||
import KatKayLa from '../components/kat-kay-la'
|
import KatKayLa from '../components/kat-kay-la'
|
||||||
import HeadLayout from '../components/head-layout'
|
import HeadLayout from '../components/head-layout'
|
||||||
import Carousel from '../components/carousel'
|
import Carousel from '../components/carousel'
|
||||||
|
import Footer from '../components/footer'
|
||||||
import {jwennTeksKantite, jwennAwtisKantite} from '../lib/oki-api'
|
import {jwennTeksKantite, jwennAwtisKantite} from '../lib/oki-api'
|
||||||
|
|
||||||
export default function Home({kantiteAwtis, kantiteTeks}) {
|
export default function Home({kantiteAwtis, kantiteTeks}) {
|
||||||
@@ -27,86 +28,89 @@ export default function Home({kantiteAwtis, kantiteTeks}) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<HeadLayout tab={0}>
|
<HeadLayout tab={0}>
|
||||||
<Container align='center'>
|
<div style={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
|
||||||
<Image
|
<Container align='center'>
|
||||||
alt='Logo #OKi'
|
<Image
|
||||||
width={192}
|
alt='Logo #OKi'
|
||||||
height={110}
|
width={192}
|
||||||
src='/logo-192x110.png'
|
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'>
|
<Footer />
|
||||||
Organisation KA Internationale
|
</div>
|
||||||
</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}
|
|
||||||
/>
|
|
||||||
</HeadLayout>
|
</HeadLayout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user