add second page

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,13 +1,14 @@
-import React, { Suspense, lazy } from 'react'
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
-import 'bootstrap/dist/css/bootstrap.min.css'
+import React, { Suspense, lazy } from 'react';
+import { BrowserRouter 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 HomePage = lazy(() => import('./pages/HomePage'))
-const CandidatePage = lazy(() => import('./pages/CandidatePage'))
+const AuthPage = lazy(() => import('./pages/AuthPage'));
+const HomePage = lazy(() => import('./pages/HomePage'));
+const CandidatePage = lazy(() => import('./pages/CandidatePage'));
 
 const App = () => {
-  const isAuth = true
+  const isAuth = true;
   return (
     <Router>
       <Suspense fallback={<div>Loading...</div>}>
@@ -22,7 +23,7 @@ const App = () => {
         )}
       </Suspense>
     </Router>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/components/Auth/Auth.js

@@ -1,7 +1,12 @@
 import React from 'react';
+import style from './Auth.module.scss';
 
 const Auth = () => {
-  return <div></div>;
+  return (
+    <div className={style.auth}>
+      <h2>THIS IS AUTH!!!</h2>
+    </div>
+  );
 };
 
 export default Auth;

src/components/Auth/Auth.module.scss

@@ -0,0 +1,7 @@
+.auth {
+  & h2 {
+    font-size: 5em;
+    color: red;
+    text-align: center;
+  }
+}

src/components/Candidate/Candidate.js

@@ -4,8 +4,15 @@ import style from './Candidate.module.scss';
 // import { candidatesList } from '../Home/sections/Description';
 import icon from '../../images/front_end.png';
 import arrow from '../../images/right-arrow.png';
-
+import rectangle from '../../images/rectangle_secondPage.png';
+import Sidebar from './sections/Sidebar';
 import classes from './Candidate.module.scss';
+import SectionOne from './sections/SectionOne';
+import SectionTwo from './sections/SectionTwo';
+import SectionThree from './sections/SectionThree';
+import SectionFour from './sections/SectionFour';
+import SectionFive from './sections/SectionFive';
+import SectionSkills from './sections/SectionSkills';
 
 const Candidate = () => {
   const history = useHistory();
@@ -44,20 +51,24 @@ const Candidate = () => {
         <div className={style.candidate__main}>
           <div className="row">
             <div className="col-4">
-              <div className="">
-                <p>
-                  sddddddddddddddddddddddddddddddddd <br /> ddddddddddddddddddddddddddd <br />
-                  ddddddddddddddddddd
-                </p>
-              </div>
+              <Sidebar />
             </div>
 
             <div className="col-8">
-              <div className="">
-                <p>
-                  sddddddddddddddddddddddddddddddddd <br /> ddddddddddddddddddddddddddd <br />
-                  ddddddddddddddddddd
-                </p>
+              <div className={style.candidate__main__description}>
+                <h2>Frontend разработчик, Middle</h2>
+                <img src={rectangle} alt="" />
+                <p># Описание опыта</p>
+                <SectionOne />
+                <p># Средства и инструменты:</p>
+                <SectionTwo />
+                <p># Описание опыта</p>
+                <SectionThree />
+                <p># Средства и инструменты:</p>
+                <SectionFour />
+                <p># Функционал:</p>
+                <SectionFive />
+                <SectionSkills />
               </div>
             </div>
           </div>

src/components/Candidate/Candidate.module.scss

@@ -5,7 +5,7 @@
       text-align: center;
       color: #52b709;
       font-family: 'GT Eesti Pro Display';
-      font-size: 53px;
+      font-size: 5em;
       font-weight: 700;
       font-style: normal;
       letter-spacing: normal;
@@ -33,11 +33,41 @@
       & span {
         margin-left: 40px;
         margin-right: 120px;
+        font-family: 'GT Eesti Pro Display - Thin';
+        font-size: 1.8em;
+        font-weight: 400;
+        font-style: normal;
+        letter-spacing: normal;
+        line-height: 36px;
+        text-align: left;
       }
     }
   }
 
   &__main {
     margin-top: 60px;
+
+    &__description {
+      padding-left: 16px;
+      & h2 {
+        font-family: 'GT Eesti Pro Display';
+        font-size: 2.8em;
+        font-weight: 700;
+        font-style: normal;
+        letter-spacing: normal;
+        line-height: 36px;
+        text-align: left;
+      }
+      & p {
+        font-family: 'GT Eesti Pro Display';
+        font-size: 1.2em;
+        font-weight: 300;
+        font-style: normal;
+        letter-spacing: normal;
+        line-height: 36px;
+        text-align: left;
+        margin: 20px 0px;
+      }
+    }
   }
 }

src/components/Candidate/sections/SectionFive.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import style from './SectionFive.module.scss';
+
+const SectionFive = () => {
+  return (
+    <div className={style.SectionFive}>
+      <p>Регистрации/авторизации;</p>
+      <p>Управления правами менеджеров отеля, назначение поставщиков</p>
+      <p>Управления описанием и профилем отелей;</p>
+      <p>Управления финансами, ценообразованием, квотами;</p>
+      <p>Переписки со своими менеджерами, а также с вышестоящими инстанциями;</p>
+      <p>Управления новостями отеля;</p>
+      <p>Просмотра расширенной статистики по заявкам и людям;</p>
+    </div>
+  );
+};
+
+export default SectionFive;

src/components/Candidate/sections/SectionFive.module.scss

@@ -0,0 +1,11 @@
+.SectionFive {
+  & p {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 16px;
+    text-align: left;
+  }
+}

src/components/Candidate/sections/SectionFour.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import style from './SectionFour.module.scss';
+
+const SectionFour = () => {
+  return (
+    <div className={style.SectionFour}>
+      <p>Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8</p>
+      <p>Frontend - Vue.js</p>
+      <p>БД - MYSQL</p>
+    </div>
+  );
+};
+
+export default SectionFour;

src/components/Candidate/sections/SectionFour.module.scss

@@ -0,0 +1,11 @@
+.SectionFour {
+  & p {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 18px;
+    text-align: left;
+  }
+}

src/components/Candidate/sections/SectionOne.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import style from './SectionOne.module.scss';
+
+const SectionOne = () => {
+  return (
+    <div className={style.SectionOne}>
+      <h3>SVM - сервис выездных менеджеров для банка ПСБ</h3>
+      <p>
+        Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их услуги
+        своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое обслуживание или
+        регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все необходимые бумаги ВМ
+        подготовит заранее и принесет на согласование и подпись в удобное ему (клиент) время и место.
+      </p>
+      <h4>Senior PHP/JS Developer</h4>
+    </div>
+  );
+};
+
+export default SectionOne;

src/components/Candidate/sections/SectionOne.module.scss

@@ -0,0 +1,32 @@
+.SectionOne {
+  & h3 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 2.2em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+  }
+
+  & p {
+    font-family: 'GT Eesti Pro Display - Thin';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+    color: #444444;
+  }
+
+  & h4 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+  }
+}

src/components/Candidate/sections/SectionSkills.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import style from './SectionSkills.module.scss';
+
+const SectionSkills = () => {
+  return (
+    <div className={style.SectionSkills}>
+      <h3>Навыки:</h3>
+      <p>
+        PHP: Native, Laravel, Zend Framework, CodeIgniter, YII, Symfony. JavaScript: Native, jQuery, AngularJS, ExtJS,
+        BackboneJS, ReactJS + Redux, VueJS. Search Engines: Sphinx, Elastic Search. Cache: Memcache, Redis. Profiling:
+        Xdebug, XHProf. WebSockets: Ratchet, Socket.io. Очереди: RabbitMQ, Beanstalk. MySQL, PostgreSQL, Oracle, MsSQL,
+        Vertica, HBase, Cassandra, MongoDB, Redis, Tarantool. CSS 2/3 (Sass, Less). HTML 4/5.
+      </p>
+    </div>
+  );
+};
+
+export default SectionSkills;

src/components/Candidate/sections/SectionSkills.module.scss

@@ -0,0 +1,27 @@
+.SectionSkills {
+  border: 1px solid #69bf2c;
+  padding: 28px 40px 16px 30px;
+  margin-top: 60px;
+  border-radius: 10px;
+  margin-bottom: 60px;
+  & h3 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+  }
+
+  & p {
+    font-family: 'GT Eesti Pro Display - Thin';
+    font-size: 2em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+    color: #444444;
+  }
+}

src/components/Candidate/sections/SectionThree.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import style from './SectionThree.module.scss';
+
+const SectionThree = () => {
+  return (
+    <div className={style.SectionThree}>
+      <h3>Multitur - личный кабинет для сервиса поиска/подбора отелей</h3>
+      <p>Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте.</p>
+      <h4>Senior PHP/JS Developer</h4>
+    </div>
+  );
+};
+
+export default SectionThree;

src/components/Candidate/sections/SectionThree.module.scss

@@ -0,0 +1,32 @@
+.SectionThree {
+  & h3 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 2.2em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+  }
+
+  & p {
+    font-family: 'GT Eesti Pro Display - Thin';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+    color: #444444;
+  }
+
+  & h4 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+  }
+}

src/components/Candidate/sections/SectionTwo.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import style from './SectionTwo.module.scss';
+
+const SectionTwo = () => {
+  return (
+    <div className={style.SectionTwo}>
+      <p>
+        - Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js, MySQL,
+        JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP. Перевел существующую
+        платформу с Laravel на современную архитектуру React/Redux и Node.
+      </p>
+      <p>
+        - Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и JavaScript. -
+        Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания всех основных компонентов
+        и внедрения новой архетиктуры. - Разработал персональное APIs.
+      </p>
+    </div>
+  );
+};
+
+export default SectionTwo;

src/components/Candidate/sections/SectionTwo.module.scss

@@ -0,0 +1,12 @@
+.SectionTwo {
+  & p {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.8em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 28px;
+    text-align: left;
+    color: #444444;
+  }
+}

src/components/Candidate/sections/Sidebar.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import male from '../../../images/medium_male.png';
+import arrowLeft from '../../../images/arrow_left.png';
+import arrowRight from '../../../images/arrow_right.png';
+import style from './Sidebar.module.scss';
+
+const Sidebar = () => {
+  return (
+    <div className={style.candidateSidebar}>
+      <div className={style.candidateSidebar__info}>
+        <img src={male} alt="" />
+        <p className={style.candidateSidebar__info__e}>Опыт работы</p>
+        <p className={style.candidateSidebar__info__y}>4+ лет</p>
+        <button className={style.candidateSidebar__info__btn}>Выбрать к собеседованию</button>
+        <p className={style.candidateSidebar__info__l}>Посмотреть ещё</p>
+      </div>
+
+      <div className={style.candidateSidebar__arrows}>
+        <div className={style.arrow__left}>
+          <img src={arrowLeft} alt="" />
+        </div>
+        <span className={style.arrows__sp}>1/15</span>
+        <div className={style.arrow__right}>
+          <img src={arrowRight} alt="" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

src/components/Candidate/sections/Sidebar.module.scss

@@ -0,0 +1,108 @@
+.candidateSidebar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 2px solid whitesmoke;
+  border-bottom: none !important;
+
+  &__info {
+    text-align: center;
+    margin-top: 40px;
+    & img {
+      width: 180px;
+      height: 180px;
+    }
+
+    &__e {
+      font-family: 'GT Eesti Pro Display';
+      font-size: 1.8em;
+      font-weight: 400;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: 36px;
+      margin-top: 20px;
+    }
+
+    &__y {
+      font-family: 'GT Eesti Pro Display - Bold';
+      font-size: 3em;
+      font-weight: 700;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: normal;
+    }
+
+    &__btn {
+      width: 280px;
+      height: 60px;
+      border-radius: 100px;
+      border: none;
+      background-color: #70c03e;
+      color: #ffffff;
+      font-family: 'GT Eesti Pro Display';
+      font-size: 1.8em;
+      font-weight: 600;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: normal;
+      text-align: center;
+      margin-top: 20px;
+      margin-bottom: 120px;
+    }
+
+    &__l {
+      font-family: 'GT Eesti Pro Display';
+      font-size: 1.8em;
+      font-weight: 600;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: 36px;
+      text-align: center;
+    }
+  }
+
+  &__arrows {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+
+    & .arrow__left {
+      position: relative;
+      width: 30px;
+      height: 30px;
+      border-radius: 20px;
+      background-color: #f6f6f6;
+      & img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    & span {
+      color: #705fa3;
+      font-family: Circe;
+      font-size: 1.6em;
+      font-weight: 400;
+      font-style: normal;
+      letter-spacing: normal;
+      text-align: center;
+      margin: 0 10px;
+    }
+
+    & .arrow__right {
+      position: relative;
+      width: 30px;
+      height: 30px;
+      border-radius: 20px;
+      background-color: #74be4d;
+      & img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}

src/components/Home/sections/Description.js

@@ -4,12 +4,8 @@ import photo from '../../../images/medium_male.png';
 import rectangle from '../../../images/rectangle_secondPage.png';
 import arrowLeft from '../../../images/arrow_left.png';
 import arrowRight from '../../../images/arrow_right.png';
-import { NavLink } from 'react-router-dom';
-
-export const candidatesList = [
-  { id: 1, name: 'Artyom' },
-  { id: 2, name: 'Vitaliy' },
-];
+import { Link } from 'react-router-dom';
+import { candidatesList } from '../sections/Search';
 
 const Description = () => {
   return (
@@ -30,9 +26,9 @@ const Description = () => {
                 <p className={style.description__text}>- 3 года преподаю в IOS-школе Сбера</p>
               </div>
               <div className="col-4">
-                <NavLink to={`/candidate/${el.id}`}>
+                <Link to={`/candidate/${el.id}`}>
                   <button className={style.description__button}>Подробное резюме</button>
-                </NavLink>
+                </Link>
               </div>
               <div className="col-12">
                 <span className={style.description__sp}>

src/components/Home/sections/Description.module.scss

@@ -1,127 +1,125 @@
 .description {
-    margin-top: 120px;
-    margin-bottom: 120px;
-    &__wrapper {
-        border: 2px solid whitesmoke;
-        padding-top: 60px;
-        border-bottom: none;
-    }
-    &__img {
-        margin-left: 40px;
-        margin-top: 16px;
-    }
-    &__title {
-        font-family: "GT Eesti Pro Display";
-        font-size: 25px;
-        font-weight: 700;
-        font-style: normal;
-        letter-spacing: normal;
-        line-height: 36px;
-        text-align: left;
-        margin-bottom: 10px;
-    }
-    &__text {
-        font-family: "GT Eesti Pro Display";
-        font-size: 20px;
-        font-weight: 400;
-        font-style: normal;
-        letter-spacing: normal;
-        line-height: 24px;
-        text-align: left;
-        line-height: 36px;
-    }
-    &__button {
-        width: 290px;
-        height: 62px;
+  margin-top: 120px;
+  margin-bottom: 120px;
+  &__wrapper {
+    border: 2px solid whitesmoke;
+    padding-top: 60px;
+    border-bottom: none;
+  }
+  &__img {
+    margin-left: 40px;
+    margin-top: 16px;
+  }
+  &__title {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 2.5em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 36px;
+    text-align: left;
+    margin-bottom: 10px;
+  }
+  &__text {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.6em;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: 24px;
+    text-align: left;
+    line-height: 28px;
+  }
+  &__button {
+    width: 280px;
+    height: 62px;
+    border-radius: 100px;
+    background-color: #5ab426;
+    border: none;
+    color: #ffffff;
+    font-family: 'Muller Extra Bold';
+    font-size: 1.8em;
+    font-weight: 600;
+    font-style: normal;
+    letter-spacing: normal;
+    text-align: center;
+    margin-top: 74px;
+  }
+  &__sp {
+    display: block;
+    font-family: 'GT Eesti Pro Display';
+    font-size: 1.6em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    text-align: center;
+    margin-top: 20px;
+  }
+  &__rectangle {
+    display: block;
+    margin: 60px auto;
+  }
+  &__footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 60px;
+    &__btn {
+      & button {
+        width: 220px;
+        height: 60px;
         border-radius: 100px;
-        background-color: #5ab426;
-        border: none;
-        color: #ffffff;
-        font-family: "Muller Extra Bold";
-        font-size: 18px;
+        border: 1px solid #5ab424;
+        background-color: white;
+        margin-right: 60px;
+        color: #a0a0a0;
+        font-family: 'GT Eesti Pro Display';
+        font-size: 1.8em;
         font-weight: 600;
         font-style: normal;
         letter-spacing: normal;
+        line-height: normal;
         text-align: center;
-        margin-top: 74px;
+      }
     }
-    &__sp {
-        display: block;
-        font-family: "GT Eesti Pro Display";
-        font-size: 18px;
-        font-weight: 700;
+    &__box {
+      display: flex;
+      align-items: center;
+      & span {
+        color: #705fa3;
+        font-family: Circe;
+        font-size: 1.6em;
+        font-weight: 400;
         font-style: normal;
         letter-spacing: normal;
-        line-height: 36px;
         text-align: center;
-        margin-top: 20px;
-    }
-    &__rectangle {
-        display: block;
-        margin: 60px auto;
-    }
-    &__footer {
-        display: flex;
-        justify-content: center;
-        margin-top: 60px;
-        &__btn {
-            & button {
-                width: 220px;
-                height: 60px;
-                border-radius: 100px;
-                border: 1px solid #5ab424;
-                background-color: white;
-                margin-right: 60px;
-                color: #a0a0a0;
-                font-family: "GT Eesti Pro Display";
-                font-size: 18px;
-                font-weight: 600;
-                font-style: normal;
-                letter-spacing: normal;
-                line-height: normal;
-                text-align: center;
- 
-            }
+        margin: 0 10px;
+      }
+      & .arrow__left {
+        position: relative;
+        width: 30px;
+        height: 30px;
+        border-radius: 20px;
+        background-color: #f6f6f6;
+        & img {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
         }
-        &__box {
-            display: flex;
-            align-items: center;
-            & span {
-                color: #705fa3;
-                font-family: Circe;
-                font-size: 16px;
-                font-weight: 400;
-                font-style: normal;
-                letter-spacing: normal;
-                text-align: center;
-                margin: 0 10px;
-            }
-            & .arrow__left {
-                position: relative;
-                width: 30px;
-                height: 30px;
-                border-radius: 20px;
-                background-color: #f6f6f6;
-                & img {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                }
-            }
-            & .arrow__right {
-                position: relative;
-                width: 30px;
-                height: 30px;
-                border-radius: 20px;
-                background-color: #74be4d;
-                & img {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                }
-            }
+      }
+      & .arrow__right {
+        position: relative;
+        width: 30px;
+        height: 30px;
+        border-radius: 20px;
+        background-color: #74be4d;
+        & img {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
         }
+      }
     }
+  }
 }

src/components/Home/sections/Outstaffing.js

@@ -22,7 +22,7 @@ const Outstaffing = () => {
           <div className="col-4">
             <div className={style.outstaffing__box}>
               <img src={front} alt="" />
-
+              <p># Популярный стек </p>
               <ul className={style.items}>
                 <li>Ruby on Rails</li>
                 <li>Nginx</li>
@@ -38,6 +38,7 @@ const Outstaffing = () => {
           <div className="col-4">
             <div className={style.outstaffing__box}>
               <img src={back} alt="" />
+              <p># Популярный стек</p>
 
               <ul className={style.items}>
                 <li>Ruby on Rails</li>
@@ -54,6 +55,7 @@ const Outstaffing = () => {
           <div className="col-4">
             <div className={style.outstaffing__box}>
               <img src={design} alt="" />
+              <p># Популярный стек</p>
 
               <ul className={style.items}>
                 <li>Ruby on Rails</li>

src/components/Home/sections/Outstaffing.module.scss

@@ -5,7 +5,7 @@
       text-align: center;
       color: #52b709;
       font-family: 'GT Eesti Pro Display';
-      font-size: 53px;
+      font-size: 5em;
       font-weight: 700;
       font-style: normal;
       letter-spacing: normal;
@@ -27,11 +27,22 @@
       max-width: 240px;
       max-height: 120px;
     }
-    & .items {
+    & p {
+      font-family: 'GT Eesti Pro Display';
+      font-size: 1.2em;
+      font-weight: 300;
+      font-style: normal;
+      letter-spacing: normal;
+      line-height: 36px;
+      text-align: left;
       margin-top: 60px;
+      margin-bottom: 0;
+      margin-left: 16px;
+    }
+    & .items {
       & li {
         font-family: 'GT Eesti Pro Display - Thin';
-        font-size: 18px;
+        font-size: 1.8em;
         font-weight: 400;
         font-style: normal;
         letter-spacing: normal;

src/components/Home/sections/Search.js

@@ -1,17 +1,34 @@
-import React from 'react';
+import React, { useState } from 'react';
 import style from './Search.module.scss';
 
-const Search = () => {
+export const candidatesList = [
+  { id: 1, name: 'Artyom' },
+  { id: 2, name: 'Vitaliy' },
+];
+
+const Search = ({ onTe }) => {
+  const [input, setInput] = useState('');
+
+  // const test = (input, candidatesList) => {
+  //   return candidatesList.filter((el) => el.name.toLowerCase().includes(input.toLowerCase()));
+  // };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    setInput('');
+  };
+
   return (
-    <section class={style.search}>
-      <div class="container">
-        <div class="row">
-          <div class="col-12">
+    <section className={style.search}>
+      <div className="container">
+        <div className="row">
+          <div className="col-12">
             <h2>Найти специалиста по навыкам</h2>
 
-            <form action="">
+            <form action="" onSubmit={handleSubmit}>
               <button type={style.submit}>JavaScript</button>
-              <input type={style.text} />
+              <input value={input} onChange={(e) => setInput(e.target.value)} type={style.text} />
             </form>
           </div>
         </div>

src/components/Home/sections/Search.module.scss

@@ -1,46 +1,46 @@
 .search {
-    margin-top: 40px;
-    & h2 {
-        font-family: "GT Eesti Pro Display";
-        font-size: 24px;
-        font-weight: 700;
-        font-style: normal;
-        letter-spacing: normal;
-        line-height: normal;
-        text-align: center;
-        margin-bottom: 40px;
+  margin-top: 40px;
+  & h2 {
+    font-family: 'GT Eesti Pro Display';
+    font-size: 2.4em;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: normal;
+    line-height: normal;
+    text-align: center;
+    margin-bottom: 40px;
+  }
+  & form {
+    position: relative;
+    width: 100%;
+    height: 60px;
+    border: 1px solid whitesmoke;
+    & input {
+      width: 100%;
+      height: 100%;
+      border: none;
+      margin-left: 160px;
+      font-size: 1.8em;
     }
-    & form {
-        position: relative;
-        width: 100%;
-        height: 60px;
-        border: 1px solid whitesmoke;
-        & input {
-            width: 100%;
-            height: 100%;
-            border: none;
-            margin-left: 160px;
-            font-size: 18px;
-        }
-        & input:focus,
-        & input:active {
-            outline: none;
-        }
-        & button {
-            position: absolute;
-            top: 15%;
-            left: 1%;
-            width: 131px;
-            height: 40px;
-            border-radius: 10px;
-            background-color: #e8e8e8;
-            border: none;
-            font-family: "GT Eesti Pro Display";
-            font-size: 18px;
-            font-weight: 400;
-            font-style: normal;
-            letter-spacing: normal;
-            text-align: center;
-        }
+    & input:focus,
+    & input:active {
+      outline: none;
     }
+    & button {
+      position: absolute;
+      top: 15%;
+      left: 1%;
+      width: 131px;
+      height: 40px;
+      border-radius: 10px;
+      background-color: #e8e8e8;
+      border: none;
+      font-family: 'GT Eesti Pro Display';
+      font-size: 1.8em;
+      font-weight: 400;
+      font-style: normal;
+      letter-spacing: normal;
+      text-align: center;
+    }
+  }
 }