feat: Add basic design for profile photo and fields

package.json

@@ -11,10 +11,12 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@tanstack/react-form": "^0.14.0",
     "@tanstack/react-query": "^5.18.0",
     "@tanstack/react-query-devtools": "^5.18.0",
     "@types/js-cookie": "^3.0.6",
     "@uidotdev/usehooks": "^2.4.1",
+    "@tanstack/zod-form-adapter": "^0.14.0",
     "date-fns": "^3.3.1",
     "js-cookie": "^3.0.5",
     "localforage": "^1.10.0",
@@ -23,7 +25,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
-    "sort-by": "^1.2.0"
+    "sort-by": "^1.2.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.2",

src/assets/css/Navbar.module.css

@@ -0,0 +1,127 @@
+.fintechsocLogo6Icon {
+    height: 4.063rem;
+    width: 9.125rem;
+    position: relative;
+    object-fit: cover;
+  }
+  .announcements {
+    align-self: stretch;
+    position: relative;
+  }
+  .announcementsFrame {
+    width: 10.938rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: var(--padding-2xl) 0 0;
+    box-sizing: border-box;
+  }
+  .members {
+    align-self: stretch;
+    position: relative;
+  }
+  .attendanceFrame {
+    width: 8.75rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: var(--padding-mid) var(--padding-9xs) 0 0;
+    box-sizing: border-box;
+    color: var(--brand-yellow);
+  }
+  .events {
+    align-self: stretch;
+    position: relative;
+  }
+  .attendanceFrame1 {
+    width: 6.938rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: var(--padding-mid) 0 0;
+    box-sizing: border-box;
+  }
+  .tasks {
+    align-self: stretch;
+    position: relative;
+  }
+  .attendanceFrame2 {
+    width: 7.313rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: var(--padding-base) 0.688rem 0 0;
+    box-sizing: border-box;
+  }
+  .attendance {
+    align-self: stretch;
+    position: relative;
+  }
+  .attendanceFrame3 {
+    width: 9.188rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: var(--padding-base) 0.5rem 0 0;
+    box-sizing: border-box;
+  }
+  .recruitment {
+    align-self: stretch;
+    position: relative;
+  }
+  .attendanceFrame4 {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: var(--padding-base) 2.188rem 0 0;
+  }
+  .image5Icon {
+    height: 3.438rem;
+    width: 3.431rem;
+    position: relative;
+    object-fit: cover;
+  }
+  .desktopNavBarUpdatedAtt,
+  .eventsFrame,
+  .tasksFrame {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+  .tasksFrame {
+    align-self: stretch;
+    flex-direction: row;
+    gap: 0 1.188rem;
+  }
+  .desktopNavBarUpdatedAtt,
+  .eventsFrame {
+    box-sizing: border-box;
+    max-width: 100%;
+  }
+  .eventsFrame {
+    flex: 1;
+    flex-direction: column;
+    padding: var(--padding-8xs) 0 0;
+  }
+  .desktopNavBarUpdatedAtt {
+    align-self: stretch;
+    background-color: var(--brand-blue);
+    overflow: hidden;
+    flex-direction: row;
+    padding: var(--padding-mid) 2.75rem var(--padding-base) var(--padding-xl);
+    gap: 0 1.188rem;
+    top: 0;
+    z-index: 99;
+    position: sticky;
+    text-align: center;
+    font-size: var(--font-size-xl);
+    color: var(--color-white);
+    font-family: var(--font-dm-sans);
+  }