2 files changed, 118 insertions, 0 deletions
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;
+}