add mobile page

src/components/Candidate/Candidate.js

@@ -39,9 +39,13 @@ const Candidate = () => {
           <div className="col-12">
             <div className={style.candidate__header}>
               <div className={style.arrow} onClick={() => history.push('/')}>
+                <div className={style.arrow__img}>
                   <img src={arrow} alt="" />
+                </div>
+                <div className={style.arrow__sp}>
                   <span>Вернуться к списку</span>
                 </div>
+              </div>
 
               <div className="icon">
                 <img src={img} alt="" />

src/components/Candidate/Candidate.module.css

@@ -72,7 +72,6 @@
   }
 } */
 
-
 .candidate__title {
   margin-top: 60px;
 }
@@ -102,11 +101,17 @@
   margin-left: 60px;
 }
 
-.arrow > img {
-cursor: pointer;
+.arrow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.arrow > span {
+.arrow__img > img {
+  cursor: pointer;
+}
+
+.arrow__sp > span {
   margin-left: 40px;
   margin-right: 120px;
   font-family: 'GT Eesti Pro Display';
@@ -116,17 +121,17 @@ cursor: pointer;
   letter-spacing: normal;
   line-height: 36px;
   text-align: left;
-  }
+}
 
-  .candidate__main {
+.candidate__main {
   margin-top: 60px;
-  }
+}
 
-  .candidate__main__description {
+.candidate__main__description {
   padding-left: 16px;
-  }
+}
 
-  .candidate__main__description > h2 {
+.candidate__main__description > h2 {
   font-family: 'GT Eesti Pro Display';
   font-size: 2.8em;
   font-weight: 700;
@@ -134,9 +139,9 @@ cursor: pointer;
   letter-spacing: normal;
   line-height: 36px;
   text-align: left;
-  }
+}
 
-  .candidate__main__description > p {
+.candidate__main__description > p {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.2em;
   font-weight: 300;
@@ -145,4 +150,4 @@ cursor: pointer;
   line-height: 36px;
   text-align: left;
   margin: 20px 0px;
-  }
+}

src/components/Description/Description.js

@@ -6,7 +6,7 @@ import arrowLeft from '../../images/arrow_left.png';
 import arrowRight from '../../images/arrow_right.png';
 import { Link } from 'react-router-dom';
 
-const Description = ({ candidatesListArr, onhandleTabBar }) => {
+const Description = ({ candidatesListArr }) => {
   return (
     <section className={style.description}>
       <div className="container">
@@ -16,7 +16,7 @@ const Description = ({ candidatesListArr, onhandleTabBar }) => {
               <div className="col-2">
                 <img className={style.description__img} src={photo} alt="" />
               </div>
-              <div className="col-6">
+              <div className="col-12 col-xl-6">
                 <h3 className={style.description__title}>{el.name} разработчик, Middle</h3>
                 <p className={style.description__text}>
                   - 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift.
@@ -24,17 +24,17 @@ const Description = ({ candidatesListArr, onhandleTabBar }) => {
                 <p className={style.description__text}>- 5 лет руковожу командами мобильной разработки.</p>
                 <p className={style.description__text}>- 3 года преподаю в IOS-школе Сбера</p>
               </div>
-              <div className="col-4">
+              <div className="col-12 col-xl-4">
                 <Link to={`/candidate/${el.id}`}>
                   <button className={style.description__button}>Подробное резюме</button>
                 </Link>
               </div>
-              <div className="col-2"></div>
-              <div className="col-6">
+              <div className="col-xl-2"></div>
+              <div className="col-12 col-xl-6">
                 <span className={style.description__sp}> {el.tags}</span>
                 <img className={style.description__rectangle} src={rectangle} alt="" />
               </div>
-              <div className="col-4"></div>
+              <div className="col-xl-4"></div>
             </div>
           ))}
         </div>

src/components/Description/Description.module.css

@@ -1,7 +1,6 @@
 .description {
-  margin-top: 120px;
+  margin-top: 40px;
   margin-bottom: 120px;
- 
 }
 
 .description__wrapper {
@@ -9,14 +8,40 @@
   background-color: #fdfdfd;
   padding-top: 60px;
   border-bottom: none;
+  position: relative;
 }
 .description__img {
   margin-left: 40px;
   margin-top: 16px;
 }
+
+@media (max-width: 575.98px) {
+  .description__img {
+    position: absolute;
+    top: 90px;
+    left: 90px;
+  }
+}
+
+@media (max-width: 375.98px) {
+  .description__img {
+    position: absolute;
+    top: 90px;
+    left: 90px;
+  }
+}
+
+@media (max-width: 340.98px) {
+  .description__img {
+    position: absolute;
+    top: 90px;
+    left: 60px;
+  }
+}
+
 .description__title {
   font-family: 'GT Eesti Pro Display';
-  font-size: 2.5em;
+  font-size: 2.6em;
   font-weight: 700;
   font-style: normal;
   letter-spacing: normal;
@@ -24,6 +49,21 @@
   text-align: left;
   margin-bottom: 10px;
 }
+
+@media (max-width: 575.98px) {
+  .description__title {
+    text-align: center;
+    margin-bottom: 190px;
+    font-size: 3em;
+  }
+}
+
+@media (max-width: 376px) {
+  .description__title {
+    font-size: 2.8em;
+  }
+}
+
 .description__text {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.7em;
@@ -34,6 +74,15 @@
   text-align: left;
   line-height: 28px;
 }
+
+@media (max-width: 575.98px) {
+  .description__text {
+    /* text-align: center; */
+    margin-left: 20px;
+    font-size: 1.6em;
+  }
+}
+
 .description__button {
   width: 280px;
   height: 60px;
@@ -41,16 +90,38 @@
   background-color: #73c141;
   border: none;
   color: #ffffff;
-  font-family: 'Muller Extra Bold';
+  font-family: 'Muller';
   font-size: 1.6em;
-  font-weight: 600;
   line-height: normal;
-  font-style: normal;
   letter-spacing: 0.8px;
   text-align: center;
   margin-top: 74px;
   margin-left: 30px;
 }
+
+@media (max-width: 575.98px) {
+  .description__button {
+    width: 220px;
+    height: 50px;
+    position: absolute;
+    bottom: -170px;
+    z-index: 5;
+    margin-left: 85px;
+  }
+}
+
+@media (max-width: 375.98px) {
+  .description__button {
+    margin-left: 60px;
+  }
+}
+
+@media (max-width: 325.98px) {
+  .description__button {
+    margin-left: 30px;
+  }
+}
+
 .description__sp {
   display: block;
   font-family: 'GT Eesti Pro Display';
@@ -62,10 +133,26 @@
   line-height: 36px;
   margin-top: 20px;
 }
+
+@media (max-width: 575.98px) {
+  .description__sp {
+    font-size: 1.6em;
+    text-align: center;
+    margin-bottom: 120px;
+  }
+}
+
 .description__rectangle {
   display: block;
   margin: 50px auto;
 }
+
+@media (max-width: 575.98px) {
+  .description__rectangle {
+    width: 80%;
+  }
+}
+
 .description__footer {
   display: flex;
   justify-content: center;
@@ -88,6 +175,15 @@
   line-height: normal;
   text-align: center;
 }
+
+@media (max-width: 575.98px) {
+  .description__footer__btn > button {
+    width: 160px;
+    margin-right: 10px;
+    font-size: 1.6em;
+  }
+}
+
 .description__footer__box {
   display: flex;
   align-items: center;
@@ -125,7 +221,7 @@
   height: 30px;
   border-radius: 20px;
   background-color: #74be4d;
-cursor: pointer;
+  cursor: pointer;
 }
 
 .arrow__right > img {
@@ -133,6 +229,4 @@ cursor: pointer;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-
 }
-

src/components/Home/Home.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Outstaffing from '../Outstaffing/Outstaffing';
 import Description from '../Description/Description';
 import front from '../../images/front_end.png';
@@ -27,20 +27,51 @@ export const candidatesList = [
   },
 ];
 
+const tabsList = [
+  {
+    name: 'Frontend',
+    img: front,
+    text: '# Популярный стек',
+    header: 'Фронтенд',
+    tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
+  },
+  {
+    name: 'Backend',
+    img: back,
+    text: '# Популярный стек',
+    header: 'Бэкенд',
+    tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
+  },
+  {
+    name: 'Design',
+    img: design,
+    text: '# Популярный стек',
+    header: 'Дизайн',
+    tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw', 'KompoZer'],
+  },
+];
+
 const Home = () => {
   const [tabs, setTabs] = useState([]);
+  const [candidates, setCandidates] = useState([]);
 
-  const handleTabBar = (name) => {
-    const tabFilter = candidatesList.filter((el) => el.name.toLowerCase() === name);
+  const [selectedTab, setSelectedTab] = useState('');
 
-    console.log(tabFilter);
+  useEffect(() => {
+    setTabs(tabsList);
+    setCandidates(candidatesList);
+  }, []);
 
-    setTabs(tabFilter);
+  const handleBlockClick = (name) => {
+    setSelectedTab(name);
   };
+
   return (
     <>
-      <Outstaffing onhandleTabBar={(name) => handleTabBar(name)} />
-      <Description candidatesListArr={tabs.length > 0 ? tabs : candidatesList} />
+      <Outstaffing onhandleTabBar={(name) => handleBlockClick(name)} selected={selectedTab} tabs={tabs} />
+      <Description
+        candidatesListArr={selectedTab ? candidates.filter((item) => item.name === selectedTab) : candidates}
+      />
     </>
   );
 };

src/components/Outstaffing/Outstaffing.js

@@ -1,40 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import style from './Outstaffing.module.css';
-import front from '../../images/front_end.png';
-import back from '../../images/back_end.png';
-import design from '../../images/design.png';
 import OutstaffingBlock from './OutstaffingBlock';
 import TagSelect from '../Select/TagSelect';
 
-const Outstaffing = ({ onhandleTabBar }) => {
-  const [data, setData] = useState([]);
+const Outstaffing = ({ onhandleTabBar, selected, tabs }) => {
   const [selectedItems, setSelectedItems] = useState([]);
 
-  useEffect(() => {
-    const tags = [
-      {
-        name: 'frontend',
-        img: front,
-        header: '# Популярный стек',
-        tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
-      },
-      {
-        name: 'backend',
-        img: back,
-        header: '# Популярный стек',
-        tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
-      },
-      {
-        name: 'design',
-        img: design,
-        header: '# Популярный стек',
-        tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw', 'KompoZer'],
-      },
-    ];
-
-    setData(tags);
-  }, []);
-
   const handleBlockClick = (item) => {
     if (!selectedItems.find((el) => item === el.value)) {
       setSelectedItems([...selectedItems, { value: item, label: item }]);
@@ -67,32 +38,35 @@ const Outstaffing = ({ onhandleTabBar }) => {
           </div>
 
           <div className="row">
-            <div className="col-4">
+            <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={data.find((item) => item.name === 'frontend')}
+                data={tabs.find((item) => item.name === 'Frontend')}
                 onClick={(item) => handleBlockClick(item)}
-                onClickhandleTabBar={(name) => onhandleTabBar(name)}
+                onTabBarClick={(name) => onhandleTabBar(name)}
+                selected={selected === 'Frontend'}
               />
             </div>
-            <div className="col-4">
+            <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={data.find((item) => item.name === 'backend')}
+                data={tabs.find((item) => item.name === 'Backend')}
                 onClick={(item) => handleBlockClick(item)}
-                onClickhandleTabBar={(name) => onhandleTabBar(name)}
+                onTabBarClick={(name) => onhandleTabBar(name)}
+                selected={selected === 'Backend'}
               />
             </div>
-            <div className="col-4">
+            <div className="col-12 col-xl-4">
               <OutstaffingBlock
-                data={data.find((item) => item.name === 'design')}
+                data={tabs.find((item) => item.name === 'Design')}
                 onClick={(item) => handleBlockClick(item)}
-                onClickhandleTabBar={(name) => onhandleTabBar(name)}
+                onTabBarClick={(name) => onhandleTabBar(name)}
+                selected={selected === 'Design'}
               />
             </div>
           </div>
         </div>
       </section>
       <TagSelect
-        options={data}
+        options={tabs}
         selectedItems={selectedItems}
         tagSubmit={handleSubmit}
         setSelectedItems={setSelectedItems}

src/components/Outstaffing/Outstaffing.module.css

@@ -1,8 +1,7 @@
-
-  .outstaffing__title {
+.outstaffing__title {
   margin-top: 60px;
-    }
-    .outstaffing__title > h2 {
+}
+.outstaffing__title > h2 {
   text-align: center;
   color: #52b709;
   font-family: 'GT Eesti Pro Display';
@@ -11,27 +10,74 @@
   font-style: normal;
   letter-spacing: normal;
   line-height: 77.81px;
+}
+
+@media (max-width: 375.98px) {
+  .outstaffing__title > h2 {
+    font-size: 4.5em;
+    line-height: normal;
   }
-      .outstaffing__title > h2 > span {
-        color: #282828 ;
-        font-style: normal ;
-        letter-spacing: 0.56px ;
-        line-height: normal ;
+}
+
+@media (min-width: 376px) {
+  .outstaffing__title > h2 {
+    font-size: 5em;
+    line-height: normal;
   }
-      .outstaffing__box {
+}
+
+.outstaffing__title > h2 > span {
+  color: #282828;
+  font-style: normal;
+  letter-spacing: 0.56px;
+  line-height: normal;
+}
+.outstaffing__box {
   margin-top: 120px;
   display: flex;
   flex-direction: column;
   align-items: center;
-      }
+}
 
-  .outstaffing__box > img {
-    max-width: 240px;
+@media (max-width: 575.98px) {
+  .outstaffing__box {
+    margin-top: 40px;
+  }
+}
+
+.outstaffing__box__img {
+  min-width: 260px;
   min-height: 120px;
   cursor: pointer;
-  }
+  /* border: 2px solid #cdeaba; */
+  background-color: #f9f9f9;
+  border-radius: 20px;
+  position: relative;
+}
 
-  .outstaffing__box > p{
+.outstaffing__box__img > h3 {
+  position: absolute;
+  right: 25%;
+  top: 40%;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 18px;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: left;
+}
+
+.outstaffing__box__img > img {
+  cursor: pointer;
+  position: absolute;
+}
+
+.outstaffing__box > div {
+  margin-top: 60px;
+}
+
+.outstaffing__box > p {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.2em;
   font-weight: 300;
@@ -39,20 +85,32 @@
   letter-spacing: normal;
   line-height: 36px;
   text-align: left;
-    margin-top: 60px;
   margin-bottom: 0;
-    /* margin-left: 40px; */
-  }
+}
 
-  .outstaffing__box > ul{
+.front {
+  left: -5%;
+}
+
+.back {
+  top: 11%;
+  left: -9%;
+}
+
+.des {
+  top: 24%;
+  left: -9%;
+}
+
+.outstaffing__box > div > ul {
   padding-left: 0;
+}
 
-  }
+.border {
+  border: 2px solid #cdeaba;
+}
 
-
- 
-
-  .items > li {
+.items > li {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.8em;
   font-weight: 100;
@@ -63,4 +121,3 @@
   list-style: none;
   cursor: pointer;
 }
-

src/components/Outstaffing/OutstaffingBlock.js

@@ -1,12 +1,29 @@
 import React from 'react';
 import style from './Outstaffing.module.css';
 
-const OutstaffingBlock = ({ data = {}, onClick, onClickhandleTabBar }) => {
-  const { img, header, tags, name } = data;
+const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
+  const { img, text, tags, name, header } = data;
+  let clas;
+
+  if (name === 'Backend') {
+    clas = style.back;
+  } else if (name === 'Design') {
+    clas = style.des;
+  } else if (name === 'Frontend') {
+    clas = style.front;
+  }
+
   return (
     <div className={style.outstaffing__box}>
-      <img onClick={() => onClickhandleTabBar(name)} src={img} alt="img" />
-      <p>{header}</p>
+      <div
+        className={`${style.outstaffing__box__img} ${selected ? style.border : null}`}
+        onClick={() => onTabBarClick(name)}
+      >
+        <h3>{header}</h3>
+        <img className={clas} src={img} alt="img" />
+      </div>
+      <div>
+        <p>{text}</p>
         {tags && (
           <ul className={style.items}>
             {tags.map((item) => (
@@ -17,6 +34,7 @@ const OutstaffingBlock = ({ data = {}, onClick, onClickhandleTabBar }) => {
           </ul>
         )}
       </div>
+    </div>
   );
 };
 

src/components/Select/TagSelect.module.css

@@ -1,7 +1,7 @@
 .search {
   margin-top: 73px;
 }
-  .search__title {
+.search__title {
   font-family: 'GT Eesti Pro Display';
   font-size: 2.4em;
   font-weight: 500;
@@ -10,28 +10,38 @@
   line-height: normal;
   text-align: center;
   margin-bottom: 40px;
-  }
+}
 
-  .search__box {
+.search__box {
   display: flex;
   justify-content: space-between;
-  }
+}
 
-  .search__box > button {
+@media (max-width: 575.98px) {
+  .search__box {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.search__box > button {
   color: white;
   width: 131px;
   height: 40px;
   border-radius: 10px;
   border: none;
-    font-family: 'Muller Extra Bold';
-    font-size: 1.8em;
-    font-style: normal;
-    letter-spacing: normal;
+  font-family: 'Muller';
+  font-size: 1.6em;
+  letter-spacing: 0.8px;
   text-align: center;
   background-color: #73c141;
-    font-weight: 600;
-  }
+}
 
+@media (max-width: 575.98px) {
+  .search__box > button {
+    margin-top: 40px;
+  }
+}
 
 .select {
   width: 85%;

src/components/Sidebar/Sidebar.module.css

@@ -4,7 +4,8 @@
   align-items: center;
   border: 2px solid whitesmoke;
   border-bottom: none !important;
-
+  position: sticky;
+  top: 80px;
 }
 
 .candidateSidebar__info {
@@ -51,7 +52,6 @@
   text-align: center;
   margin-top: 20px;
   margin-bottom: 120px;
-  
 }
 
 .candidateSidebar__info__l {
@@ -68,10 +68,9 @@
   display: flex;
   align-items: center;
   margin-top: 20px;
-
 }
 
- .arrow__left {
+.arrow__left {
   position: relative;
   width: 30px;
   height: 30px;