Added page in free worker

src/App.js

@@ -1,6 +1,10 @@
-import React from 'react'
+import React from "react";
-import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom';
+import {
-
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Navigate,
+} from "react-router-dom";
 
 import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
 import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
@@ -8,80 +12,81 @@ import Home from "./pages/Home/Home";
 import Candidate from "./components/Candidate/Candidate";
 import Calendar from "./components/Calendar/Calendar";
 import ReportForm from "./components/ReportForm/ReportForm";
-import {ProfileCalendar} from "./components/ProfileCalendar/ProfileCalendar";
+import FreeDevelopers from "./components/UI/FreeDevelopers/FreeDevelopers";
-import FormPage from './pages/FormPage/FormPage.js'
+import { ProfileCalendar } from "./components/ProfileCalendar/ProfileCalendar";
-import SingleReportPage from './pages/SingleReportPage/SingleReportPage'
+import FormPage from "./pages/FormPage/FormPage.js";
-import {QuizPage} from './pages/quiz/QuizPage'
+import SingleReportPage from "./pages/SingleReportPage/SingleReportPage";
-import {InterjacentPage} from './pages/quiz/InterjacentPage'
+import { QuizPage } from "./pages/quiz/QuizPage";
-import {QuizTestPage} from './pages/quiz/QuizTestPage'
+import { InterjacentPage } from "./pages/quiz/InterjacentPage";
-import {InstructionPage} from './pages/quiz/InstructionPage'
+import { QuizTestPage } from "./pages/quiz/QuizTestPage";
-import {ResultPage} from './pages/quiz/ResultPage'
+import { InstructionPage } from "./pages/quiz/InstructionPage";
-import {Profile} from './pages/Profile/Profile.js'
+import { ResultPage } from "./pages/quiz/ResultPage";
-import {Summary} from './pages/Summary/Summary'
+import { Profile } from "./pages/Profile/Profile.js";
-import {ViewReport} from './pages/ViewReport/ViewReport'
+import { Summary } from "./pages/Summary/Summary";
-import {Tracker} from './pages/Tracker/Tracker'
+import { ViewReport } from "./pages/ViewReport/ViewReport";
-import {Payouts} from './pages/Payouts/Payouts'
+import { Tracker } from "./pages/Tracker/Tracker";
-import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings"
+import { Payouts } from "./pages/Payouts/Payouts";
-import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests'
+import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings";
-import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest'
+import { PartnerRequests } from "./pages/PartnerRequests/PartnerRequests";
-import {PartnerBid} from './pages/PartnerBid/PartnerBid'
+import { PartnerAddRequest } from "./pages/PartnerAddRequest/PartnerAddRequest";
-import {PartnerCategories} from "./pages/PartnerСategories/PartnerСategories";
+import { PartnerBid } from "./pages/PartnerBid/PartnerBid";
-import {PartnerTreaties} from "./pages/PartnerTreaties/PartnerTreaties";
+import { PartnerCategories } from "./pages/PartnerСategories/PartnerСategories";
-import {PartnerEmployees} from "./pages/PartnerEmployees/PartnerEmployees";
+import { PartnerTreaties } from "./pages/PartnerTreaties/PartnerTreaties";
-
+import { PartnerEmployees } from "./pages/PartnerEmployees/PartnerEmployees";
-import './fonts/stylesheet.css'
-import 'bootstrap/dist/css/bootstrap.min.css'
-
-
 
+import "./fonts/stylesheet.css";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 const App = () => {
   return (
-      <>
+    <>
-        <Router>
+      <Router>
+        <Routes>
+          <Route exact path="/authdev" element={<AuthForDevelopers />} />
+          <Route exact path="/auth" element={<AuthForPartners />} />
+          <Route exact path="/worker/:id" element={<FreeDevelopers />} />
 
-          <Routes>
+          <Route exact path="/candidate/:id" element={<Candidate />} />
+          <Route exact path="/candidate/:id/form" element={<FormPage />} />
+          <Route path="/:userId/calendar" element={<Calendar />} />
 
-            <Route exact path='/authdev' element={<AuthForDevelopers/>}/>
+          <Route exact path="/report" element={<ReportForm />} />
-            <Route exact path='/auth' element={<AuthForPartners/>}/>
+          <Route path="/report/:id" element={<SingleReportPage />} />
 
-            <Route exact path='/candidate/:id' element={<Candidate/>}/>
+          <Route exact path="quiz">
-            <Route exact path='/candidate/:id/form' element={<FormPage/>}/>
+            <Route index element={<QuizPage />} />
-            <Route path='/:userId/calendar' element={<Calendar/>}/>
+            <Route exact path="interjacent" element={<InterjacentPage />} />
+            <Route exact path="test" element={<QuizTestPage />} />
+            <Route exact path="instruction" element={<InstructionPage />} />
+            <Route exact path="result" element={<ResultPage />} />
+          </Route>
 
-            <Route exact path='/report' element={<ReportForm/>}/>
+          <Route exact path="profile">
-            <Route path='/report/:id' element={<SingleReportPage/>}/>
+            <Route index element={<Profile />} />
+            <Route exact path="catalog" element={<Home />} />
+            <Route exact path="calendar" element={<ProfileCalendar />} />
+            <Route exact path="summary" element={<Summary />} />
+            <Route exact path="view" element={<ViewReport />} />
+            <Route exact path="tracker" element={<Tracker />} />
+            <Route exact path="payouts" element={<Payouts />} />
+            <Route exact path="settings" element={<PartnerSettings />} />
+            <Route exact path="requests" element={<PartnerRequests />} />
+            <Route exact path="add-request" element={<PartnerAddRequest />} />
+            <Route exact path="bid" element={<PartnerBid />} />
+            <Route exact path="categories" element={<PartnerCategories />} />
+            <Route exact path="treaties" element={<PartnerTreaties />} />
+            <Route
+              exact
+              path="categories/employees"
+              element={<PartnerEmployees />}
+            />
+          </Route>
 
-            <Route exact path='quiz'>
+          <Route path="*" element={<Navigate to="/profile" replace />} />
-              <Route index element={<QuizPage/>}/>
+        </Routes>
-              <Route exact path='interjacent' element={<InterjacentPage/>}/>
+      </Router>
-              <Route exact path='test' element={<QuizTestPage/>}/>
+    </>
-              <Route exact path='instruction' element={<InstructionPage/>}/>
+  );
-              <Route exact path='result' element={<ResultPage/>}/>
-            </Route>
-
-            <Route exact path='profile'>
-              <Route index element={<Profile/>}/>
-              <Route exact path='catalog' element={<Home/>}/>
-              <Route exact path='calendar' element={<ProfileCalendar/>}/>
-              <Route exact path='summary' element={<Summary/>}/>
-              <Route exact path='view' element={<ViewReport/>}/>
-              <Route exact path='tracker' element={<Tracker/>}/>
-              <Route exact path='payouts' element={<Payouts/>}/>
-              <Route exact path='settings' element={<PartnerSettings/>}/>
-              <Route exact path='requests' element={<PartnerRequests/>}/>
-              <Route exact path='add-request' element={<PartnerAddRequest/>}/>
-              <Route exact path='bid' element={<PartnerBid/>}/>
-              <Route exact path='categories' element={<PartnerCategories/>}/>
-              <Route exact path='treaties' element={<PartnerTreaties/>}/>
-              <Route exact path='categories/employees' element={<PartnerEmployees/>}/>
-            </Route>
-
-            <Route path="*" element={<Navigate to="/profile" replace/>}/>
-          </Routes>
-        </Router>
-      </>
-  )
 };
 
-export default App
+export default App;

src/components/SliderWorkers/SliderWorkers.js

@@ -6,8 +6,9 @@ import mockWorker from "../../images/mokPerson.png";
 import "./sliderWorkers.scss";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import { Link } from "react-router-dom";
 
-export const SliderWorkers = ({title, titleInfo, subTitle}) => {
+export const SliderWorkers = ({ title, titleInfo, subTitle }) => {
   const [workers] = useState([
     {
       avatar: mockWorker,
@@ -15,7 +16,11 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {
     },
     {
       avatar: mockWorker,
-      skils: "React / Vue Front end, Middle разработчик",
+      skils: "Vue / React Front end, Senior разработчик",
+    },
+    {
+      avatar: mockWorker,
+      skils: "NodeJs  Fullstack, Middle разработчик",
     },
     {
       avatar: mockWorker,
@@ -23,11 +28,7 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {
     },
     {
       avatar: mockWorker,
-      skils: "React / Vue Front end, Middle разработчик",
+      skils: "React / PHP Fullstack, Middle разработчик",
-    },
-    {
-      avatar: mockWorker,
-      skils: "React / Vue Front end, Middle разработчик",
     },
   ]);
 
@@ -49,13 +50,14 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {
   return (
     <div className="slider-workers">
       <div className="container">
-        {Boolean(title) ?
+        {Boolean(title) ? (
           <div className="slider-workers__title">
             <h2>{title}</h2>
             <h3>{titleInfo}</h3>
           </div>
-            : ""
+        ) : (
-        }
+          ""
+        )}
         <Slider {...settings}>
           {workers.map((worker, index) => {
             return (
@@ -63,23 +65,26 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {
                 <img src={worker.avatar}></img>
                 <div className="worker-description">
                   <p>{worker.skils}</p>
-                  <button className="worker__resume">Подробное резюме</button>
+                  <Link to={`/worker/${index}`} className="worker__resume">
+                    Подробное резюме
+                  </Link>
                 </div>
               </div>
             );
           })}
         </Slider>
-        {Boolean(subTitle) ?
+        {Boolean(subTitle) ? (
           <div className="slider-workers__description">
             <h2>Дополните свою команду опытными ИТ-специалистами</h2>
             <p>
-              Даём финансовые, юридические и кадровые гарантии, предоставляем SLA
+              Даём финансовые, юридические и кадровые гарантии, предоставляем
-              и отвечаем за работу команды. Вам не нужно искать, оформлять или
+              SLA и отвечаем за работу команды. Вам не нужно искать, оформлять
-              увольнять сотрудника — все хлопоты мы берем на себя.
+              или увольнять сотрудника — все хлопоты мы берем на себя.
             </p>
           </div>
-            : ""
+        ) : (
-        }
+          ""
+        )}
       </div>
     </div>
   );

src/components/SliderWorkers/sliderWorkers.scss

@@ -59,6 +59,9 @@
     }
 
     &__resume {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       margin-top: 5px;
       width: 177px;
       height: 40px;
@@ -73,6 +76,7 @@
       &:hover {
         transition: 0.5s;
         background-color: #52b709a8;
+        text-decoration: none;
       }
     }
   }

src/components/UI/FreeDevelopers/FreeDevelopers.js

@@ -0,0 +1,78 @@
+import React from "react";
+
+import AuthHeader from "../../AuthHeader/AuthHeader";
+import SideBar from "../../SideBar/SideBar";
+import { Footer } from "../../Footer/Footer";
+import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
+
+import mockWorker from "../../../images/mokPerson.png";
+import arrow from "../../../images/arrow_left.png";
+
+import "./freeDevelopers.scss";
+import { Link } from "react-router-dom";
+
+export const FreeDevelopers = ({}) => {
+  return (
+    <section className="free-dev">
+      <AuthHeader />
+      <SideBar />
+      <div className="container free-dev_page">
+        <ProfileBreadcrumbs
+          links={[
+            { name: "Главная", link: "/auth" },
+            { name: "Свободные разработчики", link: "/worker" },
+          ]}
+        />
+
+        <h2>
+          Свободные разработчики <span>для Вашей команды</span>
+        </h2>
+
+        <Link to={"/auth"} className="link">
+          <img src={arrow}></img>Вернуться
+        </Link>
+
+        <div className="free-dev__title">
+          <div className="free-dev__title-box">
+            <img src={mockWorker}></img>
+            <div className="free-dev__title-name">
+              <h3>Дмитрий, PHP Back end - разработчик, Middle</h3>
+              <div></div>
+            </div>
+          </div>
+          <button>Код разработчика</button>
+        </div>
+
+        <div className="free-dev__body">
+          <div className="free-dev__body-title">
+            <p>Описание опыта работы</p>
+          </div>
+
+          <div className="free-dev__body-text">
+            <h5>
+              Godesigner - сервис для фриланс дизайнеров, копирайтеров и их
+              заказчиков
+            </h5>
+            <p>Стек – PHP (li3), HTML, CSS, JavaScript, MYSQL, Nginx.</p>
+            <ul>
+              <li> Расширение функционала старых модулей проекта</li>
+              <li>создание и проектирование новых модулей сайта</li>
+              <li>написание backend части проекта</li>
+              <li>усовершенствование и расширение функционала админ-панели</li>
+              <li>работа с визуальной составляющей</li>
+              <li>создание алгоритма рассылки писем по электронной почте</li>
+              <li>
+                использование API сторонних сервисов, мессенджеров (WhatsApp)
+              </li>
+            </ul>
+            <p>Время разработки: 2 года.</p>
+          </div>
+        </div>
+
+        <Footer />
+      </div>
+    </section>
+  );
+};
+
+export default FreeDevelopers;

src/components/UI/FreeDevelopers/freeDevelopers.scss

@@ -0,0 +1,104 @@
+.free-dev {
+  font-family: "LabGrotesque", sans-serif;
+  overflow: hidden;
+  position: relative;
+  background-color: #f1f1f1;
+
+  .link {
+    font-size: 12px;
+    line-height: 16px;
+    color: #5b6871;
+
+    img {
+      margin-right: 20px;
+    }
+  }
+
+  h2 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 30px;
+    line-height: 32px;
+    color: #000000;
+    margin: 32px 0 36px 0;
+
+    span {
+      color: #52b709;
+      font-size: 30px;
+    }
+  }
+
+  &_page {
+    margin: 24px 0 30px 0;
+  }
+
+  &__title {
+    background: #ffffff;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 63px 20px 45px;
+    margin: 40px 0 23px 0;
+
+    &-box {
+      display: flex;
+    }
+
+    &-name {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      margin-left: 47px;
+
+      div {
+        width: 239px;
+        height: 8px;
+        background: #52b709;
+        border-radius: 12px;
+      }
+    }
+
+    button {
+      background: #52b709;
+      border-radius: 44px;
+      width: 202px;
+      height: 50px;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 32px;
+      color: #ffffff;
+      border: none;
+    }
+  }
+
+  &__body {
+    background: #ffffff;
+    border-radius: 12px;
+    margin-bottom: 100px;
+
+    &-title {
+      background: #e1fccf;
+      border-radius: 12px 12px 0px 0px;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 32px;
+      color: #000000;
+      padding: 20px 0 17px 51px;
+    }
+
+    &-text {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 32px;
+      color: #000000;
+      padding: 26px 0 30px 52px;
+
+      h5 {
+        font-size: 16px;
+        margin-bottom: 30px;
+      }
+    }
+  }
+}

src/pages/AuthForDevelopers/AuthForDevelopers.js

@@ -41,7 +41,11 @@ const AuthForDevelopers = () => {
   return (
     <section className="auth-developers">
       <AuthHeader />
-      <SliderWorkers title={"Свободные разработчики"} titleInfo={"для Вашей команды"} subTitle={true} />
+      <SliderWorkers
+        title={"Свободные разработчики"}
+        titleInfo={"для Вашей команды"}
+        subTitle={true}
+      />
       <div className="auth-developers__background">
         <img className="auth-developers__vector" src={vector} alt="" />
         <img