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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
package-lock.json generated
View File

@ -12805,6 +12805,30 @@
"webpack-dev-server": "3.11.1", "webpack-dev-server": "3.11.1",
"webpack-manifest-plugin": "2.2.0", "webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "5.1.4" "workbox-webpack-plugin": "5.1.4"
},
"dependencies": {
"sass-loader": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz",
"integrity": "sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==",
"requires": {
"klona": "^2.0.4",
"loader-utils": "^2.0.0",
"neo-async": "^2.6.2",
"schema-utils": "^3.0.0",
"semver": "^7.3.2"
}
},
"schema-utils": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
"integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
"requires": {
"@types/json-schema": "^7.0.6",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
} }
}, },
"react-select": { "react-select": {
@ -13528,27 +13552,12 @@
} }
}, },
"sass-loader": { "sass-loader": {
"version": "10.2.0", "version": "11.1.1",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.2.0.tgz", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-11.1.1.tgz",
"integrity": "sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==", "integrity": "sha512-fOCp/zLmj1V1WHDZbUbPgrZhA7HKXHEqkslzB+05U5K9SbSbcmH91C7QLW31AsXikxUMaxXRhhcqWZAxUMLDyA==",
"requires": { "requires": {
"klona": "^2.0.4", "klona": "^2.0.4",
"loader-utils": "^2.0.0", "neo-async": "^2.6.2"
"neo-async": "^2.6.2",
"schema-utils": "^3.0.0",
"semver": "^7.3.2"
},
"dependencies": {
"schema-utils": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
"integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
"requires": {
"@types/json-schema": "^7.0.6",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
} }
}, },
"sax": { "sax": {

1
package.json
View File

@ -15,6 +15,7 @@
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-select": "^4.3.1", "react-select": "^4.3.1",
"sass": "^1.34.0", "sass": "^1.34.0",
"sass-loader": "^11.1.1",
"web-vitals": "^1.1.2" "web-vitals": "^1.1.2"
}, },
"scripts": { "scripts": {

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

24
public/index.html
View File

@ -2,42 +2,18 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

25
public/manifest.json
View File

@ -1,25 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
public/robots.txt
View File

@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

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

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

@ -1,12 +1,18 @@
import React from 'react'; import React from 'react';
import style from './Auth.module.scss'; import style from './Auth.module.css';
const Auth = ({ setAuthed }) => { const Auth = ({ setAuthed }) => {
return ( return (
<div className={style.auth}> <div className={style.auth}>
<div className={style.auth__container}> <div className={style.auth__container}>
<img src="https://www.google.com/gmail/about/static/images/logo-gmail.png?cache=1adba63" alt="" /> <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 Log in
</button> </button>
</div> </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 React from 'react';
import { useHistory, useParams } from 'react-router-dom'; 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 { candidatesList } from '../Home/Home';
import icon from '../../images/front_end.png'; import icon from '../../images/front_end.png';
import arrow from '../../images/right-arrow.png'; import arrow from '../../images/right-arrow.png';
import rectangle from '../../images/rectangle_secondPage.png'; import rectangle from '../../images/rectangle_secondPage.png';
import Sidebar from './sections/Sidebar'; import Sidebar from './sections/Sidebar';
import classes from './Candidate.module.scss';
import SectionOne from './sections/SectionOne'; import SectionOne from './sections/SectionOne';
import SectionTwo from './sections/SectionTwo'; import SectionTwo from './sections/SectionTwo';
import SectionThree from './sections/SectionThree'; import SectionThree from './sections/SectionThree';
@ -24,7 +23,7 @@ const Candidate = () => {
const { name } = currentCandidate; const { name } = currentCandidate;
return ( return (
<section className={classes.candidate}> <section className={style.candidate}>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-12"> <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 { &__title {
margin-top: 60px; margin-top: 60px;
& h2 { & 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'; 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 React from 'react';
import style from './SectionFive.module.scss'; import style from './SectionFive.module.css';
const SectionFive = () => { const SectionFive = () => {
return ( 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 React from 'react';
import style from './SectionFour.module.scss'; import style from './SectionFour.module.css';
const SectionFour = () => { const SectionFour = () => {
return ( 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 React from 'react';
import style from './SectionOne.module.scss'; import style from './SectionOne.module.css';
const SectionOne = () => { const SectionOne = () => {
return ( 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-family: 'GT Eesti Pro Display';
font-size: 2.2em; font-size: 2.2em;
font-weight: 400; font-weight: 400;
@ -9,7 +9,7 @@
text-align: left; text-align: left;
} }
& p { .SectionOne > p {
font-family: 'GT Eesti Pro Display - Thin'; font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em; font-size: 1.8em;
font-weight: 400; font-weight: 400;
@ -20,7 +20,7 @@
color: #444444; color: #444444;
} }
& h4 { .SectionOne > h4 {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 1.8em; font-size: 1.8em;
font-weight: 700; font-weight: 700;
@ -29,4 +29,4 @@
line-height: 36px; line-height: 36px;
text-align: left; text-align: left;
} }
}

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

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import style from './SectionSkills.module.scss'; import style from './SectionSkills.module.css';
const SectionSkills = () => { const SectionSkills = () => {
return ( 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 React from 'react';
import style from './SectionThree.module.scss'; import style from './SectionThree.module.css';
const SectionThree = () => { const SectionThree = () => {
return ( 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-family: 'GT Eesti Pro Display';
font-size: 2.2em; font-size: 2.2em;
font-weight: 400; font-weight: 400;
@ -9,7 +9,7 @@
text-align: left; text-align: left;
} }
& p { .SectionThree > p {
font-family: 'GT Eesti Pro Display - Thin'; font-family: 'GT Eesti Pro Display - Thin';
font-size: 1.8em; font-size: 1.8em;
font-weight: 400; font-weight: 400;
@ -20,7 +20,7 @@
color: #444444; color: #444444;
} }
& h4 { .SectionThree > h4 {
font-family: 'GT Eesti Pro Display'; font-family: 'GT Eesti Pro Display';
font-size: 1.8em; font-size: 1.8em;
font-weight: 700; font-weight: 700;
@ -29,4 +29,4 @@
line-height: 36px; line-height: 36px;
text-align: left; text-align: left;
} }
}

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

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import style from './SectionTwo.module.scss'; import style from './SectionTwo.module.css';
const SectionTwo = () => { const SectionTwo = () => {
return ( 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-family: 'GT Eesti Pro Display';
font-size: 1.8em; font-size: 1.8em;
font-weight: 400; font-weight: 400;
@ -9,4 +9,4 @@
text-align: left; text-align: left;
color: #444444; 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 male from '../../../images/medium_male.png';
import arrowLeft from '../../../images/arrow_left.png'; import arrowLeft from '../../../images/arrow_left.png';
import arrowRight from '../../../images/arrow_right.png'; import arrowRight from '../../../images/arrow_right.png';
import style from './Sidebar.module.scss'; import style from './Sidebar.module.css';
const Sidebar = () => { const Sidebar = () => {
return ( 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'; 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 React from 'react';
import style from './Description.module.scss'; import style from './Description.module.css';
import photo from '../../../images/medium_male.png'; import photo from '../../../images/medium_male.png';
import rectangle from '../../../images/rectangle_secondPage.png'; import rectangle from '../../../images/rectangle_secondPage.png';
import arrowLeft from '../../../images/arrow_left.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 React, { useState, useEffect } from 'react';
import style from './Outstaffing.module.scss'; import style from './Outstaffing.module.css';
import front from '../../../images/front_end.png'; import front from '../../../images/front_end.png';
import back from '../../../images/back_end.png'; import back from '../../../images/back_end.png';
import design from '../../../images/design.png'; import design from '../../../images/design.png';
import OutstaffingBlock from '../../Blocks/OutstaffingBlock';
const Outstaffing = () => { const Outstaffing = () => {
const [data, setData] = useState([]);
useEffect(() => {
const tempData = ['Ruby on Rails', 'Nginx', 'Docker', 'PostgreSQL', 'Git', 'Typescript', 'ReactJS'];
setData(tempData);
}, []);
return ( return (
<section className={style.outstaffing}> <section className={style.outstaffing}>
<div className="container"> <div className="container">
@ -19,55 +27,9 @@ const Outstaffing = () => {
</div> </div>
<div className="row"> <div className="row">
<div className="col-4"> <OutstaffingBlock image={front} data={data} header={'# Популярный стек'} />
<div className={style.outstaffing__box}> <OutstaffingBlock image={back} data={data} header={'# Популярный стек'} />
<img src={front} alt="" /> <OutstaffingBlock image={design} data={data} header={'# Популярный стек'} />
<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>
</div> </div>
</div> </div>
</section> </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 React, { useState } from 'react';
import Select from 'react-select'; import Select from 'react-select';
import style from './Select.module.scss'; import style from './Select.module.css';
const options = [ const options = [
{ value: 'Ruby on Rails', label: 'Ruby on Rails' }, { value: 'Ruby on Rails', label: 'Ruby on Rails' },
@ -35,7 +35,7 @@ const TagSelect = () => {
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<h2>Найти специалиста по навыкам</h2> <h2 className={style.search__title}>Найти специалиста по навыкам</h2>
<div className={style.search__box}> <div className={style.search__box}>
<Select <Select
value={items} value={items}

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

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