apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed select component

Browse Source
This commit is contained in:
Hope87
2021-05-31 18:23:25 +03:00
parent 844cc7f9df
commit af21ce3693
47 changed files with 598 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.css
View File

@ -0,0 +1 @@

25
src/App.js
View File

@ -1,4 +1,4 @@
import React, { useState, Suspense, lazy } from 'react';
import React, { useState, useEffect, 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';
@ -10,17 +10,32 @@ const CandidatePage = lazy(() => import('./pages/CandidatePage'));
const App = () => {
const [isAuth, setIsAuth] = useState(false);
useEffect(() => {
const auth = localStorage.getItem('auth');
if (auth === 'true') {
setIsAuth(true);
}
}, []);
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
{isAuth ? (
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/candidate/:id" component={CandidatePage} />
<Route component={<div>Not found page</div>} />
<Route path="/" exact>
<HomePage />
</Route>
<Route path="/candidate/:id">
<CandidatePage />
</Route>
<Route>
<div>Not found page</div>
</Route>
</Switch>
) : (
<Route path="/" exact component={(props) => <AuthPage {...props} setAuth={setIsAuth} />} />
<Route path="/" exact>
<AuthPage setAuth={setIsAuth} />
</Route>
)}
</Suspense>
</Router>

10
src/components/Auth/Auth.js
View File

@ -1,12 +1,18 @@
import React from 'react';
import style from './Auth.module.scss';
import style from './Auth.module.css';
const Auth = ({ setAuthed }) => {
return (
<div className={style.auth}>
<div className={style.auth__container}>
<img src="https://www.google.com/gmail/about/static/images/logo-gmail.png?cache=1adba63" alt="" />
<button className={style.auth__btn} onClick={() => setAuthed(true)}>
<button
className={style.auth__btn}
onClick={() => {
setAuthed(true);
// localStorage.setItem('auth', 'true');
}}
>
Log in
</button>
</div>

26
src/components/Auth/Auth.module.css Normal file
View File

@ -0,0 +1,26 @@
.auth {
display: grid;
place-items: center;
height: 100vh;
background-color: #f2f2f2;
}
.auth__container {
display: flex;
flex-direction: column;
}
.auth__container > img {
object-fit: contain;
height: 200px;
}
.auth__btn {
width: 180px;
height: 40px;
border: 2px solid gray;
border-radius: 100px;
font-size: 1.6em;
margin: 0 auto;
}

25
src/components/Auth/Auth.module.scss
View File

@ -1,25 +0,0 @@
.auth {
display: grid;
place-items: center;
height: 100vh;
background-color: #f2f2f2;
&__container {
display: flex;
flex-direction: column;
}
&__container > img {
object-fit: contain;
height: 200px;
}
&__btn {
width: 180px;
height: 40px;
border: 2px solid gray;
border-radius: 100px;
font-size: 1.6em;
margin: 0 auto;
}
}

19
src/components/Blocks/OutstaffingBlock.jsx Normal file
View File

@ -0,0 +1,19 @@
import style from '../../components/Home/sections/Outstaffing.module.css';
const OutstaffingBlock = ({ header , image, data }) => {
return (
<div className="col-4">
<div className={style.outstaffing__box}>
<img src={image} alt={header} />
<p>{header}</p>
<ul className={style.items}>
{data.map((item, index) => (
<li key={index.toString()} onClick={() => console.log(item, index)}>{index + 1} {item}</li>
))}
</ul>
</div>
</div>
);
};
export default OutstaffingBlock

5
src/components/Candidate/Candidate.js
View File

@ -1,12 +1,11 @@
import React from 'react';
import { useHistory, useParams } from 'react-router-dom';
import style from './Candidate.module.scss';
import style from './Candidate.module.css';
import { candidatesList } from '../Home/Home';
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';
@ -24,7 +23,7 @@ const Candidate = () => {
const { name } = currentCandidate;
return (
<section className={classes.candidate}>
<section className={style.candidate}>
<div className="container">
<div className="row">
<div className="col-12">

77
src/components/Candidate/Candidate.module.scss → src/components/Candidate/Candidate.module.css
View File

@ -1,4 +1,4 @@
.candidate {
/* .candidate {
&__title {
margin-top: 60px;
& h2 {
@ -70,4 +70,79 @@
}
}
}
} */
.candidate__title {
margin-top: 60px;
}
.candidate__title > h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display';
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
}
.candidate__title > h2 > span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
.candidate__header {
display: flex;
align-items: center;
margin-top: 120px;
margin-left: 60px;
}
.arrow > img {
cursor: pointer;
}
.arrow > 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;
}
.candidate__main {
margin-top: 60px;
}
.candidate__main__description {
padding-left: 16px;
}
.candidate__main__description > 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;
}
.candidate__main__description > 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;
}

2
src/components/Candidate/index.js
View File

@ -1,3 +1,3 @@
import Candidate from './Candidate';
export default Candidate;
export default Candidate;

2
src/components/Candidate/sections/SectionFive.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionFive.module.scss';
import style from './SectionFive.module.css';
const SectionFive = () => {
return (

9
src/components/Candidate/sections/SectionFive.module.css Normal file
View File

@ -0,0 +1,9 @@
.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;
}

11
src/components/Candidate/sections/SectionFive.module.scss
View File

@ -1,11 +0,0 @@
.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;
}
}

2
src/components/Candidate/sections/SectionFour.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionFour.module.scss';
import style from './SectionFour.module.css';
const SectionFour = () => {
return (

9
src/components/Candidate/sections/SectionFour.module.css Normal file
View File

@ -0,0 +1,9 @@
.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;
}

11
src/components/Candidate/sections/SectionFour.module.scss
View File

@ -1,11 +0,0 @@
.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;
}
}

2
src/components/Candidate/sections/SectionOne.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionOne.module.scss';
import style from './SectionOne.module.css';
const SectionOne = () => {
return (

10
src/components/Candidate/sections/SectionOne.module.scss → src/components/Candidate/sections/SectionOne.module.css
View File

@ -1,5 +1,5 @@
.SectionOne {
& h3 {
.SectionOne > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 400;
@ -9,7 +9,7 @@
text-align: left;
}
& p {
.SectionOne > p {
font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em;
font-weight: 400;
@ -20,7 +20,7 @@
color: #444444;
}
& h4 {
.SectionOne > h4 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
@ -29,4 +29,4 @@
line-height: 36px;
text-align: left;
}
}

2
src/components/Candidate/sections/SectionSkills.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionSkills.module.scss';
import style from './SectionSkills.module.css';
const SectionSkills = () => {
return (

29
src/components/Candidate/sections/SectionSkills.module.css Normal file
View File

@ -0,0 +1,29 @@
.SectionSkills {
border: 1px solid #69bf2c;
padding: 28px 40px 16px 30px;
margin-top: 60px;
border-radius: 10px;
margin-bottom: 60px;
}
.SectionSkills > 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;
}
.SectionSkills > 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;
}

27
src/components/Candidate/sections/SectionSkills.module.scss
View File

@ -1,27 +0,0 @@
.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;
}
}

2
src/components/Candidate/sections/SectionThree.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionThree.module.scss';
import style from './SectionThree.module.css';
const SectionThree = () => {
return (

10
src/components/Candidate/sections/SectionThree.module.scss → src/components/Candidate/sections/SectionThree.module.css
View File

@ -1,5 +1,5 @@
.SectionThree {
& h3 {
.SectionThree > h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 400;
@ -9,7 +9,7 @@
text-align: left;
}
& p {
.SectionThree > p {
font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em;
font-weight: 400;
@ -20,7 +20,7 @@
color: #444444;
}
& h4 {
.SectionThree > h4 {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 700;
@ -29,4 +29,4 @@
line-height: 36px;
text-align: left;
}
}

2
src/components/Candidate/sections/SectionTwo.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './SectionTwo.module.scss';
import style from './SectionTwo.module.css';
const SectionTwo = () => {
return (

6
src/components/Candidate/sections/SectionTwo.module.scss → src/components/Candidate/sections/SectionTwo.module.css
View File

@ -1,5 +1,5 @@
.SectionTwo {
& p {
.SectionTwo > p {
font-family: 'GT Eesti Pro Display';
font-size: 1.8em;
font-weight: 400;
@ -9,4 +9,4 @@
text-align: left;
color: #444444;
}
}

2
src/components/Candidate/sections/Sidebar.js
View File

@ -2,7 +2,7 @@ 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';
import style from './Sidebar.module.css';
const Sidebar = () => {
return (

113
src/components/Candidate/sections/Sidebar.module.css Normal file
View File

@ -0,0 +1,113 @@
.candidateSidebar {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid whitesmoke;
border-bottom: none !important;
}
.candidateSidebar__info {
text-align: center;
margin-top: 40px;
}
.candidateSidebar__info > img {
width: 180px;
height: 180px;
}
.candidateSidebar__info__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;
}
.candidateSidebar__info__y {
font-family: 'GT Eesti Pro Display - Bold';
font-size: 3em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: normal;
}
.candidateSidebar__info__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;
}
.candidateSidebar__info__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;
}
.candidateSidebar__arrows {
display: flex;
align-items: center;
margin-top: 20px;
}
.arrow__left {
position: relative;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #f6f6f6;
}
.arrow__left > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.arrows__sp {
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;
}
.arrow__right > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

108
src/components/Candidate/sections/Sidebar.module.scss
View File

@ -1,108 +0,0 @@
.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%);
}
}
}
}

2
src/components/Home/index.js
View File

@ -1,3 +1,3 @@
import Home from './Home';
export default Home;
export default Home;

2
src/components/Home/sections/Description.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import style from './Description.module.scss';
import style from './Description.module.css';
import photo from '../../../images/medium_male.png';
import rectangle from '../../../images/rectangle_secondPage.png';
import arrowLeft from '../../../images/arrow_left.png';

134
src/components/Home/sections/Description.module.css Normal file
View File

@ -0,0 +1,134 @@
.description {
margin-top: 120px;
margin-bottom: 120px;
}
.description__wrapper {
border: 2px solid whitesmoke;
padding-top: 60px;
border-bottom: none;
}
.description__img {
margin-left: 40px;
margin-top: 16px;
}
.description__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;
}
.description__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;
}
.description__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;
}
.description__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;
}
.description__rectangle {
display: block;
margin: 60px auto;
}
.description__footer {
display: flex;
justify-content: center;
margin-top: 60px;
}
.description__footer__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: 1.8em;
font-weight: 600;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
}
.description__footer__box {
display: flex;
align-items: center;
}
.description__footer__sp {
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__left {
position: relative;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #f6f6f6;
}
.arrow__left > 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;
}
.arrow__right > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

125
src/components/Home/sections/Description.module.scss
View File

@ -1,125 +0,0 @@
.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: 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;
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;
}
}
&__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;
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%);
}
}
}
}
}

64
src/components/Home/sections/Outstaffing.js
View File

@ -1,10 +1,18 @@
import React from 'react';
import style from './Outstaffing.module.scss';
import React, { useState, useEffect } 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 '../../Blocks/OutstaffingBlock';
const Outstaffing = () => {
const [data, setData] = useState([]);
useEffect(() => {
const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Git', 'Typescript', 'ReactJS'];
setData(tempData);
}, []);
return (
<section className={style.outstaffing}>
<div className="container">
@ -19,55 +27,9 @@ const Outstaffing = () => {
</div>
<div className="row">
<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>
<li>Docker</li>
<li>PostgreSQL</li>
<li>Git</li>
<li>Typescript</li>
<li>ReactJS</li>
</ul>
</div>
</div>
<div className="col-4">
<div className={style.outstaffing__box}>
<img src={back} alt="" />
<p># Популярный стек</p>
<ul className={style.items}>
<li>Ruby on Rails</li>
<li>Nginx</li>
<li>Docker</li>
<li>PostgreSQL</li>
<li>Git</li>
<li>Typescript</li>
<li>ReactJS</li>
</ul>
</div>
</div>
<div className="col-4">
<div className={style.outstaffing__box}>
<img src={design} alt="" />
<p># Популярный стек</p>
<ul className={style.items}>
<li>Ruby on Rails</li>
<li>Nginx</li>
<li>Docker</li>
<li>PostgreSQL</li>
<li>Git</li>
<li>Typescript</li>
<li>ReactJS</li>
</ul>
</div>
</div>
<OutstaffingBlock image={front} data={data} header={'# Популярный стек'} />
<OutstaffingBlock image={back} data={data} header={'# Популярный стек'} />
<OutstaffingBlock image={design} data={data} header={'# Популярный стек'} />
</div>
</div>
</section>

55
src/components/Home/sections/Outstaffing.module.css Normal file
View File

@ -0,0 +1,55 @@
.outstaffing__title {
margin-top: 60px;
}
.outstaffing__title > h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display';
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
}
.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;
max-height: 120px;
}
.outstaffing__box > 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: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
list-style: none;
}

55
src/components/Home/sections/Outstaffing.module.scss
View File

@ -1,55 +0,0 @@
.outstaffing {
&__title {
margin-top: 60px;
& h2 {
text-align: center;
color: #52b709;
font-family: 'GT Eesti Pro Display';
font-size: 5em;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 77.81px;
& span {
color: #282828;
font-style: normal;
letter-spacing: 0.56px;
line-height: normal;
}
}
}
&__box {
margin-top: 120px;
display: flex;
flex-direction: column;
align-items: center;
& img {
max-width: 240px;
max-height: 120px;
}
& 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: 1.8em;
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 36px;
text-align: left;
list-style: none;
}
}
}
}

4
src/components/Select/Select.js
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Select from 'react-select';
import style from './Select.module.scss';
import style from './Select.module.css';
const options = [
{ value: 'Ruby on Rails', label: 'Ruby on Rails' },
@ -35,7 +35,7 @@ const TagSelect = () => {
<div className="container">
<div className="row">
<div className="col-12">
<h2>Найти специалиста по навыкам</h2>
<h2 className={style.search__title}>Найти специалиста по навыкам</h2>
<div className={style.search__box}>
<Select
value={items}

45
src/components/Select/Select.module.scss → src/components/Select/Select.module.css
View File

@ -1,6 +1,7 @@
.search {
margin-top: 40px;
& h2 {
}
.search__title {
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 700;
@ -11,12 +12,12 @@
margin-bottom: 40px;
}
&__box {
.search__box {
display: flex;
justify-content: space-between;
}
& button {
.search__box > button {
width: 131px;
height: 40px;
border-radius: 10px;
@ -29,26 +30,26 @@
letter-spacing: normal;
text-align: center;
}
}
.select {
width: 85%;
[class$='-placeholder'] {
display: none;
}
[class$='-control'] {
border-color: #e8e8e8 !important;
box-shadow: 0 0 0 1px #e8e8e8;
}
[class$='-value'] {
font-size: 1.6em;
}
[class$='-option'] {
font-size: 1.6em;
color: gray;
}
}
[class$='-placeholder'] {
display: none;
}
[class$='-control'] {
border-color: #e8e8e8 !important;
box-shadow: 0 0 0 1px #e8e8e8 !important;
}
[class$='-value__label'] {
font-size: 1.4em !important;
}
[class$='-option'] {
font-size: 1.6em !important;
color: gray !important;
}

7
src/index.js
View File

@ -4,9 +4,4 @@ import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
ReactDOM.render(<App />, document.getElementById('root'));

6
src/pages/CandidatePage.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import Candidate from '../components/Candidate'
import Candidate from '../components/Candidate';
const CandidatePage = () => <Candidate />
const CandidatePage = () => <Candidate />;
export default CandidatePage;
export default CandidatePage;

6
src/pages/HomePage.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import Home from '../components/Home'
import Home from '../components/Home';
const HomePage = () => <Home />
const HomePage = () => <Home />;
export default HomePage;
export default HomePage;