profilePage

src/App.js

@@ -20,6 +20,7 @@ import { QuizTestPage } from './pages/quiz/QuizTestPage'
 import { InstructionPage } from './pages/quiz/InstructionPage'
 import { ResultPage } from './pages/quiz/ResultPage'
 import { Profile } from './pages/Profile.js'
+import { Summary } from './pages/Summary'
 
 const App = () => {
   return (
@@ -59,6 +60,7 @@ const App = () => {
             component={InstructionPage}
           />
           <ProtectedRoute path='/profile' component={Profile} />
+          <ProtectedRoute path='/summary' component={Summary} />
           <ProtectedRoute path='/quiz-result' component={ResultPage} />
           <ProtectedRoute component={() => <div>Page not found</div>} />
         </Switch>

src/components/Profile/profile.scss

@@ -2,15 +2,15 @@
   background: #F1F1F1;
   height: 100%;
   min-height: 100vh;
-
+  //
-  &__container {
+  //&__container {
-    max-width: 1160px;
+  //  max-width: 1160px;
-    padding: 0 10px;
+  //  padding: 0 10px;
-    margin: 20px auto;
+  //  margin: 20px auto;
-    position: relative;
+  //  position: relative;
-    display: flex;
+  //  display: flex;
-    flex-direction: column;
+  //  flex-direction: column;
-  }
+  //}
 
   &__content {
     display: flex;
@@ -363,12 +363,16 @@
     }
   }
 
+  footer {
+    margin-top: 70px;
+  }
+
   .container {
        max-width: 1160px;
-       margin-top: 70px;
+       margin-top: 23px;
 
-      @media (max-width: 570px) {
+        @media (max-width: 570px) {
-        margin-top: 0;
+          margin-top: 0;
-      }
+        }
      }
 }

src/components/Profile/summary.scss

@@ -0,0 +1,114 @@
+.summary {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+
+  &__title {
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 32px;
+    color: #000000;
+    span {
+      color: #52B709;
+    }
+  }
+
+  &__info {
+    min-height: 128px;
+    background: white;
+    border-radius: 12px;
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    padding: 0 130px 0 45px;
+    justify-content: space-between;
+  }
+
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 30px;
+    row-gap: 25px;
+    column-gap: 35px;
+
+    @media (max-width: 1175px) {
+      justify-content: center;
+    }
+
+    .item {
+      max-width: 353px;
+      width: 100%;
+      padding: 35px 45px 15px 30px;
+      background: #FFFFFF;
+      border-radius: 12px;
+      text-decoration: none;
+      cursor: pointer;
+
+      @media (max-width: 1175px) {
+        width: 48%;
+        max-width: none;
+      }
+
+      @media (max-width: 925px) {
+        width: 100%;
+      }
+
+      &__about {
+        display: flex;
+        column-gap: 20px;
+        align-items: center;
+        margin-bottom: 30px;
+
+        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;
+        }
+      }
+    }
+  }
+
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
+
+    @media (max-width: 570px) {
+      margin-top: 0;
+    }
+  }
+
+  footer {
+    margin-top: 70px;
+  }
+}

src/pages/Profile.js

@@ -26,7 +26,7 @@ export const Profile = () => {
     return(
         <div className='profile'>
             <ProfileHeader/>
-            <div className='profile__container'>
+            <div className='container'>
                 <div className='profile__content'>
                     <h2 className='profile__title'>Ваше резюме {openGit &&  <span>- Git</span>}</h2>
                     {openGit && <div className='profile__back' onClick={() => setOpenGit(false)}>

src/pages/Summary.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import {useSelector} from "react-redux";
+import {getProfileInfo} from "../redux/outstaffingSlice";
+import {ProfileHeader} from "../components/Profile/ProfileHeader";
+import {NavLink} from "react-router-dom";
+import {Footer} from "../components/Footer/Footer";
+
+import reportsIcon from "../images/reports.png"
+import summaryIcon from "../images/summaryIcon.png"
+import timerIcon from "../images/timerIcon.png"
+import paymentIcon from "../images/paymentIcon.png"
+import settingIcon from "../images/settingIcon.png"
+import rightArrow from "../images/arrowRight.png"
+
+import './../components/Profile/summary.scss'
+
+export const Summary = () => {
+    const profileInfo = useSelector(getProfileInfo)
+    return(
+        <div className='summary'>
+            <ProfileHeader/>
+            <div className='container'>
+                <h2 className='summary__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
+                <div className='summary__info'>
+                    <div className='profile__person'>
+                        <img src={profileInfo.photo} className='profile__avatar' />
+                        <p className='profile__name'>{profileInfo.fio} {profileInfo.specification}</p>
+                    </div>
+                </div>
+                <div className='summary__items'>
+                    <NavLink to={'/profile'} className='item'>
+                        <div className='item__about'>
+                            <img src={reportsIcon} />
+                            <h3>Ваша отчетность</h3>
+                        </div>
+                        <div className='item__info'>
+                            <p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
+                            <div className='item__infoLink'>
+                                <img src={rightArrow} />
+                            </div>
+                        </div>
+                    </NavLink>
+                    <NavLink to={'/profile'} className='item'>
+                        <div className='item__about'>
+                            <img src={summaryIcon} />
+                            <h3>Данные и резюме</h3>
+                        </div>
+                        <div className='item__info'>
+                            <p>Ваше резюме<br/><span>заполнено</span></p>
+                            <div className='item__infoLink'>
+                                <img src={rightArrow} />
+                            </div>
+                        </div>
+                    </NavLink>
+                    <NavLink to={'/profile'} className='item'>
+                        <div className='item__about'>
+                            <img src={timerIcon} />
+                            <h3>Трекер времени</h3>
+                        </div>
+                        <div className='item__info'>
+                            <p>Сколько времени занимает<br/> выполнение задач</p>
+                            <div className='item__infoLink'>
+                                <img src={rightArrow} />
+                            </div>
+                        </div>
+                    </NavLink>
+                    <NavLink to={'/profile'} className='item'>
+                        <div className='item__about'>
+                            <img src={paymentIcon} />
+                            <h3>Выплаты</h3>
+                        </div>
+                        <div className='item__info'>
+                            <p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
+                            <div className='item__infoLink'>
+                                <img src={rightArrow} />
+                            </div>
+                        </div>
+                    </NavLink>
+                    <NavLink to={'/profile'} className='item'>
+                        <div className='item__about'>
+                            <img src={settingIcon} />
+                            <h3>Настройки аккаунта</h3>
+                        </div>
+                        <div className='item__info'>
+                            <p>Перейдите чтобы начать<br/> редактирование</p>
+                            <div className='item__infoLink'>
+                                <img src={rightArrow} />
+                            </div>
+                        </div>
+                    </NavLink>
+                </div>
+            </div>
+            <Footer/>
+        </div>
+    )
+}