added profile section

frontend/src/app/components/header/styles.module.css

@@ -240,10 +240,64 @@
   font-weight: 500;
   line-height: normal;
 }
-/* Later */
+/* Profile */
 .profileContainer {
   display: flex;
   height: 44px;
   flex-direction: column;
   align-items: flex-end;
 }
+.profileBadge {
+  display: flex;
+  padding: 6px 0 6px 8px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+}
+.nameRole {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 6px;
+}
+.userName {
+  align-self: stretch;
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  text-align: right;
+  leading-trim: both;
+  text-edge: cap;
+  font-family: Inter;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 30px; /* 200% */
+  letter-spacing: -0.15px;
+}
+.userRole {
+  align-self: stretch;
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  text-align: right;
+  leading-trim: both;
+  text-edge: cap;
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30px; /* 230.769% */
+  letter-spacing: -0.26px;
+}
+.userImgContainer {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.userPic {
+  width: 32px;
+  height: 32px;
+  aspect-ratio: 1/1;
+  border-radius: 32px;
+  background: url(/PROFILE.svg) lightgray 50% / cover no-repeat;
+}