New AuthHeader

src/components/Common/AuthHeader/AuthHeader.jsx

@@ -1,51 +1,39 @@
 import React from "react";
-import { NavLink } from "react-router-dom";
-
-import { scrollToForm } from "@utils/helper";
-
-import userIcon from "assets/icons/userIcon.svg";
+import { Link, NavLink } from "react-router-dom";
 
 import "./authHeader.scss";
 
 export const AuthHeader = () => {
   return (
     <div className="auth-header">
-      <div className="auth-header__logo">
-        <h3>
-          itguild.<span>аутстаффинг IT-специалистов</span>
-        </h3>
-      </div>
       <div className="auth-header__navigation">
-        <div className="container">
-          <div className="auth-nav">
-            <ul>
-              <li>
-                <NavLink to={"/auth"}>
-                  <span>Главная</span>
-                </NavLink>
-              </li>
-              {/*<li>*/}
-              {/*  <NavLink to={"/profile"}>Кабинет разработчика</NavLink>*/}
-              {/*</li>*/}
-              <li>
-                <NavLink to={"/tracker-intro"}>Трекер</NavLink>
-              </li>
-              <li>
-                <NavLink to={"/auth-candidate"} className="candidate">
-                  <span>Войти в команду</span>
-                </NavLink>
-              </li>
-            </ul>
-
-            <a
-              onClick={(e) => {
-                e.preventDefault();
-                scrollToForm();
-              }}
-            >
-              <img src={userIcon}></img>
-            </a>
-          </div>
+        <h3 className="auth__logo">IT GUILD</h3>
+        <div className="auth-nav">
+          <ul>
+            <li>
+              <NavLink to={"/auth"}>кейсы</NavLink>
+            </li>
+            <li>
+              <NavLink to={"/stack"}>стек</NavLink>
+            </li>
+            <li>
+              <NavLink to={"/tracker-intro"}>как это работает</NavLink>
+            </li>
+            <li>
+              <NavLink to={"/auth-candidate"}>отзывы</NavLink>
+            </li>
+            <li>
+              <NavLink to={"/profile"}>наши продукты</NavLink>
+            </li>
+          </ul>
+        </div>
+        <div className="auth__buttons">
+          <button className="signIn">
+            <Link to="/auth">войти</Link>
+          </button>
+          <button className="signUp">
+            <Link to="/auth">регистрация</Link>
+          </button>
         </div>
       </div>
     </div>

src/components/Common/AuthHeader/authHeader.scss

@@ -1,62 +1,63 @@
 .auth-header {
-  background-color: #f1f1f1;
-
-  &__logo {
-    padding: 0 0 0 160px;
-    height: 55px;
-    display: flex;
-    align-items: center;
-
-    h3 {
-      font-size: 20px;
-      line-height: 32px;
-      color: #000000;
-    }
-    span {
-      color: #52b709;
-    }
-  }
+  position: relative;
+  z-index: 3;
+  padding: 25px 100px 40px 100px;
+  font-family: "GT Eesti Pro Display";
+  background: #eeeeee;
 
   &__navigation {
     display: flex;
     align-items: center;
     height: 66px;
     width: 100%;
-    background: #ffffff;
+    justify-content: space-around;
 
-    .auth-nav {
-      height: 35px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+    .auth {
+      &__logo {
+        color: #4a4a4a;
+        font-weight: 900;
+        font-size: 16px;
+        letter-spacing: 2px;
+        position: relative;
 
-      ul {
-        display: flex;
-        margin: 0;
-        padding: 0;
-        list-style: none;
+        &::after {
+          content: "";
+          position: absolute;
+          background: #a7ca60;
+          width: 7px;
+          height: 7px;
+          border-radius: 100px;
+          left: 49%;
+          top: -30%;
+        }
+      }
 
-        li {
-          margin-right: 25px;
+      &-nav {
+        ul {
+          display: flex;
+          column-gap: 50px;
+          margin: 0;
+          padding: 0;
+          list-style: none;
 
-          font-size: 18px;
-          line-height: 32px;
+          li {
+            cursor: pointer;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 18.5px;
 
-          a {
-            color: #897676;
-          }
-          a:hover {
-            text-decoration: none;
-          }
+            a {
+              color: #838383;
+            }
+            a:hover {
+              color: #161616;
+            }
 
-          a:focus,
-          a.active {
-            color: #000000;
-          }
-
-          .candidate {
-            background: transparent;
-            color: #1458dd;
+            // a:focus,
+            a.active {
+              color: #000000;
+              font-weight: 700;
+            }
           }
         }
       }
@@ -64,6 +65,35 @@
       img {
         cursor: pointer;
       }
+
+      &__buttons {
+        display: flex;
+        column-gap: 22px;
+
+        button {
+          width: 140px;
+          height: 34px;
+          border-radius: 44px;
+          font-size: 13px;
+          font-weight: 400;
+        }
+
+        .signIn {
+          a {
+            color: #1e1e1e;
+          }
+          background-color: #a7ca60;
+          border: none;
+        }
+
+        .signUp {
+          a {
+            color: #a7ca60;
+          }
+          border: 1px solid #a7ca60;
+          background: none;
+        }
+      }
     }
   }
 }

src/pages/Landing/landing.scss

@@ -291,6 +291,10 @@
         font-weight: 400;
         border-radius: 32px;
         margin-top: 45px;
+
+        @media (min-width: 432px) {
+          display: none;
+        }
       }
 
       &__block {

src/pages/Stack/stack.scss

@@ -72,8 +72,10 @@
       }
 
       &__ellipse {
+        height: 763px;
+        width: 763px;
         z-index: 1;
-        top: 45%;
+        top: 64%;
         left: 50%;
         transform: translate(-50%, -50%);
         position: absolute;