Fixed auth page and adaptation freeDev

src/components/AuthHeader/AuthHeader.js

@@ -5,6 +5,13 @@ import userIcon from "../../images/userIcon.png";
 import "./authHeader.scss";
 
 export const AuthHeader = ({}) => {
+  function scrollToForm() {
+    window.scrollTo({
+      top: 850,
+      behavior: "smooth",
+    });
+  }
+
   return (
     <div className="auth-header">
       <div className="auth-header__logo">
@@ -27,7 +34,12 @@ export const AuthHeader = ({}) => {
               </li>
             </ul>
 
-            <a href="#">
+            <a
+              onClick={(e) => {
+                e.preventDefault();
+                scrollToForm();
+              }}
+            >
               <img src={userIcon}></img>
             </a>
           </div>

src/components/AuthHeader/authHeader.scss

@@ -51,6 +51,10 @@
           }
         }
       }
+
+      img {
+        cursor: pointer;
+      }
     }
   }
 }
@@ -61,7 +65,7 @@
   }
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 1375px) {
   .auth-header {
     display: none;
   }

src/components/SideBar/SideBar.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 
 import arrow from "../../images/sideBarArrow.svg";
+import LogoITguild from "../../images/LogoITguild.svg";
 
 import "./sidebar.scss";
 
@@ -41,9 +42,7 @@ export const SideBar = () => {
 
       <div className={active ? "auth-body active" : "auth-body"}>
         <div className="auth-body__title">
-          <h3>IT</h3>
-          <p>guild</p>
-          <span>Аутстафинговая компания</span>
+          <img src={LogoITguild}></img>
         </div>
         <ul className="auth-body__navigation">
           <li>

src/components/SideBar/sidebar.scss

@@ -7,7 +7,7 @@
   height: 100%;
   background: #e1fccf;
 
-  @media (max-width: 1024px) {
+  @media (max-width: 1375px) {
     position: fixed;
     width: 100% !important;
     height: 80px;
@@ -75,7 +75,7 @@
     }
   }
 
-  @media (max-width: 1024px) {
+  @media (max-width: 1375px) {
     flex-direction: row;
     height: 100%;
 
@@ -121,25 +121,7 @@
 
   &__title {
     display: flex;
-    flex-wrap: wrap;
-    h3 {
-      color: #52b709;
-      font-size: 35px;
-      line-height: 32px;
-      margin-right: 10px;
-    }
-
-    p {
-      width: 70%;
-      font-size: 30px;
-      line-height: 32px;
-      color: #000000;
-    }
-
-    span {
-      font-size: 12px;
-      margin-left: 0px;
-    }
+    margin-top: 24px;
   }
 
   &__navigation {
@@ -175,7 +157,7 @@
     }
   }
 
-  @media (max-width: 1024px) {
+  @media (max-width: 1375px) {
     &__title {
       margin-top: 35px;
     }
@@ -199,7 +181,7 @@
     left: 79px;
   }
 
-  @media (max-width: 1024px) {
+  @media (max-width: 1375px) {
     left: 0;
     width: 100%;
     height: 535px;

src/components/SliderWorkers/sliderWorkers.scss

@@ -125,7 +125,13 @@
     }
   }
 
+  @media (max-width: 1375px) {
+    margin-top: 50px;
+  }
+
   @media (max-width: 1024px) {
+    margin-top: 0;
+
     &__title {
       flex-direction: column;
       padding: 120px 0 56px 0;

src/components/UI/FreeDevelopers/FreeDevelopers.js

@@ -40,7 +40,7 @@ export const FreeDevelopers = ({}) => {
               <div></div>
             </div>
           </div>
-          <button>Код разработчика</button>
+          <button className="button-green">Код разработчика</button>
         </div>
 
         <div className="free-dev__body">
@@ -66,6 +66,25 @@ export const FreeDevelopers = ({}) => {
               </li>
             </ul>
             <p>Время разработки: 2 года.</p>
+
+            <div className="free-dev__body-text-bottom">
+              <h5>
+                Godesigner - сервис для фриланс дизайнеров, копирайтеров и их
+                заказчиков
+              </h5>
+              <p>Стек – PHP (li3), HTML, CSS, JavaScript, MYSQL, Nginx.</p>
+              <ul>
+                <li> Расширение функционала старых модулей проекта</li>
+                <li>создание и проектирование новых модулей сайта</li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="logIn">
+            <h3>Для просмотра полного резюме разработчика авторизуйтесь</h3>
+            <Link to={"/auth"} className="button-green">
+              Войти
+            </Link>
           </div>
         </div>
 

src/components/UI/FreeDevelopers/freeDevelopers.scss

@@ -60,23 +60,35 @@
       }
     }
 
-    button {
-      background: #52b709;
-      border-radius: 44px;
-      width: 202px;
-      height: 50px;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 32px;
-      color: #ffffff;
-      border: none;
+    @media (max-width: 720px) {
+      flex-direction: column;
+    }
+
+    @media (max-width: 450px) {
+      flex-direction: column;
+
+      &-box {
+        flex-direction: column;
+        align-items: center;
+
+        img {
+          width: 50%;
+        }
+      }
+
+      &-name {
+        margin: 10px 0 10px 0;
+        text-align: center;
+        align-items: center;
+      }
     }
   }
 
   &__body {
+    position: relative;
     background: #ffffff;
     border-radius: 12px;
-    margin-bottom: 100px;
+    margin-bottom: 160px;
 
     &-title {
       background: #e1fccf;
@@ -99,6 +111,136 @@
         font-size: 16px;
         margin-bottom: 30px;
       }
+
+      &-bottom {
+        margin-top: 50px;
+        opacity: 0.25;
+      }
+    }
+
+    .logIn {
+      position: absolute;
+      bottom: 75px;
+      border: 3px solid #52b709;
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.76);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 97px;
+      cursor: pointer;
+
+      h3 {
+        font-weight: 500;
+        font-size: 22px;
+        line-height: 18px;
+        color: #000000;
+        margin-right: 50px;
+      }
+
+      a {
+        width: 140px;
+        height: 50px;
+        color: white;
+        text-decoration: none;
+      }
+
+      @media (max-width: 920px) {
+        flex-direction: column;
+        padding: 15px;
+        height: 20%;
+
+        h3 {
+          margin: 0 0 0 0;
+          text-align: center;
+        }
+
+        a {
+          margin-top: 15px;
+          height: 25px;
+          height: 40px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 1333px) {
+    .auth-menu {
+      position: fixed;
+      width: 100% !important;
+      height: 80px;
+      margin-bottom: 50px;
+
+      .auth-body.active {
+        left: 0;
+        width: 100%;
+        height: 535px;
+      }
+
+      .auth-body {
+        &__title,
+        &__politic {
+          margin-top: 35px;
+        }
+
+        &__contacts {
+          margin: 50px 0 25px 0;
+        }
+      }
+    }
+
+    .free-dev_page {
+      margin-top: 110px;
+    }
+
+    .auth-header {
+      display: none;
+    }
+
+    .auth-title {
+      flex-direction: row;
+      height: 100%;
+
+      .text {
+        margin: 0;
+        flex-direction: row;
+
+        .burger {
+          margin-bottom: 5px;
+        }
+
+        h3 {
+          display: none;
+        }
+      }
+
+      .outstaffing {
+        margin: 0;
+        width: 150px;
+        font-size: 12px;
+        transform: none;
+
+        img {
+          margin-right: 5px;
+          width: 15px;
+        }
+      }
     }
   }
 }
+
+.button-green {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  background: #52b709;
+  border-radius: 44px;
+  width: 202px;
+  height: 50px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 32px;
+  color: #ffffff;
+  border: none;
+}

src/images/LogoITguild.svg

@@ -0,0 +1,9 @@
+<svg width="151" height="61" viewBox="0 0 151 61" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="151" height="61" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_781_786" transform="matrix(0.00088574 0 0 0.00219257 0 -0.00319447)"/>
+</pattern>
+<image id="image0_781_786" width="1129" height="459" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGkAAAHLCAYAAAB7+MXpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAdEklEQVR4nO3dy40kR5IG4CqiVdgb0TrwtlrwRi1WmtWCN2oxN+rQ4G2FqEWhp6azs/IRD3+YuX0fQAxmhpUP94hwyz8sIl7f3t5eAAAAAJjrF+MPAAAAMJ+QBgAAACAAIQ0AAABAAEIaAAAAgACENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAAAIQEgDAAAAEICQBgAAACAAIQ0AAABAAEIaAAAAgACENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAAAIQEgDAAAAEICQBgAAACAAIQ0AAABAAEIaAAAAgACENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAAAIQEgDAAAAEICQBgAAACAAIQ0AAABAAEIaAAAAgACENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAAAIQEgDAAAAEICQBgAAACAAIQ0AAABAAEIaAAAAgACENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAAAIQEgDAAAAEICQBgAAACAAIQ0AAABAAEIaAAAAgACENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAAAIQEgDAAAAEICQBgAAACAAIQ0AAABAAEIaAAAAgAC+zPwIf/z129sqG8Gfv//9GuBj3LXSWMMs0fdzANbx9euvqWu3b9/+SbNmGmsYL/t+99Jx39NJAwAAABCAkAYAAAAgACENAAAAQABCGgAAAIAAhDQAAAAAAQhpAAAAAAIQ0gAAAAAEIKQBAAAACEBIAwAAABCAkAYAAAAgACENAAAAQABCGgAAAIAAhDQAAAAAAQhpAAAAAAIQ0gAAAAAEIKQBAAAACEBIAwAAABCAkAYAAAAgACENAAAAQABCGgAAAIAAhDQAAAAAAQhpAAAAAAIQ0gAAAAAEIKQBAAAACEBIAwAAABCAkAYAAAAgACENAAAAQABCGgAAAIAAhDQAAAAAAQhpAAAAAAIQ0gAAAAAEIKQBAAAACEBIAwAAABCAkAYAAAAgACENAAAAQABCGgAAAIAAhDQAAAAAAQhpAAAAAAIQ0gAAAAAEIKQBAAAACEBIAwAAABCAkAYAAAAgACENAAAAQABCGgAAAIAAvpiEGv78/e/X6mNw1B9//faW85PfZlsAgPi+ffvHeg1QkE4aAAAAgACENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAAAIQEgDAAAAEICQBgAAACAAIQ0AAABAAEIaAAAAgACENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAAAIQEgDAAAAEICQBgAAACAAIQ0AAABAAEIaAAAAgACENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAAAIQEgDAAAAEMAXkwBQw9evv771/qLfvv3zanMCAIBjhDQAixkRxtxz772FNwBAZb3rM7XWOoQ0AMnNDGW2uv6MCgkAYEWz6jInytYhpAFIKEMw84jQBgBYQfSa7NbnU3fFJqQBSCJ7MPPIx3dTNAAA0a10skztFY+QBiCwlYOZWxQNAEBEq9Zkaq94hDQAAVULZ24Z1V2TbayzFFDZt2GF6m0rHJvsQ2PYh1iBk2XMIKQBCEQ485lLoQCAkdRj6q+ZhDQAASgGnlMsAAA9qcc+U3+NJ6QBmEgxsJ9iAQBoST32nPprHCENwASKgfPex1ChAAAcpR7bT1jT3y+rf0GAaBQE7byPpfEEAPZQP5xn/PoR0gAMoiDox7gCAFuoGdpR2/YhpAEYwALWnzEGAO4RKPRjXNsS0gB0pCAYy3gDANfUBv0Z43aENACdWKzmMfYAgJM3YxnvNoQ0AB1YoOYzBwBQlzpgHmN/jpAGoDELUxzmAgDqsf7PZw6OE9IANGRBisecAEANLreJxVwcI6QBaEBREJu5AYC1WetjMi/7CWkATrL45GCeAGBN1vjYzM8+QhqAEyw6uZgvAFiLtT0H87SdkAbgIIsNAMA8arFczNc2QhqAAywyeZk7AMjPep6TeXtOSAOwk8UlP3MIAHlZx3Mzf48JaQB2sKisw1wCQD7Wb1YnpAEAACA8AQ0VCGkANlIYrMecAkAO1myqENIAbKAwAACYQx1GJUIagCcUBgAAwAhCGoAHBDQAAPOoxahGSANwh6IAAGAetRgVCWkAAAAIRUBDVUIagBsUBgAAc6jDqExIA3BFYQAAAMwgpAEAACAEJ8uoTkgDcEFhAAAwhzoMhDQA/6EwAAAAZhLSAAAAMJWTZfCdkAZAYQAAMI06DH4Q0gDlKQwAAIAIvpgFAB759u2f1xYDJAwDAK6pD+BnQhqgNIXBZ61CmWvXr2vsAQDgZ0IaALoFM49cvqfABgDqsf4/1ro+M945CGmAsqovVDOCmXs+Pkv1OQGAKqz5n/WuzXQ15yCkASgmUjhzTVgDAFQysy7T1RyTkAYoqeJCFDmcuSasAYB1Wd/j1WVqrziENAAFZApoLikYAICVRK/J1F7zCWmAciotOlnDmWvv30OxAAD5VV3Ps9Vkwpp5fqn6xQFWt0pA82G17wMA1JC5hlF/jaeTBiilytmAVRdUZ3UAIK9q6/dKHc0v6q9hdNIALKbCGQ9ndQCAyFasVdRfYwhpgDIqpP+VFk+FAgAQ0co1ivqrPyENwCIqLpoKBQDIwSXn63j/jmqwfoQ0AAuovFAqEgCACKrVJGqwPoQ0QAkrn72xQBoDAIjMJefrUoO1J6QBSMzCCAAwV/V6rPr3b01IA5CUBfFnxgMAGE39QWtCGmB5VW5Uh0IJAKJxyXkNxqIdIQ1AQhbC+4wNANCbeuMzY9KGkAYgGQsgAAARqVPPE9IAS3OpU00KBACYb9U6TJ3xmPE5R0gDkIhFbztjBQC0pr6gNyENAAAA0Iww6zghDUASFrv9jBkAzLHipU7qin2M1zFCGmBZKxUHFjkAgHnUYowipAFgaYoqAIA51GH7CWkAAADgDkEDIwlpAIJTGJxnDAFgnFUfvc0x6rB9hDTAkhQHAACcJWBgNCENQGAKg3aMJQDAHOqw7YQ0AAAAAAEIaQAAAGhipUvOdX+0ZTy3EdIABGUha8+YAgAQmZAGWI6bBgMAABkJaQAAAOCC7ts+jOtzQhqAgCxgAABQj5AGgFIEYAAARCWkAQAA4LRV7gvohE5fxvcxIQ0AAABAAEIaAAAAgACENADBaAHtzxgDABCRkAZYyirXQgMAMJ4TOWMY5/uENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAOAU9wWENoQ0AAAAAAEIaQAAACjPE4fGMt63CWkAArFYjWOsAQCIRkgDAAAAEICQBgAAACAAIQ0AAABAAEIaAAAAgACENAAAAAABCGkAAAAAAhDSAAAAAAQgpAEAAAAIQEgDAAAAEICQBgAAACAAIQ0AAABAAEIagEC+fv31zXyMYawBAIhGSAMAAAAQgJAGAAAAIAAhDQAAAEAAQhoAAACAAIQ0AAAAAAEIaQAAAAACENIAAAAABCCkAZby7ds/r9m/z9evv74F+BhLM8YAAEQkpAEAAAAIQEgDAAAAEICQBgAAACAAIQ0AAAAwlHsE3iakAQjIotWPsQUAblEjEIGQBgAAgFNWeMImRCCkAZajSAAAADIS0gAEpeW2PWMKAEBkQhoAAACAAIQ0AAAAoOt2GON8n5AGIDALWDvGEgCA6IQ0AAAAAAEIaYAlecITl3TRAACQgZAGIDgBAwCQgZNkbKG2fUxIA8DSFAIAwB5qB2YS0gAkoFgAAID1CWmAZWm5RbgFABCH2uw5IQ1AEhY1AIAx1F3MIqQBSETBsJ2xAgAgGyENAAAATbjcnHucQNtGSAMsbcVCwQL3nDECAM5STzCDkAaApSiooA/7FgBHWUO2E9IAJGShAwDoT83FaEIaYHmrXhutaPjMmNCKbQngOPel4ZI1dR8hDUBiFr0fjAUA0IMag5GENADJKRyMAfRmHwPgCOvHfkIaoARtt+uy+AMAvak3GEVIA7CAqoWDggkAYnKCDHXaMUIaoIzVi4VqC6GFn95sY98ZB4DvHA+3M1bHCWkAFlJlQbTwAwCwIiENwGLeA4yVQwwBDYxjfwPOWLGL2XHxOWN0jpAGKKXS9dErLpAWfQBgNvXIfcbmPCENwMJWWShX7w4irsrbnX0O4D7HyM+MSRtCGqCcak8byB5wWPABIC9PeYJ9hDQARWQLO3TPEEXF7dC+B/CcY+UPxqIdIQ1QUtWzOhmCD+EMzGX/A9jOMdMYtCakASgoYhAinCEyj7cHOG71k2PuX0ZLQhqgLNdI/whGZi6wwhmyWH07tR8CHOfSWFr5YiQBeLlaaHsGWBZ0AGBF7zVOlZOA6rl+hDRAae8LqUXms3tjsrfwMLZ1rbpvrVqA21eB3qrUXBWCGmtGX0IaoDxBzXbGCdYqwO3TAO0J9DnDPWkAAHZaoVBVbAOjVbof4Gr33LNmjCOkAXATYeCAzAWrYhtgjOzHWw94GE9IAwBwULbCVbENzFbxxFjWY6/1Yg4hDcC/6aYBjshSfCu2AebKchwW6M/lxsEAF9xEGDjq49gRKfB1PAMiqlxvRVwrPlgzYhDSAABdVC3CIxTgCm2A2C6P09YLLglpAK7opgFaGF2AO24Bmai3frBecElIA3CDwgFo6fp4crYId3wCWNOt47s1oxYhDcAdghqgF8cWALXWVsaoFk93AgC68dQ0AIDthDQAD/iBCQDQj1oLfiakAXhC8QAA0I9aC34Q0gBsoHgAAAB6E9IAbCSogWPsOwA8Y62A74Q0ADsoIAAA+lBngZAGYDcFBOxnvwEAeE5IA3CAH5x5mTsAiMs6TXVCGoCDFBEAAO2psahMSANwgiIiF/M1l/EHYCtrBlUJaQBOLine truncated
+</defs>
+</svg>