finished home page

src/components/Auth/Auth.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Auth = () => {
+  return <div></div>;
+};
+
+export default Auth;

src/components/Auth/index.js

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

src/components/Candidate/Candidate.js

@@ -1,25 +1,73 @@
 import React from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
-import { candidatesList } from '../Home/sections/Description';
+import style from './Candidate.module.scss';
+// import { candidatesList } from '../Home/sections/Description';
+import icon from '../../images/front_end.png';
+import arrow from '../../images/right-arrow.png';
 
 import classes from './Candidate.module.scss';
 
 const Candidate = () => {
   const history = useHistory();
 
-  const { id: candidateId } = useParams();
+  // const { id: candidateId } = useParams();
 
-  const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId));
+  // const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId));
 
   return (
-    <div className={classes.wrapper}>
+    <section className={classes.candidate}>
-      <button style={{ margin: '60px' }} onClick={() => history.push('/')}>
+      <div className="container">
-        Home
+        <div className="row">
-      </button>
+          <div className="col-12">
-      <h1>
+            <div className={style.candidate__title}>
-        Candidate name: <span>{currentCandidate.name}</span>
+              <h2>
-      </h1>
+                <span>Аутстаффинг</span> it-персонала
+              </h2>
             </div>
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col-12">
+            <div className={style.candidate__header}>
+              <div className={style.arrow} onClick={() => history.push('/')}>
+                <img src={arrow} alt="" />
+                <span>Вернуться к списку</span>
+              </div>
+
+              <div className="icon">
+                <img src={icon} alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={style.candidate__main}>
+          <div className="row">
+            <div className="col-4">
+              <div className="">
+                <p>
+                  sddddddddddddddddddddddddddddddddd <br /> ddddddddddddddddddddddddddd <br />
+                  ddddddddddddddddddd
+                </p>
+              </div>
+            </div>
+
+            <div className="col-8">
+              <div className="">
+                <p>
+                  sddddddddddddddddddddddddddddddddd <br /> ddddddddddddddddddddddddddd <br />
+                  ddddddddddddddddddd
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* <h1>
+        Candidate name: <span>{currentCandidate.name}</span>
+      </h1> */}
+    </section>
   );
 };
 

src/components/Candidate/Candidate.module.scss

@@ -1,4 +1,43 @@
-.wrapper {
+.candidate {
-  font-size: 30px;
+  &__title {
-  color: red;
+    margin-top: 60px;
+    & h2 {
+      text-align: center;
+      color: #52b709;
+      font-family: 'GT Eesti Pro Display';
+      font-size: 53px;
+      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;
+      }
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    margin-top: 120px;
+    margin-left: 60px;
+
+    & .arrow {
+      & img {
+        cursor: pointer;
+      }
+
+      & span {
+        margin-left: 40px;
+        margin-right: 120px;
+      }
+    }
+  }
+
+  &__main {
+    margin-top: 60px;
+  }
 }

src/components/Candidate/PhotoBlock.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-const PhotoBlock = () => {
-    return (
-        <div>
-            PhotoBlock
-      
-        </div>
-    );
-};
-
-export default PhotoBlock;

src/pages/AuthPage.js

@@ -1,11 +1,6 @@
 import React from 'react';
+import Auth from '../components/Auth';
 
-const AuthPage = () => {
+const AuthPage = () => <Auth />;
-    return (
-        <div>
-            AuthPage
-        </div>
-    );
-};
 
 export default AuthPage;