From 731244905f8687dbaa2e8d55333b4627a7763047 Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Mon, 9 Jan 2023 17:47:04 +0300
Subject: [PATCH] profilePage

---
 src/App.js                          |   2 +
 src/components/Profile/profile.scss |  30 ++++----
 src/components/Profile/summary.scss | 114 ++++++++++++++++++++++++++++
 src/images/paymentIcon.png          | Bin 0 -> 966 bytes
 src/images/reports.png              | Bin 0 -> 845 bytes
 src/images/settingIcon.png          | Bin 0 -> 836 bytes
 src/images/summaryIcon.png          | Bin 0 -> 1403 bytes
 src/images/timerIcon.png            | Bin 0 -> 1156 bytes
 src/pages/Profile.js                |   2 +-
 src/pages/Summary.js                |  96 +++++++++++++++++++++++
 10 files changed, 230 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Profile/summary.scss
 create mode 100644 src/images/paymentIcon.png
 create mode 100644 src/images/reports.png
 create mode 100644 src/images/settingIcon.png
 create mode 100644 src/images/summaryIcon.png
 create mode 100644 src/images/timerIcon.png
 create mode 100644 src/pages/Summary.js

diff --git a/src/App.js b/src/App.js
index 3849ec25..bc7cda84 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/components/Profile/profile.scss b/src/components/Profile/profile.scss
index aade0c87..31766b5d 100644
--- a/src/components/Profile/profile.scss
+++ b/src/components/Profile/profile.scss
@@ -2,15 +2,15 @@
   background: #F1F1F1;
   height: 100%;
   min-height: 100vh;
-
-  &__container {
-    max-width: 1160px;
-    padding: 0 10px;
-    margin: 20px auto;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
+  //
+  //&__container {
+  //  max-width: 1160px;
+  //  padding: 0 10px;
+  //  margin: 20px auto;
+  //  position: relative;
+  //  display: flex;
+  //  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) {
-        margin-top: 0;
-      }
+        @media (max-width: 570px) {
+          margin-top: 0;
+        }
      }
 }
diff --git a/src/components/Profile/summary.scss b/src/components/Profile/summary.scss
new file mode 100644
index 00000000..794950b3
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/images/paymentIcon.png b/src/images/paymentIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3ca70b32098843c32b42da46269e4cd2b45580e
GIT binary patch
literal 966
zcmV;%13CPOP)<h;3K|Lk000e1NJLTq001ih001ip1^@s6;azdS00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH16xT%K~#7F?O985
z+CUKP)(41fs+218*+n<7a{}WNgzU02IYI0b*g1jY69nIYtyhK{;1gKh5rnI>a8>w}
zG<gkz0ERM%Z&JLfVMe2w(Nk-t=k>s}0J7O^E(n5e%zUgAS*Wtc+c1-(l=6arZw-S>
zwOY-gh+v9{bUJ%Qq%LVbIGV<%Q3*#Pn@VL1%<5-&=_wTyVO?)pd!;xB3+H-eRdwC^
zM_L!s>C7XNlH3Aj>61!juERd+@GzUB2+(LwV4m8@B*99-l?TkyuhV(=9a*<6v;T=A
zU~aNwc$l@J=Q)@zRHX%=)0}vDdGYr4_MTwZlIyy6^Yo3yk`==sr`>MfGy(dbG4KYV
z&pgAb&Q0@~Ya<2UjLd;=F1l{*c2F-rnM~#!1g~ieA+D~|X`jkMW?9`qpdQ0}Z~DwN
z5ww`KJPo`K{czo17o1L~;oP}^I!t`V8${m@mksgFm=fnwZns<S;ksDfK;EXjO+*E{
z&NuyXJRUz0KigeM;iTRw3~LB1erwT9VXfGaT^0UKve29x^{umD$g-*s%D=6F?5xAr
zLbfa0B#y#Pb}!+|rb&xV0nz(m34ndTVav+erWss<Y+<yEDx$#+WZ*&?bXG{j0mpv^
zf(2Y258Z;G@e7Scqr!h1PbFPNT@g;XvTWi)Fp)^)VH6=L1c#NLBasN6IjXuw2N;mf
z(`%XNfP7ggtxV)U%uBu}ngWFF>O|8t3Ey+$ZBU2t{VTEL_&x3ieB-f{)SIRW!rECs
zGM$9J_Ut`KIj`@tjm!oKo2CPwS`{^oO7(jEVVp;wA4`NPgF)z?HX60^q>*~o_H%gj
zi7Z4Kol{ZJjmL!CThnWppFyE!#5uqbvhu`{dups0rtaGshH<3pIy^{V%LhWTCqGWC
ztvq~o8N+F{T2&b7iDrl0<L7@c`ZXXsa~Km&nM#<}hMhK86?SA-g&o;dVMlgV*pXcp
zEXy9*RW*@hQjl|h+A^4CGv6<ZqSFr!_H8Hw`GdmV-%oNfdEm%_F>Mecl#)s73-pSF
zH3=jK%It#0)Unv_ds<xftqi`eK0iO#OM0{EHBB>lr)hG`$lFHP0nx8QR4zus8WGv?
oxH`i8*eGc^ANGB}Iv(2m0ZufN#Fv<8v;Y7A07*qoM6N<$f=JuKM*si-

literal 0
HcmV?d00001

diff --git a/src/images/reports.png b/src/images/reports.png
new file mode 100644
index 0000000000000000000000000000000000000000..e10dbed6a053b8fa20cda606129ee6f8d9fa327b
GIT binary patch
literal 845
zcmV-T1G4;yP)<h;3K|Lk000e1NJLTq001Tc001!v1^@s6w(i@F00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0^&(TK~#7F?U_Gs
z+CUh_-*YMz7=oc4x**Z5QmTfoETJP)GO{K408P?Q&<-daOSWzyG*Zb_zCp==s!sLL
zNF8aj6Q>hW6Ryu|a})@|7ugup_$L{kkMrH*yL<1?dxH9yrkN!&c7>n~JZ5PO#8*0<
z&MWdkDwV1tr%eQHDW!$-@O*u0+jjd#d3{j@A&gHPoRY77anVVUFJWmpA-XLk9oTlK
zG8`$mrXcE@5``~mBHCghqwn{c__9+9Kv;5lnUcvQ{W?GYCqz&cEwVj`NT<_>`~qJP
zxl1!dm9xM9R$l$NlE)v8<?6Flsp46SN^77Ra~$BBLX8|yh?GhtYBU=3bY+EH4YXyN
z={-jnuAG}pv?(NhUtSKvnM{UiwVKnsjtW7q(Q>9i;o|h$?`LNtku0uUE~`iMbz?JB
zVQ8u<-&?H~)$8?<|BA)ppw^JGaF0TzhdyjLedy)R4%JUiD4);YNF{{G31!0gnhM4e
zUjwKP=ssH*o({dzEyZGS6CLgee@(aB{XsJZWmvJ;{UaVig^(uS$C6-Hp!c*0uoY57
zL_|bHI0&x<{iXM33Jl2`k!>tWt!b$=Ru=~EYO)j<To+;;KYoSvj-)hrE(>ZtvpG+S
zxGU&brP()t0M|@C?7VGzS_&PjWPipR3J@3*i<-KJ)z~E&>=v*oIM^zGQp8=s(<&L)
zsi!?HSzZ>WgT`?202@^4xj`KQlXUN~UvU~%c}=$@knv8lDIcz3^vRMIlYOfH4NGt@
zR^Y$*2!Fy?_!ZhTM_^<d@p$4(A`ySYu1@y5@_e{XbH~wOLet)G=U*ttM%b=SZ5CQs
zkSmA47!syCPR$PZUbAjUT5Oe#eq=#8|L1{Qwk$ZZq_A#tmc%1^lYD>~q=0<Z#-rIw
ztwfPK*FIOLZ|q5aNAo#-8z}>#Uhpp6u}TE0tkOLoknKrtsKWz4Ov!_f1}m&VxeopU
XH8L1~rssF}00000NkvXXu0mjf{q%Cd

literal 0
HcmV?d00001

diff --git a/src/images/settingIcon.png b/src/images/settingIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..42ff6d383ce27887cba593f42daa2779c471e374
GIT binary patch
literal 836
zcmV-K1H1f*P)<h;3K|Lk000e1NJLTq000^Q001%w1^@s6Lbc1400009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0@+DKK~#7F?N`lp
z+b|3U)gF9gvOt*$;!Y4{f_Q^ygESL3p1{rou_uT-L7iKV-XQ7%DSJv!VF41fWIsxx
zsJN%#JzD$&K9UBAj{-VGN;!rsn}9JF*i>9dH1=)rOXa)Pdede{v;gEF#1yMJ#7T+3
zcL=zO29l?z3skzPb!jXc?AvhNPQx<B#pF=!5-o})yuIBbpl$@hT}Yg`!0Po5z!+-Z
zA1WT`6})=|)$T4)r3@>aoGh^zE{_(thu}#}Yx>VYeVlZ+n<V8F66FBwaeq)s)i{^}
zCgr@g=$!g8JCbF72XwZ#FkEKVmJ@4R&~EULe70T26e0KIvmS>mHpLG+$OGHG{0#eX
z@)QJd3y}>5DRyRop*5B{>s@7N<cd)@jqX^*PDsk20)>MyYumtBqa7(8+cqiyoZ-s9
z1cv{##aC?+st(kqK!CrXzjz%<UMFLKhDuhe|2Lqc$_LOOppxrjcz-$PZ%IHdP=zS$
zz4uPScj&}6kXs1m20uJ9b}pd`v{X5#g@cb#W6o?Ur({LM0*)b$u*^PD{qO7R(`YnW
z*%b&Oq2Z?PA#|bs#Bb5Wih2p<oLVMrb*7>2UDoQq;fO%dG89O~PV5B2v;T%(`4Hr2
zLU^LtnXj@A5c0w~krt?;+>Id*1kX2I>_IXRG!v2njeCklH%li)OZ$%;&nEF4yEAE~
zI)k#mF6yH)b1INC?k~-w0lB9Q$%MQzMkNVIzq}AL_37m%MkhUBjk)KVikY4cR0Zoc
zW_l8kedAWax`@%~4P<YN>LI<3%{M7KQoCBj)iVUBgo-{#xpoo|zkA%n3*S9>lGibM
zX>p`AIlzXSMU2jnIP$N#DB{@%Xg_6SSubYW3dC<(&4%+GB9TsGJPTbzgov&QNTrCy
z=G^qRfZq){#@Cidb`K!Op$SYK3~5e!QCCnWPz|ua&jmNh_$oH(k^BRZNgc?pvCoSD
O0000<MNUMnLSTZ2E^nLw

literal 0
HcmV?d00001

diff --git a/src/images/summaryIcon.png b/src/images/summaryIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4a17f9f3129c1b6511c86039e491f522f9c7e35
GIT binary patch
literal 1403
zcmV->1%&#EP)<h;3K|Lk000e1NJLTq001oj001)x1^@s61IB@I00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1rSL@K~#7F?O8E%
z8b=g<cN~NmG~y3fA!R()gmfu16H-MpibvKjkW$1&To_kYD$9*i3Kvc*smi2MT*x!2
zAip5w2WX7tLg|DC$S54g<@-*zc)@TS=s;*D-;BiW?cVKo@7})m?XH}jo@V8S!H_YL
zOeV83Wn5fbRD;?>lTN48JFdth6f-h?)G$^#W*7(cdi}Tl#!#ehrPGJ#cwepuWvAW#
zPPhI@(!PbC`qhdUMp3mnu3MFe0ITkc>t>ghmSkmRMUIY+<ox{HYjZJ9$8o+M<u+ZU
z78c&5(rNcrD)lA<$drIFN*w2#)m7KFZTI;2*!}*&1DDs-_-a0xK@Uo1GFiSo%dmE_
z2FQ#+i~s!crEG6+dv(JwvZiJ2vK&Y{X4_rMqT@^mE0<8%e)2@t*4Df-=M~&FA4nQ+
z*Cp+m=Cnyy`0wQ8<OAYAJ%8RU<BPAG5)vKPohoTq@fCkb_}hE;Jn{;3mF4ASRm}%R
z4}J=~S&3x_oi7@VKV*u)q-O-#RQ09Xx4Ug8@7}3m&5}7nvtHjqq&P#dz`91X2XjT5
zXf_&;5m{gSYuoE4A_ih~PneCF=Bv3QO(3#X@$+I>d+3QcPq<N}RYtxsq!$(z?%VD5
z8Pol>`82~RV*jRLnt6n|8YWx?6YrqWXp{%_hdBG(kI(sQv9zxoOUSrezP8D+%xi2L
zb^pvs>r!`danaKiN?Q<Y`#6;<$fV#WRMIe+PJbm4KuO)t?%eU@CuOLTqP*shch)b1
zu@HHxxXjejG=h@4RBzN23QCIl$h6z-+_2}&l(dTsr^;NN^h19MOw3P)J!ht*4Q+X*
ztGGee9K)y%droN5rlzeYg=JaP%$~&k;o-v`k}UI@k6O~Q{u=rm2??XqxiV=k*HWp}
zGpsIlNs_vG`R-jWiX6Ru{eB@kVre(?<kD<5i--h^NEACHKEO?i|1=uUf}RnYbd<|2
zl0xWvi^;Z*q~b*hX2cE%hgoO@l6JYoGA@&6)XOah{(b!H%LE7{9goMWw&PUY4s75!
zZ)HvpNZOwapURx!|3$#85IJcI9ZzEf0Fh&h!f8@97b$5H#_FO(U5q5MH>@8+9fcFJ
z?Cz)+9E3<ox7uwIy;Nrq^}_@`GzgQ27eeuZhvS|uL`Iqf`#0W)33_Bj?sGr(s~IyE
zD~+>_90_TCHNp*W{QE+Dl{U-;m|Sqr4$Iueg<Bm;NL-mTSIIhI?$~>l>~uC{gbR2Y
z1B+R|%2m>Cm@%(J8ecSv^sXjc4eqg_ju-~Hz#!uBSd8vd@vDU}5oKc1B#ac#9o0);
zblrkSR71ZD#4PKu-*=gH<Ce8C%AKxE+6!$Y{QhWT2ZRp>_4Q?@I$X+O5&MA)czbu3
z?j-*60wYRHCIHSpet|1|=~t<Le+=qxw_3j^5{W#DSy(jpQ6gcqTCH+VAKU&r5s#mv
zeHGOtHgU4J?^o3x$Nd;H?~N~GqA#?SxiuT+KHUWZLSeD%P9jx_0?2X&{fKPbBRb9l
zweP{dakAk=`ySo^m?SK#&^GQ7o#wlfWJ9$NQVB(x7UBSEY(2D%i?E?k2fwg#NiNGI
z3}O9~;sKiy0rby}zd!q3jpM=v_t-Y*)HV=3H(?-&5X^v@F?v)X47I1dl()Z!KDp5k
zMJMg1P$_l-;$5TY*7nC{TZzURYtkb$J&M}GI!J~F;W%OM`44jgT9u(>3eNxl002ov
JPDHLkV1gWwnDYPt

literal 0
HcmV?d00001

diff --git a/src/images/timerIcon.png b/src/images/timerIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..673004841d62fcd2f512d2990e1f73d2d18ad052
GIT binary patch
literal 1156
zcmV-~1bh35P)<h;3K|Lk000e1NJLTq001Tc001Wl1^@s6V_`ZA00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1Q|(0K~#7F%~)M-
z(@Ye-<2auxIZpDe;PbZvvVckrub>Ke28pr)vV)WrKvzJK`kwO8XB>$>H>{v$1x-aG
zRm9G4j>k^i&?fejwj9ZSW6#X-ojZ5V9VHfMG#Xv4^&_R6u2QOl`!<T(+3T^0ibQmz
z^(@5ma59;Uq#{(=58FT-&w99hhE6+D0a{BWGTTj(WO#Xb8I`G1ikRm$drIlPEUd!r
zLYzjh*a#Mj;y8|Kwc5XUZsBO7tc&+JRA-qWEcj_%pDT&MNCB)gC|C%?q(8W>yEg`;
z1WX(8YYh7i$ObvVB$+-gYrQM*egAo*;h*8q=Gy3UIOP^#8(Dj4o9v@f1D@yaEE;H@
zY;0@<>+3XoJl1_j3;KTZG;iPYyw_3&nWgf-8kDgTzsc)V_<oSrS!+4|O=0*3QW9Cc
zv=dnOzq0iT<j$5y#VI}{$?OaJp>w)!?Ty?qOdpCduI;-246Y>xbIxZCXH3~ycN?$|
z*L7ZqneCmTkEX;p6ky&rMS9n28rzeL7=n1uSeg51N(>R1OH9Baytue{C-)4-MM<qD
zSY6_`b7Hx*z<6IC0LE>M)qr${I*22k+_%7X?NV`9$gCz@!YC4Gu`N@eNB8Ml%g82M
zm@<KKaVTA~ccEAUK005hYqk1gv4&3N5jnwPDliW!6boR<+Qp=q#~`KTBg@1B;P5S_
zr={cK5|{^FId0JxP&1u4o12@`YPIC(=!mWL5f@LU)9JV6I;-4;@`-{6Ki38^qp?tU
zF4ggjr>9S!$icxuTClynEnmML^REwGxBgoN&#On1$&df9YYY<rx-Q{udmj1WCud@b
z^Yg_&HJdH51uQ%l0JK;d*uXZx^}AHVXB<6R=;g~-DZ%68<Maje{tkXNT&{qjys-}|
z-|TiQxi%`Ti<Yn?{<5Rd7Yi&TSL4KmZ*htS%yw|C9ALSGp`lQ+hz%T~Y$z50mo20A
zRpc_oLfm*>Od2f6k%$$Ut8luYM>hzaJaz!x+iLpTz$lz~(ld1Mx3Cx!)O4+UD-Q%_
zQoK^(FhO?A!))KYR=tO^8q+&-H{0boC3c-2x=)y8&FH~;z5e;iOUl}t5`()$F_F13
zWHE=#bIJP{QueWkqyA~}-IXk<m>5i_$$PnDU|sx}iPSL@pp_rnB)nCTS!%y@!doD>
zvlw^(^iTSn@u}QpESAEhO%-h`{tATJY@@hQv&vFyx1pGw7q^d4WiLs79+u4y78`z=
zVJLG8HHzb(FIKftYU7SW%M>psm?5M_$Eq=;`sD$cGp2k(S-^xMTYtNSI`}T#xZ7LT
zXO*qafQj)n1lIym8T+w%zsiPRX<|h%7sX}EWLPAra4a^5K?IhOkx?#cWGjRIO8f##
WLK;O%E5$Yd0000<MNUMnLSTZwY9B`c

literal 0
HcmV?d00001

diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index 1162c777..eacb2f30 100644
--- a/src/pages/Profile.js
+++ b/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)}>
diff --git a/src/pages/Summary.js b/src/pages/Summary.js
new file mode 100644
index 00000000..7f94b3db
--- /dev/null
+++ b/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>
+    )
+}