development third page

src/App.js

@@ -8,7 +8,7 @@ const HomePage = lazy(() => import('./pages/HomePage'));
 const CandidatePage = lazy(() => import('./pages/CandidatePage'));
 
 const App = () => {
-  const [isAuth, setIsAuth] = useState(true);
+  const [isAuth, setIsAuth] = useState(false);
 
   useEffect(() => {
     const auth = localStorage.getItem('auth');

src/components/Auth/Auth.js

@@ -1,22 +1,110 @@
 import React from 'react';
 import style from './Auth.module.css';
+import ellipse from '../../images/ellipse.png';
+import arrow from '../../images/arrow__login_page.png';
+import male from '../../images/medium_male_big.png';
+import cross from '../../images/cross.png';
+import specialists from '../../images/specialists.png';
+import text from '../../images/Body_Text.png';
+import align from '../../images/align-left.png';
 
 const Auth = ({ setAuthed }) => {
   return (
-    <div className={style.auth}>
+    <section className={style.auth}>
-      <div className={style.auth__container}>
+      <div className="container">
-        <img src="https://www.google.com/gmail/about/static/images/logo-gmail.png?cache=1adba63" alt="" />
+        <div className="row">
-        <button
+          <div className="col-xl-6">
-          className={style.auth__btn}
+            <div className={style.auth__box}>
-          onClick={() => {
+              <h2 className={style.auth__title}>
-            setAuthed(true);
+                Войти в <span>систему</span>
-          }}
+              </h2>
-        >
+              <div className={style.auth__partners}>
-          Log in
+                <img src={ellipse} alt="" />
+                <span>Для партнеров</span>
+              </div>
+              <form className={style.auth__form}>
+                <label htmlFor="login">Ваш логин:</label>
+                <input id="login" type="text" placeholder="Логин" />
+
+                <label htmlFor="password">Пароль:</label>
+                <input id="password" type="password" placeholder="Пароль" />
+
+                <button className={style.form__btn} type="submit">
+                  Войти
                 </button>
+              </form>
             </div>
           </div>
+          <div className="col-xl-2">
+            <img className={style.auth__arrow} src={arrow} alt="" />
+          </div>
+          <div className="col-xl-4">
+            <div className={style.auth__info}>
+              <div className={style.auth__info__box}>
+                <img src={male} alt="" />
+                <h3>
+                  Frontend разработчик, <br /> Middle
+                </h3>
+              </div>
+
+              <div className={style.auth__info__container}>
+                <div className={style.auth__info__img}>
+                  <div>
+                    <img className="cross" src={cross} alt="" />
+                  </div>
+                  <div>
+                    <img className={style.specialists} src={specialists} alt="" />
+                  </div>
+                </div>
+
+                <ul className={style.info__list}>
+                  <li className={style.info__list__item}>Ruby on Rails</li>
+                  <li className={style.info__list__item}>Php</li>
+                  <li className={style.info__list__item}>Python</li>
+                  <li className={style.info__list__item}>Vue.js</li>
+                  <li className={style.info__list__item}>React. JS</li>
+                </ul>
+              </div>
+
+              <img className={style.img__text} src={text} alt="" />
+            </div>
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col-xl-8">
+            <div className={style.auth__footer__left}>
+              <img src={align} alt="" />
+              <span>
+                © Адвего — биржа контента №1. Копирайтинг, рерайтинг, переводы, работа на дому: поставщик уникального
+                контента. 2021{' '}
+              </span>
+            </div>
+          </div>
+
+          <div className="col-xl-4">
+            <div className={style.auth__footer__right}>
+              <h2>Hello</h2>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   );
 };
 
 export default Auth;
+
+// {
+//   /* <div className={style.auth__container}>
+// <img src="https://www.google.com/gmail/about/static/images/logo-gmail.png?cache=1adba63" alt="" />
+// <button
+//   className={style.auth__btn}
+//   onClick={() => {
+//     setAuthed(true);
+//   }}
+// >
+//   Log in
+// </button>
+// </div> */
+// }

src/components/Auth/Auth.module.css

@@ -1,26 +1,214 @@
 .auth {
-  display: grid;
+  height: 1600px;
-  place-items: center;
-  height: 100vh;
-  background-color: #f2f2f2;
-
 }
 
-.auth__container {
+.auth__box {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  margin-bottom: 154px;
+}
+
+.auth__title {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 5.3em;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 77.81px;
+  text-align: left;
+  margin-top: 254px;
+}
+
+.auth__title > span {
+  font-family: 'GT Eesti Pro Display';
+  color: #52b709;
+  font-style: normal;
+  letter-spacing: 0.56px;
+  line-height: normal;
+}
+
+.auth__partners {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 15px;
+  margin-bottom: 65px;
+}
+
+.auth__partners > img {
+  width: 6px;
+  height: 6px;
+  margin-left: 120px;
+}
+
+.auth__partners > span {
+  color: #18586e;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.6em;
+  font-weight: 500;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 16.81px;
+  text-align: left;
+  margin-left: 10px;
+}
+
+.auth__form {
   display: flex;
   flex-direction: column;
 }
 
-.auth__container > img {
+.auth__form > label {
-  object-fit: contain;
+  color: #48802d;
-  height: 200px;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2.4em;
+  font-weight: 500;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 16.81px;
+  text-align: left;
+  margin-bottom: 20px;
+  margin-left: 45px;
 }
 
-.auth__btn {
+.auth__form > input {
-  width: 180px;
+  width: 366px;
-  height: 40px;
+  height: 75px;
-  border: 2px solid gray;
+  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-  border-radius: 100px;
+  border-radius: 37px;
-  font-size: 1.6em;
+  border: 1px solid #c4c4c4;
-  margin: 0 auto;
+  background-color: #ffffff;
+  margin-bottom: 60px;
+  color: #a6a6a6;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2.2em;
+  font-weight: 300;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: left;
+  padding-left: 45px;
+  outline: none;
+}
+
+.form__btn {
+  width: 290px;
+  height: 75px;
+  box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
+  border-radius: 38px;
+  background-color: #ffffff;
+  background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
+    linear-gradient(
+      36deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.16) 47%,
+      rgba(255, 255, 255, 0.17) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+  border: none;
+  color: #ffffff;
+  font-family: 'Muller';
+  font-size: 2.2em;
+  letter-spacing: normal;
+  line-height: 71.88px;
+  text-align: center;
+}
+
+.auth__arrow {
+  margin-top: 360px;
+}
+
+.auth__info {
+  background-color: #e1fccf;
+  margin-top: 140px;
+  width: 310px;
+  padding-top: 30px;
+  position: relative;
+  padding-bottom: 160px;
+}
+
+.auth__info__box {
+  display: flex;
+  align-items: center;
+}
+
+.auth__info__box > img {
+  width: 165px;
+  height: 165px;
+  margin-left: -84px;
+  margin-right: 30px;
+}
+
+.auth__info__box > h3 {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 36px;
+  text-align: left;
+  position: absolute;
+  right: -14px;
+}
+
+.auth__info__container {
+  display: flex;
+  position: relative;
+}
+
+.auth__info__img {
+  display: flex;
+  flex-direction: column;
+  margin-left: 55px;
+  margin-top: 28px;
+}
+
+.auth__info__img > div > img {
+  margin-bottom: 40px;
+}
+
+.specialists {
+  margin-left: 26px;
+}
+
+.info__list {
+  list-style: none;
+  margin-top: 110px;
+  position: absolute;
+  right: -116px;
+}
+
+.info__list__item {
+  color: #1f1f1f;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 4em;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 56.95px;
+  text-align: left;
+  text-decoration: underline;
+  text-transform: uppercase;
+}
+
+.img__text {
+  position: absolute;
+  right: -68px;
+  bottom: -84px;
+}
+
+.auth__footer__left > img {
+  margin-right: 38px;
+}
+
+.auth__footer__left > span {
+  color: #18586e;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 16px;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 16.81px;
+  text-align: left;
 }

src/components/Description/Description.module.css

@@ -105,6 +105,12 @@
   margin-left: 30px;
 }
 
+.description__button:hover {
+  background: rgba(0, 0, 0, 0);
+  color: #73c141;
+  box-shadow: inset 0 0 0 3px #73c141;
+}
+
 @media (max-width: 575.98px) {
   .description__button {
     width: 220px;

src/components/Outstaffing/Outstaffing.module.css

@@ -87,6 +87,12 @@
   margin-bottom: 0;
 }
 
+@media (max-width: 575.98px) {
+  .outstaffing__box__text {
+    display: none;
+  }
+}
+
 .front {
   left: -5%;
 }

src/components/Outstaffing/OutstaffingBlock.js

@@ -23,7 +23,7 @@ const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
         <img className={classes} src={img} alt="img" />
       </div>
       <div className={`${selected ? style.mobile__block : style.mobile__none}`}>
-        <p>{text}</p>
+        <p className={style.outstaffing__box__text}>{text}</p>
         {tags && (
           <ul className={style.items}>
             {tags.map((item) => (

src/components/Select/TagSelect.module.css

@@ -37,6 +37,12 @@
   background-color: #73c141;
 }
 
+.search__box > button:hover {
+  background: rgba(0, 0, 0, 0);
+  color: #73c141;
+  box-shadow: inset 0 0 0 3px #73c141;
+}
+
 @media (max-width: 575.98px) {
   .search__box > button {
     margin-top: 40px;

src/components/Sidebar/Sidebar.module.css

@@ -60,6 +60,12 @@
   margin-bottom: 120px;
 }
 
+.candidateSidebar__info__btn:hover {
+  background: rgba(0, 0, 0, 0);
+  color: #73c141;
+  box-shadow: inset 0 0 0 3px #73c141;
+}
+
 .candidateSidebar__info__l {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.8em;