

// material-ui
import {Link, Button, Card , Box, Grid } from '@mui/material';
import Typography from '@mui/material/Typography';
import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
import banner from 'assets/images/bg_ml.jpg';
import { Stack } from '../../../node_modules/@mui/material/index';


// ================================|| LOGIN ||================================ //



const RegisterCustom = () => (

  <Stack justifyContent="center" sx={{ minHeight: '100vh' }}>
    <img src={banner} alt="banner" width="100%" height="200px"/>
    <center>
    <Card 
        sx={{
          maxWidth: { xs: 1, lg: 1000 },
          margin: { xs: 2.5, md: 3 },
          '& > *': {
            flexGrow: 1,
            flexBasis: '50%'
          }
        }}
    >
      <Box alignItems="center">
        <Grid container>
          <Grid item  xs={12} md={12}>
            <Typography mt={4} variant="h1">立即成為<strong style={{color: '#FF5733'}}>憲報刊登公告</strong>用戶</Typography>
            <Typography variant="body1">只需4-5分鐘</Typography>
          </Grid>
        </Grid>
        <Box mt={3} mb={3}>
          <Grid container >
            <Grid item xs={12} md={6} sx={{ borderRight: 1 , borderColor: 'grey.500' }}>
              <Typography mb={4} variant="h3">個人用戶</Typography>
              <Button variant="outlined" startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>以「智方便」繼續</Button>
              
              <Box mt={4} ml={2} mr={2}  bgcolor="grey.100" p={1.5} >
              <Typography  textAlign='justify' variant="body1" display="block" gutterBottom>
              你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動憲報刊登公告帳戶。
              <br/>如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。
              </Typography>
              <Link href="#">了解更多</Link>
              </Box>

              <Typography m={5}>或</Typography>

              <Button href="/registerFrom" variant="contained">申請個人用戶</Button>

              <Typography  ml={4} mr={4} mt={4} variant="body1" display="block" sx={{fontWeight: 'bold'}} gutterBottom>
              需上載身份證明文件數碼檔案以進行網上申請。
              <br/>如：香港身份證；護照；往來港澳通行證等 
              </Typography>
            </Grid>
            <Grid item xs={12} md={6} sx={{ borderLeft: 1 ,borderColor: 'grey.500' }}>
              <Typography mb={4} variant="h3">機構／公司用戶</Typography>
              <Button href="/registerFromOrganization" variant="contained">申請機構／公司用戶</Button>
              <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{fontWeight: 'bold'}} gutterBottom>
                需上載以下任何一份證明文件以進行網上申請。
                <br/>如：商業登記證；專業執業證書 
              </Typography>
            </Grid>
          </Grid>
        </Box>
      </Box>
    </Card >
    </center>
  </Stack>

);

export default RegisterCustom;
