diff --git a/package-lock.json b/package-lock.json index fac7f559..0584eae4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12805,6 +12805,30 @@ "webpack-dev-server": "3.11.1", "webpack-manifest-plugin": "2.2.0", "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": { @@ -13528,27 +13552,12 @@ } }, "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==", + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-11.1.1.tgz", + "integrity": "sha512-fOCp/zLmj1V1WHDZbUbPgrZhA7HKXHEqkslzB+05U5K9SbSbcmH91C7QLW31AsXikxUMaxXRhhcqWZAxUMLDyA==", "requires": { "klona": "^2.0.4", - "loader-utils": "^2.0.0", - "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" - } - } + "neo-async": "^2.6.2" } }, "sax": { diff --git a/package.json b/package.json index 8f1593c0..b0265de0 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "react-scripts": "4.0.3", "react-select": "^4.3.1", "sass": "^1.34.0", + "sass-loader": "^11.1.1", "web-vitals": "^1.1.2" }, "scripts": { diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777cc..00000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index aa069f27..75621e7e 100644 --- a/public/index.html +++ b/public/index.html @@ -2,42 +2,18 @@ - - - - - React App
- diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a3..00000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a65..00000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 080d6c77..00000000 --- a/public/manifest.json +++ /dev/null @@ -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" -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc4..00000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/src/App.css b/src/App.css index e69de29b..8b137891 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1 @@ + diff --git a/src/App.js b/src/App.js index 261a12f8..41959697 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( Loading...}> {isAuth ? ( - - - Not found page} /> + + + + + + + +
Not found page
+ ) : ( - } /> + + + )} diff --git a/src/components/Auth/Auth.js b/src/components/Auth/Auth.js index f8c0e3e8..5a0b0db0 100644 --- a/src/components/Auth/Auth.js +++ b/src/components/Auth/Auth.js @@ -1,12 +1,18 @@ import React from 'react'; -import style from './Auth.module.scss'; +import style from './Auth.module.css'; const Auth = ({ setAuthed }) => { return (
-
diff --git a/src/components/Auth/Auth.module.css b/src/components/Auth/Auth.module.css new file mode 100644 index 00000000..6261a9a7 --- /dev/null +++ b/src/components/Auth/Auth.module.css @@ -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; +} \ No newline at end of file diff --git a/src/components/Auth/Auth.module.scss b/src/components/Auth/Auth.module.scss deleted file mode 100644 index 05ac0408..00000000 --- a/src/components/Auth/Auth.module.scss +++ /dev/null @@ -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; - } -} diff --git a/src/components/Blocks/OutstaffingBlock.jsx b/src/components/Blocks/OutstaffingBlock.jsx new file mode 100644 index 00000000..43ca12d6 --- /dev/null +++ b/src/components/Blocks/OutstaffingBlock.jsx @@ -0,0 +1,19 @@ +import style from '../../components/Home/sections/Outstaffing.module.css'; + +const OutstaffingBlock = ({ header , image, data }) => { + return ( +
+
+ {header} +

{header}

+
    + {data.map((item, index) => ( +
  • console.log(item, index)}>{index + 1} {item}
    • + ))} +
+
+
+ ); + }; + + export default OutstaffingBlock \ No newline at end of file diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js index c9f9d8fb..bdc85f62 100644 --- a/src/components/Candidate/Candidate.js +++ b/src/components/Candidate/Candidate.js @@ -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 ( -
+
diff --git a/src/components/Candidate/Candidate.module.scss b/src/components/Candidate/Candidate.module.css similarity index 50% rename from src/components/Candidate/Candidate.module.scss rename to src/components/Candidate/Candidate.module.css index 44116c51..b513947a 100644 --- a/src/components/Candidate/Candidate.module.scss +++ b/src/components/Candidate/Candidate.module.css @@ -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; + } \ No newline at end of file diff --git a/src/components/Candidate/index.js b/src/components/Candidate/index.js index 57f3bd5b..fc37dd9f 100644 --- a/src/components/Candidate/index.js +++ b/src/components/Candidate/index.js @@ -1,3 +1,3 @@ import Candidate from './Candidate'; -export default Candidate; \ No newline at end of file +export default Candidate; diff --git a/src/components/Candidate/sections/SectionFive.js b/src/components/Candidate/sections/SectionFive.js index 7abe9cd6..f2f5be95 100644 --- a/src/components/Candidate/sections/SectionFive.js +++ b/src/components/Candidate/sections/SectionFive.js @@ -1,5 +1,5 @@ import React from 'react'; -import style from './SectionFive.module.scss'; +import style from './SectionFive.module.css'; const SectionFive = () => { return ( diff --git a/src/components/Candidate/sections/SectionFive.module.css b/src/components/Candidate/sections/SectionFive.module.css new file mode 100644 index 00000000..024a04ac --- /dev/null +++ b/src/components/Candidate/sections/SectionFive.module.css @@ -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; +} diff --git a/src/components/Candidate/sections/SectionFive.module.scss b/src/components/Candidate/sections/SectionFive.module.scss deleted file mode 100644 index ac8a6b68..00000000 --- a/src/components/Candidate/sections/SectionFive.module.scss +++ /dev/null @@ -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; - } -} diff --git a/src/components/Candidate/sections/SectionFour.js b/src/components/Candidate/sections/SectionFour.js index aeccee51..adb19d87 100644 --- a/src/components/Candidate/sections/SectionFour.js +++ b/src/components/Candidate/sections/SectionFour.js @@ -1,5 +1,5 @@ import React from 'react'; -import style from './SectionFour.module.scss'; +import style from './SectionFour.module.css'; const SectionFour = () => { return ( diff --git a/src/components/Candidate/sections/SectionFour.module.css b/src/components/Candidate/sections/SectionFour.module.css new file mode 100644 index 00000000..8e42b8ac --- /dev/null +++ b/src/components/Candidate/sections/SectionFour.module.css @@ -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; +} diff --git a/src/components/Candidate/sections/SectionFour.module.scss b/src/components/Candidate/sections/SectionFour.module.scss deleted file mode 100644 index 6997473d..00000000 --- a/src/components/Candidate/sections/SectionFour.module.scss +++ /dev/null @@ -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; - } -} diff --git a/src/components/Candidate/sections/SectionOne.js b/src/components/Candidate/sections/SectionOne.js index af7f656d..c161d017 100644 --- a/src/components/Candidate/sections/SectionOne.js +++ b/src/components/Candidate/sections/SectionOne.js @@ -1,5 +1,5 @@ import React from 'react'; -import style from './SectionOne.module.scss'; +import style from './SectionOne.module.css'; const SectionOne = () => { return ( diff --git a/src/components/Candidate/sections/SectionOne.module.scss b/src/components/Candidate/sections/SectionOne.module.css similarity index 90% rename from src/components/Candidate/sections/SectionOne.module.scss rename to src/components/Candidate/sections/SectionOne.module.css index c2213180..e45b815a 100644 --- a/src/components/Candidate/sections/SectionOne.module.scss +++ b/src/components/Candidate/sections/SectionOne.module.css @@ -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; } -} + diff --git a/src/components/Candidate/sections/SectionSkills.js b/src/components/Candidate/sections/SectionSkills.js index f4228e38..f1e10d1f 100644 --- a/src/components/Candidate/sections/SectionSkills.js +++ b/src/components/Candidate/sections/SectionSkills.js @@ -1,5 +1,5 @@ import React from 'react'; -import style from './SectionSkills.module.scss'; +import style from './SectionSkills.module.css'; const SectionSkills = () => { return ( diff --git a/src/components/Candidate/sections/SectionSkills.module.css b/src/components/Candidate/sections/SectionSkills.module.css new file mode 100644 index 00000000..13e71471 --- /dev/null +++ b/src/components/Candidate/sections/SectionSkills.module.css @@ -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; +} \ No newline at end of file diff --git a/src/components/Candidate/sections/SectionSkills.module.scss b/src/components/Candidate/sections/SectionSkills.module.scss deleted file mode 100644 index 4230b471..00000000 --- a/src/components/Candidate/sections/SectionSkills.module.scss +++ /dev/null @@ -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; - } -} diff --git a/src/components/Candidate/sections/SectionThree.js b/src/components/Candidate/sections/SectionThree.js index 844cef7f..d7adf430 100644 --- a/src/components/Candidate/sections/SectionThree.js +++ b/src/components/Candidate/sections/SectionThree.js @@ -1,5 +1,5 @@ import React from 'react'; -import style from './SectionThree.module.scss'; +import style from './SectionThree.module.css'; const SectionThree = () => { return ( diff --git a/src/components/Candidate/sections/SectionThree.module.scss b/src/components/Candidate/sections/SectionThree.module.css similarity index 89% rename from src/components/Candidate/sections/SectionThree.module.scss rename to src/components/Candidate/sections/SectionThree.module.css index f5e61bd9..25df4f91 100644 --- a/src/components/Candidate/sections/SectionThree.module.scss +++ b/src/components/Candidate/sections/SectionThree.module.css @@ -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; } -} + diff --git a/src/components/Candidate/sections/SectionTwo.js b/src/components/Candidate/sections/SectionTwo.js index f843378d..8f53e333 100644 --- a/src/components/Candidate/sections/SectionTwo.js +++ b/src/components/Candidate/sections/SectionTwo.js @@ -1,5 +1,5 @@ import React from 'react'; -import style from './SectionTwo.module.scss'; +import style from './SectionTwo.module.css'; const SectionTwo = () => { return ( diff --git a/src/components/Candidate/sections/SectionTwo.module.scss b/src/components/Candidate/sections/SectionTwo.module.css similarity index 89% rename from src/components/Candidate/sections/SectionTwo.module.scss rename to src/components/Candidate/sections/SectionTwo.module.css index 4c6f7381..f992124f 100644 --- a/src/components/Candidate/sections/SectionTwo.module.scss +++ b/src/components/Candidate/sections/SectionTwo.module.css @@ -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; } -} + diff --git a/src/components/Candidate/sections/Sidebar.js b/src/components/Candidate/sections/Sidebar.js index cb6219ea..40c85bc4 100644 --- a/src/components/Candidate/sections/Sidebar.js +++ b/src/components/Candidate/sections/Sidebar.js @@ -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 ( diff --git a/src/components/Candidate/sections/Sidebar.module.css b/src/components/Candidate/sections/Sidebar.module.css new file mode 100644 index 00000000..98938227 --- /dev/null +++ b/src/components/Candidate/sections/Sidebar.module.css @@ -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%); +} diff --git a/src/components/Candidate/sections/Sidebar.module.scss b/src/components/Candidate/sections/Sidebar.module.scss deleted file mode 100644 index 22a3c11f..00000000 --- a/src/components/Candidate/sections/Sidebar.module.scss +++ /dev/null @@ -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%); - } - } - } -} diff --git a/src/components/Home/index.js b/src/components/Home/index.js index b9ce3dae..fbe3fed6 100644 --- a/src/components/Home/index.js +++ b/src/components/Home/index.js @@ -1,3 +1,3 @@ import Home from './Home'; -export default Home; \ No newline at end of file +export default Home; diff --git a/src/components/Home/sections/Description.js b/src/components/Home/sections/Description.js index 11e63d0d..dfacbb32 100644 --- a/src/components/Home/sections/Description.js +++ b/src/components/Home/sections/Description.js @@ -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'; diff --git a/src/components/Home/sections/Description.module.css b/src/components/Home/sections/Description.module.css new file mode 100644 index 00000000..eaa99d4a --- /dev/null +++ b/src/components/Home/sections/Description.module.css @@ -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%); + +} + diff --git a/src/components/Home/sections/Description.module.scss b/src/components/Home/sections/Description.module.scss deleted file mode 100644 index 6f16cbee..00000000 --- a/src/components/Home/sections/Description.module.scss +++ /dev/null @@ -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%); - } - } - } - } -} diff --git a/src/components/Home/sections/Outstaffing.js b/src/components/Home/sections/Outstaffing.js index 2884c069..131e8380 100644 --- a/src/components/Home/sections/Outstaffing.js +++ b/src/components/Home/sections/Outstaffing.js @@ -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 (
@@ -19,55 +27,9 @@ const Outstaffing = () => {
-
-
- -

# Популярный стек

-
    -
  • Ruby on Rails
    • -
  • Nginx
    • -
  • Docker
    • -
  • PostgreSQL
    • -
  • Git
    • -
  • Typescript
    • -
  • ReactJS
    • -
-
-
- -
-
- -

# Популярный стек

- -
    -
  • Ruby on Rails
    • -
  • Nginx
    • -
  • Docker
    • -
  • PostgreSQL
    • -
  • Git
    • -
  • Typescript
    • -
  • ReactJS
    • -
-
-
- -
-
- -

# Популярный стек

- -
    -
  • Ruby on Rails
    • -
  • Nginx
    • -
  • Docker
    • -
  • PostgreSQL
    • -
  • Git
    • -
  • Typescript
    • -
  • ReactJS
    • -
-
-
+ + +
diff --git a/src/components/Home/sections/Outstaffing.module.css b/src/components/Home/sections/Outstaffing.module.css new file mode 100644 index 00000000..118c82e4 --- /dev/null +++ b/src/components/Home/sections/Outstaffing.module.css @@ -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; +} \ No newline at end of file diff --git a/src/components/Home/sections/Outstaffing.module.scss b/src/components/Home/sections/Outstaffing.module.scss deleted file mode 100644 index 8f233b3a..00000000 --- a/src/components/Home/sections/Outstaffing.module.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js index 99cf7eff..f53fb698 100644 --- a/src/components/Select/Select.js +++ b/src/components/Select/Select.js @@ -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 = () => {
-

Найти специалиста по навыкам

+

Найти специалиста по навыкам