1import {
 2  Card,
 3  CardContent,
 4  CardMedia,
 5  Container,
 6  Typography,
 7} from '@mui/material';
 8import {useTranslation} from 'next-i18next';
 9import Layout from '../layouts/Centered';
10import Logo from '../components/Logo';
11import pageUtils from '../lib/pageUtils';
12
13const PaymentConfirmation = () => {
14  const {t} = useTranslation();
15
16  return (
17    <Layout displayMenu={false}>
18      <Container maxWidth="xs">
19        <Card sx={{pt: 2, width: '100%'}}>
20          <CardMedia component={Logo} />
21          <CardContent>
22            <Typography variant="h6" align="center">
23              {t`paymentConfirmation.title`}
24            </Typography>
25            <Typography
26              variant="body2"
27              align="center"
28              whiteSpace="pre-line"
29              pt={2}
30            >{t`paymentConfirmation.description`}</Typography>
31          </CardContent>
32        </Card>
33      </Container>
34    </Layout>
35  );
36};
37
38export default PaymentConfirmation;
39
40export const getServerSideProps = pageUtils.getServerSideProps();