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'

const CGU_PDF_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK

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

  return (
    <>
      <CGUDialog open={open} setOpen={setOpen} />
      <Paper sx={{padding: 1, textAlign: 'justify'}}>
        <Typography paragraph 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 variant='subtitle1' component='div'>
          <strong>Toute contribution, aussi modeste soit-elle, nous permet d’augmenter nos capacités</strong>.
        </Typography>
        <Typography paragraph 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> ou directement sur notre site par carte bancaire. Pour ce dernier, nous utilisons <Link underline='hover' href='https://stripe.com/fr/about' target='_blank' rel='noreferrer'><strong>Stripe</strong></Link> (une plateforme de paiement 100% sécurisée).
        </Typography>
        <Typography paragraph variant='subtitle1' component='div'>
          Vous pouvez adhérer à notre association en vous rendant sur <Link underline='hover' href='https://asso.oki.re/public/members/new.php' target='_blank' rel='noreferrer'><strong>asso.oki.re</strong></Link>.
        </Typography>
        <Typography paragraph 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;. <Link underline='hover' href={CGU_PDF_LINK}><small>Cliquez ici pour la version pdf</small></Link>.
        </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 variant='subtitle1' component='div'>
          Pour toute question, n’hésitez pas à nous contacter à cette adresse : <Link href='mailto:kontak@oki.re'><strong>kontak@oki.re</strong></Link>.
        </Typography>
        <Typography paragraph variant='subtitle1' component='div'>
          <strong>Merci par avance pour votre soutien 🥰</strong>
        </Typography>
      </Paper>
    </>
  )
}