start calendar page

src/App.js

@@ -1,22 +1,17 @@
-import React, { useState, useEffect, Suspense, lazy } from 'react';
+import React, { useState, Suspense, lazy } from 'react';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './fonts/stylesheet.css';
 
-const AuthPage = lazy(() => import('./pages/AuthPage'));
+// const AuthPageForDevelopers = lazy(() => import('./pages/AuthPageForDevelopers'));
+// const AuthPageForPartners = lazy(() => import('./pages/AuthPageForPartners'));
 const HomePage = lazy(() => import('./pages/HomePage'));
 const CandidatePage = lazy(() => import('./pages/CandidatePage'));
+const CalendarPage = lazy(() => import('./pages/CalendarPage'));
 
 const App = () => {
   const [isAuth, setIsAuth] = useState(false);
 
-  useEffect(() => {
-    const auth = localStorage.getItem('auth');
-    if (auth === 'true') {
-      setIsAuth(true);
-    }
-  }, []);
-
   return (
     <Router>
       <Suspense fallback={<div>Loading...</div>}>
@@ -34,7 +29,9 @@ const App = () => {
           </Switch>
         ) : (
           <Route path="/" exact>
-            <AuthPage setAuth={setIsAuth} />
+            <CalendarPage />
+            {/* <AuthPageForDevelopers setAuth={setIsAuth} /> */}
+            {/* <AuthPageForPartners setAuth={setIsAuth} /> */}
           </Route>
         )}
       </Suspense>

src/components/Auth/AuthForDevelopers.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import style from './Auth.module.css';
+import style from './AuthForDevelopers.module.css';
 import ellipse from '../../images/ellipse.png';
 import arrow from '../../images/arrow__login_page.png';
 import authImg from '../../images/auth_img.png';
 import cross from '../../images/cross.png';
-import specialists from '../../images/specialists.png';
+// import specialists from '../../images/specialists.png';
 import text from '../../images/Body_Text.png';
 import align from '../../images/align-left.png';
 import phone from '../../images/phone.png';
@@ -12,24 +12,24 @@ import telegram from '../../images/telegram.png';
 import vector from '../../images/Vector_Smart_Object.png';
 import vectorBlack from '../../images/Vector_Smart_Object_black.png';
 
-const Auth = ({ setAuthed }) => {
+const AuthForDevelopers = ({ setAuthed }) => {
   return (
-    <section className={style.auth}>
+    <section className={style.developers}>
-      <div className={style.auth__background}>
+      <div className={style.developers__background}>
         <img className={style.vector} src={vector} alt="" />
         <img className={style.vectorBlack} src={vectorBlack} alt="" />
         <div className="container">
           <div className="row">
             <div className="col-12 col-xl-6">
-              <div className={style.auth__box}>
+              <div className={style.developers__box}>
-                <h2 className={style.auth__title}>
+                <h2 className={style.developers__title}>
                   Войти в <span>систему</span>
                 </h2>
-                <div className={style.auth__partners}>
+                <div className={style.developers__partners}>
                   <img src={ellipse} alt="" />
-                  <span>Для партнеров</span>
+                  <span>Для разработчиков</span>
                 </div>
-                <form className={style.auth__form}>
+                <form className={style.developers__form}>
                   <label htmlFor="login">Ваш логин:</label>
                   <input id="login" type="text" placeholder="Логин" />
 
@@ -43,11 +43,11 @@ const Auth = ({ setAuthed }) => {
               </div>
             </div>
             <div className="col-xl-2">
-              <img className={style.auth__arrow} src={arrow} alt="" />
+              <img className={style.developers__arrow} src={arrow} alt="" />
             </div>
             <div className="col-12 col-xl-4">
-              <div className={style.auth__info}>
+              <div className={style.developers__info}>
-                <div className={style.auth__info__box}>
+                <div className={style.developers__info__box}>
                   <img src={authImg} alt="" />
                   <h3>
                     Управление
@@ -55,22 +55,20 @@ const Auth = ({ setAuthed }) => {
                   </h3>
                 </div>
 
-                <div className={style.auth__info__container}>
+                <div className={style.developers__info__container}>
-                  <div className={style.auth__info__img}>
+                  <div className={style.developers__info__img}>
                     <div>
                       <img className="cross" src={cross} alt="" />
                     </div>
                     <div>
-                      <img className={style.specialists} src={specialists} alt="" />
+                      {/* <img className={style.specialists} src={specialists} alt="" /> */}
+                      <p className={style.specialists}>20 Специалистов</p>
                     </div>
                   </div>
 
                   <ul className={style.info__list}>
                     <li className={style.info__list__item}>Рабочее пространство</li>
-                    <li className={style.info__list__item}>Управления задачами</li>
+                    <li className={style.info__list__item}>Управление задачами</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>
 
@@ -81,7 +79,7 @@ const Auth = ({ setAuthed }) => {
 
           <div className="row">
             <div className="col-12 col-xl-7">
-              <div className={style.auth__footer__left}>
+              <div className={style.developers__footer__left}>
                 <div className={style.footer__left__img}>
                   <img src={align} alt="" />
                 </div>
@@ -95,14 +93,14 @@ const Auth = ({ setAuthed }) => {
             </div>
 
             <div className="col-4 col-xl-2">
-              <div className={style.auth__footer__icon}>
+              <div className={style.developers__footer__icon}>
                 <img src={phone} alt="" />
                 <img src={telegram} alt="" />
               </div>
             </div>
 
             <div className="col-8 col-xl-3">
-              <div className={style.auth__footer__right}>
+              <div className={style.developers__footer__right}>
                 <p className={style.phone}>+7 495 156 78 98</p>
                 <p className={style.workingHours}>Будни с 9:00 до 21:00</p>
               </div>
@@ -114,4 +112,4 @@ const Auth = ({ setAuthed }) => {
   );
 };
 
-export default Auth;
+export default AuthForDevelopers;

src/components/Auth/AuthForDevelopers.module.css

@@ -0,0 +1,405 @@
+.developers {
+  overflow: hidden;
+}
+
+.developers__background {
+  background-color: #f1f1f1;
+  position: relative;
+}
+
+.vector,
+.vectorBlack {
+  position: absolute;
+}
+
+.vector {
+  top: -720px;
+  left: -320px;
+}
+
+.vectorBlack {
+  top: 460px;
+  right: -224px;
+}
+
+@media (max-width: 575.98px) {
+  .vector,
+  .vectorBlack {
+    display: none;
+  }
+}
+
+.developers__box {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  margin-bottom: 194px;
+}
+
+@media (max-width: 575.98px) {
+  .developers__box {
+    margin-bottom: 44px;
+  }
+}
+
+.developers__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: 164px;
+}
+
+@media (max-width: 575.98px) {
+  .developers__title {
+    text-align: center;
+    margin-top: 44px;
+  }
+}
+
+.developers__title > span {
+  font-family: 'GT Eesti Pro Display';
+  color: #52b709;
+  font-style: normal;
+  letter-spacing: 0.56px;
+  line-height: normal;
+}
+
+.developers__partners {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 15px;
+  margin-bottom: 65px;
+}
+
+.developers__partners > img {
+  width: 6px;
+  height: 6px;
+  margin-left: 120px;
+}
+
+.developers__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;
+}
+
+.developers__form {
+  display: flex;
+  flex-direction: column;
+}
+
+.developers__form > label {
+  color: #48802d;
+  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;
+}
+
+.developers__form > input {
+  max-width: 366px;
+  height: 75px;
+  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+  border-radius: 37px;
+  border: 1px solid #c4c4c4;
+  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: 288px;
+  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;
+}
+
+@media (max-width: 575.98px) {
+  .form__btn {
+    margin: 0 auto;
+  }
+}
+
+.developers__arrow {
+  margin-top: 360px;
+}
+
+@media (max-width: 575.98px) {
+  .developers__arrow {
+    display: none;
+  }
+}
+
+.developers__info {
+  background-color: #e1fccf;
+  margin-top: 70px;
+  max-width: 310px;
+  padding-top: 30px;
+  position: relative;
+  padding-bottom: 310px;
+}
+
+@media (max-width: 575.98px) {
+  .developers__info {
+    max-width: 380px;
+  }
+}
+
+@media (max-width: 375.98px) {
+  .developers__info {
+    max-width: 340px;
+  }
+}
+
+.developers__info__box {
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 575.98px) {
+  .developers__info__box {
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+.developers__info__box > img {
+  width: 150px;
+  height: 150px;
+  margin-left: -84px;
+  margin-right: 30px;
+}
+
+@media (max-width: 575.98px) {
+  .developers__info__box > img {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}
+
+.developers__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;
+}
+
+@media (max-width: 575.98px) {
+  .developers__info__box > h3 {
+    margin-top: 20px;
+  }
+}
+
+.developers__info__container {
+  display: flex;
+  position: relative;
+}
+
+.developers__info__img {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin-top: 28px;
+  margin-left: -20px;
+}
+
+@media (max-width: 575.98px) {
+  .developers__info__img {
+    margin-left: -48px;
+  }
+}
+
+.developers__info__img > div > img {
+  margin-bottom: 100px;
+}
+
+.specialists {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 26.12px;
+  text-align: left;
+  transform: rotate(-90deg);
+  text-transform: uppercase;
+}
+
+/* .specialists {
+  margin-left: 26px;
+} */
+
+.info__list {
+  list-style: none;
+  margin-top: 110px;
+  position: absolute;
+  left: 114px;
+}
+
+@media (max-width: 575.98px) {
+  .info__list {
+    left: 34px;
+  }
+}
+
+.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;
+  margin-bottom: 34px;
+}
+
+@media (max-width: 575.98px) {
+  .info__list__item {
+    font-size: 2.6em;
+    margin-bottom: 14px;
+  }
+}
+
+.img__text {
+  position: absolute;
+  right: -68px;
+  bottom: -84px;
+}
+
+@media (max-width: 575.98px) {
+  .img__text {
+    right: -10px;
+  }
+}
+
+.developers__footer__left {
+  display: flex;
+  align-items: center;
+  margin-bottom: 60px;
+}
+
+@media (max-width: 575.98px) {
+  .developers__footer__left {
+    margin-top: 120px;
+  }
+}
+
+.footer__left__sp {
+  padding: 0 100px 0 34px;
+}
+
+@media (max-width: 575.98px) {
+  .footer__left__sp {
+    padding: 0;
+    margin-left: 10px;
+  }
+}
+
+.developers__footer__left > div > span {
+  color: #18586e;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.6em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 16.81px;
+  text-align: left;
+}
+
+@media (max-width: 575.98px) {
+  .developers__footer__left > div > span {
+    font-size: 1.2em;
+  }
+}
+
+.developers__footer__icon {
+  text-align: end;
+}
+
+.developers__footer__icon > img {
+  margin-left: 20px;
+}
+
+@media (max-width: 575.98px) {
+  .developers__footer__icon > img {
+    margin-left: 10px;
+  }
+}
+
+.developers__footer__right {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+}
+
+@media (max-width: 575.98px) {
+  .developers__footer__right {
+    margin-bottom: 20px;
+  }
+}
+.phone {
+  color: #003b65;
+  font-family: 'CeraPro';
+  font-size: 2.1em;
+  letter-spacing: normal;
+  line-height: 25px;
+  text-align: left;
+}
+
+.workingHours {
+  color: #003b65;
+  font-family: 'CeraPro';
+  font-size: 1.2em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  margin-left: 24px;
+}

src/components/Auth/AuthForPartners.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import style from './AuthForPartners.module.css';
+import ellipse from '../../images/ellipse.png';
+import arrow from '../../images/arrow__login_page.png';
+import medium 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';
+import phone from '../../images/phone.png';
+import telegram from '../../images/telegram.png';
+import vector from '../../images/Vector_Smart_Object.png';
+import vectorBlack from '../../images/Vector_Smart_Object_black.png';
+
+const AuthForPartners = ({ setAuthed }) => {
+  return (
+    <section className={style.partners}>
+      <div className={style.partners__background}>
+        <img className={style.vector} src={vector} alt="" />
+        <img className={style.vectorBlack} src={vectorBlack} alt="" />
+        <div className="container">
+          <div className="row">
+            <div className="col-12 col-xl-6">
+              <div className={style.partners__box}>
+                <h2 className={style.partners__title}>
+                  Войти в <span>систему</span>
+                </h2>
+                <div className={style.partners__partners}>
+                  <img src={ellipse} alt="" />
+                  <span>Для партнеров</span>
+                </div>
+                <form className={style.partners__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" onClick={() => setAuthed(true)}>
+                    Войти
+                  </button>
+                </form>
+              </div>
+            </div>
+            <div className="col-xl-2">
+              <img className={style.partners__arrow} src={arrow} alt="" />
+            </div>
+            <div className="col-12 col-xl-4">
+              <div className={style.partners__info}>
+                <div className={style.partners__info__box}>
+                  <img src={medium} alt="" />
+                  <h3>
+                    Frontend разработчик,
+                    <br /> Middle
+                  </h3>
+                </div>
+
+                <div className={style.partners__info__container}>
+                  <div className={style.partners__info__img}>
+                    <div>
+                      <img className="cross" src={cross} alt="" />
+                    </div>
+                    <div>
+                      {/* <img className={style.specialists} src={specialists} alt="" /> */}
+                      <p className={style.specialists}>20 Специалистов</p>
+                    </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-12 col-xl-7">
+              <div className={style.partners__footer__left}>
+                <div className={style.footer__left__img}>
+                  <img src={align} alt="" />
+                </div>
+                <div className={style.footer__left__sp}>
+                  <span>
+                    © Адвего — биржа контента №1. Копирайтинг, рерайтинг, переводы, работа на дому: поставщик
+                    уникального контента. 2021{' '}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="col-4 col-xl-2">
+              <div className={style.partners__footer__icon}>
+                <img src={phone} alt="" />
+                <img src={telegram} alt="" />
+              </div>
+            </div>
+
+            <div className="col-8 col-xl-3">
+              <div className={style.partners__footer__right}>
+                <p className={style.phone}>+7 495 156 78 98</p>
+                <p className={style.workingHours}>Будни с 9:00 до 21:00</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AuthForPartners;

src/components/Auth/AuthForPartners.module.css

@@ -1,16 +1,8 @@
-/* .auth {
+.partners {
-  background-color: #f1f1f1;
-  background: url(../../images/Vector_Smart_Object.png)-302px -720px no-repeat,
-    url(../../images/Vector_Smart_Object_black.png) 1760px 480px no-repeat;
-} */
-
-.auth {
-  background-color: #f1f1f1;
-  position: relative;
   overflow: hidden;
 }
 
-.auth__background {
+.partners__background {
   background-color: #f1f1f1;
   position: relative;
 }
@@ -37,7 +29,7 @@
   }
 }
 
-.auth__box {
+.partners__box {
   display: flex;
   flex-direction: column;
   align-self: center;
@@ -45,12 +37,12 @@
 }
 
 @media (max-width: 575.98px) {
-  .auth__box {
+  .partners__box {
     margin-bottom: 44px;
   }
 }
 
-.auth__title {
+.partners__title {
   font-family: 'GT Eesti Pro Display';
   font-size: 5.3em;
   font-weight: 700;
@@ -62,13 +54,13 @@
 }
 
 @media (max-width: 575.98px) {
-  .auth__title {
+  .partners__title {
     text-align: center;
     margin-top: 44px;
   }
 }
 
-.auth__title > span {
+.partners__title > span {
   font-family: 'GT Eesti Pro Display';
   color: #52b709;
   font-style: normal;
@@ -76,7 +68,7 @@
   line-height: normal;
 }
 
-.auth__partners {
+.partners__partners {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -84,13 +76,13 @@
   margin-bottom: 65px;
 }
 
-.auth__partners > img {
+.partners__partners > img {
   width: 6px;
   height: 6px;
   margin-left: 120px;
 }
 
-.auth__partners > span {
+.partners__partners > span {
   color: #18586e;
   font-family: 'GT Eesti Pro Display';
   font-size: 1.6em;
@@ -102,12 +94,12 @@
   margin-left: 10px;
 }
 
-.auth__form {
+.partners__form {
   display: flex;
   flex-direction: column;
 }
 
-.auth__form > label {
+.partners__form > label {
   color: #48802d;
   font-family: 'GT Eesti Pro Display';
   font-size: 2.4em;
@@ -120,7 +112,7 @@
   margin-left: 45px;
 }
 
-.auth__form > input {
+.partners__form > input {
   max-width: 366px;
   height: 75px;
   box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
@@ -141,7 +133,7 @@
 }
 
 .form__btn {
-  width: 290px;
+  width: 288px;
   height: 75px;
   box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
   border-radius: 38px;
@@ -169,64 +161,64 @@
   }
 }
 
-.auth__arrow {
+.partners__arrow {
   margin-top: 360px;
 }
 
 @media (max-width: 575.98px) {
-  .auth__arrow {
+  .partners__arrow {
     display: none;
   }
 }
 
-.auth__info {
+.partners__info {
   background-color: #e1fccf;
   margin-top: 70px;
   max-width: 310px;
   padding-top: 30px;
   position: relative;
-  padding-bottom: 160px;
+  padding-bottom: 310px;
 }
 
 @media (max-width: 575.98px) {
-  .auth__info {
+  .partners__info {
     max-width: 380px;
   }
 }
 
 @media (max-width: 375.98px) {
-  .auth__info {
+  .partners__info {
     max-width: 340px;
   }
 }
 
-.auth__info__box {
+.partners__info__box {
   display: flex;
   align-items: center;
 }
 
 @media (max-width: 575.98px) {
-  .auth__info__box {
+  .partners__info__box {
     flex-direction: column;
     justify-content: center;
   }
 }
 
-.auth__info__box > img {
+.partners__info__box > img {
-  width: 150px;
+  width: 165px;
-  height: 150px;
+  height: 165px;
   margin-left: -84px;
   margin-right: 30px;
 }
 
 @media (max-width: 575.98px) {
-  .auth__info__box > img {
+  .partners__info__box > img {
     margin-left: 0px;
     margin-right: 0px;
   }
 }
 
-.auth__info__box > h3 {
+.partners__info__box > h3 {
   font-family: 'GT Eesti Pro Display';
   font-size: 2em;
   font-weight: 100;
@@ -237,43 +229,54 @@
 }
 
 @media (max-width: 575.98px) {
-  .auth__info__box > h3 {
+  .partners__info__box > h3 {
     margin-top: 20px;
   }
 }
 
-.auth__info__container {
+.partners__info__container {
   display: flex;
   position: relative;
 }
 
-.auth__info__img {
+.partners__info__img {
   display: flex;
   flex-direction: column;
-  margin-left: 55px;
+  text-align: center;
   margin-top: 28px;
 }
 
 @media (max-width: 575.98px) {
-  .auth__info__img {
+  .partners__info__img {
-    margin-left: 8px;
+    margin-left: -48px;
   }
 }
 
-.auth__info__img > div > img {
+.partners__info__img > div > img {
-  margin-bottom: 40px;
+  margin-bottom: 100px;
 }
 
 .specialists {
-  margin-left: 26px;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 1.8em;
+  font-weight: 100;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 26.12px;
+  text-align: left;
+  transform: rotate(-90deg);
+  text-transform: uppercase;
 }
 
+/* .specialists {
+  margin-left: 26px;
+} */
+
 .info__list {
   list-style: none;
   margin-top: 110px;
   position: absolute;
-  /* right: -116px; */
+  right: -120px;
-  left: 114px;
 }
 
 @media (max-width: 575.98px) {
@@ -293,13 +296,11 @@
   text-align: left;
   text-decoration: underline;
   text-transform: uppercase;
-  margin-bottom: 34px;
 }
 
 @media (max-width: 575.98px) {
   .info__list__item {
     font-size: 2.6em;
-    margin-bottom: 14px;
   }
 }
 
@@ -315,14 +316,14 @@
   }
 }
 
-.auth__footer__left {
+.partners__footer__left {
   display: flex;
   align-items: center;
   margin-bottom: 60px;
 }
 
 @media (max-width: 575.98px) {
-  .auth__footer__left {
+  .partners__footer__left {
     margin-top: 120px;
   }
 }
@@ -338,7 +339,7 @@
   }
 }
 
-.auth__footer__left > div > span {
+.partners__footer__left > div > span {
   color: #18586e;
   font-family: 'GT Eesti Pro Display';
   font-size: 1.6em;
@@ -350,33 +351,33 @@
 }
 
 @media (max-width: 575.98px) {
-  .auth__footer__left > div > span {
+  .partners__footer__left > div > span {
     font-size: 1.2em;
   }
 }
 
-.auth__footer__icon {
+.partners__footer__icon {
   text-align: end;
 }
 
-.auth__footer__icon > img {
+.partners__footer__icon > img {
   margin-left: 20px;
 }
 
 @media (max-width: 575.98px) {
-  .auth__footer__icon > img {
+  .partners__footer__icon > img {
     margin-left: 10px;
   }
 }
 
-.auth__footer__right {
+.partners__footer__right {
   display: flex;
   flex-direction: column;
   align-items: left;
 }
 
 @media (max-width: 575.98px) {
-  .auth__footer__right {
+  .partners__footer__right {
     margin-bottom: 20px;
   }
 }

src/components/Calendar/Calendar.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import style from './Calendar.module.css';
+import calendarMale from '../../images/medium_male.png';
+
+const Calendar = () => {
+  return (
+    <section className={style.calendar}>
+      <div className="container">
+        <div className="row">
+          <h2 className={style.calendar__title}>
+            Добрый день, <span>Александр!</span>
+          </h2>
+          <div className="col-xl-12">
+            <div className={style.calendarHeader__info}>
+              <img className={style.calendarHeader__info__img} src={calendarMale} alt="img" />
+              <h3 className={style.calendarHeader__info__name}>header</h3>
+            </div>
+            <div className={style.calendarHeader__title}></div>
+            <div className={style.calendarHeader__btn}></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Calendar;

src/components/Calendar/Calendar.module.css

@@ -0,0 +1,4 @@
+.calendar__title {
+  font-size: 32px;
+  color: violet;
+}

src/components/Home/Home.js

@@ -68,8 +68,6 @@ const Home = () => {
         const keys = Object.keys(res);
         const values = Object.values(res);
 
-        console.log(values);
-
         const tempTags = values.map((item, index) =>
           item.map((tag) => {
             return { id: tag.id, value: tag.tags, name: keys[index] };

src/pages/AuthPage.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import Auth from '../components/Auth/Auth';
-
-const AuthPage = ({ setAuth }) => {
-  return <Auth setAuthed={setAuth} />;
-};
-
-export default AuthPage;

src/pages/AuthPageForDevelopers.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import AuthForDevelopers from '../components/Auth/AuthForDevelopers';
+
+const AuthPageForDevelopers = ({ setAuth }) => {
+  return <AuthForDevelopers setAuthed={setAuth} />;
+};
+
+export default AuthPageForDevelopers;

src/pages/AuthPageForPartners.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import AuthForPartners from '../components/Auth/AuthForPartners';
+
+const AuthPageForPartners = ({ setAuth }) => {
+  return <AuthForPartners setAuthed={setAuth} />;
+};
+
+export default AuthPageForPartners;

src/pages/CalendarPage.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Calendar from '../components/Calendar/Calendar';
+
+const CalendarPage = () => {
+  return <Calendar />;
+};
+
+export default CalendarPage;