creation of Header component

src/components/Header/Header.module.css

@@ -0,0 +1,147 @@
+.headerContainer {
+    position: relative;
+    height: fit-content;
+    overflow: visible;
+}
+
+
+.header{
+    display: flex;
+    align-items: center;
+    padding: 0.8rem;
+    height: fit-content;
+    z-index: 2;
+}
+
+
+.headerContent {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.headerLeftContent {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    gap: 1.5rem;
+    font-size: 1.2rem;
+}
+
+.headerRightContent {
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.logo {
+    height: 4rem;
+    width: auto;
+}
+
+.link {
+    color: black;
+    width: fit-content;
+    text-align: center;
+    font-weight: bold;
+}
+
+.link:hover {
+    color: #535bf2;
+}
+
+.activeLink {
+    width: fit-content;
+    text-align: center;
+    font-weight: bold;
+    color: #019AFF;
+}
+
+
+
+
+
+svg {
+    width: fit-content;
+}
+
+
+
+
+.bellBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.5s ease;
+    background: none;
+    padding: 7px;
+    border-radius: 50%;
+    width: 75px;
+    height: 50px;
+    svg {
+        stroke: black;
+        stroke-width: 3.5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+    }
+}
+
+.bellBtn:focus {
+    outline: none;
+}
+.bellBtn:focus-visible {
+    outline: 2px solid black;
+}
+
+.activeBellBtn {
+    transform: translateY(-4px);
+    background: rgba(191, 191, 191, 0.5);
+    svg {
+        stroke: #019AFF;
+    }
+}
+
+.bellBtn:hover {
+    transform: translateY(-4px);
+    background: rgba(191, 191, 191, 0.5);
+    svg {
+        stroke: #019AFF;
+    }
+}
+
+
+
+
+.profileLink {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.5s ease;
+}
+
+.profileLink:hover {
+    transform: translateY(-4px);
+}
+
+
+
+
+.notificationDiv {
+    position: absolute;
+    width: 200px;
+    top: 105%;
+    right: 2rem;
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    z-index: 1;
+}
+
+.activeNotificationDiv {
+    opacity: 1;
+    transform: translateY(0);
+    z-index: 3;
+}