feat: Add basic design for profile photo and fields

src/App.tsx

@@ -1,42 +1,14 @@
-import { useState } from 'react'
-import reactLogo from './assets/img/react.svg'
-import viteLogo from '/vite.svg'
-import {useQuery} from "@tanstack/react-query";
-import resolveURL from "./api/fetch.ts";
-import './assets/css/App.css'
+import "./assets/css/App.css";
+import ProfilePage from "./pages/ProfilePage";
+import Navbar from "./components/Navbar";
 
 function App() {
-  const [count, setCount] = useState(0)
-
-  const { isPending, data } = useQuery({
-    queryKey: ['resourceData'],
-    queryFn: () => fetch(resolveURL('/resource')).then((res) => res.json())
-  })
-
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>{isPending ? "Loading..." : data.result}</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <Navbar />
+      <ProfilePage id={1} />
     </>
-  )
+  );
 }
 
-export default App
+export default App;

src/assets/css/App.css

@@ -1,10 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 .logo {
   height: 6em;
   padding: 1.5em;

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);
+  }