From f2d7730214d16b1fe5af108df9df9c2a7384449e Mon Sep 17 00:00:00 2001
From: Dmitry220 <dmitry19.kravtsov123@gmail.com>
Date: Wed, 19 Apr 2023 20:22:06 +0300
Subject: [PATCH 1/3] quiz + lk-candidate

---
 package-lock.json                             |   10 +
 package.json                                  |    1 +
 src/App.js                                    |   20 +-
 src/assets/global.scss                        |   25 +
 src/components/CardControl/CardControl.js     |   20 +
 src/components/CardControl/CardControl.scss   |   73 ++
 .../CategoriesItem/categoriesItem.scss        |    1 -
 src/components/Footer/footer.scss             |    4 +-
 src/components/Navigation/Navigation.js       |  101 ++
 src/components/Navigation/Navigation.scss     |    0
 .../ProfileCalendar/ProfileCalendar.js        |    2 +
 src/components/ProfileHeader/ProfileHeader.js |   76 +-
 src/components/ReportForm/ReportForm.js       |    2 +
 src/components/StarRating/StarRating.js       |   44 +
 src/components/StarRating/StarRating.scss     |   45 +
 .../features/Candidate-lk/HeadBottom.js       |   14 +
 src/components/features/quiz/AlertResult.js   |   21 +
 .../features/quiz/BlockCompletedTest.js       |   24 +
 .../features/quiz/Card-introduction.js        |   19 +
 .../features/quiz/CardAviableTest.js          |   34 +
 src/components/features/quiz/GetOptionTask.js |   56 +-
 src/components/features/quiz/HeaderQuiz.js    |    4 +-
 .../features/quiz/Quiz-passing-information.js |   80 ++
 src/components/features/quiz/QuizReport.js    |   27 +
 .../features/quiz/SelectedCategory.js         |   20 +
 src/components/features/quiz/Task.js          |  199 ++-
 src/components/features/quiz/quiz.scss        | 1086 +++++++++++------
 src/images/icon-specialization.png            |  Bin 0 -> 2272 bytes
 src/images/note.png                           |  Bin 0 -> 547 bytes
 src/images/question.png                       |  Bin 0 -> 803 bytes
 src/images/quiz/accempt.png                   |  Bin 0 -> 1185 bytes
 src/images/quiz/compltedImage.png             |  Bin 0 -> 2864 bytes
 src/images/quiz/success.png                   |  Bin 0 -> 2298 bytes
 src/images/quiz/timer.png                     |  Bin 0 -> 1125 bytes
 src/index.css                                 |    2 +-
 .../AuthForCandidate/authForCandidate.scss    |   22 +-
 src/pages/Home/Home.js                        |    2 +
 .../PartnerAddRequest/PartnerAddRequest.js    |    2 +
 src/pages/PartnerBid/PartnerBid.js            |    2 +
 src/pages/PartnerRequests/PartnerRequests.js  |    2 +
 src/pages/PartnerSettings/PartnerSettings.js  |    2 +
 src/pages/PartnerTreaties/PartnerTreaties.js  |    2 +
 .../PartnerСategories/PartnerСategories.js  |    2 +
 src/pages/Payouts/Payouts.js                  |    2 +
 src/pages/Profile/Profile.js                  |   40 +-
 src/pages/Profile/profile.scss                |  128 +-
 .../ProfileCandidate/ProfileCandidate.js      |   94 ++
 .../ProfileCandidate/ProfileCandidate.scss    |  166 +++
 src/pages/Summary/Summary.js                  |    2 +
 src/pages/Tracker/Tracker.js                  |    2 +
 src/pages/ViewReport/ViewReport.js            |    2 +
 src/pages/quiz/InstructionPage.js             |   24 -
 src/pages/quiz/InterjacentPage.js             |   26 -
 src/pages/quiz/PassingTests.js                |   83 ++
 src/pages/quiz/QuizPage.js                    |  147 ++-
 src/pages/quiz/QuizReportPage.js              |   42 +
 src/pages/quiz/QuizTestPage.js                |   24 -
 src/pages/quiz/ResultPage.js                  |   24 -
 src/pages/quiz/quiz-page.scss                 |  143 +++
 src/redux/quizSlice.js                        |   89 +-
 60 files changed, 2272 insertions(+), 812 deletions(-)
 create mode 100644 src/assets/global.scss
 create mode 100644 src/components/CardControl/CardControl.js
 create mode 100644 src/components/CardControl/CardControl.scss
 create mode 100644 src/components/Navigation/Navigation.js
 create mode 100644 src/components/Navigation/Navigation.scss
 create mode 100644 src/components/StarRating/StarRating.js
 create mode 100644 src/components/StarRating/StarRating.scss
 create mode 100644 src/components/features/Candidate-lk/HeadBottom.js
 create mode 100644 src/components/features/quiz/AlertResult.js
 create mode 100644 src/components/features/quiz/BlockCompletedTest.js
 create mode 100644 src/components/features/quiz/Card-introduction.js
 create mode 100644 src/components/features/quiz/CardAviableTest.js
 create mode 100644 src/components/features/quiz/Quiz-passing-information.js
 create mode 100644 src/components/features/quiz/QuizReport.js
 create mode 100644 src/components/features/quiz/SelectedCategory.js
 create mode 100644 src/images/icon-specialization.png
 create mode 100644 src/images/note.png
 create mode 100644 src/images/question.png
 create mode 100644 src/images/quiz/accempt.png
 create mode 100644 src/images/quiz/compltedImage.png
 create mode 100644 src/images/quiz/success.png
 create mode 100644 src/images/quiz/timer.png
 create mode 100644 src/pages/ProfileCandidate/ProfileCandidate.js
 create mode 100644 src/pages/ProfileCandidate/ProfileCandidate.scss
 delete mode 100644 src/pages/quiz/InstructionPage.js
 delete mode 100644 src/pages/quiz/InterjacentPage.js
 create mode 100644 src/pages/quiz/PassingTests.js
 create mode 100644 src/pages/quiz/QuizReportPage.js
 delete mode 100644 src/pages/quiz/QuizTestPage.js
 delete mode 100644 src/pages/quiz/ResultPage.js
 create mode 100644 src/pages/quiz/quiz-page.scss

diff --git a/package-lock.json b/package-lock.json
index d7abb128..4de78244 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,7 @@
         "react-select": "^5.7.0",
         "react-slick": "^0.29.0",
         "react-syntax-highlighter": "^15.4.5",
+        "react-timer-hook": "^3.0.5",
         "react-yandex-metrika": "^2.6.0",
         "redux-devtools-extension": "^2.13.9",
         "resolve": "1.18.1",
@@ -21571,6 +21572,15 @@
         "react": ">= 0.14.0"
       }
     },
+    "node_modules/react-timer-hook": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/react-timer-hook/-/react-timer-hook-3.0.5.tgz",
+      "integrity": "sha512-n+98SdmYvui2ne3KyWb3Ldu4k0NYQa3g/VzW6VEIfZJ8GAk/jJsIY700M8Nd2vNSTj05c7wKyQfJBqZ0x7zfiA==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/package.json b/package.json
index 6ccfd8d8..2c10fbd6 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "react-select": "^5.7.0",
     "react-slick": "^0.29.0",
     "react-syntax-highlighter": "^15.4.5",
+    "react-timer-hook": "^3.0.5",
     "react-yandex-metrika": "^2.6.0",
     "redux-devtools-extension": "^2.13.9",
     "resolve": "1.18.1",
diff --git a/src/App.js b/src/App.js
index 738fec5f..97a29402 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,10 +12,7 @@ import {ProfileCalendar} from "./components/ProfileCalendar/ProfileCalendar";
 import FormPage from './pages/FormPage/FormPage.js'
 import SingleReportPage from './pages/SingleReportPage/SingleReportPage'
 import {QuizPage} from './pages/quiz/QuizPage'
-import {InterjacentPage} from './pages/quiz/InterjacentPage'
-import {QuizTestPage} from './pages/quiz/QuizTestPage'
-import {InstructionPage} from './pages/quiz/InstructionPage'
-import {ResultPage} from './pages/quiz/ResultPage'
+import {QuizReportPage} from './pages/quiz/QuizReportPage'
 import {Profile} from './pages/Profile/Profile.js'
 import {Summary} from './pages/Summary/Summary'
 import {ViewReport} from './pages/ViewReport/ViewReport'
@@ -30,9 +27,11 @@ import {PartnerTreaties} from "./pages/PartnerTreaties/PartnerTreaties";
 import {PartnerEmployees} from "./pages/PartnerEmployees/PartnerEmployees";
 import {AuthForCandidate} from "./pages/AuthForCandidate/AuthForCandidate";
 import {RegistrationForCandidate} from "./pages/RegistrationForCandidate/RegistrationForCandidate";
-
+import './assets/global.scss'
 import './fonts/stylesheet.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
+import { ProfileCandidate } from './pages/ProfileCandidate/ProfileCandidate';
+import { PassingTests } from './pages/quiz/PassingTests';
 
 
 
@@ -57,11 +56,9 @@ const App = () => {
             <Route path='/report/:id' element={<SingleReportPage/>}/>
 
             <Route exact path='quiz'>
-              <Route index element={<QuizPage/>}/>
-              <Route exact path='interjacent' element={<InterjacentPage/>}/>
-              <Route exact path='test' element={<QuizTestPage/>}/>
-              <Route exact path='instruction' element={<InstructionPage/>}/>
-              <Route exact path='result' element={<ResultPage/>}/>
+              <Route index element={<QuizPage/>}/>            
+              <Route exact path='test' element={<PassingTests />}/>              
+              <Route exact path='report' element={<QuizReportPage/>}/>
             </Route>
 
             <Route exact path='profile'>
@@ -80,6 +77,9 @@ const App = () => {
               <Route exact path='treaties' element={<PartnerTreaties/>}/>
               <Route exact path='categories/employees' element={<PartnerEmployees/>}/>
             </Route>
+            <Route exact path='profile-candidate/:id'>
+              <Route index element={<ProfileCandidate />}/>
+            </Route>
 
             <Route path="*" element={<Navigate to="/auth" replace/>}/>
           </Routes>
diff --git a/src/assets/global.scss b/src/assets/global.scss
new file mode 100644
index 00000000..2566fbec
--- /dev/null
+++ b/src/assets/global.scss
@@ -0,0 +1,25 @@
+a:hover {
+  text-decoration: none !important;
+}
+.main-title {
+  font-weight: 700;
+  font-size: 22px;
+  line-height: 145%;
+  color: #000000;
+  word-break: break-word;
+  span {
+    color: #52b709;
+  }
+}
+.btn-green {
+  background: #52b709;
+  border-radius: 44px;
+  width: 100%;
+  border: none;
+  font-weight: 400;
+  line-height: 178%;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/CardControl/CardControl.js b/src/components/CardControl/CardControl.js
new file mode 100644
index 00000000..3458ebea
--- /dev/null
+++ b/src/components/CardControl/CardControl.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import rightArrow from "../../images/arrowRight.png"
+import { Link } from 'react-router-dom'
+import './CardControl.scss'
+
+export const CardControl = ({title,path,description, img}) => {
+	return (
+	<Link to={`/${path}`} className='control-card'>
+		<div className='control-card__about'>
+			<img src={img} alt='itemImg' />
+			<h3>{title}</h3>
+		</div>
+		<div className='control-card__info'>
+			<p dangerouslySetInnerHTML={{ __html: description }}></p>
+			<div className='control-card__infoLink'>
+				<img src={rightArrow} alt='arrow' />
+			</div>
+		</div>
+	</Link>)
+}
diff --git a/src/components/CardControl/CardControl.scss b/src/components/CardControl/CardControl.scss
new file mode 100644
index 00000000..df4d85a0
--- /dev/null
+++ b/src/components/CardControl/CardControl.scss
@@ -0,0 +1,73 @@
+.control-card{
+	max-width: 353px;
+	width: 100%;
+	padding: 35px 45px 15px 30px;
+	background: #FFFFFF;
+	border-radius: 12px;
+	text-decoration: none;
+	cursor: pointer;
+	transition: all 0.3s ease;
+
+	&:hover {
+	  box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+	  transform: scale(1.02);
+	}
+
+	@media (max-width: 1175px) {
+	  width: 48%;
+	  max-width: none;
+	}
+
+	@media (max-width: 925px) {
+	  width: 100%;
+	  padding: 15px 25px;
+	}
+
+	&__about {
+	  display: flex;
+	  column-gap: 20px;
+	  align-items: center;
+	  margin-bottom: 30px;
+
+	  @media (max-width: 925px) {
+		 margin-bottom: 15px;
+	  }
+
+	  h3 {
+		 color: #000000;
+		 font-weight: 500;
+		 font-size: 18px;
+		 line-height: 22px;
+		 max-width: 125px;
+		 margin-bottom: 0;
+	  }
+	}
+
+	&__info {
+	  display: flex;
+	  justify-content: space-between;
+	  align-items: center;
+
+	  p {
+		 font-weight: 700;
+		 font-size: 12px;
+		 line-height: 20px;
+		 color: #000000;
+		 margin-bottom: 0;
+
+		 span {
+			color: #52B709;
+			font-weight: 700;
+		 }
+	  }
+	  &Link {
+		 width: 48px;
+		 height: 48px;
+		 background: #DDEEC6;
+		 border-radius: 50px;
+		 display: flex;
+		 justify-content: center;
+		 align-items: center;
+	  }
+	}
+ }
\ No newline at end of file
diff --git a/src/components/CategoriesItem/categoriesItem.scss b/src/components/CategoriesItem/categoriesItem.scss
index 26cd6db8..55805cfd 100644
--- a/src/components/CategoriesItem/categoriesItem.scss
+++ b/src/components/CategoriesItem/categoriesItem.scss
@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   padding: 33px 32px 25px 28px;
-  width: 32%;
   background: #FFFFFF;
   border-radius: 12px;
   transition: all 0.3s ease;
diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss
index 5b46f629..e8842808 100644
--- a/src/components/Footer/footer.scss
+++ b/src/components/Footer/footer.scss
@@ -1,5 +1,5 @@
 .footer {
-  margin-top: -3rem;
+  //margin-top: -3rem;
 
   &__left {
     display: flex;
@@ -74,7 +74,7 @@
 @media (max-width: 575.98px) {
   .footer {
     &__left {
-      margin-top: 80px;
+    //  margin-top: 80px;
     }
 
     &__description {
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
new file mode 100644
index 00000000..71449c78
--- /dev/null
+++ b/src/components/Navigation/Navigation.js
@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react'
+import { NavLink } from 'react-router-dom'
+import { urlForLocal } from '../../helper'
+import { apiRequest } from '../../api/request';
+import { useDispatch, useSelector } from 'react-redux';
+import { getProfileInfo } from '../../redux/outstaffingSlice';
+
+export const Navigation = () => {
+	const dispatch = useDispatch();
+ 
+ 
+	const profileInfo = useSelector(getProfileInfo);
+	const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer')
+	const [navInfo] = useState({
+	  developer: [
+		 {
+			path: '/summary',
+			name: 'Резюме'
+		 },
+		 {
+			path: '/calendar',
+			name: 'Отчетность'
+		 },
+		 {
+			path: '/tracker',
+			name: 'Трекер'
+		 },
+		 {
+			path: '/payouts',
+			name: 'Выплаты'
+		 },
+		 {
+			path: '/settings',
+			name: 'Настройки'
+		 },
+	  ],
+	  partner: [
+		 {
+			path: '/catalog',
+			name: 'Каталог'
+		 },
+		 {
+			path: '/requests',
+			name: 'Запросы'
+		 },
+		 {
+			path: '/categories',
+			name: 'Персонал'
+		 },
+		 {
+			path: '/tracker',
+			name: 'Трекер'
+		 },
+		 {
+			path: '/treaties',
+			name: 'Договора'
+		 },
+		 {
+			path: '/settings',
+			name: 'Настройки'
+		 },
+	  ]
+	})
+  
+	useEffect(() => {
+	  if (localStorage.getItem('role_status') === '18') {
+		 return
+	  }
+	  apiRequest(`/profile/${localStorage.getItem('cardId')}`)
+			.then((profileInfo) =>
+				 dispatch(setProfileInfo(profileInfo))
+			);
+ 
+	}, [dispatch]);
+ 
+	return (
+		<div className='profileHeader__info'>
+			<div className='profileHeader__container'>
+				<nav className='profileHeader__nav'>
+					{
+						navInfo[user].map((link, index) => {
+							return <NavLink key={index} end to={`/profile${link.path}`}>{link.name}</NavLink>
+						})
+					}
+				</nav>
+
+				<div className='profileHeader__personalInfo'>
+					<h3 className='profileHeader__personalInfoName'>
+						{user === 'developer' ?
+							profileInfo?.fio :
+							''
+						}
+					</h3>
+					<NavLink end to={'/profile'}>
+						<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar' />
+					</NavLink>
+				</div>
+			</div>
+		</div>
+	)
+}
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/ProfileCalendar/ProfileCalendar.js b/src/components/ProfileCalendar/ProfileCalendar.js
index 7bf845af..8eb07cf5 100644
--- a/src/components/ProfileCalendar/ProfileCalendar.js
+++ b/src/components/ProfileCalendar/ProfileCalendar.js
@@ -19,6 +19,7 @@ import {getRequestDates, setReportDate, setRequestDate} from "../../redux/report
 
 import 'moment/locale/ru'
 import './profileCalendar.scss'
+import { Navigation } from '../Navigation/Navigation';
 
 
 export const ProfileCalendar = () => {
@@ -65,6 +66,7 @@ export const ProfileCalendar = () => {
     return (
         <div className='profile__calendar'>
             <ProfileHeader/>
+            <Navigation />
             <div className='container'>
                 <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},{name: 'Ваша отчетность', link: '/profile/calendar'}]} />
                 <h2 className='summary__title'>Ваши отчеты</h2>
diff --git a/src/components/ProfileHeader/ProfileHeader.js b/src/components/ProfileHeader/ProfileHeader.js
index 270ad839..d6ede4b0 100644
--- a/src/components/ProfileHeader/ProfileHeader.js
+++ b/src/components/ProfileHeader/ProfileHeader.js
@@ -10,6 +10,7 @@ import {getRole} from "../../redux/roleSlice";
 import {urlForLocal} from "../../helper";
 
 import './profileHeader.scss'
+import { Navigation } from '../Navigation/Navigation';
 
 
 
@@ -20,58 +21,8 @@ export const ProfileHeader = () => {
 
 
   const userRole = useSelector(getRole);
-  const profileInfo = useSelector(getProfileInfo);
   const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer')
-  const [navInfo] = useState({
-    developer: [
-      {
-        path: '/summary',
-        name: 'Резюме'
-      },
-      {
-        path: '/calendar',
-        name: 'Отчетность'
-      },
-      {
-        path: '/tracker',
-        name: 'Трекер'
-      },
-      {
-        path: '/payouts',
-        name: 'Выплаты'
-      },
-      {
-        path: '/settings',
-        name: 'Настройки'
-      },
-    ],
-    partner: [
-      {
-        path: '/catalog',
-        name: 'Каталог'
-      },
-      {
-        path: '/requests',
-        name: 'Запросы'
-      },
-      {
-        path: '/categories',
-        name: 'Персонал'
-      },
-      {
-        path: '/tracker',
-        name: 'Трекер'
-      },
-      {
-        path: '/treaties',
-        name: 'Договора'
-      },
-      {
-        path: '/settings',
-        name: 'Настройки'
-      },
-    ]
-  })
+
 
   const [isLoggingOut, setIsLoggingOut] = useState(false);
 
@@ -111,29 +62,6 @@ export const ProfileHeader = () => {
             </button>
           </div>
         </div>
-        <div className='profileHeader__info'>
-          <div className='profileHeader__container'>
-            <nav className='profileHeader__nav'>
-              {
-                navInfo[user].map((link, index) => {
-                  return <NavLink key={index} end to={`/profile${link.path}`}>{link.name}</NavLink>
-                })
-              }
-            </nav>
-
-            <div className='profileHeader__personalInfo'>
-              <h3 className='profileHeader__personalInfoName'>
-                {user === 'developer' ?
-                    profileInfo?.fio :
-                    ''
-                }
-              </h3>
-              <NavLink end to={'/profile'}>
-                <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/>
-              </NavLink>
-            </div>
-          </div>
-        </div>
       </header>
   )
 };
diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js
index 20a6e550..b1a5f3f8 100644
--- a/src/components/ReportForm/ReportForm.js
+++ b/src/components/ReportForm/ReportForm.js
@@ -22,6 +22,7 @@ import arrow from "../../images/right-arrow.png";
 
 import './reportForm.scss'
 import "react-datepicker/dist/react-datepicker.css";
+import { Navigation } from '../Navigation/Navigation'
 
 const ReportForm = () => {
   if(localStorage.getItem('role_status') === '18') {
@@ -99,6 +100,7 @@ const ReportForm = () => {
   return (
       <section className='report-form'>
         <ProfileHeader/>
+        <Navigation />
         <div className='container'>
           <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},
             {name: 'Ваша отчетность', link: '/profile/calendar'},
diff --git a/src/components/StarRating/StarRating.js b/src/components/StarRating/StarRating.js
new file mode 100644
index 00000000..58cdc0bd
--- /dev/null
+++ b/src/components/StarRating/StarRating.js
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import './StarRating.scss'
+
+const StarRating = ({ countStars=1, countActiveStars=1, color='#52B709', size=61 }) => {
+	const [shadedStars, setShadedStars] = useState([])
+	const [noShadedStars, setNoShadedStars] = useState([])
+	const percent = (Math.abs(countActiveStars)) >= countStars ? 100 : (countActiveStars * 100 / countStars)
+	useEffect(() => {
+		for (let index = 0; index < countStars; index++) {
+			setShadedStars(prev => [...prev, '★'])
+			setNoShadedStars(prev => [...prev, '☆'])
+		}
+	}, [])
+
+	const ratingStyle = {
+		"--size": size+'px'
+	}
+	const activeStyle = {
+		"--width": percent + '%',
+		"--color": color,
+		"--content": shadedStars.join('')
+	}
+	const bodyStyle = {
+		"--content": noShadedStars.join(''),
+		"--color": color
+	}
+
+	return (
+		<div className='rating' style={ratingStyle}>
+			<div className="rating__body" style={bodyStyle} data-content={noShadedStars.join('')}>
+				<div className="rating__active" style={activeStyle} data-content={shadedStars.join('')}></div>
+				<div className="rating__items">
+					<input type='radio' className="rating__item" value={1} name='star'></input>
+					<input type='radio' className="rating__item" value={2} name='star'></input>
+					<input type='radio' className="rating__item" value={3} name='star'></input>
+					<input type='radio' className="rating__item" value={4} name='star'></input>
+					<input type='radio' className="rating__item" value={5} name='star'></input>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default React.memo(StarRating);  
\ No newline at end of file
diff --git a/src/components/StarRating/StarRating.scss b/src/components/StarRating/StarRating.scss
new file mode 100644
index 00000000..913b35b6
--- /dev/null
+++ b/src/components/StarRating/StarRating.scss
@@ -0,0 +1,45 @@
+.rating{
+	display: flex;
+	align-items: center;
+	font-size: var(--size);
+	line-height: 0.75;
+	&__body{
+		position: relative;
+		&::before{
+			content: attr(data-content);
+			display: block;
+			color: var(--color);
+		}
+	}
+	&__active{
+		position: absolute;
+		height: 100%;
+		width: var(--width);
+		top: 0;
+		left: 0;
+		overflow: hidden;
+		&::before{
+			content: attr(data-content);
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			color: var(--color);
+		}
+	}
+	&__items{
+		display: flex;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+	}
+	&__item{
+		flex: 0 0 20%;
+		height: 100%;
+		opacity: 0;
+	}
+}
+
diff --git a/src/components/features/Candidate-lk/HeadBottom.js b/src/components/features/Candidate-lk/HeadBottom.js
new file mode 100644
index 00000000..b9a56e50
--- /dev/null
+++ b/src/components/features/Candidate-lk/HeadBottom.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import medium_male from "../../../images/medium_male.png"
+
+export const HeadBottom = () => {
+  return (
+	<div className="bottom-head">
+	<div className="bottom-head__container">
+		<div className="bottom-head__title">Мои тесты</div>
+		<div className="bottom-head__img"><img src={medium_male} alt="" /></div>
+	</div>
+
+</div>
+  )
+}
diff --git a/src/components/features/quiz/AlertResult.js b/src/components/features/quiz/AlertResult.js
new file mode 100644
index 00000000..ea796156
--- /dev/null
+++ b/src/components/features/quiz/AlertResult.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import suucessIcon from '../../../images/quiz/success.png'
+
+export const AlertResult = () => {
+
+	const successTest = false
+
+	return (
+		<div className='alert-result'>
+			<div className="alert-result__column">
+				<img src={suucessIcon} alt="suucessIcon" className="alert-result__icon" />
+				<div className='alert-result__text' style={{color: successTest ? '#52B709' : '#5B6871'}}>
+					Благодарим Вас за прохождение теста "Junior разработчик". Ваши результаты проверены, готовы пригласить Вас в команду
+				</div>
+			</div>
+			{!successTest && <div className="alert-result__column">
+				<button className="alert-result__button quiz-btn">Запросить еще попытку</button>
+			</div>}
+		</div>
+	)
+}
diff --git a/src/components/features/quiz/BlockCompletedTest.js b/src/components/features/quiz/BlockCompletedTest.js
new file mode 100644
index 00000000..0ca143ed
--- /dev/null
+++ b/src/components/features/quiz/BlockCompletedTest.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import compltedImage from "../../../images/quiz/compltedImage.png"
+import { Link } from 'react-router-dom'
+
+export const BlockCompletedTest = () => {
+	const id = localStorage.getItem('id')
+	return (
+		<div className='block-completed-test'>
+			<div className="block-completed-test__container">
+				<div className="block-completed-test__img">
+					<img src={compltedImage} alt="" />
+				</div>
+				<div className="block-completed-test__title">
+					Спасибо! <br />
+					Ваши ответы получены
+				</div>
+				<div className="block-completed-test__text">
+					В течении дня в вашем кабинете будет отображены данные о прохождении тестирования
+				</div>
+				<Link to={'/profile-candidate/' + id} className="block-completed-test__button quiz-btn">В кабинет</Link>
+			</div>
+		</div>
+	)
+}
diff --git a/src/components/features/quiz/Card-introduction.js b/src/components/features/quiz/Card-introduction.js
new file mode 100644
index 00000000..50dc9aa7
--- /dev/null
+++ b/src/components/features/quiz/Card-introduction.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import questionIcon from "../../../images/question.png"
+import './quiz.scss'
+
+export const CardIntroduction = ({ title, description }) => {
+	return (
+		<div className="card-introduction">
+			<div className="card-introduction__title">{title}</div>
+			<div className="card-introduction__body">
+				<div className="card-introduction__icon">
+					<img src={questionIcon} alt="" />
+				</div>
+				<div className="card-introduction__text">
+					{description}
+				</div>
+			</div>
+		</div>
+	)
+}
diff --git a/src/components/features/quiz/CardAviableTest.js b/src/components/features/quiz/CardAviableTest.js
new file mode 100644
index 00000000..cae6eff0
--- /dev/null
+++ b/src/components/features/quiz/CardAviableTest.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import rightArrow from "../../../images/arrowRight.png"
+import StarRating from '../../StarRating/StarRating'
+
+
+export const CardAvailableTest = ({ title, description, path, passedTest }) => {
+
+
+  return (
+    <div className='card-available-test'>
+      <Link to={`/${path}`} className="card-available-test__container" style={{ opacity: passedTest ? 0.3 : 1, pointerEvents: passedTest ? 'none' : 'all' }}>
+        <div className='card-available-test__top-head'>
+          <StarRating />
+          <h3 className='card-available-test__title'>{title}</h3>
+        </div>
+        <div className='card-available-test__info'>
+          <p dangerouslySetInnerHTML={{ __html: description }}></p>
+          <div className='card-available-test__infoLink'>
+            <img src={rightArrow} alt='arrow' />
+          </div>
+        </div>
+      </Link>
+
+      {passedTest && <div className='card-available-test__finished'>
+        <p>
+          Получить отчет по тестированию
+        </p>
+        <Link to={'/quiz/report'}>Отчет по тесту</Link>
+      </div>}
+    </div>
+  )
+}
+
diff --git a/src/components/features/quiz/GetOptionTask.js b/src/components/features/quiz/GetOptionTask.js
index d70f486b..8e35fc17 100644
--- a/src/components/features/quiz/GetOptionTask.js
+++ b/src/components/features/quiz/GetOptionTask.js
@@ -1,38 +1,38 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { selectedAnswersSelector, selectedTest } from '../../../redux/quizSlice';
+
+export const GetOptionTask = ({ type, answer, handleChange, inputValue}) => {
+
+   const id = localStorage.getItem('id');
+   const dataTest = useSelector(selectedTest);
+
 
-export const GetOptionTask = ({type, answer, handleChange, inputValue}) => {
    switch (type) {
-      case "3":
-         return (
-           <div className="form-task__group" key={answer.id}>
-              <input className='form-task__check' type="checkbox" value={answer.answer_body} id={answer.id}
-                     onChange={handleChange}/>
-              <label htmlFor={answer.id}>{answer.answer_body}</label>
-           </div>
-         )
-      case "2":
-      case "4":
-         return (
-           <div className="form-task__group" key={answer.id}>
-              <input className='form-task__check' type="radio" value={answer.answer_body} name={'radio'} id={answer.id}
-                     onChange={handleChange}/>
-              <label htmlFor={answer.id}>{answer.answer_body}</label>
-           </div>
-         )
       case "1":
          return (
-           <div className="form-task__group">
-              <textarea className='form-task__field' value={inputValue}
-                        onChange={handleChange}/>
-           </div>
+            <div className="form-task__group">
+               <textarea className='form-task__field' value={inputValue}
+                  onChange={handleChange} />
+            </div>
          )
+      case "3":
+         return (
+            <div className="form-task__group" key={answer.id}>
+               <input className='form-task__check' type="checkbox"
+                  value={answer.answer_body} id={answer.id}
+                  onChange={handleChange} />
+               <label htmlFor={answer.id}>{answer.answer_body}</label>
+            </div>
+         )
+
       default:
          return (
-           <div className="form-task__group" key={answer.id}>
-              <input className='form-task__check' type="checkbox" value={answer.answer_body} id={answer.id}
-                     onChange={handleChange}/>
-              <label htmlFor={answer.id}>{answer.answer_body}</label>
-           </div>
+            <div className="form-task__group" key={answer.id}>
+               <input className='form-task__check' type="radio" value={answer.answer_body} name={'radio'} id={answer.id}
+                  onChange={handleChange} />
+               <label htmlFor={answer.id}>{answer.answer_body}</label>
+            </div>
          )
    }
 }
diff --git a/src/components/features/quiz/HeaderQuiz.js b/src/components/features/quiz/HeaderQuiz.js
index 743019c5..c816a962 100644
--- a/src/components/features/quiz/HeaderQuiz.js
+++ b/src/components/features/quiz/HeaderQuiz.js
@@ -17,8 +17,8 @@ export const HeaderQuiz = ({header}) => {
   }, [userId, dispatch]);
 
   useEffect(() => {
-    apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
-        .then(res => dispatch(setQuestionnairesList(res)))
+    // apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
+    //     .then(res => dispatch(setQuestionnairesList(res)))
   }, [userId, dispatch]);
 
   return (
diff --git a/src/components/features/quiz/Quiz-passing-information.js b/src/components/features/quiz/Quiz-passing-information.js
new file mode 100644
index 00000000..6610dddb
--- /dev/null
+++ b/src/components/features/quiz/Quiz-passing-information.js
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react'
+import timer from '../../../images/quiz/timer.png'
+import accempt from '../../../images/quiz/accempt.png'
+import { useTimer } from 'react-timer-hook';
+import StarRating from '../../StarRating/StarRating';
+import { useSelector } from 'react-redux';
+import { completedTestSelector } from '../../../redux/quizSlice';
+
+
+export const QuizPassingInformation = ({ expiryTimestamp, setStartTest }) => {
+	const {
+		seconds,
+		minutes,
+		isRunning,
+		start,
+		pause,
+		resume,
+		restart
+	} = useTimer({
+		expiryTimestamp, autoStart: false, onExpire: () => {
+			console.warn('onExpire called')
+		}
+	});
+	const completedTest = useSelector(completedTestSelector)
+
+
+	const startTesting = () => {
+		setStartTest(true)
+		start()
+	}
+
+	useEffect(() => {
+		if (completedTest) {
+			const time = new Date();
+			time.setSeconds(time.getSeconds() + 0);//600 - кол-во секунд для прохождения теста
+			restart(time, false)
+		}
+	}, [completedTest])
+
+
+	return (
+		<div className='quiz-passing-information'>
+			<div className="quiz-passing-information__container">
+				<div className="quiz-passing-information__main">
+					<div className="quiz-passing-information__specialization">
+						<StarRating color={'#52B709'} countStars={1} countActiveStars={0.5} size={61} />
+						<div className='quiz-passing-information__specialization-title'>
+							Junior <br />
+							разработчик
+						</div>
+					</div>
+					<div className="quiz-passing-information__timer timer-quiz">
+						<div className="quiz-passing-information__icon">
+							<img src={timer} alt="" />
+						</div>
+						<div className="quiz-passing-information__text">
+							{completedTest ? 'Время вышло' : 'Время на прохождение теста:'} <br />
+							<span>{minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0')} секунд</span>
+						</div>
+					</div>
+					<div className="quiz-passing-information__attempt">
+						<div className="quiz-passing-information__icon">
+							<img src={accempt} alt="" />
+						</div>
+						<div className="quiz-passing-information__text">
+							Попыток прохождения: <br />
+							<span>1 попытка</span>
+						</div>
+					</div>
+					<div>
+					{(!completedTest && !isRunning) && <button className="quiz-passing-information__button btn-green" onClick={startTesting}>Начать</button>}
+					</div>
+				
+				</div>
+				
+				{/* {isRunning && <button className="quiz-passing-information__button quiz-btn" onClick={pause}>Завершить</button>} */}
+			</div>
+		</div>
+	)
+}
diff --git a/src/components/features/quiz/QuizReport.js b/src/components/features/quiz/QuizReport.js
new file mode 100644
index 00000000..dd92388f
--- /dev/null
+++ b/src/components/features/quiz/QuizReport.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import StarRating from '../../StarRating/StarRating'
+
+export const QuizReport = () => {
+  return (
+	 <div className='report'>
+		<div className="report__row">
+			<div className="report__column">
+				<StarRating color={'#52B709'} countStars={1} countActiveStars={0.5} size={61} />
+				<div className="report__job-title">Junior <br />	разработчик</div>
+			</div>
+			<div className="report__column">
+				<div className="report__value">22</div>
+				<div className="report__text">Правильных ответов</div>
+			</div>
+			<div className="report__column">
+			<div className="report__value report__value_false">02</div>
+				<div className="report__text">Не правильных ответов</div>
+			</div>
+			<div className="report__column">
+				<div className="report__status-text">Статус:</div>
+				<div className="report__status">Пройдено!</div>
+			</div>
+		</div>
+	 </div>
+  )
+}
diff --git a/src/components/features/quiz/SelectedCategory.js b/src/components/features/quiz/SelectedCategory.js
new file mode 100644
index 00000000..f7ab757e
--- /dev/null
+++ b/src/components/features/quiz/SelectedCategory.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import iconSpecialization from "../../../images/icon-specialization.png"
+import { Link } from 'react-router-dom'
+
+export const SelectedCategory = ({setSelectedCategory}) => {
+  return (
+	 <div className='selected-category'>
+		<div className="selected-category__container">
+			<div className="selected-category__title">Ваша выбранная <br /> категория</div>
+			<div className="selected-category__category">
+				<div className="selected-category__image">
+					<img src={iconSpecialization} alt="" />
+				</div>
+				<div className="selected-category__title-category">Backend <br /> разработчики</div>
+			</div>
+			<button onClick={()=>setSelectedCategory(true)}  className="selected-category__button">Заменить специализацию </button>
+		</div>
+	 </div>
+  )
+}
diff --git a/src/components/features/quiz/Task.js b/src/components/features/quiz/Task.js
index 3d5e0ecd..027304e4 100644
--- a/src/components/features/quiz/Task.js
+++ b/src/components/features/quiz/Task.js
@@ -1,39 +1,42 @@
-import React, {useEffect, useState} from 'react'
-import {useNavigate} from "react-router-dom"
-import {useSelector, useDispatch} from 'react-redux'
-
-import {Progressbar} from './ProgressbarQuiz'
-import {GetOptionTask} from './GetOptionTask'
-
+import React, { useEffect, useState } from 'react'
+import { useNavigate } from "react-router-dom"
+import { useSelector, useDispatch } from 'react-redux'
+import questionIcon from "../../../images/question.png"
+import { Progressbar } from './ProgressbarQuiz'
+import { GetOptionTask } from './GetOptionTask'
 import {
-  fetchUserAnswersMany, fetchUserAnswerOne, fetchGetAnswers, selectAnswer, selectedTest
+  fetchUserAnswersMany, fetchUserAnswerOne, fetchGetAnswers, answersSelector, selectedTest, questionsSelector, setAnswers, setCompleteTest
 } from './../../../redux/quizSlice'
 
 import './quiz.scss'
-import {apiRequest} from "../../../api/request";
+import { apiRequest } from "../../../api/request";
+import { HeaderQuiz } from './HeaderQuiz'
 
 export const TaskQuiz = () => {
 
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
-  const listAnswers = useSelector(selectAnswer);
-  const dataTest = useSelector(selectedTest);
+  const answers = useSelector(answersSelector);
+  const questions = useSelector(questionsSelector);
 
+
+  const dataTest = useSelector(selectedTest);
   const [index, setIndex] = useState(0);
   const [checkedValues, setCheckedValues] = useState([]);
-  const [stripValue, setStripValue] = useState(0);
+  //const [stripValue, setStripValue] = useState(0);
   const [inputValue, setInputValue] = useState('');
-  const [questions, setQuestions] = useState([]);
+
 
 
   const id = localStorage.getItem('id');
 
   useEffect(() => {
+    // fetch('https://itguild.info/api/user-questionnaire/questionnaires-list?user_id=110').then(response => response.json())
+    // .then(json => console.log(json))
     apiRequest(`/question/get-questions?uuid=${dataTest.uuid}`)
         .then((response) => {
           console.log(response)
-          setQuestions(response);
           dispatch(fetchGetAnswers(response[0].id));
           setStripValue((+index + 1) * 100 / response.length)
         })
@@ -41,108 +44,98 @@ export const TaskQuiz = () => {
 
   const nextQuestion = async (e) => {
     e.preventDefault();
-
     //Проверка на валидацию ответов
-    if (checkedValues.length || inputValue) {
-      switch (questions[index].question_type_id) {
-        case '3':
-          dispatch(fetchUserAnswersMany(checkedValues));
-          break;
-        case '2':
-        case '1':
-        case '4':
-          dispatch(fetchUserAnswerOne(checkedValues));
-          break;
-        default:
-          break;
-      }
-
-      //Проверка на существование следующего запроса
-      if (index < questions.length - 1) {
-        await dispatch(fetchGetAnswers(questions[index + 1].id));
-        setIndex(prev => prev >= questions.length - 1 ? prev : prev + 1);
-        setStripValue((prev => prev + (100 / questions.length)));
-        setCheckedValues([]);
-        setInputValue('')
-      } else {
-        navigate(`/quiz/result`);
-        alert("Тест пройден!")
-      }
-
-    } else {
+    if (!(checkedValues.length || inputValue)) {
       alert("Вы не ответили на вопрос")
+      return
     }
+
+    //отправка ответов на сервер
+    if (questions[index].question_type_id != 3) {
+      //dispatch(fetchUserAnswerOne(checkedValues));
+    } else {
+      console.log(checkedValues);      
+      // dispatch(fetchUserAnswersMany(checkedValues));
+    }
+
+    //Проверка на окончание теста
+    if (!(index < questions.length - 1)) {
+      dispatch(setCompleteTest())
+      return
+    }
+
+    dispatch(fetchGetAnswers(questions[index + 1].id));
+    setIndex(prev => prev + 1);
+    setCheckedValues([]);
+    setInputValue('')
   };
 
+
   const handleChange = (e) => {
     const checked = e.target.checked;
-    switch (questions[index].question_type_id) {
-      case '3':
-        checked ? setCheckedValues(prev => [...prev, {
-              user_id: id,
-              user_questionnaire_uuid: dataTest.uuid,
-              question_id: questions[index].id,
-              response_body: e.target.value
-            }]) :
-            setCheckedValues(prev => [...prev.filter(item => item.response_body !== e.target.value)]);
-        break;
-      case '1':
-      case '2':
-      case '4':
-        setCheckedValues([{
-          user_id: id,
-          user_questionnaire_uuid: dataTest.uuid,
-          question_id: questions[index].id,
-          response_body: e.target.value
-        }])
+
+    if (questions[index].question_type_id != 3) {
+      setCheckedValues([{
+        user_id: id,
+        user_questionnaire_uuid: dataTest.uuid,
+        question_id: questions[index].id,
+        response_body: e.target.value
+      }])
+      return
     }
+
+    checked ? setCheckedValues(prev => [...prev, {
+      user_id: id,
+      user_questionnaire_uuid: dataTest.uuid,
+      question_id: questions[index].id,
+      response_body: e.target.value
+    }]) :
+      setCheckedValues(prev => [...prev.filter(item => item.response_body !== e.target.value)]);
   };
 
 
+console.log('render task');
+
+
   return (
-      <React.StrictMode>
-        <Progressbar indexQuestion={index + 1} width={stripValue}/>
-        <div className="task">
-          {!questions.length || !stripValue || !listAnswers.length ?
-              <h1 className={'_container'} style={{display: "block"}}>Loading....</h1>
-              :
-              <div className="task__container">
-                <div className="task__code code">
-                  {/* <CodeSnippetlighter /> */}
-                </div>
-                <h3 className="task__title quiz-title_h3">{questions[index].question_body}</h3>
-                <div className="task__body">
-                  <form className='task__form form-task'>
-                    {
-                      questions[index].question_type_id === 1 ?
-                          <GetOptionTask
-                              type={1}
-                              inputValue={checkedValues.length ? checkedValues[0].response_body : ''}
-                              handleChange={handleChange}
-                          />
-                          :
-                          listAnswers.map((answer) => (
-                              <GetOptionTask
-                                  key={answer.id}
-                                  type={questions[index].question_type_id}
-                                  handleChange={handleChange}
-                                  answer={answer}
-                              />
-                          ))
-                    }
-                    <div className="form-task__buttons">
-                      {questions.length !== index + 1 &&
-                      <button type='submit' className='quiz-btn'
-                              onClick={(e) => nextQuestion(e)}>Далее</button>}
-                      {questions.length === index + 1 &&
-                      <button onClick={(e) => nextQuestion(e)}
-                              className='quiz-btn quiz-btn_dark-green'>Завершить</button>}
-                    </div>
-                  </form>
-                </div>
+    <div className="task">
+      {
+        <div className="task__container">
+          <div className='task__header'>
+            <img src={questionIcon} alt="" />
+            <h3 className="task__title quiz-title_h3">{questions[index].question_body}</h3>
+          </div>
+
+          <div className="task__body">
+            <form className='task__form form-task' onSubmit={nextQuestion}>
+              {
+
+                answers.map((answer) => (
+                  <GetOptionTask
+                    key={answer.id}
+                    type={questions[index].question_type_id}
+                    handleChange={handleChange}
+                    answer={answer}                   
+                  />
+                ))
+              }
+              <div className="form-task__buttons">
+                {/* {
+                  index != 0 && <button type='submit' className='form-task__btn quiz-btn quiz-btn_back'
+                    onClick={prevQuestion}>Назад</button>
+                } */}
+                {
+                  index != questions.length && <button onClick={nextQuestion}
+                    className='form-task__btn quiz-btn'>Далее</button>
+                }
               </div>
-          }
+
+            </form>
+          </div>
         </div>
-      </React.StrictMode>
+
+      }
+    </div>
+
   )
 };
diff --git a/src/components/features/quiz/quiz.scss b/src/components/features/quiz/quiz.scss
index a9eeed72..45932788 100644
--- a/src/components/features/quiz/quiz.scss
+++ b/src/components/features/quiz/quiz.scss
@@ -1,410 +1,736 @@
-@use 'sass:math';
-@import 'functions.scss';
+@use "sass:math";
+@import "functions.scss";
 
 $maxWidthContainer: 1123;
 
-._container{
-    max-width: 1123px;
-    margin: 0 auto;
-    padding: 0 10px;
+._container {
+  max-width: 1123px;
+  margin: 0 auto;
+  padding: 0 10px;
 }
 
-.quiz-text{
-    font-size: 20px;
-    font-weight: 400;
-    line-height: math.div(30, 20);
+.quiz-text {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: math.div(30, 20);
 }
-.title{
-    color: #282828;
-    font-family: "GT Eesti Pro Display";
-    font-size: 33px;
-    font-weight: 700;
-    line-height: math.div(48, 33);
-    letter-spacing: 0.56px;
+.title {
+  color: #282828;
+  font-family: "GT Eesti Pro Display";
+  font-size: 33px;
+  font-weight: 700;
+  line-height: math.div(48, 33);
+  letter-spacing: 0.56px;
 }
-.subtitle{
-    color: #373936;
-    font-family: "GT Eesti Pro Display";
-    font-size: 20px;
-    font-weight: 400;
-    line-height: math.div(25, 20);
+.subtitle {
+  color: #373936;
+  font-family: "GT Eesti Pro Display";
+  font-size: 20px;
+  font-weight: 400;
+  line-height: math.div(25, 20);
 }
-.quiz-btn{
-    display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
-        border-radius: 23px;
-        color: #ffffff;
-        outline: none;
-        border: 2px solid #52b709;
-        background: #52b709;
-        transition: 0 all ease 0.8s;
-        padding: 14px 38px;
-        line-height: 1;
-        font-family: "Muller Extra Bold";
-        font-weight: 400;
-        font-size: 16px;
-        text-decoration: none;
-        &:hover{
-            text-decoration: none;
-            color: #52b709;
-            background: #fff;
-        }
-        &_dark-green{
-            background-color: #1a310c;
-            border: 2px solid #1a310c;
-            &:hover{
-                text-decoration: none;
-                color: #1a310c;
-                background: #fff;
-            }
-        }
-        &_restriction{
-            max-width: 131px;
-        }
+.quiz-btn {
+  display: flex;
+  font-family: "Lab Grotesque";
+  align-items: center;
+  justify-content: center;
+  // box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
+  white-space: nowrap;
+  background: #406128;
+  border-radius: 44px;
+  color: #fff;
+  outline: none;
+  //border: 2px solid #52b709;
+  border: none;
+  transition: 0 all ease 0.8s;
+  padding: 7px 51px;
+  font-weight: 400;
+  font-size: 14px;
+  text-decoration: none;
+  line-height: 200%;
+  // &:hover{
+  //     text-decoration: none;
+  //     color: #52b709;
+  //     background: #fff;
+  // }
+  &_back {
+    background: #dddddd;
+    color: #000;
+  }
+  &_dark-green {
+    background-color: #1a310c;
+    border: 2px solid #1a310c;
+    &:hover {
+      text-decoration: none;
+      color: #1a310c;
+      background: #fff;
+    }
+  }
 }
-.quiz-title_h3{
-    color: #000000;
-    font-family: "GT Eesti Pro Display";
-    font-size: 25px;
-    font-weight: 400;
-    line-height: math.div(30, 25);
+.quiz-title_h3 {
+  font-family: "Lab Grotesque";
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 156%;
+  color: #52b709;
 }
 //=============================================
 
 .error-msg {
-    text-align: center;
-    font-size: 25px;
-    color: red;
-    font-weight: 500;
+  text-align: center;
+  font-size: 25px;
+  color: red;
+  font-weight: 500;
 }
 
-.header-quiz{
-    @include adaptiv-value("padding-top", 48, 30, 1);
-    @include adaptiv-value("padding-bottom", 85, 30, 1);
-    &__container{
-        max-width: $maxWidthContainer+px;
-        margin: 0 auto;
-        padding: 0 10px;
-    }
-    &__title-main{
-        font-family: "GT Eesti Pro Display";
-        font-size: 24px;
-        font-weight: bold;
-        @include adaptiv-value("margin-bottom", 80, 30, 1);
-    }
-    &__body{
-        display: flex;
-        flex-wrap: wrap;
-        row-gap: 30px;
-        margin-bottom: 39px;
-    }
-    &__body_interjacent{
-        align-items: center;
-    }
-    &__description{
-        max-width: 576px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-    &__avatar{
-        position: relative;
-        display: block;
-        flex: 0 0 133px;
-        min-height: 133px;
-        margin-right: 31px;
-        img{
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            top: 0;
-            left: 0;
-        }
-    }
-    &__name-user{
-        color: #000000;
-        font-family: "GT Eesti Pro Display";
-        font-size: 16px;
-        font-weight: 400;
-        line-height: math.div(30, 20);
-        margin-right: 70px;
-    }
-    &__title{
-        color: #000000;
-        font-family: "GT Eesti Pro Display";
-        @include adaptiv-value("font-size", 25, 16, 1);
-        font-weight: 700;
-        line-height: math.div(36, 25);
-        position: relative;
-
-        &::before{
-            position: absolute;
-            content: "";
-            width: prc(316, 370);
-            height: 5px;
-            border-radius: 3px;
-            background-color: #54b611;
-            bottom: -26px;
-        }
-    }
-}
-.my-tests{
-    font-family: "GT Eesti Pro Display";
-    // @include adaptiv-value("padding-top", 85, 30, 1);
-    // @include adaptiv-value("padding-bottom", 85, 30, 1);
-    &__container{
-        max-width: $maxWidthContainer+px;
-        margin: 0 auto;
-        padding: 0 10px;
-    }
-    &__title{
-        color: #000000;
-        font-size: 25px;
-        font-weight: 400;
-        line-height: math.div(30, 25);
-        @include adaptiv-value("margin-bottom", 80, 30, 1);
-    }
-    &__items{
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        margin: 0 -41px -42px;
-    }
-}
-
-.item-test{
-    flex: 0 1 50%;
-    padding: 0 41px;
-    margin: 0 0 42px 0;
-    @media (max-width: 760px) {
-        flex: 0 1 100%;
-    }
-    &__name-test{
-        color: #373936;
-        margin-bottom: 29px;
-
-    }
-    .active{
-        color: #54b611;
-    }
-    &__body{
-
-    }
-}
-.test-data{
+.task {
+  @include adaptiv-value("padding-top", 35, 10, 1);
+  background: #fff;
+  border-radius: 12px;
+  &__container {
+    max-width: $maxWidthContainer + px;
+    margin: 0 auto;
+    padding: 31px 51px;
+  }
+  &__body {
+    margin-left: 50px;
+  }
+  &__header {
     display: flex;
     align-items: center;
-
-    &__calendar{
-        padding: 13px 21px;
-        box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-        border-radius: 5px;
-        border: 1px solid #c4c4c4;
-        background-color: #f0f7e0;
-        font-weight: 400;
-        font-size: 13px;
-        display: flex;
-        align-items: center;
-        margin-right: 17px;
-        img{
-            display: block;
-            margin-right: 11px;
-        }
-
-    }
-    &__hr{
-        width: 28px;
-        height: 5px;
-        border-radius: 3px;
-        background-color: #54b611;
-        margin-right: 26px;
-    }
-    &__select{
-        max-width: 131px;
-    }
+    gap: 24px;
+    margin-bottom: 38px;
+  }
+  &__title {
+  }
+  &__form {
+  }
 }
 
-.progressbar{
-    max-width: $maxWidthContainer+px;
-    margin: 0 auto;
-    padding: 0 10px;
-    &__body{
-        display: flex;
-        align-items: center;
-    }
-    &__value{
-        flex: 0 0 39px;
-        height: 39px;
-        background-color: #5cb42b;
-        border-radius: 50%;
-        color: #fff;
-        letter-spacing: 1.1px;
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        // flex: 1 1 auto;
-        margin-right: 19px;
-    }
-    &__strip{
-        flex: 1 1 auto;
-        height: 19px;
-
-        div{
-            border-radius: 10px;
-            height: 100%;
-            background-color: #5cb42b;
-        }
-    }
+.form-task {
+  &__field {
+    padding: 10px 15px;
+    font-size: 17px;
+    font-family: "GT Eesti Pro Display";
+    letter-spacing: 0.3px;
+    outline: none;
+    border: none;
+    width: 100%;
+    resize: vertical;
+    background: #eff1f3;
+    border-radius: 8px;
+  }
+  &__check {
+    padding: 0;
+    height: initial;
+    width: initial;
+    margin-bottom: 0;
+    display: none;
+    cursor: pointer;
+  }
+  &__buttons {
+    display: flex;
+    gap: 56px;
+    flex-wrap: wrap;
+    align-items: center;
+    @include adaptiv-value("margin-top", 60, 30, 1);
+  }
 }
 
-.task{
-    @include adaptiv-value("padding-top", 35, 10, 1);
-    &__container{
-        max-width: $maxWidthContainer+px;
-        margin: 0 auto;
-        padding: 0 10px;
+.form-task__group {
+  display: block;
+  margin-bottom: 13px;
+  font-family: "Lab Grotesque";
+  label {
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 160%;
+    color: #000000;
+    position: relative;
+    margin: 0;
+    cursor: pointer;
+    &:before {
+      content: "";
+      -webkit-appearance: none;
+      background-color: #eff1f3;
+      border: 2px solid #eff1f3;
+      border-radius: 8px;
+      width: 24px;
+      height: 24px;
+      display: inline-block;
+      position: relative;
+      vertical-align: middle;
+      cursor: pointer;
+      margin-right: 16px;
     }
-    &__title{
-        margin-bottom: 39px;
-    }
-    &__form{
-
-    }
-
-}
-
-.form-task{
-    &__field{
-        padding: 10px 15px;
-        font-size: 17px;
-        font-family: 'GT Eesti Pro Display';
-        letter-spacing: 0.3px;
-        outline: none;
-        border: 1px solid #52b709;
-        width: 100%;
-        resize: vertical;
-    }
-    &__check {
-        padding: 0;
-        height: initial;
-        width: initial;
-        margin-bottom: 0;
-        display: none;
-        cursor: pointer;
-    }
-    &__buttons{
-        display: flex;
-        gap: 56px;
-        flex-wrap: wrap;
-        align-items: center;
-        @include adaptiv-value("margin-top", 60, 30, 1);
-    }
-}
-
-.form-task__group{
+  }
+  input[type="radio"]:checked + label::after {
+    content: "";
     display: block;
-
-    margin-bottom: 15px;
-
-    label {
-        color: #373936;
-        font-family: "GT Eesti Pro Display";
-        font-size: 18px;
-        font-weight: 300;
-        line-height: math.div(28,18);
-        position: relative;
-        cursor: pointer;
-        &:before {
-            content:'';
-            -webkit-appearance: none;
-            background-color: transparent;
-            border: 2px solid #52b709;
-            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
-            padding: 11px;
-            display: inline-block;
-            position: relative;
-            vertical-align: middle;
-            cursor: pointer;
-            margin-right: 30px;
-          }
-      }
-      input[type="radio"] + label:before{
-          border-radius: 50%;
-      }
-      input:checked + label:before{
-          background: #52b709;
-      }
-      input:checked + label:after {
-
-        content: "";
-        display: block;
-        position: absolute;
-        top: 6px;
-        left: 9px;
-        width: 7px;
-        height: 14px;
-        border: solid #fff;
-        border-width: 0 2px 2px 0;
-        transform: rotate(45deg);
-      }
+    position: absolute;
+    top: 7.5px;
+    left: 6px;
+    width: 12px;
+    height: 12px;
+    background: #8dc63f;
+    border-radius: 50%;
+  }
+  input:checked + label:before {
+    background: #eff1f3;
   }
 
-.instruction{
-    &__container{
-        max-width: $maxWidthContainer+px;
-        margin: 0 auto;
-        padding: 0 10px;
-    }
-    &__title{
-        @include adaptiv-value("margin-bottom", 62, 20, 1);
-    }
-    &__text{
-        color: #373936;
-        font-family: "GT Eesti Pro Display";
-        font-size: 18px;
-        font-weight: 300;
-        line-height: math.div(28, 18);
-        @include adaptiv-value("margin-bottom", 50, 20, 1);
-        span{
-            color: #54b611;
-            font-weight: 700;
-        }
-        &_info{
-            margin-bottom: 0;
-        }
-    }
-    &__info{
-        display: flex;
-        gap: 24px;
-        align-items: center;
-    }
-    &__icon{
-        width: 36px;
-        height: 33px;
-    }
-    &__btn{
-        margin-bottom: 34px;
-    }
+  input[type="checkbox"]:checked + label:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 7px;
+    left: 9px;
+    width: 6px;
+    height: 13px;
+    border: solid #1c1243;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
 }
 
-.result{
-   font-family: "GT Eesti Pro Display";
-    &__body{
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        gap: 10px;
+.instruction {
+  &__container {
+    max-width: $maxWidthContainer + px;
+    margin: 0 auto;
+    padding: 0 10px;
+  }
+  &__title {
+    @include adaptiv-value("margin-bottom", 62, 20, 1);
+  }
+  &__text {
+    color: #373936;
+    font-family: "GT Eesti Pro Display";
+    font-size: 18px;
+    font-weight: 300;
+    line-height: math.div(28, 18);
+    @include adaptiv-value("margin-bottom", 50, 20, 1);
+    span {
+      color: #54b611;
+      font-weight: 700;
     }
-    &__text{
-        font-size: 24px;
-        font-weight: bold;
-    }
-    &__score{
-        color: #5cb42b;
+    &_info {
+      margin-bottom: 0;
     }
+  }
+  &__info {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+  }
+  &__icon {
+    width: 36px;
+    height: 33px;
+  }
+  &__btn {
+    margin-bottom: 34px;
+  }
+}
+
+.result {
+  font-family: "GT Eesti Pro Display";
+  &__body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  &__text {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  &__score {
+    color: #5cb42b;
+  }
+}
+
+.selected-category {
+  background: #ffffff;
+  border-radius: 12px;
+  &__container {
+    display: flex;
+    align-items: center;
+    padding: 35px;
+    flex-wrap: wrap;
+    @media (max-width: 723px) {
+      justify-content: space-between;
+      row-gap: 25px;
+    }
+  }
+  &__title {
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 156%;
+    color: #406128;
+    margin: 0 32px 0 0;
+  }
+  &__category {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    margin: 0 44px 0 0;
+  }
+  &__img {
+    height: 48px;
+    flex: 0 0 48px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  &__title-category {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 122%;
+    color: #000000;
+  }
+  &__button {
+    background: #e1fccf;
+    border-radius: 44px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 229%;
+    border: none;
+    padding: 5px 20px;
+    color: #000000;
+    @media (max-width: 723px) {
+      flex: 1 1 auto;
+      text-align: center;
+    }
+
+    &:hover {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+}
+
+.card-introduction {
+  padding: 0px 25px;
+  margin: 0px 0px 50px 0px;
+  flex: 0 1 33.333%;
+  @media (max-width: 850px) {
+    flex: 0 1 50%;
+  }
+  @media (max-width: 850px) {
+    flex: 1 1 auto;
+  }
+
+  &__body {
+    display: flex;
+    gap: 20px;
+  }
+  &__title {
+    font-weight: 900;
+    font-size: 14px;
+    line-height: 171%;
+    color: #52b709;
+    margin: 0 0 30px 0;
+  }
+  &__icon {
+    flex: 0 0 25px;
+    height: 30px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &__text {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 200%;
+    color: #000000;
+  }
+}
+
+.quiz-passing-information {
+  background: #fff;
+  border-radius: 12px;
+  &__container {
+    // @media (max-width: 600px) {
+    //   display: block;
+    // }
+    // @media (max-width: 600px) {
+    //   display: block;
+    // }
+    // @media (max-width: 600px) {
+    //   display: block;
+    // }
+  }
+  &__main {
+    //flex: 1 1 auto;
+    padding: 35px 45px;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1.2fr 1.2fr 0.6fr;
+    @media (max-width: 900px) {
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 20px;
+    }
+    @media (max-width: 500px) {
+      grid-template-columns: 1fr;
+    }
+  }
+  &__icon {
+    flex: 0 0 32px;
+    height: 35px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  &__text {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 167%;
+    color: #6f6f6f;
+    span {
+      color: #111112;
+      font-weight: 700;
+    }
+  }
+  &__timer,
+  &__attempt {
+    display: flex;
+    gap: 23px;
+    align-items: center;
+  }
+
+  &__specialization {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+  &__specialization-title {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 122%;
+    color: #000000;
+    word-break: break-word;
+  }
+  &__button {
+    font-size: 18px;
+    max-width: 174px;
+    height: 46px;
+    font-weight: 500;
+  }
+}
+
+.block-text {
+  border-radius: 12px;
+  background: #fff;
+  text-align: center;
+  width: 100%;
+  padding: 18px 0;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 156%;
+  color: #000000;
+  a {
+    color: #406128;
+  }
+}
+
+.card-available-test {
+  position: relative;
+  background: #ffffff;
+  border-radius: 12px;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &__container {
+    display: block;
+    @include adaptiv-value("padding-top", 30, 20, 1);
+    @include adaptiv-value("padding-bottom", 30, 20, 1);
+    @include adaptiv-value("padding-right", 28, 18, 1);
+    @include adaptiv-value("padding-left", 28, 18, 1);
+  }
+
+  &:hover {
+    box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+    transform: scale(1.02);
+    text-decoration: none;
+  }
+
+  &__top-head {
+    display: flex;
+    align-items: center;
+    gap: 19px;
+    margin: 0 0 24px 0;
+  }
+  &__title {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 122%;
+    color: #000000;
+    max-width: 128px;
+    margin: 0;
+  }
+
+  &__info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    p {
+      flex: 0 1 66%;
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 20px;
+      color: #000000;
+      margin-bottom: 0;
+
+      span {
+        color: #52b709;
+        font-weight: 700;
+      }
+    }
+    &Link {
+      width: 48px;
+      height: 48px;
+      background: #ddeec6;
+      border-radius: 50px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  &__finished {
+    background: rgba(255, 255, 255, 0.76);
+    mix-blend-mode: normal;
+    border: 3px solid #52b709;
+    border-radius: 12px;
+    padding: 13px 16px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    gap: 10px;
+    p {
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 129%;
+      color: #000000;
+    }
+    a {
+      &:hover {
+        text-decoration: none;
+        color: #fff;
+      }
+
+      display: block;
+      background: #52b709;
+      border-radius: 44px;
+      font-weight: 500;
+      font-size: 15px;
+      line-height: 213%;
+      color: #ffffff;
+      padding: 9px 25px;
+      white-space: nowrap;
+      outline: none;
+      border: none;
+    }
+  }
+}
+
+.block-completed-test {
+  background: #ffffff;
+  border-radius: 12px;
+  // .block-completed-test__container
+
+  &__container {
+    padding: 41px 35px 29px 59px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  // .block-completed-test__img
+
+  &__img {
+    flex: 0 0 54px;
+    height: 60px;
+    margin: 0 34px 0 0;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  // .block-completed-test__title
+
+  &__title {
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 156%;
+    margin: 0 60px 0 0;
+    color: #52b709;
+  }
+
+  // .block-completed-test__text
+
+  &__text {
+    max-width: 386px;
+    margin: 0 26px 0 0;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 200%;
+    color: #000000;
+  }
+
+  // .block-completed-test__button
+
+  &__button {
+    display: block;
+  }
+}
+
+.report {
+  // .report__row
+
+  &__row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    flex-wrap: wrap;
+    @media (max-width: 600px) {
+      display: block;
+    }
+  }
+
+  // .report__column
+
+  &__column {
+    &:first-child {
+      background: #ffffff;
+      flex: 0 1 22%;
+      border-radius: 12px;
+      @media (max-width: 1000px) {
+        flex: 0 1 50%;
+      }
+    }
+    height: 128px;
+    border-radius: 0px 12px 0px 0px;
+    flex: 0 1 26%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #e1fccf;
+    gap: 21px;
+    &:last-child {
+      flex-direction: column;
+      gap: 0;
+    }
+    @media (max-width: 1000px) {
+      flex: 0 1 50%;
+    }
+  }
+
+  // .report__job-title
+
+  &__job-title {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 122%;
+    color: #000000;
+  }
+
+  // .report__value
+
+  &__value {
+    font-weight: 700;
+    font-size: 52px;
+    line-height: 56%;
+    color: #52b709;
+    // .report__value_false
+
+    &_false {
+      color: #5b6871;
+    }
+  }
+
+  // .report__text
+
+  &__text {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 138%;
+    color: #000000;
+  }
+
+  // .report__status-text
+
+  &__status-text {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 200%;
+    color: #000000;
+    width: 50%;
+  }
+
+  // .report__status
+
+  &__status {
+    background: #1458dd;
+    border-radius: 44px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 200%;
+    color: #ffffff;
+    padding: 7px 34px;
+    max-width: 154px;
+  }
+}
+
+.alert-result {
+  display: flex;
+  align-items: center;
+  @include adaptiv-value("padding-top", 39, 20, 1);
+  @include adaptiv-value("padding-bottom", 39, 20, 1);
+  @include adaptiv-value("padding-right", 61, 20, 1);
+  @include adaptiv-value("padding-left", 61, 20, 1);
+  background: #fff;
+  gap: 30px;
+  border-radius: 10px;
+  @media (max-width: 900px) {
+    flex-wrap: wrap;
+  }
+  &__column {
+    display: flex;
+    @include adaptiv-value("gap", 44, 14, 1);
+    align-items: center;
+    @media (max-width: 900px) {
+      flex: 1 1 auto;
+    }
+  }
+  &__icon {
+    width: 39px;
+    height: 39px;
+  }
+  &__text {
+    font-weight: 700;
+    @include adaptiv-value("font-size", 18, 14, 1);
+    line-height: 156%;
+    word-break: break-word;
+  }
+  &__button {
+    width: 231px;
+    @include adaptiv-value("font-size", 16, 14, 1);
+    @media (max-width: 900px) {
+      width: 100%;
+    }
+  }
 }
diff --git a/src/images/icon-specialization.png b/src/images/icon-specialization.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f878b22abb80ab73f839847ebfb7530ee683b61
GIT binary patch
literal 2272
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

literal 0
HcmV?d00001

diff --git a/src/images/note.png b/src/images/note.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ce1462c77bef5816aaf10224b7d125878cc6bbe
GIT binary patch
literal 547
zcmV+;0^I$HP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0k}y-K~#7F?N{AV
z!!Qh1ejf6e4e$u<24RAB1Ih%H2`Cc)6SPdgb%Jz*WP_Rs8Wu?S1oq*Ekho3`4#;<>
zvm;Bg<VaRRG~&O*J3&_XzJG;rPW@1T^0F*%F-ltpc=HTnOv6FKiD_sfiOp~H=2cbg
zJkOJA9%F8EA{#w{j(|==A17+%zyVZ2@u|KBUdn4Nv~IAMDSMgK36P2&3I!rKTEO!q
z_!owpeocJD{JtL>oPM)|F}8J}4N@hP6MXt%j1GK@17R2@7z7RMKpaJpFv(aGK@f1s
zCMdTRk~Bre-;pbtYFgK_Nya@fsjo3l>%uvGckKI=;SRN2m<+xp)s*l06-Uo9pe6Ij
z6>Ya#2WDhMt})aJ*kIcw@OR4)$Go8T(&MhT2Q^lK^DBVCC9-~I@{nv>B;P$YpJTp;
zj3m{dRAX}9>{AkQD{Uyl)X>=&C3qD5AW4V_r=YVM`$bO>@q)i2FiJc=d}XI^6+E{s
zV)JY2z}O9cjRWo_)B^4kR!IoKTzyJ&W;08YBVcC&dx@Iowm&A^Ub)5x`!RtN5_Eow
lj<EO#=p@)Us0&N5(N_*$&f1vS;->%r002ovPDHLkV1jLN;S2x(

literal 0
HcmV?d00001

diff --git a/src/images/question.png b/src/images/question.png
new file mode 100644
index 0000000000000000000000000000000000000000..53553ba0310050d5a18fe274e7fa1cc8ea9229c8
GIT binary patch
literal 803
zcmV+;1Kj+HP)<h;3K|Lk000e1NJLTq000^Q0015c1^@s6GTRQ=00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0=P*;K~#7FtyYa~
z+CUV(vq3@vQ*Tgbg2D!7f+icl1f&xrouG6Ak_nnlKsrI#pzZ{*Vvvw*-}QU;9deBS
z4)RIp%-z$yzwf<!oB^)udP$Nj8Rv8Q%S^%fRx<Xue|uZiijb02h>eueW0&K37e%v5
zMULaFVa*)hA(L{&IS-gQe02wtLd^I3{o{$m$Z=lrlcUk-j$HuUv7vj0!{J)*xeD~%
zV=5;IT~Kua38rc4)3*>JfVJC7O;T==D<2W@^j3nDV1EK9W<Aybg!MW})3r8+TNWES
zPLRg&>~J^)CGoIA`9wMK+0uKKWrZbAJjDH|M1wQt+5P@ThombksJqAdWZU+i;sL@%
zIdh>bNaFYkY~qshZ(3O#$6uKNtle(+9hcmMK=A;VW^QvSA9R?qIzi23`|7;AM|F@g
z%$E{L)V?Wd$<VXy1;XPNSq37^vG~e>Ei-^M8jn}F;BPs(h~zseL++mE<Y1Jy%A#yi
z1k;vn$wd)PAa|#g5WSfpdR>G-{iRe&`nEmYN0D)!tS&-O;L!>OK9$+|p^6Z;=X^0E
zfUzQ~H59GaL;x7^n+!sI{j56glq1zxrzqTibux;fwIpfvC{rTD3-a`fo`NPhG~xMR
zF!0V&M0XrtUny%FDUAZugnRw|kFyj};p)Z<g^M=%I%6nDMAycaPh?<iXlb(KQQnPh
z`?fB=ZNLlaW4Ts;PfCE^I-Ut}UQBWbigqqanTIML2UL5aXNB4pUgVc-Ux+EEkKuTH
z3)hyHj9jDyL&c45#Cp2Q8gLX{aV<#n1arO=hYJI*0_5@dLKnRuB6Z5KDJT_sgrnz2
z=be`Y$r>cj=$R&96#E1(h!DQo3emQvdJK4{C<|YjzOqY!o`*CniX+)cucMLp98$pI
h0A5j3eJJKj<3A#Va;-82SZn|Q002ovPDHLkV1nTiYt8@w

literal 0
HcmV?d00001

diff --git a/src/images/quiz/accempt.png b/src/images/quiz/accempt.png
new file mode 100644
index 0000000000000000000000000000000000000000..586a9fc72e879364b90a8e34e64b1feba4026949
GIT binary patch
literal 1185
zcmV;S1YY}zP)<h;3K|Lk000e1NJLTq001HY001Kh1^@s6@f+A@00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1U5-TK~#7Fy;#jo
z+dvSWbpXSu^a*gEfN<sjeFESKNS}akfFP)3TdEKVLWCzEoO*;FdrBgK)Ens&;J!gP
zAQY;2`_1|%b{hXBRY$VC+4atTJ2U&uY>57&n8(NEq_H_FqNrM3)^vSW5|v5HG6}I9
z8FtXu7p2mj>$+XLUUy=1Yc-38!&Z`RL3sewYMc1bL~}D-l&FWNkHsATGSFsFyko=v
zreoFXAJzP$qn75nZL`t1Nm?V-B5X=A9A5eWIsj932ZI~C+3Zs?XhS1fCD-i-AcT}M
z4FpS~Ma;v)st|%fIKp)+=J|P-3W^V61Flq-8FyDyv_u6ALdvEb4Ay1<v5UuI0N8Qc
zs@2*YXSslc3g8B-(b!LOLly`$TY*cY5H?<Av9K@^ObiG|b^yYx*RN;_iGXn65<BR(
z&(2x^vyZ?o3thh)pH~VMa9~RL74EQLi8@Uo5fB`F7EaCg=y>=3zPGWy{tUMt@w@x*
z@FN%tErQc=%ew#wo2HN`2uLT%qIRRvB<}>8Q5R{xk_ui1yM$&3L2${ZwC~k8$Pn?e
z7xby)i)em?O9<9jqZvU!TG7~`!Jt1W;IZa4*4&nFZy$JEV*(<MW}+s|4uYiuT~Geg
zCS9L+Tmkk*r3hVD`A36qwz%O6QHU!NK*Sd-m3ERy4E-Iv`p}`)pOZ}AQuYu;4&?#B
z0k*i<%mSf!==8Lgu8r<sm2JHDIoBBEC9!-0Q-boJ(6UCW3J&s-3qS!NvP>QV*d7c~
z;Wh(dA9X0F_$Cd%S0oq(!C5ya1)yAb76^_nCnqZbj})eH1%eZ!R~`i7WF6g@2obJZ
zs4$9wz-b!;(dR6imSNL`fjAU5ZC()Vv3V^#hEE5~AHA%EsR^+H@bvrT<(XZ>k!?@`
z!HKz@Fo)gL_MhE6SzEFWl$VOo$g{{M<rM6=$r&`|lNOR)-Z<GLKkzl6`o;{$b!pZt
z|Ag$(KL8P7^g9J)oZ%8Dg2=e`WR6hJ-`rEg63jJBWFez_N$>EGqrVy?pe!AntpVzK
zS`cbey8cLBrLX2G9+68+S8xwu(9ER-MftQKl;}D$u@TME3W#mneOR44t01ZE3?&wg
zPE27CA^)H-k8(~}p+zdEYxCfsoT6lJMi9(D4#FUo24cmtTwL5?+6DjLhQt&RU&*W>
zNHOqOEXIH+7x|YV#KB|KP3rFIxuiG<F3f!<PO4Ev3VLSGGA>x}xys^-Ybp@ljgf;p
zH5Z9ACHBF=2H)~fUowbJZn7HvYoJbtx-lXq(x^dXD)n}>${>9H*yV~2eU3}?bEHWa
znw0ObIJ=XBofBdQMU<82%9{Rffaju>&=SL;SLF&(!Gg=NT`=i-bxqH=z*Uj!YVyAU
zrn#)WzHTM`ouJG=KffCMF1fDr`QqXiO(}l>ts6StF9J!G00000NkvXXu0mjfZVDK0

literal 0
HcmV?d00001

diff --git a/src/images/quiz/compltedImage.png b/src/images/quiz/compltedImage.png
new file mode 100644
index 0000000000000000000000000000000000000000..1dfabcf5658ab79da0409caac09ff847296dca4c
GIT binary patch
literal 2864
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
O0000<MNUMnLSTX}$ztvR

literal 0
HcmV?d00001

diff --git a/src/images/quiz/success.png b/src/images/quiz/success.png
new file mode 100644
index 0000000000000000000000000000000000000000..87b0eb868ee7f7dc04b77e31d5470be755539dbd
GIT binary patch
literal 2298
zcmV<W2nF|vP)<h;3K|Lk000e1NJLTq001fg001fo1^@s6#ly*400009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2#-lbK~#7FwOLzi
z9Mu{AXY6EmV>ccrZfq*Rle9FIDx8f_6Y>&oloquQ#T%)qT2O^~2v1ayJhfH9=JLQ3
zF@m=|*bz5zk!&ju2!RwkFOW#UI!K6saMl3{I||t`#CQ|OGko7UbH=lq^{&@8zce1t
z?VRuY*YEsm$tuNxh%}}}{2t4)T#+En+u=d+a4#POJX>RUZ`|{|F<GTpQl~ghTSkME
zUS1}f8syHqo20dUqa>Paad1{BXKu*#IbWtH=VfNHD8;!&bsOJ}_`d%XK<A|nSus#3
zFl|{4$DySR!R^VmNhbjEScy!1Iw$AfE2y(~`Gx@SP(6Ta0;P#<+wO-6AEUPRKd?=@
z{@5yOk@N2t<jkv=72qIHVEb!*W7PoZ!vBWxT6+J3?XtJ0O_?_?H1VbL*JS!)QD$cr
zjERL>Z)x8k?K@J^+0`V@wvD%pf9AEz06fEg;miJkYTC7`fP|^-VQA4k{Qpi&n2eqg
z%(;;(%8Wch$zwPiK7z*%11btI>A?4Yz(RNK+pHF0go}ImKa<oh!5#wG+=_vQAWwJf
zNI8d}=#-Xi8=_}t0r1RgGb&JmAQ%IvA(6#VOyDgumWxvc{{0aBn_AxgK)dXUxevj<
z`D~s+=Y^Wh)dZ@|ZJ(wlkGyzSWNMoD)bVeW2H~$m&|KY-t3lg+%ox=0-=GBJ60{OE
z3$PX4prL%QRBF>F1o^M$c1Tleqq@fw^ZJum@x^%z5@bEE@ItXz^rTMVH^t)oXfm0Y
zn)7a^FMRmD<KEpY&6uZgqb<L=XS00q!S~Mf9~U#pWbzHXU#tjp%a$$uIAxE#bXR0<
zg5*jua1J2<f|X9l8U^#`0Av*Ill|<>tn=%8exbl7n~{^dn&snnu6EeAm7JfSfA<!k
z+AP*EqkHGQo7Fv<o0<ejYH}YyPRlw8wM(#z3qkg)kAHAXkTr)^gp1t^&5z@~Jg=i%
zgEVy9<Vhp1{BP2mRnZt6ST0!BBJ@L!jbQRlJ^xK~pT$J`uGMGmDWIV?vvH6UNXp*y
zf`fs2>kXRv!P<uyq~}JjsC(4x{s*^Fc^P2KL_kq_`lwA)acFWTVn#Ox8ke70JnzaF
zi3_XM^{`-c9c=XyD&N{Y5l{fi#%nfLH+y+On1W;-#L<#9+9`e3meCj%k1|CuPb;y+
z+1s;~oS;{g@$f|_UcYGqn0#bCOpZBvk(V#B%BlS9v<}Cfp|JS4x3xznd21|I=}>x`
z)oVD?(5T-{pD-Gw*-6W=#t~VgFx>&%AhL+_=-}_<zDI7O-$Aom9#eDa3Y5oOSzg1k
zCk?w&K!M4a-=@RH>v(KMYw}Hi9KghVdlA8hRR!80dwSZ`8Im^d;hhnfH>0l>m2xhf
zU(#xa!WOvDXyA0jfX*PnbCtEsPL~P&&MmzU<F;-+O<H*0BfpYA9l0%frZS24{ju05
zc^odk3sYb|#Gr&qgfi32u5Kd6W@vW!XTAzXArMTK31iX29FJp;lZGcGn{4;~W4Ft1
z!@@yfki2)|TSb@)1@Gk2Xx0>z#eZ5vZC~IKGYiqvkZC!MN(t?^aK&YlI~>24Ea<Pt
z?vVEFNf4E<9V~7DAZG#ccqLlMR7dU!Ee{k5SC5vCXn7$}M)MS}4X0J}Y0~1@mEl-b
zs!-6)h3z`%DE}dO!C;QzuDmuNIpL}2zYanA{hn72vP241o(VMyRo^f>$B@<qZk2Cx
z%nS@VMkP%{a1-xemA%<tme9hto}DrrQ@KXv;cm8sE;MWI#EEs70X)9pU5~38+S1$K
z$^xytz<l@CGgDC-QDhioCJs__%Xz~sPcA>6H;Q*!m$*cbcG{PSx^{yg&#2GEows9q
ziYHg^+bavI$f4rg&3w3pD0w!8{nLqme<?9ClanffoccKD)Bmds;&7j3L<cuC3hm|M
z)!@!9Q%W0pmK&U_H>~IFm}VK-FaP%<>ovLS?%FAiSwgS{m(Fm`4F84|Ny)S-KGvA+
z`}R21YrxX<x=Q)I)h5xb$3K99yc3UpDK9<zxk^7evJ1OcMhgi{r9wr<0s0~A(@IFY
zc1wTE*33mbn#>4+h7`+{>R_Qce|PbkKTw!i7{dRV8j)T0{dYq~^Lnlzvj;@P$T>w&
z0v4Zf!=8rDjeZxsK;p_GK>AmEGA~bXI38XNB{Z5Zr<xSKk!0U0V)*tb&Ce1?VS4BW
zam509D^auc78ViCRZiUFR8!YLLtNE<U8gD%2<-y)U@aF|8%PFJ&_~~lYcodN^AS)A
zi7Oic5pjjwfAkJk9o5#Umaf(YQuh$Zu;L)giF*W82Zju=+-W|l6FHj%iKa$&PCi*r
z%`Op`2E`3bq^oUERC1TnTgkp2+tag15r4+^wIjZL<-U9Jqibjk_}OG~Qyxu(3$g|w
zMZ`Rc8~pR>?GZOH6%FpkNIw++rUWQE6WD9N%f`T^Pv@N9cRQ+sL9jdbwIB+wIoRX>
zW7DRTn@A)k>g|?Li>Xv<5Fnp}|2uzw!j-MJC-mHijlpAIMHQ`l?5a&NnBEE5QS>a{
z+r;N1Wawb#<I7bc?b{7mCUesSCNGHR%Q6D9vL;z6SZlZ?q;7Gr?BreeU{=mz6KMRI
z^Fb3iEKq3z6FMQe;i0?JD2?SkR#qPpoKTbXwH;$%8S!BAmdhMRO_U2W1zbV_E~vh}
zPH!w2?CaD2*iUj|txJmOu`+N-j6#t4<*=-%hmVa~A57d|skgZrnNaSdQxG#v*ut#p
z@AdrH;F{hh0n?Pb4z`vsooYfZ!IDUKS!x0Y{VOfItN8gQ0?fU*Lw{pcp@|tN#>Cuh
z(!6wyJY0j|MES950*}<o3+e`13c9VEyHPT&Sn$Mt5K}*j!T(fmpL_O+)piAc0>jMu
Urly38b^rhX07*qoM6N<$f^lJLd;kCd

literal 0
HcmV?d00001

diff --git a/src/images/quiz/timer.png b/src/images/quiz/timer.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f58884c77b9036570fc48251e2f0fddd6e984f8
GIT binary patch
literal 1125
zcmV-r1e*JaP)<h;3K|Lk000e1NJLTq001EX001Kh1^@s68Z2XE00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1NuosK~#7FwO2h-
z+dve4yD->P@eLwQ5K>bhP7rf~I9)nS0ftIaGQ*5afjI%DOhq^WqM*if=}=A(m%t?2
zd{4XbtZd1aobb)8C9n49+xOnSA3;mPJ38u+QWtoQDM@yN)6-F<dEIU+7!1aCpQI%r
zlH{#<b%YQfD$i>)uDo9F;{T8kVsaWq)T%Pa@AYml*2QbbCL*XJSd7$cwjqIcV9>&1
zZOU&R38h9#i0dE>qrx?My)!(zR@V??KdsWD&3ioui|=7^wt*I&x$pQlWHKP-;2Uqy
z#he)Z5&8mb5>F1HluKgv++qO%ACEoKCyu02!<jMt{^jHy8_7mvJJC|=a39`-uVLtW
zp4XzMr+aj<0jH{DDU_1n(}VRDSa0GvhT(J*A#RJtW+yFN0}n%n$LypZo}b6lw?mXn
zzCm-S0zhKEG!G6sBqiIzxa=y6IRs*e-=_tz)loVoTNgG3>As(qUjB-*3ZQ>5`%c=>
z+(fB|<mKg>)iKl1PZf}Ey0WrsjPfQm(jpS65yA#w(Y_ysySNd)Vtq<^PmRVe40)Vs
zy1x>FlamqF-%k&>wzg+~6NZ3e79M66%kU2mJxIfcghpUHm{}SA!VAN5ssT8xE8}A}
zGPOv<#LEchCiMFOON1r#TZoMrbr4ljhYb+e*Dq=!4QW2Oq@@tgFgHY`Ci+;=YQgNm
zHrL5)LwbjYEE-4Z4~3XWL?h<+tkH5fXH~+cHu=vg0?{@kLD217(J~R(2(gX)!6f#A
zv@Dv<5xnOZD&goGu{xMdRAsKM8W^)O&83<Mf`C0{Oxg@cDkcHfTy+5^Liw9=<Ll^H
z3qr>bCnZ7boUGiS5|Sk6B^5``gM&?~hjD5b^bbkRG_cT{S`#ekOEO`#4mb#@DIcMv
zY*QTw;n*Z%rBq!}(w8u7%Or8R85iFTj*maqSc21qG@`DW45(9-1uuekdYa`Jx3Gzy
z@SwL<=PK(~uBKw;v`jmWh?WFYG^{$-T<ccmAZ6+}U>Cyj<*yA$KUG_ntx0wqATWR@
zY@2BMs^C48PWgtpC<+36@7aykb~<%Y6tP$M=l1SyytB2{gl&9wx3(Ve{|CJS($W!5
z7l$1L{r<PCf8wmv`Z^~kY#$e|p%#<DvlL=_dCBE1Wr;3hr!1Xciol$8b8g#w)b)W<
z_cfhQ837j$E_zy=>=qrYy!bJxKbLuSIahgeI6qY2XUZym%GM|?Tuj-<I_#Q(Oy;tz
z*tHJevLBcf%rHW>fqC9|VO2g=&Si)MpDv4pT%~jT(LpJzDI&xb-*WA=G>IG;1S`}b
r+ob)zV{MpbN}Q;0OP-%E>%^hIt8D$jFp(dV00000NkvXXu0mjf<~{xO

literal 0
HcmV?d00001

diff --git a/src/index.css b/src/index.css
index cc8e27fb..a143b554 100644
--- a/src/index.css
+++ b/src/index.css
@@ -19,7 +19,7 @@ code {
 }
 
 h1 {
-  display: none;
+
 }
 
 .container {
diff --git a/src/pages/AuthForCandidate/authForCandidate.scss b/src/pages/AuthForCandidate/authForCandidate.scss
index 2b648202..5c96df86 100644
--- a/src/pages/AuthForCandidate/authForCandidate.scss
+++ b/src/pages/AuthForCandidate/authForCandidate.scss
@@ -6,7 +6,7 @@
 
   .auth {
     &__wrapper {
-      background: #FFFFFF;
+      background: #ffffff;
       border-radius: 12px;
       padding: 50px 0 35px 56px;
       margin-top: 40px;
@@ -37,7 +37,7 @@
 
       input {
         margin-bottom: 30px;
-        background: #EFF2F7;
+        background: #eff2f7;
         border-radius: 8px;
         min-width: 300px;
         width: 100%;
@@ -58,7 +58,7 @@
       }
 
       button {
-        background: #52B709;
+        background: #52b709;
         border-radius: 44px;
         max-width: 130px;
         border: none;
@@ -85,7 +85,7 @@
       text-align: center;
 
       span {
-        color: #52B709;
+        color: #52b709;
       }
     }
 
@@ -96,13 +96,19 @@
     }
 
     &__categoriesWrapper {
-      display: flex;
       position: relative;
       margin-top: 200px;
-      flex-wrap: wrap;
-      row-gap: 24px;
-      column-gap: 21px;
       width: 100%;
+      display: grid;
+      grid-gap: 24px;
+      grid-template-columns: 1fr 1fr 1fr;
+      margin-bottom: 24px;
+      @media (max-width: 955px) {
+        grid-template-columns: 1fr 1fr;
+      }
+      @media (max-width: 668px) {
+        grid-template-columns: 1fr;
+      }
     }
   }
 
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index beb60514..1987eebd 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -11,6 +11,7 @@ import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
 import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {apiRequest} from "../../api/request";
 import {Navigate} from "react-router-dom";
+import { Navigation } from '../../components/Navigation/Navigation'
 
 
 const Home = () => {
@@ -58,6 +59,7 @@ const Home = () => {
   return (
       <>
         <ProfileHeader/>
+        <Navigation />
         <div className="catalog">
           <div className='container'>
             <ProfileBreadcrumbs links={[
diff --git a/src/pages/PartnerAddRequest/PartnerAddRequest.js b/src/pages/PartnerAddRequest/PartnerAddRequest.js
index 478df586..968bf85b 100644
--- a/src/pages/PartnerAddRequest/PartnerAddRequest.js
+++ b/src/pages/PartnerAddRequest/PartnerAddRequest.js
@@ -12,6 +12,7 @@ import documentsImg from "../../images/partnerAddRequestThirdInfo.png"
 import {Navigate} from "react-router-dom";
 
 import './partnerAddRequest.scss'
+import { Navigation } from '../../components/Navigation/Navigation';
 
 export const PartnerAddRequest = () => {
     if(localStorage.getItem('role_status') !== '18') {
@@ -20,6 +21,7 @@ export const PartnerAddRequest = () => {
     return (
         <div className='partnerAddRequest'>
             <ProfileHeader />
+            <Navigation />
             <div className='container'>
                 <ProfileBreadcrumbs links={[
                     {name: 'Главная', link: '/profile'},
diff --git a/src/pages/PartnerBid/PartnerBid.js b/src/pages/PartnerBid/PartnerBid.js
index 817a7e9e..d7a8ac42 100644
--- a/src/pages/PartnerBid/PartnerBid.js
+++ b/src/pages/PartnerBid/PartnerBid.js
@@ -12,6 +12,7 @@ import personImg from "../../images/mokPerson.png"
 import deleteBtn from "../../images/deleteBtn.png"
 
 import './partnerBid.scss'
+import { Navigation } from '../../components/Navigation/Navigation';
 
 export const PartnerBid = () => {
     if(localStorage.getItem('role_status') !== '18') {
@@ -37,6 +38,7 @@ export const PartnerBid = () => {
     return (
         <div className='partnerBid'>
             <ProfileHeader />
+            <Navigation />
             <div className='container'>
                 <ProfileBreadcrumbs links={[
                     {name: 'Главная', link: '/profile'},
diff --git a/src/pages/PartnerRequests/PartnerRequests.js b/src/pages/PartnerRequests/PartnerRequests.js
index 79234490..746aebea 100644
--- a/src/pages/PartnerRequests/PartnerRequests.js
+++ b/src/pages/PartnerRequests/PartnerRequests.js
@@ -9,6 +9,7 @@ import {Footer} from "../../components/Footer/Footer";
 import cursorImg from "../../images/cursorImg.png"
 
 import './partnerRequests.scss'
+import { Navigation } from '../../components/Navigation/Navigation';
 
 export const PartnerRequests = () => {
     if(localStorage.getItem('role_status') !== '18') {
@@ -35,6 +36,7 @@ export const PartnerRequests = () => {
     return (
         <div className='partnerRequests'>
             <ProfileHeader />
+            <Navigation  />
             <div className='container'>
                 <ProfileBreadcrumbs links={[
                     {name: 'Главная', link: '/profile'},
diff --git a/src/pages/PartnerSettings/PartnerSettings.js b/src/pages/PartnerSettings/PartnerSettings.js
index f83882cd..29ec2306 100644
--- a/src/pages/PartnerSettings/PartnerSettings.js
+++ b/src/pages/PartnerSettings/PartnerSettings.js
@@ -7,11 +7,13 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import kontur from "../../images/konturLogo.png";
 import astral from "../../images/astralLogo.png";
 import "./partnerSettings.scss";
+import { Navigation } from "../../components/Navigation/Navigation";
 
 export const PartnerSettings = () => {
   return (
     <div className="settings">
       <ProfileHeader />
+      <Navigation />
       <div className="container settings__page">
         <ProfileBreadcrumbs
           links={[
diff --git a/src/pages/PartnerTreaties/PartnerTreaties.js b/src/pages/PartnerTreaties/PartnerTreaties.js
index df732be2..cf767212 100644
--- a/src/pages/PartnerTreaties/PartnerTreaties.js
+++ b/src/pages/PartnerTreaties/PartnerTreaties.js
@@ -15,6 +15,7 @@ import lockDone from "./Images/lockDone.svg"
 import avatarMok from "./Images/avatarMok.png"
 
 import './partnerTreaties.scss'
+import { Navigation } from '../../components/Navigation/Navigation';
 
 export const PartnerTreaties = () => {
     const [toggleTab, setToggleTab] = useState(1);
@@ -25,6 +26,7 @@ export const PartnerTreaties = () => {
     return(
         <div className="treaties">
             <ProfileHeader/>
+            <Navigation />
             <div className="container">
                 <ProfileBreadcrumbs
                     links={[
diff --git a/src/pages/PartnerСategories/PartnerСategories.js b/src/pages/PartnerСategories/PartnerСategories.js
index caaed3b2..00704371 100644
--- a/src/pages/PartnerСategories/PartnerСategories.js
+++ b/src/pages/PartnerСategories/PartnerСategories.js
@@ -22,6 +22,7 @@ import rightArrow from "../../images/arrowRight.png"
 import avatarImg from "../PartnerEmployees/avatarMok.png";
 
 import "./partnerСategories.scss"
+import { Navigation } from '../../components/Navigation/Navigation';
 
 export const PartnerCategories = () => {
     const dispatch = useDispatch();
@@ -130,6 +131,7 @@ export const PartnerCategories = () => {
     return (
         <div className="partnerCategories">
             <ProfileHeader />
+            <Navigation />
             <div className="container">
                 <ProfileBreadcrumbs links={[
                     {name: 'Главная', link: '/profile'},
diff --git a/src/pages/Payouts/Payouts.js b/src/pages/Payouts/Payouts.js
index 0ab6b14f..052eb0c5 100644
--- a/src/pages/Payouts/Payouts.js
+++ b/src/pages/Payouts/Payouts.js
@@ -1,11 +1,13 @@
 import React from 'react';
 
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+import { Navigation } from '../../components/Navigation/Navigation';
 
 export const Payouts = () => {
     return (
         <div className='payouts'>
             <ProfileHeader />
+            <Navigation />
         </div>
     )
 };
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index aa163181..2ef8520d 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -19,6 +19,8 @@ import settingIcon from "../../images/settingIcon.png"
 import rightArrow from "../../images/arrowRight.png"
 
 import './profile.scss'
+import { CardControl } from '../../components/CardControl/CardControl';
+import { Navigation } from '../../components/Navigation/Navigation';
 
 export const Profile = () => {
 
@@ -27,19 +29,19 @@ export const Profile = () => {
   const [profileItemsInfo] = useState({
     developer: [
       {
-        path: '/calendar',
+        path: 'profile/calendar',
         img: reportsIcon,
         title: 'Ваша отчетность',
         description: '<span></span>Отработанных в этом месяце часов'
       },
       {
-        path: '/summary',
+        path: 'profile/summary',
         img: summaryIcon,
         title: 'Данные и резюме',
         description: 'Ваше резюме<br/><span>заполнено</span>'
       },
       {
-        path: '/tracker',
+        path: 'profile/tracker',
         img: timerIcon,
         title: 'Трекер времени',
         description: 'Сколько времени занимает<br/> выполнение задач'
@@ -51,7 +53,7 @@ export const Profile = () => {
         description: 'У вас <span>подтвержден</span><br/> статус самозанятого'
       },
       {
-        path: '/settings',
+        path: 'profile/settings',
         img: settingIcon,
         title: 'Настройки аккаунта',
         description: 'Перейдите чтобы начать<br/> редактирование'
@@ -59,31 +61,31 @@ export const Profile = () => {
     ],
     partner: [
       {
-        path: '/requests',
+        path: 'profile/requests',
         img: reportsIcon,
         title: 'Запросы и открытые позиции',
         description: '<span>У вас 2 вакансии<br/></span>открытые от лица компании'
       },
       {
-        path: '/categories',
+        path: 'profile/categories',
         img: summaryIcon,
         title: 'Данные персонала',
         description: 'Наши специалисты <br/><span>уже работающие у вас</span>'
       },
       {
-        path: '/tracker',
+        path: 'profile/tracker',
         img: timerIcon,
         title: 'Трекер времени',
         description: 'Контроль времени и<br/> выполнение задач'
       },
       {
-        path: '/treaties',
+        path: 'profile/treaties',
         img: paymentIcon,
         title: 'Договора и отчетность',
         description: 'Ключевые условия<br/> договора'
       },
       {
-        path: '/settings',
+        path: 'profile/settings',
         img: settingIcon,
         title: 'Настройки аккаунта',
         description: 'Перейдите чтобы начать<br/> редактирование'
@@ -94,6 +96,7 @@ export const Profile = () => {
   return (
       <div className='profile'>
         <ProfileHeader/>
+        <Navigation />
         <div className='container'>
           <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'}]} />
           <h2 className='profile__title'>
@@ -118,18 +121,13 @@ export const Profile = () => {
           <div className='profile__items'>
             {
               profileItemsInfo[user].map((item, index) => {
-                return <Link key={index} to={`/profile${item.path}`} className='item'>
-                          <div className='item__about'>
-                            <img src={item.img} alt='itemImg'/>
-                            <h3>{item.title}</h3>
-                          </div>
-                          <div className='item__info'>
-                            <p dangerouslySetInnerHTML={{__html: item.description}}></p>
-                            <div className='item__infoLink'>
-                              <img src={rightArrow} alt='arrow'/>
-                            </div>
-                          </div>
-                        </Link>
+                return <CardControl 
+                description={item.description} 
+                img={item.img}
+                path={item.path}
+                title={item.title}
+                key={index}
+                />              
               })
             }
           </div>
diff --git a/src/pages/Profile/profile.scss b/src/pages/Profile/profile.scss
index a3135cb1..6b24efb0 100644
--- a/src/pages/Profile/profile.scss
+++ b/src/pages/Profile/profile.scss
@@ -49,79 +49,79 @@
       justify-content: center;
     }
 
-    .item {
-      max-width: 353px;
-      width: 100%;
-      padding: 35px 45px 15px 30px;
-      background: #FFFFFF;
-      border-radius: 12px;
-      text-decoration: none;
-      cursor: pointer;
-      transition: all 0.3s ease;
+    // .item {
+    //   max-width: 353px;
+    //   width: 100%;
+    //   padding: 35px 45px 15px 30px;
+    //   background: #FFFFFF;
+    //   border-radius: 12px;
+    //   text-decoration: none;
+    //   cursor: pointer;
+    //   transition: all 0.3s ease;
 
-      &:hover {
-        box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
-        transform: scale(1.02);
-      }
+    //   &:hover {
+    //     box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+    //     transform: scale(1.02);
+    //   }
 
-      @media (max-width: 1175px) {
-        width: 48%;
-        max-width: none;
-      }
+    //   @media (max-width: 1175px) {
+    //     width: 48%;
+    //     max-width: none;
+    //   }
 
-      @media (max-width: 925px) {
-        width: 100%;
-        padding: 15px 25px;
-      }
+    //   @media (max-width: 925px) {
+    //     width: 100%;
+    //     padding: 15px 25px;
+    //   }
 
-      &__about {
-        display: flex;
-        column-gap: 20px;
-        align-items: center;
-        margin-bottom: 30px;
+    //   &__about {
+    //     display: flex;
+    //     column-gap: 20px;
+    //     align-items: center;
+    //     margin-bottom: 30px;
 
-        @media (max-width: 925px) {
-          margin-bottom: 15px;
-        }
+    //     @media (max-width: 925px) {
+    //       margin-bottom: 15px;
+    //     }
 
-        h3 {
-          color: #000000;
-          font-weight: 500;
-          font-size: 18px;
-          line-height: 22px;
-          max-width: 125px;
-          margin-bottom: 0;
-        }
-      }
+    //     h3 {
+    //       color: #000000;
+    //       font-weight: 500;
+    //       font-size: 18px;
+    //       line-height: 22px;
+    //       max-width: 125px;
+    //       margin-bottom: 0;
+    //     }
+    //   }
 
-      &__info {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+    //   &__info {
+    //     display: flex;
+    //     justify-content: space-between;
+    //     align-items: center;
 
-        p {
-          font-weight: 700;
-          font-size: 12px;
-          line-height: 20px;
-          color: #000000;
-          margin-bottom: 0;
+    //     p {
+    //       font-weight: 700;
+    //       font-size: 12px;
+    //       line-height: 20px;
+    //       color: #000000;
+    //       margin-bottom: 0;
 
-          span {
-            color: #52B709;
-            font-weight: 700;
-          }
-        }
-        &Link {
-          width: 48px;
-          height: 48px;
-          background: #DDEEC6;
-          border-radius: 50px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-    }
+    //       span {
+    //         color: #52B709;
+    //         font-weight: 700;
+    //       }
+    //     }
+    //     &Link {
+    //       width: 48px;
+    //       height: 48px;
+    //       background: #DDEEC6;
+    //       border-radius: 50px;
+    //       display: flex;
+    //       justify-content: center;
+    //       align-items: center;
+    //     }
+    //   }
+    // }
   }
 
   .container {
diff --git a/src/pages/ProfileCandidate/ProfileCandidate.js b/src/pages/ProfileCandidate/ProfileCandidate.js
new file mode 100644
index 00000000..4b28939f
--- /dev/null
+++ b/src/pages/ProfileCandidate/ProfileCandidate.js
@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+import './ProfileCandidate.scss'
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs';
+import { CardControl } from '../../components/CardControl/CardControl';
+import settingIcon from "../../images/settingIcon.png"
+import reportsIcon from "../../images/reports.png"
+import noteIcon from "../../images/note.png"
+import questionIcon from "../../images/question.png"
+import medium_male from "../../images/medium_male.png"
+import { Footer } from '../../components/Footer/Footer';
+import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom';
+
+export const ProfileCandidate = () => {
+	const [candidatsCardsControl] = useState([
+		{
+			path: 'quiz',
+			img: reportsIcon,
+			title: 'Мои тесты',
+			description: '<span>У вас 122 часа<br/></span>отработанных в этом месяце'
+		},
+		{
+			path: 'profile/settings',
+			img: settingIcon,
+			title: 'Настройки аккаунта',
+			description: 'Перейдите чтобы начать редактирование'
+		}
+	]
+	)
+	return (
+		<div className='profile-candidate'>
+			<ProfileHeader />
+			<div className="profile-candidate__head-bottom bottom-head">
+				<HeadBottom />
+
+			</div>
+			<div className="profile-candidate__container">
+				<ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }]} />
+				<div className="profile-candidate__title main-title">Добрый день, <span>Дмитрий</span></div>
+				<div className="profile-candidate__row">
+					<div className="profile-candidate__tests">
+
+						<div className='info-candidate'>
+							<div className="info-candidate__img">
+								<img src={medium_male} alt="" />
+							</div>
+							<div className="info-candidate__info">
+								<div className="info-candidate__title">Открыто {3} теста из {12}</div>
+								<div className="info-candidate__decor"></div>
+							</div>
+						</div>
+						<div className="profile-candidate__cards">
+							{
+								candidatsCardsControl.map((item, index) => <CardControl
+									description={item.description}
+									img={item.img}
+									path={item.path}
+									title={item.title}
+									key={index}
+								/>)
+							}
+						</div>
+
+					</div>
+					<div className="profile-candidate__instructions instructions-candidate">
+						<div className="instructions-candidate__container">
+							<div className="instructions-candidate___row">
+								<div className="instructions-candidate__title">Интсрукция:</div>
+								<div className="instructions-candidate__note">
+									<img className='instructions-candidate__icon' src={noteIcon} alt="" />
+									<div className="instructions-candidate__text">
+										Для подтверждения своих знаний - пройдите тестирование во вкладке
+										<span>“Мои тесты”</span>
+									</div>
+								</div>
+							</div>
+							<div className="instructions-candidate___row">
+								<div className="instructions-candidate__title">Зачем?</div>
+								<div className="instructions-candidate__note">
+									<img className='instructions-candidate__icon' src={questionIcon} alt="" />
+									<div className="instructions-candidate__text">
+										Тесты itguild  предназначены для того, чтобы подтверждать навыки, которые вы указали у себя.
+									</div>
+								</div>
+							</div>
+
+						</div>
+					</div>
+				</div>
+			</div>
+			<Footer />
+		</div>
+	)
+}
diff --git a/src/pages/ProfileCandidate/ProfileCandidate.scss b/src/pages/ProfileCandidate/ProfileCandidate.scss
new file mode 100644
index 00000000..aad98be9
--- /dev/null
+++ b/src/pages/ProfileCandidate/ProfileCandidate.scss
@@ -0,0 +1,166 @@
+.profile-candidate{
+	background: #F1F1F1;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	//max-width: 1200px;
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto 42px auto;
+		flex: 1 1 auto;
+		padding: 0 15px;	
+	}
+	&__title{
+		margin: 0 0 31px 0;
+	}
+	&__row{
+		display: flex;
+		gap: 30px;
+		flex-wrap: wrap;	
+	}
+	// &__column{
+	// 	flex: 1 1 60%;
+	// }
+	&__tests{
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		flex: 1 1 60%;
+		gap: 30px;
+	}
+	&__cards{
+		display: flex;		
+		gap: 29px;
+		width: 100%;
+		@media (max-width: 660px) {
+			flex-wrap: wrap;
+		 }
+	}
+	&__head-bottom{
+		margin: 0 0 27px 0;
+		//max-width: 1160px;
+	}
+
+
+}
+
+
+.instructions-candidate{
+	flex: 1 1 auto;
+	background: #FFFFFF;
+	border-radius: 12px;
+	&__container{
+		padding: 40px 18px 32px 36px;
+		display: flex;
+		flex-direction: column;
+		gap: 29px;
+		@media (max-width: 660px) {
+			padding: 20px;
+		}
+	}
+	&__note{
+		display: flex;
+		align-items: center;
+		gap: 22px;
+		&:not(:last-child){
+			margin: 0 0 30px 0;
+		}
+		
+	}
+	&__icon{
+		width: 25px;
+		height: 30px;
+	}
+	&__title{
+		color: #52B709;
+		font-weight: 900;
+		font-size: 14px;
+		line-height: 171%;
+		margin: 0 0 20px 0;
+	}
+	&__text{
+		font-weight: 400;
+		font-size: 12px;
+		line-height: 200%;
+		color: #000000;
+		max-width: 235px;
+		span{
+			color: #406128;
+			font-weight: 700;
+			text-decoration: underline;
+		}
+	}
+}
+
+.info-candidate{
+	width: 100%;
+	background: #fff;
+	border-radius: 12px;
+	padding: 20px 45px;
+	display: flex;
+	align-items: center;
+	gap: 47px;
+	@media (max-width:560px) {
+		padding: 20px;
+	}
+	&__img{
+		flex: 0 0 88px;
+		height: 88px;
+		img{
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			border-radius: 50%;
+		}
+	}
+	&__info{
+		width: 100%;
+	}
+	&__title{
+		font-weight: 500;
+		font-size: 16px;
+		line-height: 200%;
+		color: #000000;
+		margin: 0 0 12px 0;
+	}
+
+	&__decor{
+		background: #52B709;
+		border-radius: 12px;
+		height: 8px;
+		width: 60%;
+	}
+}
+
+.bottom-head{
+	margin: 0 0 40px 0;
+	height: 66px;
+	background: #FFF;
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto;
+		padding: 0 15px;
+		height: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	&__img{
+		flex: 0 0 37px;
+		height: 37px;
+		img{
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			border-radius: 50%;
+		}
+	}
+	&__title{
+		font-weight: 500;
+		font-size: 18px;
+		line-height: 178%;
+		color: #807777;
+	}
+}
\ No newline at end of file
diff --git a/src/pages/Summary/Summary.js b/src/pages/Summary/Summary.js
index 47ba3787..ac42bc00 100644
--- a/src/pages/Summary/Summary.js
+++ b/src/pages/Summary/Summary.js
@@ -13,6 +13,7 @@ import gitImgItem from "../../images/gitItemImg.png"
 import './summary.scss'
 import {apiRequest} from "../../api/request";
 import {Navigate} from "react-router-dom";
+import { Navigation } from '../../components/Navigation/Navigation';
 
 export const Summary = () => {
     if(localStorage.getItem('role_status') === '18') {
@@ -29,6 +30,7 @@ export const Summary = () => {
   return (
       <div className='summary'>
         <ProfileHeader/>
+        <Navigation />
         <div className='container'>
           <div className='summary__content'>
               <ProfileBreadcrumbs links={[
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index 8ab9a655..87361886 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -22,6 +22,7 @@ import noProjects from "../../images/noProjects.png"
 import arrow from '../../images/arrowCalendar.png'
 
 import "./tracker.scss";
+import { Navigation } from "../../components/Navigation/Navigation";
 
 export const Tracker = () => {
   const [toggleTab, setToggleTab] = useState(1);
@@ -524,6 +525,7 @@ export const Tracker = () => {
   return (
     <div className="tracker">
       <ProfileHeader />
+      <Navigation />
       <div className="container">
         <div className="tracker__content">
           <ProfileBreadcrumbs links={[
diff --git a/src/pages/ViewReport/ViewReport.js b/src/pages/ViewReport/ViewReport.js
index 830cf0ea..95364b37 100644
--- a/src/pages/ViewReport/ViewReport.js
+++ b/src/pages/ViewReport/ViewReport.js
@@ -15,6 +15,7 @@ import {apiRequest} from "../../api/request";
 import {getCorrectDate, getCreatedDate, hourOfNum} from '../../components/Calendar/calendarHelper'
 
 import './viewReport.scss'
+import { Navigation } from '../../components/Navigation/Navigation';
 
 export const ViewReport = () => {
     if(localStorage.getItem('role_status') === '18') {
@@ -78,6 +79,7 @@ export const ViewReport = () => {
     return (
         <div className='viewReport'>
             <ProfileHeader/>
+            <Navigation />
             <div className='container'>
                 <div className='viewReport__info'>
                     <ProfileBreadcrumbs links={[{name: 'Главная', link: '/profile'},
diff --git a/src/pages/quiz/InstructionPage.js b/src/pages/quiz/InstructionPage.js
deleted file mode 100644
index da7850b6..00000000
--- a/src/pages/quiz/InstructionPage.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import {useNavigate} from "react-router-dom"
-import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
-import {Instruction} from "../../components/features/quiz/Instructions"
-import React from "react";
-import {useSelector} from "react-redux";
-import {selectedTest} from "../../redux/quizSlice";
-
-
-export const InstructionPage = () => {
-
-  const test = useSelector(selectedTest)
-
-  let navigate = useNavigate();
-  if (!test) {
-    navigate('/quiz')
-  }
-
-  return (
-      <>
-        <HeaderPageTestsQuiz isVisibilityButton={false}/>
-        <Instruction/>
-      </>
-  )
-};
\ No newline at end of file
diff --git a/src/pages/quiz/InterjacentPage.js b/src/pages/quiz/InterjacentPage.js
deleted file mode 100644
index f12bc9a9..00000000
--- a/src/pages/quiz/InterjacentPage.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import {useNavigate} from "react-router-dom"
-import {useSelector} from "react-redux";
-
-import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
-import {MyTestsQuiz} from "../../components/features/quiz/MyTestsQuiz"
-
-import {selectedTest, selectPassedTests} from "../../redux/quizSlice";
-
-
-export const InterjacentPage = () => {
-
-  const test = useSelector(selectedTest);
-  const passedTests = useSelector(selectPassedTests)
-  let navigate = useNavigate();
-  if (!test) {
-     navigate('/quiz')
-  }
-
-  return (
-      <>
-        <HeaderPageTestsQuiz isVisibilityButton={true}/>
-        <MyTestsQuiz listTests={passedTests}/>
-      </>
-  )
-};
\ No newline at end of file
diff --git a/src/pages/quiz/PassingTests.js b/src/pages/quiz/PassingTests.js
new file mode 100644
index 00000000..42ff1ff2
--- /dev/null
+++ b/src/pages/quiz/PassingTests.js
@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import { ProfileHeader } from '../../components/ProfileHeader/ProfileHeader'
+import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom'
+import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs'
+import { Link } from 'react-router-dom'
+import { Footer } from '../../components/Footer/Footer'
+import { QuizPassingInformation } from '../../components/features/quiz/Quiz-passing-information'
+import { CardIntroduction } from '../../components/features/quiz/Card-introduction'
+import { TaskQuiz } from '../../components/features/quiz/Task'
+import { BlockCompletedTest } from '../../components/features/quiz/BlockCompletedTest'
+import { useSelector } from 'react-redux'
+import { completedTestSelector, selectedTest } from '../../redux/quizSlice'
+
+export const PassingTests = () => {
+	//const selectedTest = useSelector(selectedTest)
+
+	if(''){
+
+	}
+
+	const time = new Date();
+	time.setSeconds(time.getSeconds() + 600);//600 - кол-во секунд для прохождения теста
+
+	const [startTest, setStartTest] = useState(false)
+	const completedTest = useSelector(completedTestSelector)
+
+	const introduction = [
+		{
+			title: 'Зачем?',
+			description: 'Тесты itguild  предназначены для того, чтобы подтверждать навыки, которые вы указали у себя.'
+		},
+		{
+			title: 'Почему именно тестирование?',
+			description: 'Тесты itguild  заменяют первое техническое собеседование по любой вакансии.'
+		},
+		{
+			title: 'Какие тесты нужно проходить?',
+			description: 'Здесь все довольно просто — следует проходить тесты по инструментам и навыкам, которыми вы владеете.'
+		}
+	]
+
+	return (
+		<div className='passing-tests-page'>
+			<ProfileHeader />
+			<HeadBottom />
+			<div className="passing-tests-page__container">
+				<ProfileBreadcrumbs links={[
+					{ name: 'Главная', link: '/profile-candidate' },
+					{ name: 'Тестирование', link: '/quiz' },
+					{ name: 'Прохождение тестов', link: '/quiz/test' },
+				]} />
+				<div className="passing-tests-page__title main-title">Тестирование в позиции Junior разработчик </div>
+				<div className="passing-tests-page__passing-information">
+					<QuizPassingInformation expiryTimestamp={time} setStartTest={setStartTest} />
+				</div>
+
+				{
+					!completedTest &&
+					<>
+						{startTest && <div className="passing-tests-page__block-green">Тестирование началось</div>}
+						{startTest ? <TaskQuiz /> : <div className='passing-tests-page__introduction'>
+							{
+								introduction.map((item, i) => <CardIntroduction description={item.description} title={item.title} key={i} />)
+							}
+						</div>}
+						{
+							!startTest && <div className="passing-tests-page__block-text block-text">
+								ИЛИ <Link to={''} >выполните тестове задание</Link> , без прохождения тестов
+							</div>
+						}
+					</>
+				}
+				{
+					completedTest && <>
+						<div className="passing-tests-page__block-green">Тестирование завершено</div>
+						<BlockCompletedTest />
+					</>
+				}
+			</div>
+			<Footer />
+		</div>
+	)
+}
diff --git a/src/pages/quiz/QuizPage.js b/src/pages/quiz/QuizPage.js
index 11e8ff55..c45db065 100644
--- a/src/pages/quiz/QuizPage.js
+++ b/src/pages/quiz/QuizPage.js
@@ -1,17 +1,144 @@
-import React from 'react'
-import {HeaderQuiz} from "../../components/features/quiz/HeaderQuiz"
-import {MyTestsQuiz} from "../../components/features/quiz/MyTestsQuiz"
-import {useSelector} from "react-redux";
-import {selectQuestionnairesOfUser} from "../../redux/quizSlice";
+import React, { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from "react-redux";
+import { questionnairesSelector, setQuestionnaires } from "../../redux/quizSlice";
+import { ProfileHeader } from '../../components/ProfileHeader/ProfileHeader';
+import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom';
+import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs';
+import './quiz-page.scss'
+import { SelectedCategory } from '../../components/features/quiz/SelectedCategory';
+import { Footer } from '../../components/Footer/Footer';
+import { Link } from 'react-router-dom';
+import { CardAvailableTest } from '../../components/features/quiz/CardAviableTest';
+import { apiRequest } from '../../api/request';
+import CategoriesItem from '../../components/CategoriesItem/CategoriesItem';
+
+import BackEndImg from "../../pages/PartnerСategories/images/personalBackEnd.png"
+import FrontendImg from "../../pages/PartnerСategories/images/PersonalFrontend.png"
+import ArchitectureImg from "../../pages/PartnerСategories/images/PersonalArchitecture.png"
+import DesignImg from "../../pages/PartnerСategories/images/PersonalDesign.png"
+import TestImg from "../../pages/PartnerСategories/images/PersonalTesters.png"
+import AdminImg from "../../pages/PartnerСategories/images/PersonalAdmin.png"
+import ManageImg from "../../pages/PartnerСategories/images/PersonalMng.png"
+import CopyImg from "../../pages/PartnerСategories/images/PersonalCopy.png"
+import SmmImg from "../../pages/PartnerСategories/images/PersonalSMM.png"
 
 export const QuizPage = () => {
 
-   const allTests = useSelector(selectQuestionnairesOfUser)
+   const questionnaires = useSelector(questionnairesSelector)
+   const dispatch = useDispatch()
+   const [personalInfoItems] = useState([
+      {
+         title: 'Backend разработчики',
+         link: '/registration-candidate',
+         description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+         available: true,
+         img: BackEndImg
+      },
+      {
+         title: 'Frontend разработчики',
+         link: '/registration-candidate',
+         description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+         available: true,
+         img: FrontendImg
+      },
+      {
+         title: 'Архитектура проектов',
+         link: '/registration-candidate',
+         description: 'Потоки данных ER ERP CRM CQRS UML BPMN',
+         available: true,
+         img: ArchitectureImg
+      },
+      {
+         title: 'Дизайн проектов',
+         link: '/registration-candidate',
+         description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+         available: true,
+         img: DesignImg
+      },
+      {
+         title: 'Тестирование проектов',
+         link: '/registration-candidate',
+         description: 'SQL Postman TestRail Kibana Ручное тестирование',
+         available: false,
+         img: TestImg
+      },
+      {
+         title: 'Администрирование проектов',
+         link: '/registration-candidate',
+         description: 'DevOps ELK Kubernetes Docker Bash Apache Oracle Git',
+         available: false,
+         img: AdminImg
+      },
+      {
+         title: 'Управление проектом',
+         link: '/registration-candidate',
+         description: 'Scrum Kanban Agile Miro CustDev',
+         available: false,
+         img: ManageImg
+      },
+      {
+         title: 'Копирайтинг проектов',
+         link: '/registration-candidate',
+         description: 'Теги Заголовок H1 Дескриптор Абзац Сценарий',
+         available: false,
+         img: CopyImg
+      },
+      {
+         title: 'Реклама и SMM',
+         link: '/registration-candidate',
+         description: 'Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript',
+         available: false,
+         img: SmmImg
+      },
+   ]);
+   const userId = localStorage.getItem('id')
+   const [selectedCategory, setsetSelectedCategory] = useState(false)
+
+   useEffect(() => {
+      apiRequest(`/user-questionnaire/questionnaires-list?user_id=${107}`)
+         .then(res => dispatch(setQuestionnaires(res)))
+   }, [])
 
    return (
-     <>
-        <HeaderQuiz header={true}/>
-        <MyTestsQuiz listTests={allTests}/>
-     </>
+      <div className='quiz-page'>
+         <ProfileHeader />
+         <HeadBottom />
+         <div className="quiz-page__container">
+            <ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }, { name: 'Тестирование', link: '/quiz' }]} />
+            <div className="quiz-page__title main-title">{!selectedCategory ? 'Тестирование' : 'Замена специализации'}</div>
+            {!selectedCategory && <>
+               <div className="quiz-page__specialization">
+                  <SelectedCategory setSelectedCategory={setsetSelectedCategory} />
+               </div>
+               <div className="quiz-page__block">
+                  Доступные тесты
+               </div>
+               <div className="quiz-page__cards-test">
+                  {
+                     questionnaires.length ? questionnaires.map((item, index) => (
+                        <CardAvailableTest
+                           description={'Вы новичок с реальным опытом работы до 1 года, или без опыта'}
+                           path={'quiz/test'}
+                           status={item.status}
+                           title={item.questionnaire_title}
+                           passedTest={item.passedTest}
+                           key={index}
+                        />)) : <h1>Анкет нет</h1>
+                  }
+               </div>
+               <div className="block-text">
+                  ИЛИ <Link to={''} >выполните тестове задание</Link> , без прохождения тестов
+               </div>
+            </>}
+
+            {selectedCategory && <div className="quiz-page__categories-items">
+               {personalInfoItems.map((item, index) => {
+                  return <CategoriesItem link={item.link} key={index} title={item.title} img={item.img} skills={item.description} available={item.available} />
+               })
+               }
+            </div>}
+         </div>
+         <Footer />
+      </div>
    )
 }
\ No newline at end of file
diff --git a/src/pages/quiz/QuizReportPage.js b/src/pages/quiz/QuizReportPage.js
new file mode 100644
index 00000000..15988e21
--- /dev/null
+++ b/src/pages/quiz/QuizReportPage.js
@@ -0,0 +1,42 @@
+import { useNavigate } from "react-router-dom"
+import { HeaderPageTestsQuiz } from "../../components/features/quiz/HeaderPageTests"
+import { Results } from "../../components/features/quiz/Results";
+import { useSelector } from "react-redux";
+import { selectedTest } from "../../redux/quizSlice";
+import React from "react";
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import { HeadBottom } from "../../components/features/Candidate-lk/HeadBottom";
+import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
+import { QuizReport } from "../../components/features/quiz/QuizReport";
+import { Footer } from "../../components/Footer/Footer";
+import suucessIcon from '../../images/quiz/success.png'
+import { AlertResult } from "../../components/features/quiz/AlertResult";
+
+
+export const QuizReportPage = () => {
+
+  const test = useSelector(selectedTest)
+
+  let navigate = useNavigate();
+  if (!test) {
+    navigate('/quiz')
+  }
+
+  return (
+    <div className="quiz-report-page">
+      <ProfileHeader />
+      <HeadBottom />
+      <div className="quiz-report-page__container">
+        <ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }, { name: 'Тестирование', link: '/quiz' },
+      { name: 'Отчет по тестированию', link: '/quiz/report' }]} />
+        <div className="quiz-report-page__title main-title">Отчет по тестированию позиции Junior разработчик </div>
+        <div className="quiz-report-page__report-quiz">
+        <QuizReport />
+        </div>
+       
+        <AlertResult />
+      </div>
+      <Footer />
+    </div>
+  )
+};
\ No newline at end of file
diff --git a/src/pages/quiz/QuizTestPage.js b/src/pages/quiz/QuizTestPage.js
deleted file mode 100644
index 75076762..00000000
--- a/src/pages/quiz/QuizTestPage.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import {useNavigate} from 'react-router-dom'
-import {HeaderPageTestsQuiz} from '../../components/features/quiz/HeaderPageTests'
-import {TaskQuiz} from '../../components/features/quiz/Task'
-import {useSelector} from "react-redux";
-import {selectedTest} from "../../redux/quizSlice";
-import React, {useEffect} from "react";
-
-export const QuizTestPage = () => {
-  let navigate = useNavigate();
-  const test = useSelector(selectedTest);
-
-  useEffect(() => {
-    if (!test) {
-      navigate('/quiz')
-    }
-  }, []);
-
-  return (
-      <>
-        <HeaderPageTestsQuiz isVisibilityButton={false}/>
-        <TaskQuiz/>
-      </>
-  )
-};
\ No newline at end of file
diff --git a/src/pages/quiz/ResultPage.js b/src/pages/quiz/ResultPage.js
deleted file mode 100644
index e0c1e652..00000000
--- a/src/pages/quiz/ResultPage.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import {useNavigate} from "react-router-dom"
-import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
-import {Results} from "../../components/features/quiz/Results";
-import {useSelector} from "react-redux";
-import {selectedTest} from "../../redux/quizSlice";
-import React from "react";
-
-
-export const ResultPage = () => {
-
-  const test = useSelector(selectedTest)
-
-  let navigate = useNavigate();
-  if (!test) {
-    navigate('/quiz')
-  }
-
-  return (
-      <>
-        <HeaderPageTestsQuiz isVisibilityButton={false}/>
-        <Results/>
-      </>
-  )
-};
\ No newline at end of file
diff --git a/src/pages/quiz/quiz-page.scss b/src/pages/quiz/quiz-page.scss
new file mode 100644
index 00000000..e4fa5a24
--- /dev/null
+++ b/src/pages/quiz/quiz-page.scss
@@ -0,0 +1,143 @@
+.quiz-page{
+	background: #F1F1F1;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto 42px auto;
+		flex: 1 1 auto;
+		width: 100%;
+		padding: 0 15px;
+	}
+	&__title{
+		margin: 0 0 39px 0;
+	}
+	&__block{
+		background: #E1FCCF;
+		border-radius: 12px 12px 0px 0px;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 178%;
+		color: #000000;
+		padding: 20px 51px;
+		margin: 0 0 16px 0;
+	}
+	&__cards-test{
+		display: grid;
+		grid-gap: 29px;
+		grid-template-columns: 1fr 1fr 1fr;
+		margin-bottom: 29px;
+		@media (max-width: 955px) {
+			grid-template-columns: 1fr 1fr;
+		}
+		@media (max-width: 668px) {
+			grid-template-columns: 1fr;
+		}
+ 
+	}
+	&__specialization{
+		margin: 0 0 26px 0;
+	}
+	&__categories-items{
+		display: grid;
+		grid-gap: 24px;
+		grid-template-columns: 1fr 1fr 1fr;
+		margin-bottom: 24px;
+		@media (max-width: 955px) {
+			grid-template-columns: 1fr 1fr;
+		}
+		@media (max-width: 668px) {
+			grid-template-columns: 1fr;
+		}
+	}
+}
+.interjacent-page-quiz{
+	
+	background: #F1F1F1;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	&__title{
+		margin: 0 0 39px 0;
+	}
+	&__passing-information{
+		margin: 0 0 32px 0;
+	}
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto 42px auto;
+		flex: 1 1 auto;
+		width: 100%;
+		padding: 0 15px;
+	}
+	&__introduction-items{
+		display: flex;
+		flex-wrap: wrap;
+    	margin: 0px -25px -50px;
+		margin: 0 auto 54px auto;
+			
+	}
+}
+
+.passing-tests-page{
+	background: #F1F1F1;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto 42px auto;
+		flex: 1 1 auto;
+		width: 100%;
+		padding: 0 15px;
+	}
+	&__title{
+		margin: 0 0 39px 0;
+	}
+	&__passing-information{
+		margin: 0 0 29px 0;
+	}
+	&__block-green{
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 178%;
+		color: #000000;
+		background: #E1FCCF;
+		border-radius: 12px 12px 0px 0px;
+		padding: 20px 51px;
+	}
+	&__introduction{
+		display: flex;
+		flex-wrap: wrap;
+	}
+}
+
+
+.quiz-report-page{
+	background: #F1F1F1;
+	height: 100%;
+	min-height: 100vh;
+	font-family: "LabGrotesque", sans-serif;
+	display: flex;
+	flex-direction: column;
+	&__container{
+		max-width: 1160px;
+		margin: 0 auto 42px auto;
+		flex: 1 1 auto;
+		width: 100%;
+		padding: 0 15px;
+	}
+	&__title{
+		margin: 0 0 39px 0;
+	}
+	&__report-quiz{
+		margin: 0 0 28px 0;
+	}
+}
\ No newline at end of file
diff --git a/src/redux/quizSlice.js b/src/redux/quizSlice.js
index 34dfdd66..8175b7b8 100644
--- a/src/redux/quizSlice.js
+++ b/src/redux/quizSlice.js
@@ -4,14 +4,76 @@ import {apiRequest} from "../api/request";
 
 
 const initialState = {
-  // questions: [],
-  answer: [],
+  answers: [
+    {
+      "id": "12",
+      "question_id": "7",
+      "answer_body": "Нsdf sfd fds sdf sf sfsdf sdfеск вsdffsdfsdf sf sdf sdfsdfsdfsdfdsjknsdkf dssdjf sdfbsdhf sd hjdsfv sdhjvар1 отв1 истина"
+    },
+    {
+      "id": "23",
+      "question_id": "7",
+      "answer_body": "Неск вар1 отв1 истина"
+    },
+    {
+      "id": "233",
+      "question_id": "7",
+      "answer_body": "lorem sdfdsf dfs sdf "
+    },
+  ],
+  questionnaires: [],
+  questions: [
+    {
+      "id": "4",
+      "question_type_id": "3",
+      "question_body": "Для чего в Python используется встроенная функция enumerate()?",
+      "question_priority": null,
+      "next_question": null,
+      "time_limit": "00:22:00"
+    },
+    {
+      "id": "24",
+      "question_type_id": "3",
+      "question_body": "Для чего в Python dfsf троенная функция enumerate()?",
+      "question_priority": null,
+      "next_question": null,
+      "time_limit": "00:22:00"
+    },
+    {
+      "id": "41",
+      "question_type_id": "3",
+      "question_body": "Для чегоsdfsdfя функция enumerate()?",
+      "question_priority": null,
+      "next_question": null,
+      "time_limit": "00:22:00"
+    },
+    {
+      "id": "5",
+      "question_type_id": '2',
+      "question_body": "Один ответ2",
+      "question_priority": null,
+      "next_question": null,
+      "time_limit": "00:22:00"
+    }
+  ],
+  selectedTest:  {
+    "user_id": 1,
+    "uuid": "d222f858-60fd-47fb-8731-dc9d5fc384c5",
+    "score": 11,
+    "status": 2,
+    "percent_correct_answers": 0.25,
+    "testing_date": "2022-03-17 11:14:22",
+    "questionnaire_title": "Кат1 Анкета 1 активна"
+  },
+  selectedAnswers:{},
+  completedTest: false,
   result: null,
   isLoading: false,
   dataQuestionnairesOfUser: [],
   passedTests: [],
-  selectedTest: null,
-  userInfo: null
+ 
+  userInfo: null,
+
 };
 export const setUserInfo = createAsyncThunk(
     'userInfo',
@@ -47,13 +109,15 @@ export const quizSlice = createSlice({
   name: 'quiz',
   initialState,
   reducers: {
-    setQuestionnairesList: (state, action) => {
-      state.dataQuestionnairesOfUser = action.payload;
-      state.passedTests = action.payload.filter(item => item.status === 2)
+    setQuestionnaires: (state, action) => {
+      state.questionnaires = action.payload;
     },
     setSelectedTest: (state, action) => {
       state.selectedTest = action.payload
     },
+    setCompleteTest: (state, action) => {
+      state.completedTest = true
+    }
   },
   extraReducers: {
     [setUserInfo.fulfilled]: (state, action) => {
@@ -68,16 +132,21 @@ export const quizSlice = createSlice({
   },
 });
 
-export const {setQuestionnairesList, setSelectedTest} = quizSlice.actions;
+export const {setQuestionnaires, setSelectedTest, setCompleteTest} = quizSlice.actions;
 
 
-export const selectAnswer = (state) => state.quiz.answer;
-export const selectQuestionnairesOfUser = (state) => state.quiz.dataQuestionnairesOfUser;
+export const answersSelector = (state) => state.quiz.answers;
+export const questionnairesSelector = (state) => state.quiz.questionnaires;
+export const selectedAnswersSelector = (state) => state.quiz.selectedAnswers
+export const questionsSelector = (state) => state.quiz.questions
+export const completedTestSelector = (state) => state.quiz.completedTest
+
 export const selectResult = (state) => state.quiz.result;
 export const selectedTest = (state) => state.quiz.selectedTest;
 export const selectPassedTests = (state) => state.quiz.passedTests;
 export const selectUserInfo = (state) => state.quiz.userInfo;
 
 
+
 export default quizSlice.reducer;
 

From 9c847c35029204fd00dc4261999cec88897ac7ff Mon Sep 17 00:00:00 2001
From: Dmitry220 <dmitry19.kravtsov123@gmail.com>
Date: Wed, 19 Apr 2023 20:22:49 +0300
Subject: [PATCH 2/3] fix id

---
 src/pages/quiz/QuizPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/quiz/QuizPage.js b/src/pages/quiz/QuizPage.js
index c45db065..6c9490d2 100644
--- a/src/pages/quiz/QuizPage.js
+++ b/src/pages/quiz/QuizPage.js
@@ -95,7 +95,7 @@ export const QuizPage = () => {
    const [selectedCategory, setsetSelectedCategory] = useState(false)
 
    useEffect(() => {
-      apiRequest(`/user-questionnaire/questionnaires-list?user_id=${107}`)
+      apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
          .then(res => dispatch(setQuestionnaires(res)))
    }, [])
 

From 37d8ab385ddb58ad27904e64704d0d1ba8eea871 Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Wed, 19 Apr 2023 22:42:46 +0300
Subject: [PATCH 3/3] merge branch and partnerRequest candidate

---
 src/components/Footer/footer.scss             |  5 +
 src/components/Navigation/Navigation.js       | 16 ++--
 src/components/ProfileHeader/ProfileHeader.js | 81 +----------------
 src/pages/PartnerBid/PartnerBid.js            | 91 ++++++++++---------
 src/pages/PartnerBid/partnerBid.scss          | 29 +++++-
 src/pages/Profile/Profile.js                  | 14 ++-
 6 files changed, 99 insertions(+), 137 deletions(-)

diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss
index 947c5746..59f2c49d 100644
--- a/src/components/Footer/footer.scss
+++ b/src/components/Footer/footer.scss
@@ -1,3 +1,8 @@
+footer {
+  border-top: 1px solid #ebebeb;
+  padding: 35px 0 50px;
+}
+
 .footer {
 
   &__top {
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
index 71449c78..45132792 100644
--- a/src/components/Navigation/Navigation.js
+++ b/src/components/Navigation/Navigation.js
@@ -3,12 +3,14 @@ import { NavLink } from 'react-router-dom'
 import { urlForLocal } from '../../helper'
 import { apiRequest } from '../../api/request';
 import { useDispatch, useSelector } from 'react-redux';
-import { getProfileInfo } from '../../redux/outstaffingSlice';
+import { getProfileInfo, setProfileInfo } from '../../redux/outstaffingSlice';
+
+import avatarMok from "../../pages/PartnerTreaties/Images/avatarMok.png"
 
 export const Navigation = () => {
 	const dispatch = useDispatch();
- 
- 
+
+
 	const profileInfo = useSelector(getProfileInfo);
 	const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer')
 	const [navInfo] = useState({
@@ -61,7 +63,7 @@ export const Navigation = () => {
 		 },
 	  ]
 	})
-  
+
 	useEffect(() => {
 	  if (localStorage.getItem('role_status') === '18') {
 		 return
@@ -70,9 +72,9 @@ export const Navigation = () => {
 			.then((profileInfo) =>
 				 dispatch(setProfileInfo(profileInfo))
 			);
- 
+
 	}, [dispatch]);
- 
+
 	return (
 		<div className='profileHeader__info'>
 			<div className='profileHeader__container'>
@@ -92,7 +94,7 @@ export const Navigation = () => {
 						}
 					</h3>
 					<NavLink end to={'/profile'}>
-						<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar' />
+						<img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok} className='profileHeader__personalInfoAvatar' alt='avatar' />
 					</NavLink>
 				</div>
 			</div>
diff --git a/src/components/ProfileHeader/ProfileHeader.js b/src/components/ProfileHeader/ProfileHeader.js
index d16b5168..d17872e2 100644
--- a/src/components/ProfileHeader/ProfileHeader.js
+++ b/src/components/ProfileHeader/ProfileHeader.js
@@ -4,13 +4,8 @@ import {useDispatch, useSelector} from "react-redux";
 
 import {Loader} from '../Loader/Loader'
 import {apiRequest} from "../../api/request";
-import {auth, getProfileInfo, setProfileInfo} from "../../redux/outstaffingSlice";
+import {auth, setProfileInfo} from "../../redux/outstaffingSlice";
 import {getRole} from "../../redux/roleSlice";
-
-import {urlForLocal} from "../../helper";
-
-import avatarMok from "../../pages/PartnerTreaties/Images/avatarMok.png"
-import { Navigation } from '../Navigation/Navigation';
 import './profileHeader.scss'
 
 
@@ -21,58 +16,7 @@ export const ProfileHeader = () => {
 
 
   const userRole = useSelector(getRole);
-  const profileInfo = useSelector(getProfileInfo);
   const [user] = useState(localStorage.getItem('role_status') === '18' ? 'partner' : 'developer')
-  const [navInfo] = useState({
-    developer: [
-      {
-        path: '/summary',
-        name: 'Резюме'
-      },
-      {
-        path: '/calendar',
-        name: 'Отчетность'
-      },
-      {
-        path: '/tracker',
-        name: 'Трекер'
-      },
-      {
-        path: '/payouts',
-        name: 'Выплаты'
-      },
-      {
-        path: '/settings',
-        name: 'Настройки'
-      },
-    ],
-    partner: [
-      {
-        path: '/catalog',
-        name: 'Каталог'
-      },
-      {
-        path: '/requests',
-        name: 'Запросы'
-      },
-      {
-        path: '/categories',
-        name: 'Персонал'
-      },
-      {
-        path: '/tracker',
-        name: 'Трекер'
-      },
-      {
-        path: '/treaties',
-        name: 'Договора'
-      },
-      {
-        path: '/settings',
-        name: 'Настройки'
-      },
-    ]
-  })
 
   const [isLoggingOut, setIsLoggingOut] = useState(false);
 
@@ -112,29 +56,6 @@ export const ProfileHeader = () => {
             </button>
           </div>
         </div>
-        <div className='profileHeader__info'>
-          <div className='profileHeader__container'>
-            <nav className='profileHeader__nav'>
-              {
-                navInfo[user].map((link, index) => {
-                  return <NavLink key={index} end to={`/profile${link.path}`}>{link.name}</NavLink>
-                })
-              }
-            </nav>
-
-            <div className='profileHeader__personalInfo'>
-              <h3 className='profileHeader__personalInfoName'>
-                {user === 'developer' ?
-                    profileInfo?.fio :
-                    ''
-                }
-              </h3>
-              <NavLink end to={'/profile'}>
-                <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : avatarMok} className='profileHeader__personalInfoAvatar' alt='avatar'/>
-              </NavLink>
-            </div>
-          </div>
-        </div>
       </header>
   )
 };
diff --git a/src/pages/PartnerBid/PartnerBid.js b/src/pages/PartnerBid/PartnerBid.js
index 232dbe98..8c33bb4b 100644
--- a/src/pages/PartnerBid/PartnerBid.js
+++ b/src/pages/PartnerBid/PartnerBid.js
@@ -1,32 +1,35 @@
 import React, {useEffect, useState} from 'react';
-import {Link, Navigate} from "react-router-dom";
+import {Link, Navigate, useNavigate} from "react-router-dom";
 import {useSelector, useDispatch} from 'react-redux'
 import {getPartnerRequestId, getPartnerRequests, setPartnerRequestId} from '../../redux/outstaffingSlice'
 
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
 import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {Footer} from "../../components/Footer/Footer";
+import { Navigation } from '../../components/Navigation/Navigation';
 import {Loader} from "../../components/Loader/Loader"
 
 import {apiRequest} from "../../api/request";
 import {getCorrectDate} from "../../components/Calendar/calendarHelper";
 
+import {urlForLocal} from '../../helper'
+
 import arrowSwitchDate from "../../images/arrowViewReport.png";
 import backEndImg from "../../images/QualificationInfo.png";
 import middle from "../../images/QualificationInfoMiddle.png";
-import personImg from "../../images/mokPerson.png"
 import deleteBtn from "../../images/deleteBtn.png"
 
 import './partnerBid.scss'
-import { Navigation } from '../../components/Navigation/Navigation';
 
 export const PartnerBid = () => {
     if(localStorage.getItem('role_status') !== '18') {
         return <Navigate to="/profile" replace/>
     }
+
     const dispatch = useDispatch();
     const requestId = useSelector(getPartnerRequestId);
     const partnerRequests = useSelector(getPartnerRequests);
+    const navigate= useNavigate();
 
     if (!requestId) {
         return <Navigate to="/profile/requests" replace/>
@@ -40,26 +43,33 @@ export const PartnerBid = () => {
         })
     }, [requestId]);
 
+    const deleteRequest = () => {
+        apiRequest('/request/update-request', {
+            method: 'PUT',
+            data: {
+                user_id: localStorage.getItem('id'),
+                request_id: requestId,
+                status: 0,
+                // title: 'bro',
+                // position_id: 1,
+                // knowledge_level_id: 2,
+                // specialist_count: 2,
+                // descr: 'broooooo',
+                // skill_ids: [1, 2, 3]
+            }
+        }).then((res) => {
+            navigate('/profile/requests');
+        })
+    };
+
     const [requestInfo, setRequestInfo] = useState({})
     const [loader, setLoader] = useState(false)
-
-    const [mokPersons] = useState([
-        {
-            name: 'Дмитрий, PHP Back end - разработчик, Middle',
-            link: '/candidate/110',
-            img: personImg
-        },
-        {
-            name: 'Дмитрий, PHP Back end - разработчик, Middle',
-            link: '/candidate/111',
-            img: personImg
-        },
-        {
-            name: 'Дмитрий, PHP Back end - разработчик, Middle',
-            link: '/candidate/112',
-            img: personImg
-        }
-    ])
+    const [levels] = useState({
+        1: "Junior",
+        2: "Middle",
+        3: "Middle+",
+        4: "Senior",
+    })
     return (
         <div className='partnerBid'>
             <ProfileHeader />
@@ -79,7 +89,7 @@ export const PartnerBid = () => {
                             <h3>{requestInfo.title}</h3>
                             <div className='partnerBid__qualification__buttons'>
                                 <button>Редактировать</button>
-                                <img src={deleteBtn} alt='delete'/>
+                                <img src={deleteBtn} alt='delete' onClick={() => deleteRequest()}/>
                             </div>
                         </div>
                         <div className='partnerBid__switcher'>
@@ -102,6 +112,7 @@ export const PartnerBid = () => {
                     </>
                 }
                 {Boolean(Object.keys(requestInfo).length) && !loader &&
+                    <>
                     <div className='table__wrapper'>
                         <table>
                             <thead>
@@ -150,27 +161,25 @@ export const PartnerBid = () => {
                             </tbody>
                         </table>
                     </div>
-                }
-                <div className='partnerBid__suitable'>
-                    <div className='partnerBid__suitable__title'>
-                        <p>Подходящие сотрудники по запросу</p>
-                    </div>
-                    <div className='partnerBid__suitable__persons'>
-                        {mokPersons.map((person, index) => {
-                            return <div key={index} className='partnerBid__suitable__person'>
-                                        <img src={person.img} alt='avatar' />
-                                        <p>{person.name}</p>
-                                        <Link className='partnerBid__suitable__person__more' to={person.link}>
-                                            Подробнее
-                                        </Link>
-                                        <div className='partnerBid__suitable__person__info'>
-
+                    <div className='partnerBid__suitable'>
+                        <div className='partnerBid__suitable__title'>
+                            <p>Подходящие сотрудники по запросу</p>
+                        </div>
+                        <div className='partnerBid__suitable__persons'>
+                            {requestInfo.result_profiles.length && requestInfo.result_profiles.map((person, index) => {
+                                return <div key={index} className='partnerBid__suitable__person'>
+                                            <img src={urlForLocal(person.photo)} alt='avatar' />
+                                            <p>{person.fio} - {person.position_title}, {levels[person.level]}</p>
+                                            <Link className='partnerBid__suitable__person__more' to={`/candidate/${person.id}`}>
+                                                Подробнее
+                                            </Link>
                                         </div>
-                                    </div>
-                        })
-                        }
+                            })
+                            }
+                        </div>
                     </div>
-                </div>
+                    </>
+                }
             </div>
             <Footer/>
         </div>
diff --git a/src/pages/PartnerBid/partnerBid.scss b/src/pages/PartnerBid/partnerBid.scss
index 07ec2291..7c17b576 100644
--- a/src/pages/PartnerBid/partnerBid.scss
+++ b/src/pages/PartnerBid/partnerBid.scss
@@ -59,6 +59,7 @@
         width: 44px;
         height: 44px;
         margin-left: 21px;
+        cursor: pointer;
       }
     }
   }
@@ -339,6 +340,30 @@
       row-gap: 18px;
       position: relative;
       top: -15px;
+      max-height: 420px;
+      overflow: auto;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        background: 0 0;
+        box-shadow: 0 0 14px rgba(0, 0, 0, 0.04);
+        border-radius: 20px;
+      }
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        border-radius: 20px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #8db274;
+        border-radius: 20px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: #c5c0c6;
+        border-radius: 20px;
+      }
     }
 
     &__person {
@@ -353,8 +378,9 @@
       }
 
       img {
-        width: 88px;
+        max-width: 88px;
         height: 88px;
+        width: 100%;
       }
 
       p {
@@ -364,6 +390,7 @@
         line-height: 32px;
         margin-left: 60px;
         position: relative;
+        width: 100%;
 
         &:after {
           content: "";
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 58aed8ad..c3c706b4 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -5,6 +5,8 @@ import {Link} from "react-router-dom";
 import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
 import {ProfileBreadcrumbs} from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs"
 import {Footer} from "../../components/Footer/Footer";
+import { CardControl } from '../../components/CardControl/CardControl';
+import { Navigation } from '../../components/Navigation/Navigation';
 
 import {getProfileInfo} from "../../redux/outstaffingSlice";
 
@@ -17,11 +19,7 @@ import paymentIcon from "../../images/paymentIcon.png"
 import settingIcon from "../../images/settingIcon.png"
 import avatarMok from "../PartnerTreaties/Images/avatarMok.png"
 
-import rightArrow from "../../images/arrowRight.png"
-
 import './profile.scss'
-import { CardControl } from '../../components/CardControl/CardControl';
-import { Navigation } from '../../components/Navigation/Navigation';
 
 export const Profile = () => {
 
@@ -48,7 +46,7 @@ export const Profile = () => {
         description: 'Сколько времени занимает<br/> выполнение задач'
       },
       {
-        path: '/payouts',
+        path: 'profile/payouts',
         img: paymentIcon,
         title: 'Выплаты',
         description: 'У вас <span>подтвержден</span><br/> статус самозанятого'
@@ -122,13 +120,13 @@ export const Profile = () => {
           <div className='profile__items'>
             {
               profileItemsInfo[user].map((item, index) => {
-                return <CardControl 
-                description={item.description} 
+                return <CardControl
+                description={item.description}
                 img={item.img}
                 path={item.path}
                 title={item.title}
                 key={index}
-                />              
+                />
               })
             }
           </div>