80 lines
3.4 KiB
JavaScript
80 lines
3.4 KiB
JavaScript
|
import {Container, Box, Typography, Button, Link} from '@mui/material'
|
|||
|
|
import {makeStyles} from '@mui/styles'
|
|||
|
|
|
|||
|
|
const useStyles = makeStyles(() => ({
|
|||
|
|
styledFrame: {
|
|||
|
|
border: '2px solid #4CAF50',
|
|||
|
|
borderRadius: '10px',
|
|||
|
|
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
|
|||
|
|
backgroundColor: '#f9f9f9',
|
|||
|
|
padding: '20px',
|
|||
|
|
textAlign: 'center',
|
|||
|
|
},
|
|||
|
|
btnStyled: {
|
|||
|
|
borderRadius: '5px',
|
|||
|
|
boxShadow: '0 2px 2px rgba(0, 0, 0, 0.1)',
|
|||
|
|
transition: 'all 0.3s ease',
|
|||
|
|
margin: '8px',
|
|||
|
|
'&:hover': {
|
|||
|
|
transform: 'translateY(-2px)',
|
|||
|
|
boxShadow: '0 4px 4px rgba(0, 0, 0, 0.2)',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
btnSpecial: {
|
|||
|
|
borderRadius: '5px',
|
|||
|
|
backgroundColor: '#FFC107',
|
|||
|
|
color: 'black',
|
|||
|
|
border: 'none',
|
|||
|
|
boxShadow: '0 2px 2px rgba(0, 0, 0, 0.2)',
|
|||
|
|
transition: 'all 0.3s ease',
|
|||
|
|
margin: '1em 0 2.5em',
|
|||
|
|
'&:hover': {
|
|||
|
|
backgroundColor: '#FFD54F',
|
|||
|
|
transform: 'scale(1.05)',
|
|||
|
|
boxShadow: '0 4px 4px rgba(0, 0, 0, 0.3)',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}))
|
|||
|
|
|
|||
|
|
function CardMethod() {
|
|||
|
|
const classes = useStyles()
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Container>
|
|||
|
|
<Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
|
|||
|
|
<Typography variant='body2' color='textSecondary'>
|
|||
|
|
🔒 Vos paiements sont sécurisés et traités de manière fiable par <strong><Link href='https://stripe.com/' target='_blank' rel='noopener noreferrer'>Stripe</Link></strong>, une plateforme de paiement en ligne reconnue mondialement.
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Typography sx={{mb: 2, fontWeight: 'bold'}} variant='body2' color='textSecondary'>
|
|||
|
|
Aucune information de paiement n’est stockée sur notre site.
|
|||
|
|
</Typography>
|
|||
|
|
|
|||
|
|
{/* Paiements Ponctuels */}
|
|||
|
|
<Box>
|
|||
|
|
<Typography gutterBottom variant='h6' component='h3'>Ponctuel</Typography>
|
|||
|
|
<Button variant='contained' href='https://donate.stripe.com/aEUdTw5SD3SH7m0bII' className={classes.btnStyled}>1€</Button>
|
|||
|
|
<Button variant='contained' href='https://donate.stripe.com/4gw6r480L1Kz5dScMO' className={classes.btnStyled}>5€</Button>
|
|||
|
|
<Button variant='contained' href='https://donate.stripe.com/5kA02G1Cn4WLbCgeUV' className={classes.btnStyled}>10€</Button>
|
|||
|
|
<Button variant='contained' href='https://donate.stripe.com/fZebLo94PfBpayc5kn' className={classes.btnStyled}>20€</Button>
|
|||
|
|
<Button variant='contained' href='https://donate.stripe.com/6oE5n05SDdth49O004' className={classes.btnStyled}>50€</Button>
|
|||
|
|
</Box>
|
|||
|
|
<Button variant='contained' href='https://donate.stripe.com/6oE2aO94P88X9u8eV4' className={classes.btnSpecial}>
|
|||
|
|
Montant personnalisé
|
|||
|
|
</Button>
|
|||
|
|
|
|||
|
|
{/* Paiements Mensuels */}
|
|||
|
|
<Box>
|
|||
|
|
<Typography gutterBottom variant='h6' component='h3'>Mensuel</Typography>
|
|||
|
|
<Button variant='contained' href='https://buy.stripe.com/7sI9Dgch14WL7m0fZ3' className={classes.btnStyled}>1€/mois</Button>
|
|||
|
|
<Button variant='contained' href='https://buy.stripe.com/8wM4iW4Ozbl95dS6ow' className={classes.btnStyled}>5€/mois</Button>
|
|||
|
|
<Button variant='contained' href='https://buy.stripe.com/8wM2aO80L74TcGk3ci' className={classes.btnStyled}>10€/mois</Button>
|
|||
|
|
<Button variant='contained' href='https://buy.stripe.com/00g7v894P88XgWAfZ7' className={classes.btnStyled}>20€/mois</Button>
|
|||
|
|
<Button variant='contained' href='https://buy.stripe.com/4gw8zc6WHgFtcGkbIP' className={classes.btnStyled}>50€/mois</Button>
|
|||
|
|
</Box>
|
|||
|
|
</Container>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default CardMethod
|