loginpage.tsx

import { useTranslation } from 'react-i18next'
import { styled } from '@mui/system'
import { Container } from '@mui/material'

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

const StyledParagraph = styled('p')({
  fontSize: '1rem',
})

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

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

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