loginpage.tsx

import { useTranslation } from 'react-i18next'
import { Container, Typography } from '@mui/material'

import LoginBox from 'components/loginBox'
import { instNameUpperCaser } from 'utils'
import { appInst } from 'appConfig'

export default function LoginPage() {
  const { t } = useTranslation(['frontpage'])

  return (
    <Container
      maxWidth="md"
      sx={{
        display: 'flex',
        flexDirection: 'column',
        marginTop: '4rem',
        marginBottom: '10rem',
      }}
    >
      <Container>
        <Typography variant="h1" sx={{ paddingBottom: '1rem' }}>
          {t('header')}
        </Typography>
        <Typography variant="body1" sx={{ paddingBottom: '2rem' }}>
          {t('description', { inst: instNameUpperCaser(appInst) })}
        </Typography>
      </Container>

      <Container
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: { xs: 'column', md: 'row' },
          alignItems: 'center',
        }}
      >
        <LoginBox header={t('sponsor')} info={t('sponsorInfo')} />
        <LoginBox header={t('guest')} info={t('guestInfo')} />
      </Container>
    </Container>
  )
}