finished home page

src/components/Candidate/Candidate.js

@@ -1,23 +1,24 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
-
-// import PhotoBlock from './PhotoBlock';
-
-// import { candidatesList } from '../Home/Home'
+import { useParams, useHistory } from 'react-router-dom';
+import { candidatesList } from '../Home/sections/Description';
 
 import classes from './Candidate.module.scss';
 
 const Candidate = () => {
-  //   const { id: candidateId } = useParams();
-  //   const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId));
+  const history = useHistory();
+
+  const { id: candidateId } = useParams();
+
+  const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId));
 
   return (
     <div className={classes.wrapper}>
-      <NavLink to="/">Home</NavLink>
-      {/* <h1>
+      <button style={{ margin: '60px' }} onClick={() => history.push('/')}>
+        Home
+      </button>
+      <h1>
         Candidate name: <span>{currentCandidate.name}</span>
       </h1>
-      <PhotoBlock /> */}
     </div>
   );
 };

src/components/Home/Home.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import Outstaffing from './sections/Outstaffing';
 import Description from './sections/Description';
+import Search from './sections/Search';
 
 const Home = () => {
   return (
-    <div>
-      {/* <h1>HomePage</h1>
-      <ul>{renderCandidatesList}</ul> */}
-
+    <>
       <Outstaffing />
+      <Search />
       <Description />
-    </div>
+    </>
   );
 };
 

src/components/Home/sections/Description.js

@@ -4,7 +4,7 @@ import photo from '../../../images/medium_male.png';
 import rectangle from '../../../images/rectangle_secondPage.png';
 import arrowLeft from '../../../images/arrow_left.png';
 import arrowRight from '../../../images/arrow_right.png';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 export const candidatesList = [
   { id: 1, name: 'Artyom' },
@@ -30,9 +30,9 @@ const Description = () => {
                 <p className={style.description__text}>- 3 года преподаю в IOS-школе Сбера</p>
               </div>
               <div className="col-4">
-                <Link to={`/candidate/${el.id}`}>
+                <NavLink to={`/candidate/${el.id}`}>
                   <button className={style.description__button}>Подробное резюме</button>
-                </Link>
+                </NavLink>
               </div>
               <div className="col-12">
                 <span className={style.description__sp}>
@@ -50,9 +50,7 @@ const Description = () => {
           <div className="col-12">
             <div className={style.description__footer}>
               <div className={style.description__footer__btn}>
-                <button>
-                  <a href="#">Загрузить еще</a>
-                </button>
+                <button>Загрузить еще</button>
               </div>
               <div className={style.description__footer__box}>
                 <div className={style.arrow__left}>

src/components/Home/sections/Description.module.scss

@@ -72,8 +72,6 @@
                 border: 1px solid #5ab424;
                 background-color: white;
                 margin-right: 60px;
-                & a {
-                    text-decoration: none;
                 color: #a0a0a0;
                 font-family: "GT Eesti Pro Display";
                 font-size: 18px;
@@ -81,8 +79,8 @@
                 font-style: normal;
                 letter-spacing: normal;
                 line-height: normal;
-                    text-align: left;
-                }
+                text-align: center;
+ 
             }
         }
         &__box {

src/components/Home/sections/Search.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import style from './Search.module.scss';
+
+const Search = () => {
+  return (
+    <section class={style.search}>
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <h2>Найти специалиста по навыкам</h2>
+
+            <form action="">
+              <button type={style.submit}>JavaScript</button>
+              <input type={style.text} />
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Search;

src/components/Home/sections/Search.module.scss

@@ -0,0 +1,46 @@
+.search {
+    margin-top: 40px;
+    & h2 {
+        font-family: "GT Eesti Pro Display";
+        font-size: 24px;
+        font-weight: 700;
+        font-style: normal;
+        letter-spacing: normal;
+        line-height: normal;
+        text-align: center;
+        margin-bottom: 40px;
+    }
+    & form {
+        position: relative;
+        width: 100%;
+        height: 60px;
+        border: 1px solid whitesmoke;
+        & input {
+            width: 100%;
+            height: 100%;
+            border: none;
+            margin-left: 160px;
+            font-size: 18px;
+        }
+        & input:focus,
+        & input:active {
+            outline: none;
+        }
+        & button {
+            position: absolute;
+            top: 15%;
+            left: 1%;
+            width: 131px;
+            height: 40px;
+            border-radius: 10px;
+            background-color: #e8e8e8;
+            border: none;
+            font-family: "GT Eesti Pro Display";
+            font-size: 18px;
+            font-weight: 400;
+            font-style: normal;
+            letter-spacing: normal;
+            text-align: center;
+        }
+    }
+}