Added page in free worker
This commit is contained in:
MaxOvs19
parent
8bd7bb7535
commit
943bc1abea
113
src/App.js
113
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 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 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 "./fonts/stylesheet.css";
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<>
|
||||
<Router>
|
||||
|
||||
<Routes>
|
||||
<Route exact path="/authdev" element={<AuthForDevelopers />} />
|
||||
<Route exact path="/auth" element={<AuthForPartners />} />
|
||||
<Route exact path="/worker/:id" element={<FreeDevelopers />} />
|
||||
|
||||
<Route exact path='/authdev' element={<AuthForDevelopers/>}/>
|
||||
<Route exact path='/auth' element={<AuthForPartners/>}/>
|
||||
<Route exact path="/candidate/:id" element={<Candidate />} />
|
||||
<Route exact path="/candidate/:id/form" element={<FormPage />} />
|
||||
<Route path="/:userId/calendar" element={<Calendar />} />
|
||||
|
||||
<Route exact path='/candidate/:id' element={<Candidate/>}/>
|
||||
<Route exact path='/candidate/:id/form' element={<FormPage/>}/>
|
||||
<Route path='/:userId/calendar' element={<Calendar/>}/>
|
||||
<Route exact path="/report" element={<ReportForm />} />
|
||||
<Route path="/report/:id" element={<SingleReportPage />} />
|
||||
|
||||
<Route exact path='/report' element={<ReportForm/>}/>
|
||||
<Route path='/report/:id' element={<SingleReportPage/>}/>
|
||||
|
||||
<Route exact path='quiz'>
|
||||
<Route exact path="quiz">
|
||||
<Route index element={<QuizPage />} />
|
||||
<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 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='profile'>
|
||||
<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 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;
|
||||
|
||||
@ -6,6 +6,7 @@ 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 }) => {
|
||||
const [workers] = useState([
|
||||
@ -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 (
|
||||
<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>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
78
src/components/UI/FreeDevelopers/FreeDevelopers.js
Normal file
78
src/components/UI/FreeDevelopers/FreeDevelopers.js
Normal file
@ -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;
|
||||
104
src/components/UI/FreeDevelopers/freeDevelopers.scss
Normal file
104
src/components/UI/FreeDevelopers/freeDevelopers.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user