From 49be4dfc3d478ad02876c9238c48c513edac1e7c Mon Sep 17 00:00:00 2001
From: rohan09-raj <rajrohan1914@gmail.com>
Date: Thu, 28 Jul 2022 17:56:15 +0530
Subject: refactoring folder structure

---
 client/src/App.js                                  | 12 ++++
 client/src/components/Card/Card.jsx                | 13 ++++
 client/src/components/Card/Card.module.css         | 26 ++++++++
 client/src/components/Card/CardScanner.jsx         | 16 +++++
 client/src/components/Card/CardScanner.module.css  | 26 ++++++++
 client/src/components/Header/Header.jsx            | 13 ++++
 client/src/components/Header/Header.module.css     | 20 ++++++
 client/src/components/Input/Input.jsx              | 22 +++++++
 client/src/components/Input/Input.module.css       | 19 ++++++
 client/src/components/LabelCard/LabelCard.jsx      | 23 +++++++
 .../src/components/LabelCard/LabelCard.module.css  | 19 ++++++
 client/src/components/RadioSelect/RadioSelect.jsx  |  0
 .../components/RadioSelect/RadioSelect.module.css  |  0
 .../src/components/SubmitButton/SubmitButton.jsx   | 18 ++++++
 .../SubmitButton/SubmitButton.module.css           | 20 ++++++
 client/src/index.css                               | 19 ++++++
 client/src/index.js                                | 14 +++++
 client/src/pages/Enrollment/Address/Address.jsx    | 47 ++++++++++++++
 .../pages/Enrollment/Address/Address.module.css    |  8 +++
 .../Enrollment/DocumentScanner/DocumentScanner.jsx | 56 +++++++++++++++++
 .../DocumentScanner/DocumentScanner.module.css     |  5 ++
 client/src/pages/Enrollment/Enrollment.jsx         | 16 +++++
 client/src/pages/Enrollment/Enrollment.module.css  |  0
 client/src/pages/Enrollment/FormOne/FormOne.jsx    | 72 ++++++++++++++++++++++
 .../pages/Enrollment/FormOne/FormOne.module.css    | 46 ++++++++++++++
 client/src/pages/Enrollment/FormTwo/FormTwo.jsx    | 17 +++++
 .../pages/Enrollment/FormTwo/FormTwo.module.css    |  1 +
 .../pages/Enrollment/PhotoCapture/PhotoCapture.jsx | 52 ++++++++++++++++
 .../PhotoCapture/PhotoCapture.module.css           |  5 ++
 client/src/pages/Home/Home.jsx                     | 30 +++++++++
 client/src/pages/Home/Home.module.css              |  4 ++
 client/src/pages/Update/Update.jsx                 |  7 +++
 client/src/pages/Update/Update.module.css          |  0
 client/src/routes/index.js                         | 38 ++++++++++++
 client/src/styles/GlobalVariables.css              |  8 +++
 35 files changed, 692 insertions(+)
 create mode 100644 client/src/App.js
 create mode 100644 client/src/components/Card/Card.jsx
 create mode 100644 client/src/components/Card/Card.module.css
 create mode 100644 client/src/components/Card/CardScanner.jsx
 create mode 100644 client/src/components/Card/CardScanner.module.css
 create mode 100644 client/src/components/Header/Header.jsx
 create mode 100644 client/src/components/Header/Header.module.css
 create mode 100644 client/src/components/Input/Input.jsx
 create mode 100644 client/src/components/Input/Input.module.css
 create mode 100644 client/src/components/LabelCard/LabelCard.jsx
 create mode 100644 client/src/components/LabelCard/LabelCard.module.css
 create mode 100644 client/src/components/RadioSelect/RadioSelect.jsx
 create mode 100644 client/src/components/RadioSelect/RadioSelect.module.css
 create mode 100644 client/src/components/SubmitButton/SubmitButton.jsx
 create mode 100644 client/src/components/SubmitButton/SubmitButton.module.css
 create mode 100644 client/src/index.css
 create mode 100644 client/src/index.js
 create mode 100644 client/src/pages/Enrollment/Address/Address.jsx
 create mode 100644 client/src/pages/Enrollment/Address/Address.module.css
 create mode 100644 client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
 create mode 100644 client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css
 create mode 100644 client/src/pages/Enrollment/Enrollment.jsx
 create mode 100644 client/src/pages/Enrollment/Enrollment.module.css
 create mode 100644 client/src/pages/Enrollment/FormOne/FormOne.jsx
 create mode 100644 client/src/pages/Enrollment/FormOne/FormOne.module.css
 create mode 100644 client/src/pages/Enrollment/FormTwo/FormTwo.jsx
 create mode 100644 client/src/pages/Enrollment/FormTwo/FormTwo.module.css
 create mode 100644 client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
 create mode 100644 client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
 create mode 100644 client/src/pages/Home/Home.jsx
 create mode 100644 client/src/pages/Home/Home.module.css
 create mode 100644 client/src/pages/Update/Update.jsx
 create mode 100644 client/src/pages/Update/Update.module.css
 create mode 100644 client/src/routes/index.js
 create mode 100644 client/src/styles/GlobalVariables.css

(limited to 'client/src')

diff --git a/client/src/App.js b/client/src/App.js
new file mode 100644
index 0000000..c39f14e
--- /dev/null
+++ b/client/src/App.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import Index from './routes'
+
+const App = () => {
+  return (
+    <>
+      <Index />
+    </>
+  )
+}
+
+export default App
diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx
new file mode 100644
index 0000000..3d66067
--- /dev/null
+++ b/client/src/components/Card/Card.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './Card.module.css'
+
+const Card = ({ title, image }) => {
+  return (
+    <div className={styles.card}>
+      <img className={styles.card__image} src={image} alt="" />
+      <h2 className={styles.card__title}>{title}</h2>
+    </div>
+  )
+}
+
+export default Card
diff --git a/client/src/components/Card/Card.module.css b/client/src/components/Card/Card.module.css
new file mode 100644
index 0000000..e351fd5
--- /dev/null
+++ b/client/src/components/Card/Card.module.css
@@ -0,0 +1,26 @@
+@import '../../styles/GlobalVariables.css';
+
+.card {
+  height: 300px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 3px solid var(--color-black);
+  border-radius: 10px;
+  margin: 30px;
+  transition: 0.2s all;
+  cursor: pointer;
+  color: var(--color-black);
+  text-decoration-line: none;
+}
+
+.card:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
+}
+
+.card__title {
+  margin: 15px 0px;
+}
diff --git a/client/src/components/Card/CardScanner.jsx b/client/src/components/Card/CardScanner.jsx
new file mode 100644
index 0000000..29caf39
--- /dev/null
+++ b/client/src/components/Card/CardScanner.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import styles from './CardScanner.module.css'
+import SubmitButton from '../SubmitButton/SubmitButton'
+
+const CardScanner = ({ title, image }) => {
+  return (
+    <>
+      <div className={styles.card}>
+        <img className={styles.card__image} src={image} alt="" />
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+export default CardScanner
diff --git a/client/src/components/Card/CardScanner.module.css b/client/src/components/Card/CardScanner.module.css
new file mode 100644
index 0000000..af237e2
--- /dev/null
+++ b/client/src/components/Card/CardScanner.module.css
@@ -0,0 +1,26 @@
+@import '../../styles/GlobalVariables.css';
+
+.card {
+  height: 300px;
+  width: 600px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 3px solid var(--color-black);
+  border-radius: 10px;
+  margin: 30px;
+  transition: 0.2s all;
+  cursor: pointer;
+  color: var(--color-black);
+  text-decoration-line: none;
+}
+
+.card:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
+}
+
+.card__title {
+  margin: 15px 0px;
+}
\ No newline at end of file
diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx
new file mode 100644
index 0000000..d90aafe
--- /dev/null
+++ b/client/src/components/Header/Header.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './Header.module.css'
+
+const Header = ({ subheading }) => {
+  return (
+    <header className={styles.header}>
+      <h1 className={styles.header__heading}>AADHAAR</h1>
+      <h3 className={styles.header__subheading}>{subheading}</h3>
+    </header>
+  )
+}
+
+export default Header
diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css
new file mode 100644
index 0000000..8e6084f
--- /dev/null
+++ b/client/src/components/Header/Header.module.css
@@ -0,0 +1,20 @@
+@import '../../styles/GlobalVariables.css';
+
+.header {
+  font-family: 'Fredoka One', cursive;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  padding: 20px;
+}
+
+.header__heading {
+  font-size: var(--font-large);
+  font-weight: 400;
+}
+
+.header__subheading {
+  font-size: var(--font-medium);
+  font-weight: 400;
+}
diff --git a/client/src/components/Input/Input.jsx b/client/src/components/Input/Input.jsx
new file mode 100644
index 0000000..ee79f3b
--- /dev/null
+++ b/client/src/components/Input/Input.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import styles from './Input.module.css'
+
+const Input = ({ label, id, value, type, name }) => {
+  return (
+    <div className={styles.input}>
+      <div className={styles.input__container}>
+        <label htmlFor={id}>{label}</label>
+        <input
+          className={styles.input__field}
+          type={type}
+          id={id}
+          name={name}
+          value={value}
+          required
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Input
diff --git a/client/src/components/Input/Input.module.css b/client/src/components/Input/Input.module.css
new file mode 100644
index 0000000..cafb5f1
--- /dev/null
+++ b/client/src/components/Input/Input.module.css
@@ -0,0 +1,19 @@
+.input {
+  display: flex;
+  justify-content: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.input__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.input__field {
+  width: 300px;
+  margin: 10px 0px;
+  padding: 20px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+}
diff --git a/client/src/components/LabelCard/LabelCard.jsx b/client/src/components/LabelCard/LabelCard.jsx
new file mode 100644
index 0000000..be02f01
--- /dev/null
+++ b/client/src/components/LabelCard/LabelCard.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import styles from './LabelCard.module.css'
+
+const LabelCard = ({ id, name, value, title, image }) => {
+  return (
+    <div className={styles.labelcard}>
+      <label htmlFor={id} className={styles.card}>
+        <img className={styles.card__image} src={image} alt="" />
+        <h4 className={styles.card__title}>{title}</h4>
+      </label>
+      <input
+        className={styles.labelcard__radio}
+        type="radio"
+        id={id}
+        name={name}
+        value={value}
+        required
+      />
+    </div>
+  )
+}
+
+export default LabelCard
diff --git a/client/src/components/LabelCard/LabelCard.module.css b/client/src/components/LabelCard/LabelCard.module.css
new file mode 100644
index 0000000..8511596
--- /dev/null
+++ b/client/src/components/LabelCard/LabelCard.module.css
@@ -0,0 +1,19 @@
+.labelcard {
+  text-align: center;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 5px;
+}
+
+.card__image {
+  border: 3px solid var(--color-black);
+  border-radius: 10px;
+}
+
+.card__title {
+  margin: 5px 0px;
+}
diff --git a/client/src/components/RadioSelect/RadioSelect.jsx b/client/src/components/RadioSelect/RadioSelect.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/RadioSelect/RadioSelect.module.css b/client/src/components/RadioSelect/RadioSelect.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx
new file mode 100644
index 0000000..567d923
--- /dev/null
+++ b/client/src/components/SubmitButton/SubmitButton.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import styles from './SubmitButton.module.css'
+
+const SubmitButton = ({ onClick }) => {
+  return (
+    <>
+      <button onClick={onClick} className={styles.submit}>
+        <img
+          className={styles.submit__image}
+          src={`${process.env.PUBLIC_URL}/assets/images/white-check.svg`}
+          alt=""
+        />
+      </button>
+    </>
+  )
+}
+
+export default SubmitButton
diff --git a/client/src/components/SubmitButton/SubmitButton.module.css b/client/src/components/SubmitButton/SubmitButton.module.css
new file mode 100644
index 0000000..bb1b015
--- /dev/null
+++ b/client/src/components/SubmitButton/SubmitButton.module.css
@@ -0,0 +1,20 @@
+.submit {
+  position: absolute;
+  bottom: 100px;
+  right: 150px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  transition: 0.2s all;
+  cursor: pointer;
+}
+
+.submit:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
+}
+
+.submit__image {
+  height: 75px;
+  width: 75px;
+}
diff --git a/client/src/index.css b/client/src/index.css
new file mode 100644
index 0000000..c05147c
--- /dev/null
+++ b/client/src/index.css
@@ -0,0 +1,19 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100%;
+  width: 100%;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/client/src/index.js b/client/src/index.js
new file mode 100644
index 0000000..08cf3d2
--- /dev/null
+++ b/client/src/index.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App'
+
+const root = ReactDOM.createRoot(document.getElementById('root'))
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+)
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
new file mode 100644
index 0000000..6a32bcf
--- /dev/null
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import Input from '../../../components/Input/Input'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+import styles from './Address.module.css'
+
+const Address = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.address}>
+        <div className={styles.address__container}>
+          <Input
+            id="houseNo"
+            label="House Number/ Apartment"
+            value="house"
+            type="text"
+          />
+          <Input
+            id="locality"
+            label="Area / Locality"
+            value="locality"
+            type="text"
+          />
+          <Input id="town" label="Village / Town" value="town" type="text" />
+          <Input
+            id="postOffice"
+            label="Post Office"
+            value="postOffice"
+            type="text"
+          />
+        </div>
+        <div className={styles.address__container}>
+          <Input id="street" label="Street / Road" value="street" type="text" />
+          <Input id="landmark" label="Landmark" value="landmark" type="text" />
+          <Input id="district" label="District" value="district" type="text" />
+          <Input id="pincode" label="Pincode" value="pincode" type="text" />
+        </div>
+      </div>
+      <Input id="state" label="State" value="state" type="text" />
+      <SubmitButton />
+    </>
+  )
+}
+
+export default Address
diff --git a/client/src/pages/Enrollment/Address/Address.module.css b/client/src/pages/Enrollment/Address/Address.module.css
new file mode 100644
index 0000000..60958ba
--- /dev/null
+++ b/client/src/pages/Enrollment/Address/Address.module.css
@@ -0,0 +1,8 @@
+.address {
+  display: flex;
+  justify-content: center;
+}
+
+.address__container {
+  margin: 0px 20px;
+}
diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
new file mode 100644
index 0000000..1ca2558
--- /dev/null
+++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardScanner from '../../../components/Card/CardScanner'
+import styles from './DocumentScanner.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const DocumentScanner = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardScanner
+          image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
+        />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Scan
+          </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 place your document on the scanner.
+            <br />
+            Close the lid.
+            <br />
+            Wait for prompt to remove your document
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+export default DocumentScanner
diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
new file mode 100644
index 0000000..b8bbc81
--- /dev/null
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import Header from '../../components/Header/Header'
+import SubmitButton from '../../components/SubmitButton/SubmitButton'
+import FormOne from './FormOne/FormOne'
+
+const Enrollment = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <FormOne />
+      <SubmitButton />
+    </>
+  )
+}
+
+export default Enrollment
diff --git a/client/src/pages/Enrollment/Enrollment.module.css b/client/src/pages/Enrollment/Enrollment.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx
new file mode 100644
index 0000000..4ba274c
--- /dev/null
+++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import Input from '../../../components/Input/Input'
+import LabelCard from '../../../components/LabelCard/LabelCard'
+import styles from './FormOne.module.css'
+
+const FormOne = () => {
+  return (
+    <div className={styles.formone}>
+      <div className={styles.formone__radio}>
+        <span className={styles.formone__resident}>
+          <input
+            type="radio"
+            id="indian"
+            name="resident"
+            value="Indian Resident"
+            required
+          />
+          <label htmlFor="indian">Indian Resident</label>
+        </span>
+        <span className={styles.formone__resident}>
+          <input
+            type="radio"
+            id="indian"
+            name="resident"
+            value="Indian Resident"
+            required
+          />
+          <label htmlFor="indian">Non-Residential Indian</label>
+        </span>
+      </div>
+
+      <Input type="text" id="fullName" label="Full Name" value="Full Name" />
+
+      <div className={styles.formone__gender}>
+        <LabelCard
+          id="male"
+          name="gender"
+          title="Male"
+          image={`${process.env.PUBLIC_URL}/assets/images/male.svg`}
+        />
+        <LabelCard
+          id="female"
+          name="gender"
+          value="female"
+          title="Female"
+          image={`${process.env.PUBLIC_URL}/assets/images/female.svg`}
+        />
+        <LabelCard
+          id="trans"
+          name="gender"
+          value="trans"
+          title="Transgender"
+          image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`}
+        />
+      </div>
+
+      <div className={styles.formone__dob}>
+        <label htmlFor="dob">Date of Birth</label>
+        <input
+          className={styles.formone__dob_input}
+          type="date"
+          id="dob"
+          name="dob"
+          value="Date of Birth"
+          required
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FormOne
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.module.css b/client/src/pages/Enrollment/FormOne/FormOne.module.css
new file mode 100644
index 0000000..35d1e49
--- /dev/null
+++ b/client/src/pages/Enrollment/FormOne/FormOne.module.css
@@ -0,0 +1,46 @@
+.formone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.formone__radio {
+  display: flex;
+  align-items: center;
+}
+
+.formone__resident {
+  display: flex;
+  align-items: center;
+  margin: 15px;
+}
+
+.formone__resident input[type='radio'] {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.formone__gender {
+  display: flex;
+}
+
+.formone__dob {
+  display: flex;
+  flex-direction: column;
+}
+
+.formone__dob input[type='date']::-webkit-calendar-picker-indicator {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+
+.formone__dob_input {
+  width: 300px;
+  margin: 10px 0px;
+  padding: 11px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+}
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
new file mode 100644
index 0000000..56bcd70
--- /dev/null
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import Input from '../../../components/Input/Input'
+import Header from '../../../components/Header/Header'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const FormTwo = () => {
+  return (
+    <div className="formtwo">
+      <Header subheading="Enrollment" />
+      <Input id="mobile" value="Mobile" label="Mobile" type="text" />
+      <Input id="email" value="Email" label="Email" type="email" />
+      <SubmitButton />
+    </div>
+  )
+}
+
+export default FormTwo
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.module.css b/client/src/pages/Enrollment/FormTwo/FormTwo.module.css
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.module.css
@@ -0,0 +1 @@
+
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
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
new file mode 100644
index 0000000..b132f12
--- /dev/null
+++ b/client/src/pages/Home/Home.jsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import Card from '../../components/Card/Card'
+import Header from '../../components/Header/Header'
+import styles from './Home.module.css'
+
+const Home = () => {
+  return (
+    <>
+      <Header subheading="Mera Aadhaar Meri Pehchan" />
+      <div className={styles.card__container}>
+        <Link to="/enrollment">
+          <Card
+            title="Enrollment"
+            image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`}
+          />
+        </Link>
+        <Link to="/update">
+          <Card
+            title="Update"
+            image={`${process.env.PUBLIC_URL}/assets/images/update.svg`}
+          />
+        </Link>
+      </div>
+    </>
+  )
+}
+
+export default Home
diff --git a/client/src/pages/Home/Home.module.css b/client/src/pages/Home/Home.module.css
new file mode 100644
index 0000000..de1cead
--- /dev/null
+++ b/client/src/pages/Home/Home.module.css
@@ -0,0 +1,4 @@
+.card__container {
+  display: flex;
+  justify-content: center;
+}
diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx
new file mode 100644
index 0000000..0b448cf
--- /dev/null
+++ b/client/src/pages/Update/Update.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Update = () => {
+  return <div>Update</div>
+}
+
+export default Update
diff --git a/client/src/pages/Update/Update.module.css b/client/src/pages/Update/Update.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/routes/index.js b/client/src/routes/index.js
new file mode 100644
index 0000000..fc2aeea
--- /dev/null
+++ b/client/src/routes/index.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Route, Routes } from 'react-router-dom'
+
+import Home from '../pages/Home/Home'
+import Enrollment from '../pages/Enrollment/Enrollment'
+import Update from '../pages/Update/Update'
+import PhotoCapture from '../pages/Enrollment/PhotoCapture/PhotoCapture'
+import DocumentScanner from '../pages/Enrollment/DocumentScanner/DocumentScanner'
+import FormTwo from '../pages/Enrollment/FormTwo/FormTwo'
+import Address from '../pages/Enrollment/Address/Address'
+
+const Index = () => {
+  return (
+    <Routes>
+      <Route exact path="/" element={<Home />} />
+      <Route path="enrollment">
+        <Route index element={<Enrollment />} />
+        <Route path="form2">
+          <Route index element={<FormTwo />} />
+        </Route>
+        <Route path="address">
+          <Route index element={<Address />} />
+        </Route>
+        <Route path="photo">
+          <Route index element={<PhotoCapture />} />
+        </Route>
+        <Route path="documents">
+          <Route index element={<DocumentScanner />} />
+        </Route>
+      </Route>
+      <Route path="update">
+        <Route index element={<Update />} />
+      </Route>
+    </Routes>
+  )
+}
+
+export default Index
diff --git a/client/src/styles/GlobalVariables.css b/client/src/styles/GlobalVariables.css
new file mode 100644
index 0000000..a1e3384
--- /dev/null
+++ b/client/src/styles/GlobalVariables.css
@@ -0,0 +1,8 @@
+:root {
+  --color-black: #000;
+  --color-shadow: rgba(0, 0, 0, 0.24);
+
+  --font-large: 4rem;
+  --font-medium: 2rem;
+  --font-medium-s: 1.25rem;
+}
-- 
cgit