From 943bc1abeacbe4eb3e8715dd9b44ca0d0e504425 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Fri, 7 Apr 2023 21:49:09 +0300 Subject: [PATCH] Added page in free worker --- src/App.js | 143 +++++++++--------- src/components/SliderWorkers/SliderWorkers.js | 39 ++--- .../SliderWorkers/sliderWorkers.scss | 4 + .../UI/FreeDevelopers/FreeDevelopers.js | 78 ++++++++++ .../UI/FreeDevelopers/freeDevelopers.scss | 104 +++++++++++++ .../AuthForDevelopers/AuthForDevelopers.js | 6 +- 6 files changed, 287 insertions(+), 87 deletions(-) create mode 100644 src/components/UI/FreeDevelopers/FreeDevelopers.js create mode 100644 src/components/UI/FreeDevelopers/freeDevelopers.scss diff --git a/src/App.js b/src/App.js index 3e807c38..cdda277c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,10 @@ -import React from 'react' -import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom'; - +import React from "react"; +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 FormPage from './pages/FormPage/FormPage.js' -import SingleReportPage from './pages/SingleReportPage/SingleReportPage' -import {QuizPage} from './pages/quiz/QuizPage' -import {InterjacentPage} from './pages/quiz/InterjacentPage' -import {QuizTestPage} from './pages/quiz/QuizTestPage' -import {InstructionPage} from './pages/quiz/InstructionPage' -import {ResultPage} from './pages/quiz/ResultPage' -import {Profile} from './pages/Profile/Profile.js' -import {Summary} from './pages/Summary/Summary' -import {ViewReport} from './pages/ViewReport/ViewReport' -import {Tracker} from './pages/Tracker/Tracker' -import {Payouts} from './pages/Payouts/Payouts' -import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings" -import {PartnerRequests} from './pages/PartnerRequests/PartnerRequests' -import {PartnerAddRequest} from './pages/PartnerAddRequest/PartnerAddRequest' -import {PartnerBid} from './pages/PartnerBid/PartnerBid' -import {PartnerCategories} from "./pages/PartnerСategories/PartnerСategories"; -import {PartnerTreaties} from "./pages/PartnerTreaties/PartnerTreaties"; -import {PartnerEmployees} from "./pages/PartnerEmployees/PartnerEmployees"; - -import './fonts/stylesheet.css' -import 'bootstrap/dist/css/bootstrap.min.css' - - +import FreeDevelopers from "./components/UI/FreeDevelopers/FreeDevelopers"; +import { ProfileCalendar } from "./components/ProfileCalendar/ProfileCalendar"; +import FormPage from "./pages/FormPage/FormPage.js"; +import SingleReportPage from "./pages/SingleReportPage/SingleReportPage"; +import { QuizPage } from "./pages/quiz/QuizPage"; +import { InterjacentPage } from "./pages/quiz/InterjacentPage"; +import { QuizTestPage } from "./pages/quiz/QuizTestPage"; +import { InstructionPage } from "./pages/quiz/InstructionPage"; +import { ResultPage } from "./pages/quiz/ResultPage"; +import { Profile } from "./pages/Profile/Profile.js"; +import { Summary } from "./pages/Summary/Summary"; +import { ViewReport } from "./pages/ViewReport/ViewReport"; +import { Tracker } from "./pages/Tracker/Tracker"; +import { Payouts } from "./pages/Payouts/Payouts"; +import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings"; +import { PartnerRequests } from "./pages/PartnerRequests/PartnerRequests"; +import { PartnerAddRequest } from "./pages/PartnerAddRequest/PartnerAddRequest"; +import { PartnerBid } from "./pages/PartnerBid/PartnerBid"; +import { PartnerCategories } from "./pages/PartnerСategories/PartnerСategories"; +import { PartnerTreaties } from "./pages/PartnerTreaties/PartnerTreaties"; +import { PartnerEmployees } from "./pages/PartnerEmployees/PartnerEmployees"; +import "./fonts/stylesheet.css"; +import "bootstrap/dist/css/bootstrap.min.css"; const App = () => { return ( - <> - + <> + + + } /> + } /> + } /> - + } /> + } /> + } /> - }/> - }/> + } /> + } /> - }/> - }/> - }/> + + } /> + } /> + } /> + } /> + } /> + - }/> - }/> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } + /> + - - }/> - }/> - }/> - }/> - }/> - - - - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - }/> - - - }/> - - - - ) + } /> + + + + ); }; -export default App +export default App; diff --git a/src/components/SliderWorkers/SliderWorkers.js b/src/components/SliderWorkers/SliderWorkers.js index a994609f..28f3f155 100644 --- a/src/components/SliderWorkers/SliderWorkers.js +++ b/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 разработчик", - }, - { - avatar: mockWorker, - skils: "React / Vue Front end, Middle разработчик", + skils: "React / PHP Fullstack, Middle разработчик", }, ]); @@ -49,13 +50,14 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => { return (
- {Boolean(title) ? + {Boolean(title) ? (

{title}

{titleInfo}

- : "" - } + ) : ( + "" + )} {workers.map((worker, index) => { return ( @@ -63,23 +65,26 @@ export const SliderWorkers = ({title, titleInfo, subTitle}) => {

{worker.skils}

- + + Подробное резюме +
); })} - {Boolean(subTitle) ? + {Boolean(subTitle) ? (

Дополните свою команду опытными ИТ-специалистами

- Даём финансовые, юридические и кадровые гарантии, предоставляем SLA - и отвечаем за работу команды. Вам не нужно искать, оформлять или - увольнять сотрудника — все хлопоты мы берем на себя. + Даём финансовые, юридические и кадровые гарантии, предоставляем + SLA и отвечаем за работу команды. Вам не нужно искать, оформлять + или увольнять сотрудника — все хлопоты мы берем на себя.

- : "" - } + ) : ( + "" + )}
); diff --git a/src/components/SliderWorkers/sliderWorkers.scss b/src/components/SliderWorkers/sliderWorkers.scss index 55b9af26..42139c07 100644 --- a/src/components/SliderWorkers/sliderWorkers.scss +++ b/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; } } } diff --git a/src/components/UI/FreeDevelopers/FreeDevelopers.js b/src/components/UI/FreeDevelopers/FreeDevelopers.js new file mode 100644 index 00000000..71ca8626 --- /dev/null +++ b/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 ( +
+ + +
+ + +

+ Свободные разработчики для Вашей команды +

+ + + Вернуться + + +
+
+ +
+

Дмитрий, PHP Back end - разработчик, Middle

+
+
+
+ +
+ +
+
+

Описание опыта работы

+
+ +
+
+ Godesigner - сервис для фриланс дизайнеров, копирайтеров и их + заказчиков +
+

Стек – PHP (li3), HTML, CSS, JavaScript, MYSQL, Nginx.

+
    +
  • Расширение функционала старых модулей проекта
    • +
  • создание и проектирование новых модулей сайта
    • +
  • написание backend части проекта
    • +
  • усовершенствование и расширение функционала админ-панели
    • +
  • работа с визуальной составляющей
    • +
  • создание алгоритма рассылки писем по электронной почте
    • +
  • + использование API сторонних сервисов, мессенджеров (WhatsApp) +
    • +
+

Время разработки: 2 года.

+
+
+ +
+
+
+ ); +}; + +export default FreeDevelopers; diff --git a/src/components/UI/FreeDevelopers/freeDevelopers.scss b/src/components/UI/FreeDevelopers/freeDevelopers.scss new file mode 100644 index 00000000..4a390ded --- /dev/null +++ b/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; + } + } + } +} diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js index eb1b027c..ba7e4d01 100644 --- a/src/pages/AuthForDevelopers/AuthForDevelopers.js +++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js @@ -41,7 +41,11 @@ const AuthForDevelopers = () => { return (
- +