File size: 1,954 Bytes
95b5a04 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | // material-ui
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
// project imports
import AnimateButton from 'ui-component/extended/AnimateButton';
// ==============================|| PROFILE MENU - UPGRADE PLAN CARD ||============================== //
export default function UpgradePlanCard() {
const cardSX = {
content: '""',
position: 'absolute',
width: 200,
height: 200,
borderColor: 'warning.main'
};
return (
<Card
sx={{
bgcolor: 'warning.light',
my: 2,
overflow: 'hidden',
position: 'relative',
'&:after': {
border: '19px solid ',
borderRadius: '50%',
top: '65px',
right: '-150px',
...cardSX
},
'&:before': {
border: '3px solid ',
borderRadius: '50%',
top: '145px',
right: '-70px',
...cardSX
}
}}
>
<CardContent>
<Stack sx={{ gap: 2 }}>
<Typography variant="h4">Upgrade your plan</Typography>
<Typography
variant="subtitle2"
sx={{
color: 'grey.900',
opacity: 0.6
}}
>
70% discount for 1 years <br />
subscriptions.
</Typography>
<Stack direction="row">
<Link sx={{ textDecoration: 'none' }} href="https://links.codedthemes.com/hsqll" target="_blank">
<AnimateButton>
<Button variant="contained" color="warning" sx={{ boxShadow: 'none' }}>
Go Premium
</Button>
</AnimateButton>
</Link>
</Stack>
</Stack>
</CardContent>
</Card>
);
}
|