14 files changed, 235 insertions, 0 deletions
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
--- /dev/null
+++ b/client/src/components/RadioSelect/RadioSelect.jsx
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
--- /dev/null
+++ b/client/src/components/RadioSelect/RadioSelect.module.css
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;
+}