pawol.nu/components/soutyen/presantasyon.js

import {useState} from 'react'
import {Link, List, ListItem, ListItemIcon, ListItemText, Paper, Typography} from '@mui/material'
import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'

import CGUDialog from '../cgu/cgu-dialog'

export default function Presantasyon() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <CGUDialog open={open} setOpen={setOpen} />
      <Paper sx={{padding: 3, textAlign: 'justify', marginTop: 5}}>
        <Typography paragraph='true' variant='subtitle1' component='div'>
          Tous les services que nous proposons sont <strong>gratuits</strong> et ne contiennent <strong>aucune publicité</strong>. Les réseaux que nous utilisons sont hébergés sur <strong>nos serveurs</strong>. <br />
          Tout ceci est possible grâce aux <strong>dons</strong> ❤️
        </Typography>
        <Typography paragraph='true' variant='subtitle1' component='div'>
          <strong>Toute contribution, aussi modeste soit-elle, nous permet d’augmenter nos capacités</strong>.
        </Typography>
        <Typography paragraph='true' variant='subtitle1' component='div'>
          Concernant les dons, ils peuvent s&apos;effectuer via <Link underline='hover' href='https://liberapay.com/OKi/donate' target='_blank' rel='noreferrer'><strong>Liberapay</strong></Link>, <Link underline='hover' href='https://www.paypal.com/donate/?hosted_button_id=5Q3KPR79CAZVW' target='_blank' rel='noreferrer'><strong>PayPal</strong></Link>.
        </Typography>
        <Typography paragraph='true' variant='subtitle1' component='div'>
          Veuillez prendre connaissance des <Link underline='hover' href='#' onClick={() => setOpen(true)}><strong>CGU et de la politique de confidentialité</strong></Link> au chapitre 9 &quot;Les dons&quot;.
        </Typography>
        <Typography variant='subtitle1' component='div'>
          Si vous n’avez pas les moyens de contribuer financièrement, vous pouvez effectuer des actions simples, rapides et surtout gratuites 😏 pour nous soutenir au quotidien :
        </Typography>
        <List>
          <ListItem>
            <ListItemIcon>
              <ArrowRightAltIcon />
            </ListItemIcon>
            <ListItemText>
              partager nos contenus sur vos réseaux (Facebook, Twitter, Telegram etc)
            </ListItemText>
          </ListItem>
          <ListItem>
            <ListItemIcon>
              <ArrowRightAltIcon />
            </ListItemIcon>
            <ListItemText>
              utiliser nos plateformes en plus de vos réseaux habituels (nos réseaux sont listés sur <Link underline='hover' href='https://o-k-i.net' target='_blank' rel='noreferrer'><strong>o-k-i.net</strong></Link>)
            </ListItemText>
          </ListItem>
          <ListItem>
            <ListItemIcon>
              <ArrowRightAltIcon />
            </ListItemIcon>
            <ListItemText>
              parlez de nous autour de vous 🗣️
            </ListItemText>
          </ListItem>
        </List>
        <Typography paragraph='true' variant='subtitle1' component='div'>
          Pour toute question, n’hésitez pas à nous contacter par courriel <Link href={`mailto:${process.env.NEXT_PUBLIC_ORG_EMAIL || 'kontak@o-k-i.net'}`}><strong>{process.env.NEXT_PUBLIC_ORG_EMAIL || 'kontak@o-k-i.net'}</strong></Link>.
        </Typography>
        <Typography paragraph='true' variant='subtitle1' component='div'>
          <strong>Merci par avance pour votre soutien 🥰</strong>
        </Typography>
      </Paper>
    </>
  )
}