PNSPS-frontend-MaterialUI/src/pages/authentication/RegisterCustom.js

// 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/banner.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%" />


    <center>
    <Card 
        sx={{
          maxWidth: { xs: 1, lg: 1000 },
          margin: { xs: 2.5, md: 3 },
          '& > *': {
            flexGrow: 1,
            flexBasis: '50%'
          }
        }}
    >
      <Box alignItems="center">
        <Typography  mt={4} variant="h1">立即成為<strong style={{color: '#FF5733'}}>憲報刊登公告</strong>用戶</Typography>
        <Typography variant="body1">只需4-5分鐘</Typography>

        <Grid mt={5} mb={5} container >
          <Grid item xs={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={6} sx={{ borderLeft: 1 ,borderColor: 'grey.500' }}>
            <Typography mb={4} variant="h3">機構／公司用戶</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>
      </Box>
    </Card >
    </center>
  </Stack>

);

export default RegisterCustom;