1 files changed, 52 insertions, 0 deletions
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
new file mode 100644
index 0000000..0b30848
--- /dev/null
+++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardScanner from '../../../components/Card/CardScanner'
+import styles from './PhotoCapture.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+
+const PhotoCapture = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardScanner
+          image={`${process.env.PUBLIC_URL}/assets/images/capture.svg`}
+        />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Capture
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Reset
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center">
+            Please look into the camera<br></br>
+            Click Capture to Capture the photo<br></br>
+            Click Reset the remove the captured photo
+          </Typography>
+        </Grid>
+      </div>
+    </>
+  )
+}
+
+export default PhotoCapture