partner request design

Reviewed-on: #36

package-lock.json

@@ -1,5 +1,9 @@
 {
+<<<<<<< HEAD
+  "name": "itguild.info",
+=======
   "name": "outstaffing-react",
+>>>>>>> 42b597d58589cfa47890a35c06fd651fc654742a
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,

src/assets/fonts/stylesheet.css

@@ -394,3 +394,16 @@
   url('LabGrotesque-Light.ttf') format('truetype');
   font-weight: 300;
 }
+
+@font-face {
+  font-family: 'Geraspoheko';
+  src: url('GeraspohekoRegular.eot');
+  src: local('Geraspoheko'), local('GeraspohekoRegular'),
+  url('GeraspohekoRegular.eot?#iefix') format('embedded-opentype'),
+  url('GeraspohekoRegular.woff2') format('woff2'),
+  url('GeraspohekoRegular.woff') format('woff'),
+  url('GeraspohekoRegular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

src/assets/icons/arrows/arrowLanding.svg

@@ -0,0 +1,10 @@
+<svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_76_12)">
+<path d="M22.7685 8.75957H22.345C15.3781 8.75957 8.41109 8.75957 1.44414 8.75957C1.22469 8.76628 1.00541 8.7416 0.792717 8.68623C0.259454 8.5302 -0.0459255 8.00204 0.00624986 7.38338C0.0222895 7.10907 0.131776 6.84899 0.315899 6.64783C0.500021 6.44667 0.747298 6.31697 1.01524 6.28102C1.18606 6.26022 1.35806 6.2511 1.53009 6.25372C8.46839 6.25372 15.407 6.25372 22.3458 6.25372H22.7931C22.6734 6.12655 22.6066 6.05322 22.5376 5.98222C21.3043 4.73398 20.0705 3.48392 18.8362 2.23203C18.4764 1.86848 18.2991 1.45188 18.438 0.941657C18.4905 0.730456 18.5968 0.537048 18.7462 0.38089C18.8956 0.224732 19.0828 0.111333 19.289 0.052101C19.4952 -0.00713091 19.7131 -0.0101062 19.9208 0.043474C20.1284 0.0970542 20.3186 0.205301 20.472 0.357322C20.9393 0.80435 21.3828 1.27556 21.8355 1.73663C23.3982 3.32762 24.9604 4.9181 26.5221 6.50805C27.1582 7.15557 27.1597 7.85069 26.5275 8.4951C24.5402 10.5235 22.5445 12.5363 20.568 14.5725C19.717 15.4494 18.6574 14.8432 18.4418 14.0724C18.377 13.8673 18.3702 13.6478 18.4221 13.439C18.4741 13.2301 18.5827 13.0403 18.7357 12.8913C19.0672 12.541 19.4086 12.2 19.747 11.856L22.5092 9.04745C22.5798 8.96787 22.6465 8.88985 22.7685 8.75957Z" fill="#A7CA60"/>
+</g>
+<defs>
+<clipPath id="clip0_76_12">
+<rect width="27" height="15" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/arrows/tableArrow.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.11629 5.8584L8.07227 0.858398H0.160323L4.11629 5.8584Z" fill="#2E3A59"/>
+</svg>

src/assets/icons/authIcon.svg

@@ -0,0 +1,11 @@
+<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_68_166)">
+<path d="M7.83533 -0.000427246C8.01139 0.0347969 8.19098 0.0603351 8.36352 0.106127C10.1325 0.574608 11.2721 1.69782 11.6378 3.48501C12.1598 6.0326 10.4182 8.17423 8.22135 8.59868C7.24129 8.79102 6.22489 8.63913 5.34382 8.16864C4.46275 7.69816 3.771 6.93791 3.38538 6.0163C2.7159 4.41052 3.02929 2.48332 4.40345 1.19367C5.09537 0.544667 5.89733 0.14003 6.8441 0.0330362C6.87122 0.0255363 6.89714 0.014272 6.92113 -0.000427246H7.83533Z" fill="#838383"/>
+<path d="M7.5037 17.9969C5.99838 17.9969 4.49305 18.0057 2.98817 17.993C2.33244 17.997 1.69302 17.7886 1.16549 17.399C0.50526 16.9094 0.11176 16.2485 0.0408957 15.4344C-0.0880693 13.9523 0.0822738 12.4997 0.633346 11.1106C0.967863 10.2674 1.46655 9.54135 2.29624 9.0962C2.79777 8.82462 3.36124 8.68806 3.93142 8.69993C4.11276 8.70345 4.30467 8.79195 4.47016 8.88178C4.7369 9.0262 4.98559 9.20408 5.24263 9.36611C6.01995 9.85749 6.86152 10.1243 7.78716 10.0547C8.46852 10.0037 9.09838 9.77647 9.67982 9.42071C9.87921 9.29874 10.0861 9.18338 10.2674 9.03764C10.7428 8.65414 11.2683 8.64798 11.8295 8.77346C12.8648 9.00374 13.5937 9.61928 14.0981 10.5311C14.6025 11.443 14.8301 12.4244 14.9273 13.4442C14.9789 13.9979 15.0026 14.5538 14.9982 15.1099C14.989 16.6108 13.8608 17.8252 12.3652 17.9648C12.1328 17.9863 11.8982 17.9987 11.6649 17.9991C10.2767 18.0026 8.88887 17.9991 7.50063 17.9991L7.5037 17.9969Z" fill="#838383"/>
+</g>
+<defs>
+<clipPath id="clip0_68_166">
+<rect width="15" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/calendar.svg

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.569 2.26115H12.9023V1.42782C12.9023 1.2068 12.8145 0.99484 12.6583 0.83856C12.502 0.68228 12.29 0.594482 12.069 0.594482C11.848 0.594482 11.636 0.68228 11.4798 0.83856C11.3235 0.99484 11.2357 1.2068 11.2357 1.42782V2.26115H6.23568V1.42782C6.23568 1.2068 6.14788 0.99484 5.9916 0.83856C5.83532 0.68228 5.62336 0.594482 5.40234 0.594482C5.18133 0.594482 4.96937 0.68228 4.81309 0.83856C4.65681 0.99484 4.56901 1.2068 4.56901 1.42782V2.26115H2.90234C2.2393 2.26115 1.60342 2.52454 1.13458 2.99338C0.665736 3.46222 0.402344 4.09811 0.402344 4.76115V14.7611C0.402344 15.4242 0.665736 16.0601 1.13458 16.5289C1.60342 16.9978 2.2393 17.2612 2.90234 17.2612H14.569C15.2321 17.2612 15.8679 16.9978 16.3368 16.5289C16.8056 16.0601 17.069 15.4242 17.069 14.7611V4.76115C17.069 4.09811 16.8056 3.46222 16.3368 2.99338C15.8679 2.52454 15.2321 2.26115 14.569 2.26115ZM15.4023 14.7611C15.4023 14.9822 15.3145 15.1941 15.1583 15.3504C15.002 15.5067 14.79 15.5945 14.569 15.5945H2.90234C2.68133 15.5945 2.46937 15.5067 2.31309 15.3504C2.15681 15.1941 2.06901 14.9822 2.06901 14.7611V8.92782H15.4023V14.7611ZM15.4023 7.26115H2.06901V4.76115C2.06901 4.54014 2.15681 4.32817 2.31309 4.17189C2.46937 4.01561 2.68133 3.92782 2.90234 3.92782H4.56901V4.76115C4.56901 4.98216 4.65681 5.19412 4.81309 5.3504C4.96937 5.50669 5.18133 5.59448 5.40234 5.59448C5.62336 5.59448 5.83532 5.50669 5.9916 5.3504C6.14788 5.19412 6.23568 4.98216 6.23568 4.76115V3.92782H11.2357V4.76115C11.2357 4.98216 11.3235 5.19412 11.4798 5.3504C11.636 5.50669 11.848 5.59448 12.069 5.59448C12.29 5.59448 12.502 5.50669 12.6583 5.3504C12.8145 5.19412 12.9023 4.98216 12.9023 4.76115V3.92782H14.569C14.79 3.92782 15.002 4.01561 15.1583 4.17189C15.3145 4.32817 15.4023 4.54014 15.4023 4.76115V7.26115Z" fill="#406128"/>
-    <path d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z" fill-rule="evenodd"/>
 </svg>

src/assets/icons/landingClue.svg

@@ -0,0 +1,9 @@
+<svg width="176" height="173" viewBox="0 0 176 173" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect y="71.9147" width="131.15" height="120.221" transform="rotate(-33.2532 0 71.9147)" fill="url(#pattern0_68_172)"/>
+<defs>
+<pattern id="pattern0_68_172" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_68_172" transform="matrix(0.000804799 0 0 0.000877963 -0.00460929 0)"/>
+</pattern>
+<image id="image0_68_172" width="1254" height="1139" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABOYAAARzCAYAAADIVynaAAAACXBIWXMAAC4jAAAuIwF4pT92AAAFyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4xLWMwMDAgNzkuOWNjYzRkZSwgMjAyMi8wMy8xNC0xMToyNjoxOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIzLjMgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNC0wMy0xM1QxNzowODozOCswMzowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjQtMDMtMThUMTY6NDQ6MDkrMDM6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQtMDMtMThUMTY6NDQ6MDkrMDM6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFhYzQ4ZjQ0LWRjN2MtYmY0MC05MDY4LTY1MjYzMGU0ZTA4MiIgeG1wTU06RG9jdW1lbnRJRD0i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 truncated
+</defs>
+</svg>

src/assets/icons/telegramIcon.svg

@@ -0,0 +1,15 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_64_66)">
+<mask id="mask0_64_66" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="23" height="22">
+<path d="M22.0015 0H0V22H22.0015V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_64_66)">
+<path d="M10.9461 22.0001C4.87347 21.9702 -0.0423218 16.9977 0.000274756 10.9273C0.0436186 4.86661 4.99678 -0.0297562 11.0545 0.000136144C17.1159 0.0307758 22.0317 4.98468 22.0018 11.0349C21.9719 17.1247 17.0255 22.0293 10.9461 22.0001ZM16.0487 7.6025C16.0711 6.87985 15.8103 6.63324 15.2715 6.68256C14.9591 6.71096 14.664 6.8126 14.3777 6.93217C12.3622 7.77513 10.3475 8.61809 8.335 9.46778C7.12361 9.97969 5.91447 10.4968 4.71056 11.0259C4.48935 11.1231 4.25096 11.2531 4.27338 11.567C4.2958 11.8749 4.56782 11.9234 4.77557 11.9937C5.37491 12.1962 5.97874 12.392 6.59303 12.5415C7.0997 12.6655 7.61161 12.6199 8.06298 12.3173C9.56955 11.3069 11.0709 10.2898 12.5782 9.28021C12.7307 9.17857 12.9108 8.94392 13.0901 9.15316C13.2747 9.36764 13.0087 9.5029 12.8801 9.62995C11.8354 10.6612 10.7809 11.6828 9.7362 12.7133C9.26839 13.1752 9.31397 13.6011 9.85727 13.9718C10.1547 14.1743 10.4603 14.3656 10.76 14.5667C11.5544 15.0995 12.3361 15.6525 13.1447 16.1629C14.0243 16.7182 14.4457 16.5523 14.7476 15.5852C14.7768 15.4911 14.8029 15.3947 14.8239 15.2983C15.1318 13.9016 15.3246 12.4847 15.5465 11.073C15.7378 9.85713 15.8993 8.63678 16.0472 7.6025H16.0487Z" fill="#9F9F9F"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_64_66">
+<rect width="23" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/vkIcon.svg

@@ -0,0 +1,16 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_64_59)">
+<mask id="mask0_64_59" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="22">
+<path d="M21.9955 0H0V22H21.9955V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_64_59)">
+<path d="M10.9755 22C4.9123 21.9881 -0.0230861 17.0228 8.12304e-05 10.9589C0.0232485 4.91 4.97209 -0.0119356 11.0195 2.17408e-05C17.07 0.0119791 21.9994 4.95335 21.9956 11.003C21.9919 17.0743 17.0438 22.012 10.9755 22ZM11.4724 9.84166C11.4724 9.53076 11.4807 9.21913 11.4702 8.90824C11.4545 8.42621 11.3454 8.29393 10.8716 8.20798C10.2289 8.09215 9.58239 8.10336 8.93968 8.20873C8.77303 8.23638 8.60861 8.31336 8.4569 8.39332C8.28875 8.48151 8.26708 8.58987 8.47858 8.66012C8.78797 8.76325 8.99424 8.96653 9.04132 9.29162C9.12203 9.84689 9.16313 10.4044 9.05552 10.9634C8.95164 11.503 8.5974 11.6315 8.1774 11.2691C8.07502 11.1801 7.98758 11.0718 7.90014 10.9671C7.31797 10.2669 6.96373 9.44856 6.68348 8.59436C6.58409 8.29019 6.37633 8.13923 6.07739 8.134C5.45561 8.12279 4.83308 8.12129 4.2113 8.13998C3.84959 8.15119 3.76739 8.28645 3.91685 8.62126C4.63728 10.2355 5.43095 11.8101 6.52953 13.2084C7.66324 14.6515 9.10634 15.4354 10.9874 15.2972C11.314 15.2733 11.515 15.2045 11.4702 14.8226C11.4538 14.6784 11.4821 14.5237 11.5158 14.3795C11.6234 13.9139 11.9208 13.7756 12.3491 13.9841C12.6428 14.1276 12.8931 14.3376 13.127 14.5581C13.6898 15.0909 14.3302 15.3689 15.1202 15.2987C15.5155 15.2636 15.9161 15.2927 16.3144 15.292C16.6387 15.292 17.0117 15.3241 17.1589 14.9684C17.3001 14.6261 17.0109 14.3854 16.7957 14.1702C16.3024 13.6792 15.7838 13.2136 15.2868 12.7256C14.9468 12.3916 14.9274 12.1935 15.2046 11.8116C15.4819 11.4297 15.789 11.0688 16.0768 10.6944C16.5401 10.0913 16.9661 9.465 17.1634 8.71617C17.2785 8.27898 17.2037 8.15567 16.7576 8.14521C15.999 8.12802 15.2397 8.14297 14.4812 8.15119C14.2189 8.15418 14.0874 8.32307 14.0066 8.554C13.8788 8.91646 13.757 9.28265 13.6038 9.63464C13.334 10.2557 12.9701 10.8192 12.4634 11.2758C12.2885 11.4335 12.0793 11.5874 11.8252 11.4963C11.5509 11.3984 11.4919 11.1368 11.4784 10.8849C11.4597 10.5374 11.4739 10.1884 11.4724 9.84016V9.84166Z" fill="#9F9F9F"/>
+<path d="M11.4733 9.84153C11.4733 10.1898 11.4598 10.5388 11.4785 10.8863C11.492 11.1381 11.5518 11.3997 11.8253 11.4976C12.0794 11.588 12.2894 11.4341 12.4635 11.2772C12.9702 10.8205 13.3334 10.257 13.6039 9.63601C13.7571 9.28402 13.879 8.91782 14.0067 8.55537C14.0882 8.32369 14.219 8.15479 14.4813 8.15255C15.2398 8.14433 15.9991 8.13013 16.7577 8.14657C17.2038 8.15629 17.2793 8.2796 17.1635 8.71754C16.9662 9.46636 16.5402 10.0926 16.0769 10.6957C15.7891 11.0701 15.482 11.4311 15.2047 11.813C14.9275 12.1956 14.9461 12.3929 15.2869 12.727C15.7839 13.215 16.3026 13.6806 16.7958 14.1716C17.011 14.3861 17.3002 14.6267 17.159 14.9697C17.0125 15.3255 16.6396 15.2933 16.3145 15.2933C15.9162 15.2933 15.5156 15.2649 15.1203 15.3C14.3303 15.3703 13.6906 15.0923 13.1271 14.5594C12.894 14.3382 12.6436 14.129 12.3492 13.9855C11.9209 13.7762 11.6235 13.9152 11.5159 14.3808C11.4823 14.5251 11.4539 14.6798 11.4703 14.824C11.5144 15.2059 11.3141 15.2746 10.9875 15.2986C9.10646 15.4368 7.66337 14.6529 6.52967 13.2098C5.43109 11.8115 4.63817 10.2369 3.91699 8.62262C3.76752 8.28782 3.84973 8.15255 4.21144 8.14134C4.83321 8.12266 5.45575 8.12415 6.07753 8.13536C6.37721 8.1406 6.58422 8.29156 6.68362 8.59572C6.96312 9.44992 7.3181 10.2683 7.90028 10.9685C7.98772 11.0739 8.07441 11.1822 8.17754 11.2704C8.59679 11.6329 8.95178 11.5051 9.05566 10.9648C9.16327 10.4058 9.12217 9.84825 9.04146 9.29298C8.99437 8.96715 8.78811 8.76387 8.47871 8.66149C8.26647 8.59124 8.28889 8.48287 8.45704 8.39469C8.60875 8.31472 8.77315 8.237 8.93981 8.2101C9.58177 8.10472 10.229 8.09351 10.8717 8.20935C11.3455 8.29455 11.4546 8.42682 11.4703 8.9096C11.48 9.22049 11.4725 9.53213 11.4725 9.84302L11.4733 9.84153Z" fill="#FBFBFB"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_64_59">
+<rect width="22" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/EllipseIntro.svg

@@ -0,0 +1,12 @@
+<svg width="1005" height="969" viewBox="0 0 1005 969" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_53_13)">
+<circle cx="502.5" cy="466.5" r="281.5" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_f_53_13" x="0.300003" y="-35.7" width="1004.4" height="1004.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="110.35" result="effect1_foregroundBlur_53_13"/>
+</filter>
+</defs>
+</svg>

src/assets/images/backgroundLandingIntro.svg

@@ -0,0 +1,11 @@
+<svg width="392" height="620" viewBox="0 0 392 620" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g style="mix-blend-mode:plus-lighter">
+<rect width="392" height="620" fill="url(#pattern0_54_66)" fill-opacity="0.78"/>
+</g>
+<defs>
+<pattern id="pattern0_54_66" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_54_66" transform="scale(0.00255102 0.0016129)"/>
+</pattern>
+<image id="image0_54_66" width="392" height="620" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYgAAAJsCAMAAADQoMQdAAAAAXNSR0IB2cksfwAAAoVQTFRFAAAAISEhICAgIiIiISEhHh4eISEhICAgISEhHR0dHBwcHx8fHh4eICAgFxcXAAAAISEhHR0dHh4eAAAAHx8fICAgISEhICAgICAgAAAAKioqHR0dHR0dHR0dFRUVIyMjMzMzHBwcGhoaICAgHx8fHx8fHx8fHx8fHh4eHx8fAAAAHx8fHBwcGhoaHx8fJCQkHh4eHh4eHx8fHx8fICAgHh4eHh4eGxsbHx8fHBwcHx8fHx8fHx8fHx8fIiIiHR0dHR0dICAgICAgISEhJCQkHh4eIiIiHh4eHh4eHh4eICAgIyMjHBwcJCQkICAgHx8fHBwcICAgGxsbICAgISEhICAgHh4eHh4eHh4eICAgJycnICAgHh4eICAgHx8fHh4eHh4eHx8fHx8fHh4eICAgHh4eICAgHx8fHx8fHh4eICAgHh4eHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHh4eHx8fICAgHx8fHx8fHx8fHx8fICAgHx8fHx8fHx8fHh4eHx8fHx8fHx8fICAgHx8fICAgICAgHh4eHx8fHx8fICAgHx8fHx8fHx8fHh4eICAgHx8fHx8fHh4eHh4eHx8fHh4eHh4eICAgICAgICAgICAgHh4eICAgHh4eHx8fHx8fHx8fHx8fICAgHh4eHx8fHx8fHh4eHx8fHx8fHx8fICAgHx8fHx8fHx8fHx8fHx8fICAgHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fICAgICAgHh4eHx8fHx8fHx8fHh4eHh4eICAgHx8fHx8fHx8fICAgHx8fHx8fHx8fHx8fHx8fICAgHx8fHh4eICAgHx8fHh4eHx8fHx8fHh4eHx8fY4tlWAAAANd0Uk5TACc3HkZcLxA2NAlbVlkLAS4aIgNRKD4YMAIGNSxODBYFEgpYSyEpGTtBBFIlFFoOVSpJMkgzVBNTJDpCMUoPIz1QCBcHKyZMRREgHS0VRzkbVxxPHzhDTTw/DUCGoaTBqIKsmKl3iLbDuXBttK1zhKK1dZW4p2emq8XAsY6/xJfOu2uAm8LKoJyMaKqFvmZfrsywXXpeRHhpeXF2YW5jcmRqYG9ibGWDdH2ys52lzZLSmtnP0cvGx9W3yLqQn9Cein9+gXuUjYmT23zUr5mLh5G9j5a8yaPt9OSaAAA6XUlEQVR4nO2d+0MTZ/b/cUgkIDhAEJlwC/GCErkrRDAoiBEvIKKiAtOqq61Kq+C3VXvz29LaC6ZECyF4xYmJBru2fj5+etN2d027dL+u291+avv3fEFLq5jMDPOcc5J1ff1szjyYyczznPM+7xMTI880joFYheA46PQMTI/IkpWJ4wzxmuEMCRFYcqx+RqJm9EkzI7BkZfhkLkX7p1O5aXBLUYsxTT9L+6fT9elwSwFkNpchaP+0KZOLg1uLSrL02QxLzknS58KtBQxzPJfH8vkUbjoPtRaVWOboGX7DMTEZ+rnUS1bBPG4+0+eFDC4faClqWaBfyPT5Aqt+EdBS4LAYDBa2CHlcvBlkKWop1BcVs0WYpy8xwawFjlJuHmuI+ewhpkSZvpw1xGL9EoiVADJ2OxewxmD/UU2JVH2FmTVGJfOPCpixB/xs9ijzuFL2IGopsOmXskep0lezBwEkhUsG2D8UMG68psQyvR1gyawbL2DGDgE1EHHYjiJTIqcI5hDAdhSBZjnQsZjtcD4l0vUrQOIYa/Vs23ZIcjhDHUykGi6TZj+4EixRFKtPrIeJxM4quNSpg1sOFUoOfrU+GSpWg56DCsVIIVduhIpVZ+ByoGLJ4NBbmXfbE6yZMWMNVCwmhHIOMPcVy62CCxYOU4l+LVw0g14HF4yBddx6wNSXsZxrhIsWhnh9E2C0+kR9ZKpaj1Jv4EAPl7lcOfZ+sHiGHvS8MkufBvZs1o6Dg81A8uvRq6bV+g2g8YRsfRZoQC0UcwbgDedYRNz9YLN+I3BZNkU/hzJLFoqxI1gLdMylnAM65MOM3b/g+4GF+irokFME44luAn7rTKJUvwl8ycVF+kLomFPCuISrhI/aApJCDEPdRv06+Kjl+sXwQafAZpRdv7AM8mQyiS36VoSopgp9KkJYtSQYOBRpTyW3BOzgO4k8/QyQRPFkFgGe1afOLA7pNijlNuMEjtHpDShxebs+AyWwGuK4TDNO5JlYwr/N+kSk9G6uvogiSxYKfjpe9SCVY5DghceYpkfbGq+ImPAvH7GeZo7nMFKayfqtaEuemaRfiRVbFlZpnzwp3HT4/zJLkh5RxJasXx0R4R+rtE8eFOHfNv128Ji/U2DFe+7JYOFwVUhr4IV/jfqiNuCQj7A2IsK/Ug6wthIK8L3x2A6TWdonT5M+HvcCIcjDO3P9isXAwf7kIKR98uTRC/+EZRz6FmEtrPDPXKFHFybQC/+aMfNyv1IAm1EsB5H2yZMwR9+MfY1HgJL2ybOSWwa3hW0r0uMXw2NWEQv/kGs3v8Inc3D313b9NrBY4RE2kQr/4KR98tTA1WHz9Ukk1cx1+o0k/zUPyKLqinZwANL5cQRAaZ88rYTCv0ZAaZ889QYO5gjmIFO8xAFrdWQwgkr75InlsiC2OqZEPVaB4zHohH9A/zmqABL+ZRKqIsm+dLDHhSpAHoM1dI+LMaYRPQbBXqCq4CE2Bq36LQBLUYuwVb+e4DLw0j552tiFfy2kW8rxrTKB8A9D2icP8+Fx7JBF2K06Trt+Afo1ciHTDqpgE/7xNY3x5P2GBOkU4EScKlgSjCs7xGee3UFeOCvXl6FuLJt37voD/o9uMsJqcfcebRs14TlRfH7vvv3AK1LE3PnCiwcQ3xMHu7q7D+GFD8f/ef6llw8XayH1yJGjr+w9IlKL8Hhx76tdVrz44pHu117HCx8GXnzj2L7/q8koMLu7+9k33xJFaps6Y9eze3f04MV/e+wXcQAvfDjeOXZ8V2eLFpKPHu1+892XyX8RMe/tfaOrFi9844H3P9hArt0p6D0h9mp74PJO8Zljb36IeG+GxtRz4p0+1L4nkqbPSWS60jRvPyvfFk+e+ojctzEeP7eVS5YCn6C438VyhEzISxxwEy+ZIrcFkvuZEq2uQbYAufs9REWhCaDbVkMCkPuZEimufkatEN8+METa9EmU26IRDkwg1LqYO0va+gbY7CynhpBNk9tCbvqcxHzXRvZk7/TTZwibPjHaVkOC2vQ5ifokF8Dvz1Q0gHjMnUTdRj1RfppCbjnBFlc2xJe++dBZEh+ocbbQyS4Rmz4nEed2gXznwuqBc0RLxmpbDQm6JH+CJlc7TKDC8x4ixbxOn0lzoXHQmj4nEevSQ/VxVw30kDR94rWthgSp6XMSgtUF1lliuTDQABVLBiNx+xZS0+ck1rsS4XITqzzDAGbNSiTrV9OWZVGaPieRUOQCbN4yJw4koi/ZkqQn+LYfRkBsdp9gm8sOGa5l+Cx6Fha3bTUkCE2fk6h0uUCPw8LigYvI79GI2ECgGaJMYHcBd5bESadxFfO8Xb8M9QIhwbIImiDVVQS9RTYMnEfNki1Hb1sNCXDT5ySMiS7wIkKCdwD0rTMJc4TMs3C1ZuUuK/wex7HnAGLTJ7aqLCygTZ+TmKl3IRQCC2wDRWhLpmlbDQWmHrndBWka/Rv5Z/agWY9TKI/DgKfQX+lyo8xp5FsHDiNVMUm0+OHA6lnhs11InSXFvQMrUAILW6naVkOB1cXlcCVhCRTKB/ajKF2o+rXCgNPXaNroQmvfr+8fyEYIS9m2GgqcTl+DqxYvPZd69hBCVSviwzwwet+L+12ICUUhG0H4R9u2GgoM4d+gC8M0+jdyL3nArXIpfR/C0Abuj8Iu7VMgfUAC3mjSOqGEAVr4J9S6kKvvOX0DsIIX+rbVUEB7aJW6Es2Q8UKQfPoMaDKC2i0rDLCucjDSPnlMRQM2wCUnbCT2jwsDrPBvg2srXLBwxB46C5gS2BAto5QhnUfz3C4CCyJh7oDPDBUsAh6j4QAU/jW5SKrvlZ2nwXYEkXDdDQOcO3WsawZNCrNqwA+UJYuMD3UYUoH82gWbi6j6bvENwOQkIuTMHgaoCQbJrhKqFGapZxjEjT9SswrCADPTA1baJ485cWAOwJIjNr0jDDDCvxWw0j55mofPAgipIzfPJgwQc58KXW7CFCavG7jM/JaN4ISncAAI/+wu0up7nHSatRs6ojPPwsAu/FsOL+2TxzBwnjFLtkhvi+AUwDCwTsssSHRReEM+RIJrYC5TgAjPxQyDcclqydOj0bum2e157oqNOoXp2BPQPj92rc/TMRLZSbFhWHD14y5R9Gn56Pw/itf2HgtAr0gJo/XgoXUaTwHx74lHju/V9Ndi89zV7qOiKGrpaXhOFPcde0vTR5loeveTq+c0fZL/dGzJe59/L9KD3UMgiEfevT7GfzmnTMfYx/77xstiFvWaD+z7n88+7z2sAf8XYxy7JhJ74KpBEHfdYPkivjxB/0WceeEzli/iq65o/CJiOo7ffGHs0aTlTOYUxePXP9f0USZab+27ptf0Sf5rUTyy+8g3Ufhoiln9yt6xl7Wmv2vRO+LLf7p+GnpFShRUWRfma3xZT/+z2LVjtw12QSDUXTwrDbmna/two3XoL+8cohaPpuqqtCc5UkqGLiwgaDafMtslNnvNgrNO4tKvpV3H1hTN5zVGXs40mbwhiXH3meG8TTggZIz1Ola5aF1jZTToaB5hk8TsI9Pr3AixErXktbYyN8PENaJ21mogVbrInLFrPniQ0EBTMOhKmW9nc2NhJLsiHsfYLwH0y5Q4JfYgaklp2A6w9yxujBYpzQPKJYhuzZygcwl7FHWYV+ggOkuEwsbo0XDExMzsk0ALine truncated
+</defs>
+</svg>

src/assets/images/landingBackgroundCode.svg

@@ -0,0 +1,11 @@
+<svg width="359" height="134" viewBox="0 0 359 134" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g style="mix-blend-mode:plus-lighter">
+<rect width="359" height="134" fill="url(#pattern0_78_178)" fill-opacity="0.3"/>
+</g>
+<defs>
+<pattern id="pattern0_78_178" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_78_178" transform="matrix(0.00190114 0 0 0.00509335 0 -0.00169542)"/>
+</pattern>
+<image id="image0_78_178" width="526" height="197" xlink:href="data:image/png;base64,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 truncated
+</defs>
+</svg>

src/components/Calendar/calendarComponent.scss

@@ -23,10 +23,14 @@
 
       .calendar__hours {
         margin: 0 5px;
-        line-height: 0;
+        font-size: 22px;
         font-weight: 500;
         display: flex;
         align-items: center;
+        span {
+          font-size: 22px;
+          font-weight: 500;
+        }
       }
     }
 
@@ -54,21 +58,33 @@
     }
 
     &-box {
+      background-color: #e5f1fb;
+      height: 47px;
       display: flex;
       align-items: center;
-      margin-left: 20px;
+      margin: 0 15px;
-      cursor: pointer;
+      padding: 0 20px;
+      border-radius: 5px;
+
+      font-weight: 400;
+      font-size: 16px;
+      color: #406128;
 
       img {
-        margin: 0px 10px;
+        width: 17px;
-        width: 12px;
+        height: 17px;
-        height: 12px;
+        margin: 0 10px 0 0;
+      }
+    }
 
-        &:first-child {
+    &-arrow {
-          transform: rotate(180deg);
+      display: flex;
-          margin: 0;
+      align-items: center;
-        }
+      cursor: pointer;
-      }
+      height: 47px;
+      padding: 0 8px;
+      background-color: #e5f1fb;
+      border-radius: 5px;
 
       span {
         color: #18586e;
@@ -107,12 +123,9 @@
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 
       p {
-        color: #398208;
+        color: #9babc5;
-        font-size: 25px;
+        font-size: 14px;
-        font-weight: 400;
+        font-weight: 500;
-        font-style: normal;
-        letter-spacing: normal;
-        line-height: 30px;
         text-align: center;
       }
     }
@@ -127,24 +140,48 @@
 
     button {
       margin: 0 auto;
-      width: 125px;
+      width: 135px;
-      height: 42px;
+      height: 82px;
       padding: 0px;
       box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-      border-radius: 5px;
+      border-radius: 10px;
       border: 1px solid #c4c4c4;
       background-color: #ffffff;
       margin-top: 20px;
       font-size: 1.2em;
       text-align: center;
 
+      .form-date {
+        width: 100%;
+        padding: 5px 0 0 15px;
+        height: 100%;
+      }
+
+      .form-box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-top: #eff5fa 2px solid;
+
+        .form-hours {
+          display: none;
+        }
+      }
+
       a {
         color: black;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
-        font-weight: 500;
+        font-weight: 400;
-        font-size: 12px;
+        font-size: 16px;
+        height: 100%;
 
         @media (max-width: 500px) {
           font-size: 10px;
@@ -152,20 +189,6 @@
         }
       }
 
-      img {
-        width: 16px;
-        height: 16px;
-        margin: 0 5px 0 0;
-
-        @media (max-width: 968px) {
-          margin-right: 2px;
-
-          @media (max-width: 610px) {
-            display: none;
-          }
-        }
-      }
-
       @media (max-width: 1200px) {
         width: 110px;
       }
@@ -214,17 +237,6 @@
   }
 }
 
-.calendar__icon {
-  margin-right: 10px;
-  margin-top: -4px;
-}
-
-@media (max-width: 575.98px) {
-  .calendar__icon {
-    display: none;
-  }
-}
-
 .select-days {
   border-style: dashed !important;
 
@@ -246,11 +258,48 @@
 }
 
 .before {
-  background-color: #e5f9b6 !important;
+  background-color: #ffffff !important;
+
+  .form-date {
+    height: 35% !important;
+  }
+  .form-box {
+    background-color: #fafbfe;
+
+    .form-hours {
+      color: #6dd077;
+      background-color: #6dd0772f;
+      border-spacing: 10px;
+      border-radius: 5px;
+      display: flex !important;
+      flex-direction: row;
+      width: 95%;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 0 7px;
+      position: relative;
+
+      span {
+        color: #1458dd;
+        font-weight: 700;
+        font-size: 14px;
+        margin: auto;
+      }
+    }
+    .form-hours::before {
+      content: "";
+      position: absolute;
+      top: 10%;
+      left: 0;
+      height: 75%;
+      border-left: 2px solid #6dd077;
+      border-radius: 5px;
+    }
+  }
 }
 
 .pass {
-  background-color: #f7d7c9 !important;
+  background-color: #ba5c33 !important;
 }
 
 .today {
@@ -259,7 +308,7 @@
 }
 
 .selected {
-  background-color: #f9f9c3 !important;
+  background-color: #cbcbb4 !important;
 }
 
 .block {
@@ -271,18 +320,25 @@
   align-items: center;
   column-gap: 16px;
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 400;
   position: relative;
 
   .select {
+    background-color: #e5f1fb;
+    color: #406128;
     border-radius: 5px;
-    border: 2px solid #c4c4c4;
+    padding: 15px;
-    box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-    padding: 5px 8px;
     cursor: pointer;
     text-align: center;
   }
 
+  .hint {
+    color: #6f6f6f;
+    font-size: 14px;
+    font-weight: 300;
+    margin: 0 0 0 20px;
+  }
+
   .close {
     cursor: pointer;
     margin-left: 8px;

src/components/Candidate/Candidate.jsx

@@ -32,7 +32,7 @@ export const Candidate = () => {
   if (localStorage.getItem("role_status") !== "18") {
     return <Navigate to="/profile" replace />;
   }
-  // const { id: candidateId } = useParams();
+  const { id: candidateId } = useParams();
 
   const navigate = useNavigate();
 
@@ -47,7 +47,7 @@ export const Candidate = () => {
   }, []);
 
   useEffect(() => {
-    apiRequest(`/user/me`, {}).then((el) =>
+    apiRequest(`/resume?userId=${candidateId}`).then((el) =>
       dispatch(currentCandidate(el.userCard))
     );
   }, [dispatch]);
@@ -103,9 +103,7 @@ export const Candidate = () => {
               link: "/profile/catalog"
             },
             {
-              name: `${currentCandidateObj.specification} ${
+              name: `${currentCandidateObj.fio}`,
-                SKILLS[currentCandidateObj.position_id]
-              }, ${LEVELS[currentCandidateObj.level]}`,
               link: `/candidate/${currentCandidateObj.id}`
             }
           ]}
@@ -115,6 +113,7 @@ export const Candidate = () => {
           <div className="col-12 candidate__header">
             <div className="candidate__header__left">
               <h3>
+                {currentCandidateObj.fio} &nbsp;{" "}
                 {currentCandidateObj.specification} &nbsp;{" "}
                 {SKILLS[currentCandidateObj.position_id]} &nbsp;{" "}
                 {LEVELS[currentCandidateObj.level]}

src/components/Candidate/candidate.scss

@@ -3,7 +3,6 @@
 .candidate {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
   background: #f1f1f1;
 
   .container {

src/components/CardControl/CardControl.jsx

@@ -10,7 +10,7 @@ export const CardControl = ({ title, path, description, img }) => {
     <Link to={`/${path}`} className="control-card">
       <div className="control-card__about">
         <img src={img} alt="itemImg" />
-        <h3>{title}</h3>
+        <h3 dangerouslySetInnerHTML={{ __html: title }}></h3>
       </div>
       <div className="control-card__info">
         <p dangerouslySetInnerHTML={{ __html: description }}></p>

src/components/CardControl/CardControl.scss

@@ -38,7 +38,7 @@
       font-weight: 500;
       font-size: 18px;
       line-height: 22px;
-      max-width: 125px;
+      max-width: 165px;
       margin-bottom: 0;
     }
   }

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 
 import { useFormValidation } from "@hooks/useFormValidation";
 import { useNotification } from "@hooks/useNotification";
@@ -17,6 +18,7 @@ import "./modalRegistration.scss";
 export const ModalRegistration = ({ active, setActive }) => {
   const [loader, setLoader] = useState(false);
   const [isPartner, setIsPartner] = useState(false);
+  const navigate = useNavigate();
 
   const fields = {
     username: "",
@@ -145,6 +147,7 @@ export const ModalRegistration = ({ active, setActive }) => {
               onClick={async (e) => {
                 e.preventDefault();
                 await handleSubmit(e);
+                navigate("/welcome-page");
               }}
               styles="button-box__submit"
             >

src/components/Modal/ModalResetPassword/ModalResetPassword.jsx

@@ -7,7 +7,7 @@ import { useNotification } from "@hooks/useNotification";
 import { Loader } from "@components/Common/Loader/Loader";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import close from "assets/icons/close.png";
 
 import "./modalResetPassword.scss";

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -664,11 +664,8 @@ export const ModalTiсket = ({
                       "EasyImage",
                       "Image",
                       "ImageCaption",
-                      "ImageStyle",
-                      "ImageToolbar",
                       "ImageUpload",
-                      "MediaEmbed",
+                      "MediaEmbed"
-                      "BlockQuote"
                     ]
                   }}
                   onChange={(event, editor) => {

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -1196,9 +1196,10 @@
         .edit {
           background: #52b709;
           border-radius: 50px;
-
+          width: fit-content;
           p {
             font-weight: 700;
+            padding-right: 10px;
           }
         }
 

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -32,7 +32,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import calendarIcon from "assets/icons/calendar.svg";
@@ -683,11 +683,8 @@ export const TicketFullScreen = () => {
                             "EasyImage",
                             "Image",
                             "ImageCaption",
-                            "ImageStyle",
-                            "ImageToolbar",
                             "ImageUpload",
-                            "MediaEmbed",
+                            "MediaEmbed"
-                            "BlockQuote"
                           ]
                         }}
                         onChange={(event, editor) => {

src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx

@@ -299,6 +299,17 @@ export const TrackerModal = ({
         title: columnName
       }
     }).then(() => {
+      const existingColumn = projectBoard.columns.find(
+        (column) => column.title === columnName
+      );
+
+      if (existingColumn) {
+        showNotification({
+          show: true,
+          text: "Колонка с таким названием уже существует",
+          type: "error"
+        });
+      } else {
         setActive(false);
         dispatch(editColumnName({ id: columnId, title: columnName }));
         showNotification({
@@ -306,6 +317,7 @@ export const TrackerModal = ({
           text: "Колонка успешно изменена",
           type: "success"
         });
+      }
     });
   }
 
@@ -375,14 +387,29 @@ export const TrackerModal = ({
           email: emailWorker,
           project_id: projectBoard.id
         }
-      }).then((el) => {
+      }).then((response) => {
+        if (response.status === 400) {
+          showNotification({
+            show: true,
+            text: "Участник уже добавлен в проект",
+            type: "error"
+          });
+        } else if (response.status === 404) {
+          showNotification({
+            show: true,
+            text: "Данной почты не существует",
+            type: "error"
+          });
+        } else {
           setActive(false);
           setEmailWorker("");
+          dispatch(addPersonToProject(response));
           showNotification({
             show: true,
             text: "Приглашение отправлено",
             type: "success"
           });
+        }
       });
     } else {
       setEmailError("Некорректный e-mail адрес");
@@ -597,7 +624,15 @@ export const TrackerModal = ({
                       "bulletedList",
                       "numberedList"
                     ],
-                    removePlugins: ["BlockQuote"],
+                    removePlugins: [
+                      "CKFinderUploadAdapter",
+                      "CKFinder",
+                      "EasyImage",
+                      "Image",
+                      "ImageCaption",
+                      "ImageUpload",
+                      "MediaEmbed"
+                    ],
                     placeholder: "Описание задачи"
                   }}
                   onChange={(event, editor) => {

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -719,7 +719,6 @@
 
   .button-add {
     margin: 0 30px;
-    align-self: flex-end;
   }
 }
 

src/components/Navigation/Navigation.jsx

@@ -43,11 +43,11 @@ export const Navigation = () => {
       }
     ],
     partner: [
-      {
+      // {
-        path: "/catalog",
+      //   path: "/catalog",
-        active: "candidate",
+      //   active: "candidate",
-        name: "Каталог"
+      //   name: "Каталог"
-      },
+      // },
       {
         path: "/requests",
         name: "Мои вакансии"

src/components/ProfileCalendar/ProfileCalendar.jsx

@@ -95,11 +95,21 @@ export const ProfileCalendar = () => {
               alt="avatar"
             />
             <p className="summary__name">
-              {profileInfo?.fio || profileInfo?.username},{" "}
+              {profileInfo?.fio || profileInfo?.username}{" "}
-              {profileInfo.specification} разработчик
+              {profileInfo.specification}
             </p>
+            <hr />
+            <div className="summary__direction">Front End</div>
+            <div className="summary__level">Middle+</div>
           </div>
-          <Link to="/profile/calendar/report">
+          <div className="summary__skill">
+            <p>Ключевые навыки:</p>
+            <div>Java</div>
+            <div>Java</div>
+            <div>Solid</div>
+            <div>Java</div>
+          </div>
+          {/* <Link to="/profile/calendar/report">
             <button
               className="calendar__btn"
               onClick={() => {
@@ -109,7 +119,7 @@ export const ProfileCalendar = () => {
             >
               Заполнить отчет
             </button>
-          </Link>
+          </Link> */}
         </div>
         {loader ? (
           <div className="loader__wrapper">

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -14,7 +14,6 @@ import {
 import {
   calendarHelper,
   correctDay,
-  currentMonthAndDay,
   getCorrectDate,
   getReports,
   hourOfNum
@@ -26,9 +25,9 @@ import { apiRequest } from "@api/request";
 import "@components/Calendar/calendarComponent.scss";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrowLeft from "assets/icons/arrows/arrowCalendar_left.png";
+import arrowRight from "assets/icons/arrows/arrowCalendar_right.png";
 import calendarIcon from "assets/icons/calendar.svg";
-// import close from "assets/icons/closeProjectPersons.svg";
 import rectangle from "assets/images/rectangle__calendar.png";
 
 export const ProfileCalendarComponent = React.memo(
@@ -45,6 +44,7 @@ export const ProfileCalendarComponent = React.memo(
   }) => {
     const dispatch = useDispatch();
 
+    // const [l, setL] = useState(1);
     const [calendar, setCalendar] = useState([]);
     const [month, setMonth] = useState("");
     const [endDate, setEndDate] = useState(null);
@@ -173,11 +173,18 @@ export const ProfileCalendarComponent = React.memo(
       });
     }
 
+    const countHours = (day) => {
+      let hours =
+        reports
+          .find((item) => moment(item.created_at).isSame(day, "date"))
+          ?.task.reduce((acc, task) => acc + task.hours_spent, 0) || 0;
+      return `${hours} ${hourOfNum(hours)}`;
+    };
+
     return (
       <div className="calendar-component">
         <div className="calendar-component__header">
           <div className="calendar-component__header-info">
-            {!userId && <h3>Мои отчеты за </h3>}
             <p className="calendar__hours">
               {month}&nbsp;
               <span>
@@ -187,27 +194,26 @@ export const ProfileCalendarComponent = React.memo(
           </div>
           <div className="calendar-component__header-switcher">
             <div
-              className="calendar-component__header-box"
+              className="calendar-component__header-arrow"
               onClick={() => {
                 setValueHandler(prevMonth());
                 dispatch(setRequestDate(getReports(prevMonth())));
               }}
             >
-              <img src={arrow} alt="" />
+              <img src={arrowLeft} alt="" />
-              <span>{prevMonth().format("MMMM")}</span>
             </div>
             <div className="calendar-component__header-box">
-              <span>{value.format("YYYY")}</span>
+              <img className={"calendar__icon"} src={calendarIcon} alt="" />
+              <span>{value.format("MMMM, YYYY")}</span>
             </div>
             <div
-              className="calendar-component__header-box"
+              className="calendar-component__header-arrow"
               onClick={() => {
                 setValueHandler(nextMonth());
                 dispatch(setRequestDate(getReports(nextMonth())));
               }}
             >
-              <span>{nextMonth().format("MMMM")}</span>
+              <img src={arrowRight} alt="" />
-              <img src={arrow} alt="" />
             </div>
           </div>
         </div>
@@ -218,13 +224,13 @@ export const ProfileCalendarComponent = React.memo(
 
         <div className="calendar-component__body">
           <div>
-            <p>Пн</p>
+            <p>Понедельник</p>
-            <p>Вт</p>
+            <p>Вторник</p>
-            <p>Ср</p>
+            <p>Среда</p>
-            <p>Чт</p>
+            <p>Четверг</p>
-            <p>Пт</p>
+            <p>Пятница</p>
-            <p>Сб</p>
+            <p>Суббота</p>
-            <p>Вс</p>
+            <p>Воскресенье</p>
           </div>
 
           <div className="calendar-component__form">
@@ -260,12 +266,12 @@ export const ProfileCalendarComponent = React.memo(
                   id="btn"
                 >
                   <Link to={startRangeDays ? "#" : correctRoute(day)}>
-                    <img
+                    <div className="form-date">{day.format("D")}</div>
-                      className={"calendar__icon"}
+                    <div className="form-box">
-                      src={calendarIcon}
+                      <div className="form-hours">
-                      alt=""
+                        <span>{countHours(day)}</span>
-                    />
+                      </div>
-                    {currentMonthAndDay(day)}
+                    </div>
                   </Link>
                 </button>
               ))
@@ -289,6 +295,7 @@ export const ProfileCalendarComponent = React.memo(
               ? "Выберите диапазон на календаре"
               : "Выбрать диапазон"}
           </span>
+
           <span>
             {totalRangeHours
               ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
@@ -308,6 +315,7 @@ export const ProfileCalendarComponent = React.memo(
               Сбросить
             </BaseButton>
           )}
+          <span className="hint">Для общего просчета - выберите диапазон</span>
         </div>
       </div>
     );

src/components/ProfileCalendar/profileCalendar.scss

@@ -22,6 +22,25 @@
     @media (max-width: 500px) {
       padding-right: 5px;
     }
+
+    .summary__skill {
+      color: #6f6f6f;
+      font-size: 14px;
+      font-weight: 300;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      column-gap: 10px;
+
+      div {
+        font-size: 12px;
+        font-weight: 400;
+
+        border: #8dc63f 0.5px solid;
+        border-radius: 44px;
+        padding: 3px 20px;
+      }
+    }
   }
 
   .loader__wrapper {
@@ -36,7 +55,6 @@
   }
 
   .calendar__wrapper {
-
     @media (max-width: 1000px) {
       min-height: auto;
     }

src/components/ProjectTicket/ProjectTicket.jsx

@@ -101,16 +101,16 @@ export const ProjectTicket = ({ project, index }) => {
             alt="avatar"
             className="project__avatar"
           />
+          <div>
+            <p>Создатель проекта</p>
             <span>{project.owner_info.fio}</span>
           </div>
+        </div>
       </Link>
 
-      {/* <Link
+      <Link to={`/profile/statistics/${project.id}`} className="project-stats">
-        to={`/profile/statistics/${project.id}`}
-        className="project__statistics"
-      >
         Посмотреть статистику
-      </Link> */}
+      </Link>
 
       <span
         className="menu-settings"
@@ -159,14 +159,14 @@ export const ProjectTicket = ({ project, index }) => {
               setAcceptModalOpen(true);
             }}
           >
-            <img src={archiveSet}></img>
+            {/* <img src={archiveSet}></img>
             <p>в архив</p>
           </div>
           <div
             onClick={() => {
               navigate(`/profile/statistics/${project.id}`);
             }}
-          >
+          > */}
             <img src={archiveSet}></img>
             <p>статистика</p>
           </div>

src/components/ProjectTicket/projectTicket.scss

@@ -2,7 +2,8 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  width: 300px;
+  width: 22%;
+  height: 140px;
   background: #f1f1f1;
   border-radius: 12px;
 
@@ -29,7 +30,7 @@
     text-overflow: ellipsis;
     font-size: 18px;
     color: #111112;
-    margin-bottom: 10px;
+    margin: 0 0 15px 0;
 
     &:hover {
       color: black;
@@ -44,14 +45,15 @@
     p {
       color: #6f6f6f;
       margin-bottom: 0;
-      font-size: 12px;
+      font-size: 9px;
-      font-weight: 500;
+      font-weight: 300;
       line-height: 17px;
     }
 
     span {
       color: blue;
       font-size: 15px;
+      font-weight: 400;
     }
 
     .count {
@@ -80,18 +82,29 @@
     }
   }
 
+  &-stats {
+    font-size: 12px;
+    font-weight: 300;
+    line-height: 17px;
+    text-decoration: underline;
+    color: #678eda;
+    position: absolute;
+    left: 18px;
+    bottom: 16px;
+  }
+
   .menu-settings {
     position: absolute;
     font-size: 30px;
     color: #6f6f6f;
     right: 15px;
-    top: -10px;
+    bottom: 10px;
   }
 
   &__avatar {
-    width: 25px;
+    width: 30px;
-    height: 25px;
+    height: 30px;
-    margin-right: 10px;
+    margin: 0 10px 0 0;
   }
 
   &__open-tracker {

src/components/ReportForm/reportForm.scss

@@ -34,11 +34,15 @@
       display: flex;
       align-items: center;
       grid-column-gap: 30px;
-      column-gap: 30px;
+      column-gap: 10px;
       margin-top: 20px;
       cursor: pointer;
       text-decoration: none;
 
+      img {
+        width: 23px;
+      }
+
       p {
         margin-bottom: 0;
         font-size: 14px;

src/components/TrackerCardTask/TrackerCardTask.jsx

@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+
+import { movePositionProjectTask } from "@redux/projectsTrackerSlice";
+
+import { getCorrectDate } from "@utils/calendarHelper";
+import { removeLast, urlForLocal } from "@utils/helper";
+
+import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
+
+import commentsBoard from "assets/icons/commentsBoard.svg";
+import filesBoard from "assets/icons/filesBoard.svg";
+import avatarMok from "assets/images/avatarMok.png";
+
+import "./trackerCardTask.scss";
+
+const TrackerCardTask = ({
+  task,
+  projectBoard,
+  titleColor,
+  column,
+  openTicket,
+  startWrapperIndexTest,
+  setWrapperHover
+}) => {
+  const dispatch = useDispatch();
+  const [taskHover, setTaskHover] = useState({});
+
+  const priority = {
+    2: "Высокий",
+    1: "Средний",
+    0: "Низкий"
+  };
+
+  const priorityClass = {
+    2: "high",
+    1: "middle",
+    0: "low"
+  };
+
+  function dragDropTaskHandler(e, task, column) {
+    e.preventDefault();
+    if (task.id === startWrapperIndexTest.current.task.id) {
+      return;
+    }
+
+    const finishTask = column.tasks.indexOf(task);
+
+    dispatch(
+      movePositionProjectTask({
+        startTask: startWrapperIndexTest.current.task,
+        finishTask: task,
+        finishIndex: finishTask
+      })
+    );
+  }
+
+  function dragOverTaskHandler(e, task) {
+    e.preventDefault();
+    if (startWrapperIndexTest.current.task.id === task.id) {
+      return;
+    }
+    setTaskHover((prevState) => ({ [prevState]: false, [task.id]: true }));
+  }
+
+  function dragStartHandler(e, task, columnId) {
+    startWrapperIndexTest.current = { task: task, index: columnId };
+  }
+
+  function dragLeaveTaskHandler() {
+    setTaskHover((prevState) => ({ [prevState]: false }));
+  }
+
+  function dragEndTaskHandler() {
+    setTaskHover((prevState) => ({ [prevState]: false }));
+    setWrapperHover((prevState) => ({
+      [prevState]: false
+    }));
+  }
+
+  useEffect(() => {
+    const tasksHover = {};
+    const columnHover = {};
+
+    if (Object.keys(projectBoard).length) {
+      projectBoard.columns.forEach((column) => {
+        columnHover[column.id] = false;
+        column.tasks.forEach((task) => (tasksHover[task.id] = false));
+      });
+    }
+    setWrapperHover(columnHover);
+    setTaskHover(tasksHover);
+  }, [projectBoard]);
+
+  return (
+    <div
+      key={task.id}
+      className={`tasks__board__item ${
+        taskHover[task.id] ? "task__hover" : ""
+      }`}
+      draggable={true}
+      onDragStart={(e) => dragStartHandler(e, task, column.id)}
+      onDragOver={(e) => dragOverTaskHandler(e, task)}
+      onDragLeave={(e) => dragLeaveTaskHandler(e)}
+      onDragEnd={() => dragEndTaskHandler()}
+      onDrop={(e) => dragDropTaskHandler(e, task, column)}
+      onClick={(e) => openTicket(e, task)}
+    >
+      <div
+        className="tasks__board__item__title"
+        onClick={() => {
+          if (window.innerWidth < 985) {
+            window.location.replace(`/tracker/task/${task.id}`);
+          }
+        }}
+      >
+        <p className="task__board__item__title">{task.title}</p>
+      </div>
+      <p
+        dangerouslySetInnerHTML={{
+          __html: task.description
+        }}
+        className="tasks__board__item__description"
+      ></p>
+      {Boolean(task.mark.length) && (
+        <div className="tasks__board__item__tags">
+          {task.mark.map((tag) => {
+            return (
+              <div
+                className="tag-item"
+                key={tag.id}
+                style={{ background: tag.color }}
+              >
+                <p>{tag.slug}</p>
+              </div>
+            );
+          })}
+        </div>
+      )}
+      <div className="tasks__board__item__container">
+        {typeof task.execution_priority === "number" && (
+          <div className="tasks__board__item__priority">
+            <p>⚡</p>
+            <span className={priorityClass[task.execution_priority]}>
+              {priority[task.execution_priority]}
+            </span>
+          </div>
+        )}
+        {task.dead_line && (
+          <div className="tasks__board__item__dead-line">
+            <p>⌛</p>
+            <span style={{ color: titleColor }}>
+              {getCorrectDate(task.dead_line)}
+            </span>
+          </div>
+        )}
+      </div>
+
+      <div className="tasks__board__item__info">
+        <div className="tasks__board__item__executor">
+          <img
+            src={
+              task.executor?.avatar
+                ? urlForLocal(task.executor?.avatar)
+                : avatarMok
+            }
+            alt="avatar"
+          />
+          <span>
+            {removeLast(task.executor?.fio) || "Исполнитель не назначен"}
+          </span>
+        </div>
+        <div className="tasks__board__item__info__tags">
+          <div className="tasks__board__item__info__more">
+            <img src={commentsBoard} alt="commentsImg" />
+            <span>{task.comment_count}</span>
+          </div>
+          <div className="tasks__board__item__info__more">
+            <img src={filesBoard} alt="filesImg" />
+            <span>{task.file_count}</span>
+          </div>
+        </div>
+      </div>
+      <TrackerSelectColumn
+        columns={projectBoard.columns.filter((item) => item.id !== column.id)}
+        currentColumn={column}
+        task={task}
+      />
+    </div>
+  );
+};
+
+export default TrackerCardTask;

src/components/TrackerCardTask/trackerCardTask.scss

@@ -0,0 +1,365 @@
+.tasks {
+  &__board {
+    background: #f5f7f9;
+    box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.04),
+      0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06);
+    border-radius: 8px;
+    padding: 12px 10px 12px 8px;
+    width: 360px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    height: fit-content;
+    position: relative;
+    transition: all 0.3s ease;
+    transform: scaleY(-1);
+    min-height: 815px;
+
+    @media (max-width: 900px) {
+      min-width: auto;
+      width: 100%;
+      max-width: none;
+      transform: scaleX(1);
+    }
+
+    .tasks-container {
+      display: flex;
+      flex-direction: column;
+      row-gap: 8px;
+      max-height: 750px;
+      overflow: auto;
+      padding: 5px;
+
+      &::-webkit-scrollbar {
+        width: 3px;
+        border-radius: 10px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #cbd9f9;
+        border-radius: 20px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: #c5c0c6;
+        border-radius: 20px;
+      }
+    }
+
+    &__hover {
+      box-shadow: 0px 2px 10px #9cc480, 0px 0px 0px 1px rgba(60, 66, 87, 0.08),
+        0px 1px 1px rgba(0, 0, 0, 0.06);
+    }
+
+    .task__hover {
+      box-shadow: 0 0 5px gray;
+    }
+
+    &__item {
+      width: 328px;
+      padding: 6px 10px 8px 10px;
+      position: relative;
+      box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
+        0px 5px 3px -2px rgba(0, 0, 0, 0.02);
+      border-radius: 6px;
+      background: #ffffff;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      transition: 0.4s;
+
+      &:hover {
+        transform: scale(1.025);
+        transition: 0.3s;
+      }
+
+      @media (max-width: 900px) {
+        width: 100%;
+        max-height: none;
+
+        &:hover {
+          transform: none;
+        }
+      }
+
+      &__hide {
+        opacity: 0;
+      }
+
+      &__title {
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+
+        p {
+          color: #1a1919;
+          font-weight: 500;
+          font-size: 16px;
+          line-height: 20px;
+          margin-bottom: 0;
+          max-height: 100px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 3;
+        }
+
+        span {
+          cursor: pointer;
+          display: flex;
+          border-radius: 6px;
+          align-items: center;
+          justify-content: center;
+          font-size: 20px;
+          padding-bottom: 10px;
+          width: 24px;
+          height: 24px;
+          border: 1px solid #dddddd;
+        }
+      }
+
+      &__description {
+        margin: 4px 0;
+        color: #5c6165;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 120%;
+        max-height: 100px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      &__container {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      &__info {
+        display: flex;
+        column-gap: 10px;
+        align-items: center;
+        justify-content: space-between;
+        pointer-events: none;
+        margin-top: 5px;
+
+        &__tags {
+          display: flex;
+          column-gap: 5px;
+        }
+
+        &__more {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          span {
+            font-weight: 500;
+            font-size: 12px;
+            line-height: 15px;
+            color: #6e7c87;
+            margin-left: 5px;
+          }
+        }
+
+        &__avatars {
+          position: relative;
+          img {
+            position: relative;
+          }
+          img:first-child {
+            right: -15px;
+            z-index: 2;
+          }
+        }
+      }
+
+      &__priority {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+        margin-top: 3px;
+
+        p {
+          font-weight: 500;
+          font-size: 14px;
+        }
+
+        span {
+          font-weight: 500;
+          font-size: 14px;
+        }
+
+        .high {
+          color: red;
+        }
+
+        .middle {
+          color: #cece00;
+        }
+
+        .low {
+          color: green;
+        }
+      }
+
+      &__dead-line {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+
+        p {
+          font-weight: 500;
+          font-size: 14px;
+          color: #1458dd;
+        }
+
+        span {
+          font-weight: 500;
+          font-size: 14px;
+        }
+
+        img {
+          margin-top: -2px;
+          width: 18px;
+        }
+      }
+
+      &__executor {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-weight: 500;
+        column-gap: 5px;
+
+        span {
+          max-width: 210px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        img {
+          width: 25px;
+          height: 25px;
+        }
+      }
+
+      &__tags {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 6px;
+        row-gap: 3px;
+        margin: 3px 0;
+
+        .tag-item {
+          padding: 3px 10px;
+          border-radius: 10px;
+          color: white;
+          font-size: 12px;
+        }
+      }
+    }
+
+    .open-items {
+      cursor: pointer;
+      border-radius: 44px;
+      width: 33px;
+      height: 33px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      bottom: -15px;
+      font-size: 20px;
+      left: 165px;
+      color: white;
+    }
+
+    .more-items {
+      background: #8bcc60;
+    }
+
+    .less-items {
+      background: #f92828;
+    }
+
+    &__more {
+      padding-bottom: 50px;
+    }
+
+    .column__select {
+      position: absolute;
+      padding: 15px;
+      background: #e1fccf;
+      border-radius: 12px;
+      right: -20px;
+      top: 5px;
+      z-index: 7;
+      row-gap: 10px;
+      display: flex;
+      flex-direction: column;
+
+      @media (max-width: 910px) {
+        right: 10px;
+        top: 40px;
+      }
+
+      &__item {
+        cursor: pointer;
+        display: flex;
+        align-content: center;
+        img {
+          margin-right: 5px;
+        }
+
+        span {
+          font-size: 14px;
+        }
+      }
+    }
+
+    &__no-items {
+      font-weight: 500;
+      font-size: 25px;
+      transform: scaleY(-1);
+
+      @media (max-width: 900px) {
+        transform: none;
+      }
+    }
+
+    &__no-tasks {
+      display: flex;
+      flex-direction: column;
+      transform: scaleY(-1);
+
+      &-info {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        img {
+          width: 27px;
+          height: 27px;
+          margin-right: 5px;
+        }
+
+        p {
+          font-weight: 700;
+          font-size: 22px;
+          line-height: 32px;
+        }
+      }
+
+      &-more {
+        font-size: 14px;
+        line-height: 22px;
+      }
+
+      @media (max-width: 900px) {
+        transform: none;
+      }
+    }
+  }
+}

src/components/TrackerSelectExecutor/TrackerSelectExecutor.jsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+
+import { filteredExecutorTasks } from "@redux/projectsTrackerSlice";
+
+import { removeLast, urlForLocal } from "@utils/helper";
+
+import arrowDown from "assets/icons/arrows/selectArrow.png";
+import close from "assets/icons/close.png";
+import avatarMok from "assets/images/avatarMok.png";
+
+import "./trackerSelectExecutor.scss";
+
+const TrackerSelectExecutor = ({
+  selectedExecutor,
+  setSelectedExecutor,
+  deleteSelectedExecutor,
+  projectBoard
+}) => {
+  const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  const initListeners = () => {
+    document.addEventListener("click", closeByClickingOut);
+  };
+
+  const closeByClickingOut = (event) => {
+    const path = event.path || (event.composedPath && event.composedPath());
+
+    if (
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("tasks__head__executor") ||
+            div.classList.contains("tasks__head__executor-dropdown"))
+      )
+    ) {
+      setSelectedExecutorOpen(false);
+    }
+  };
+
+  function executorFilter(user) {
+    dispatch(filteredExecutorTasks(user.user_id));
+    setSelectedExecutor(user);
+  }
+
+  useEffect(() => {
+    initListeners();
+  }, []);
+
+  if (selectedExecutor) {
+    return (
+      <div className="tasks__head__executor-selected">
+        <p>{removeLast(selectedExecutor.user.fio)}</p>
+        <img
+          className="avatar"
+          src={
+            selectedExecutor.user?.avatar
+              ? urlForLocal(selectedExecutor.user.avatar)
+              : avatarMok
+          }
+          alt="avatar"
+        />
+        <img
+          className="delete"
+          src={close}
+          alt="delete"
+          onClick={deleteSelectedExecutor}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <div
+        className="tasks__head__executor"
+        onClick={() => setSelectedExecutorOpen(!selectExecutorOpen)}
+      >
+        <p>Выберите исполнителя</p>
+        <img
+          className={selectExecutorOpen ? "open" : ""}
+          src={arrowDown}
+          alt="arrow"
+        />
+        {selectExecutorOpen && (
+          <div className="tasks__head__executor-dropdown">
+            {projectBoard.projectUsers.map((user) => {
+              return (
+                <div
+                  className="executor-dropdown__person"
+                  key={user.user_id}
+                  onClick={() => executorFilter(user)}
+                >
+                  <p>{removeLast(user.user?.fio)}</p>
+                  <img
+                    src={
+                      user.user?.avatar
+                        ? urlForLocal(user.user.avatar)
+                        : avatarMok
+                    }
+                    alt="avatar"
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+};
+
+export default TrackerSelectExecutor;

src/components/TrackerSelectExecutor/trackerSelectExecutor.scss

@@ -0,0 +1,129 @@
+.tasks {
+  &__head {
+    &__executor {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      margin-right: 10px;
+      border-radius: 8px;
+      border: 1px solid #e3e2e2;
+      padding: 2px 6px;
+      position: relative;
+      max-width: 190px;
+      width: 100%;
+
+      @media (max-width: 915px) {
+        margin-right: 0;
+        width: 100%;
+        max-width: none;
+      }
+
+      @media (max-width: 650px) {
+        border-color: gray;
+      }
+
+      &-selected {
+        display: flex;
+        align-items: center;
+        border-radius: 8px;
+        max-width: 220px;
+        width: 100%;
+        margin-right: 10px;
+        justify-content: center;
+
+        p {
+          color: #252c32;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 24px;
+          max-width: 155px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .avatar {
+          margin: 0 5px;
+        }
+
+        .delete {
+          cursor: pointer;
+        }
+
+        img {
+          display: flex;
+          width: 20px;
+          height: 20px;
+        }
+
+        @media (max-width: 915px) {
+          width: 100%;
+          max-width: none;
+          justify-content: start;
+
+          p {
+            font-size: 16px;
+            max-width: none;
+          }
+        }
+      }
+      p {
+        color: #252c32;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 24px;
+      }
+
+      img {
+        transition: all 0.15s ease;
+        margin-left: 5px;
+      }
+
+      .open {
+        transform: rotate(180deg);
+      }
+
+      &-dropdown {
+        position: absolute;
+        top: 33px;
+        left: 0;
+        background: white;
+        border-radius: 8px;
+        z-index: 5;
+        padding: 10px 10px;
+        display: flex;
+        flex-direction: column;
+        row-gap: 7px;
+        width: 100%;
+
+        .executor-dropdown__person {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          p {
+            max-width: 155px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            @media (max-width: 915px) {
+              max-width: none;
+            }
+          }
+
+          img {
+            width: 20px;
+            height: 20px;
+          }
+
+          &:hover {
+            p {
+              font-weight: 600;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/TrackerTagList/TrackerTagList.jsx

@@ -0,0 +1,275 @@
+import React, { useEffect, useState } from "react";
+import { HexColorPicker } from "react-colorful";
+import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
+
+import {
+  addNewTagToProject,
+  deleteTagProject,
+  setProjectBoardFetch
+} from "@redux/projectsTrackerSlice";
+
+import { apiRequest } from "@api/request";
+
+import { useNotification } from "@hooks/useNotification";
+
+import arrowDown from "assets/icons/arrows/selectArrow.png";
+import close from "assets/icons/close.png";
+import edit from "assets/icons/edit.svg";
+
+import "./trackerTagList.scss";
+
+const TrackerTagList = ({ projectBoard }) => {
+  const dispatch = useDispatch();
+  const projectId = useParams();
+
+  const { showNotification } = useNotification();
+  const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
+  const [color, setColor] = useState("#aabbcc");
+  const [tags, setTags] = useState({
+    open: false,
+    add: false,
+    edit: false
+  });
+
+  function deleteTag(tagId) {
+    apiRequest("/mark/detach", {
+      method: "DELETE",
+      data: {
+        mark_id: tagId,
+        entity_type: 1,
+        entity_id: projectId.id
+      }
+    }).then(() => {
+      dispatch(deleteTagProject(tagId));
+      showNotification({
+        show: true,
+        text: "Тег удален",
+        type: "success"
+      });
+    });
+  }
+
+  function addNewTag() {
+    apiRequest("/mark/create", {
+      method: "POST",
+      data: {
+        title: tagInfo.description,
+        slug: tagInfo.name,
+        color: color,
+        status: 1
+      }
+    }).then((data) => {
+      apiRequest("/mark/attach", {
+        method: "POST",
+        data: {
+          mark_id: data.id,
+          entity_type: 1,
+          entity_id: projectId.id
+        }
+      }).then((data) => {
+        dispatch(addNewTagToProject(data.mark));
+        setTags((prevState) => ({
+          ...prevState,
+          add: false
+        }));
+        showNotification({
+          show: true,
+          text: "Тег успешно создан",
+          type: "success"
+        });
+      });
+    });
+  }
+
+  function editTag() {
+    apiRequest("/mark/update", {
+      method: "PUT",
+      data: {
+        mark_id: tagInfo.editMarkId,
+        title: tagInfo.description,
+        slug: tagInfo.name,
+        color: color
+      }
+    }).then(() => {
+      dispatch(setProjectBoardFetch(projectId.id));
+      setTags((prevState) => ({
+        ...prevState,
+        edit: false
+      }));
+      setTagInfo({ description: "", name: "" });
+      setColor("#aabbcc");
+      showNotification({
+        show: true,
+        text: "Тег успешно изменён",
+        type: "success"
+      });
+    });
+  }
+
+  const initListeners = () => {
+    document.addEventListener("click", closeByClickingOut);
+  };
+
+  const closeByClickingOut = (event) => {
+    const path = event.path || (event.composedPath && event.composedPath());
+    if (
+      event &&
+      !path.find(
+        (div) =>
+          div.classList &&
+          (div.classList.contains("tasks__head__tags") ||
+            div.classList.contains("tags__list"))
+      )
+    ) {
+      setTags({ open: false, add: false, edit: false });
+      setTagInfo({ description: "", name: "" });
+      setColor("#aabbcc");
+    }
+  };
+
+  useEffect(() => {
+    initListeners();
+  }, []);
+
+  return (
+    <div className="tasks__head__tags">
+      <div
+        className="tags__add"
+        onClick={() => {
+          setTags((prevState) => ({
+            ...prevState,
+            open: !tags.open
+          }));
+        }}
+      >
+        <p>Список тегов</p>
+        <img className={tags.open ? "open" : ""} src={arrowDown} alt="arrow" />
+      </div>
+      {tags.open && (
+        <div className="tags__list">
+          {!tags.add && !tags.edit && (
+            <div
+              className="add-new-tag"
+              onClick={() =>
+                setTags((prevState) => ({
+                  ...prevState,
+                  add: true
+                }))
+              }
+            >
+              <p>Добавить новый тег</p>
+              <span>+</span>
+            </div>
+          )}
+          {!tags.add && !tags.edit && (
+            <div className="tags__list__created">
+              {projectBoard.mark.map((tag) => {
+                return (
+                  <div className="tag-item" key={tag.id}>
+                    <div className="tag-item__info">
+                      <span
+                        className="tag-item__color"
+                        style={{ background: tag.color }}
+                      />
+                      <div>
+                        <span className="tag-item__info__name">{tag.slug}</span>
+                        <p className="tag-item__description">{tag.title}</p>
+                      </div>
+                    </div>
+                    <div className="tag-item__images">
+                      <img
+                        src={edit}
+                        alt="edit"
+                        onClick={() => {
+                          setTags((prevState) => ({
+                            ...prevState,
+                            edit: true
+                          }));
+                          setTagInfo({
+                            description: tag.title,
+                            name: tag.slug,
+                            editMarkId: tag.id
+                          });
+                          setColor(tag.color);
+                        }}
+                      />
+                      <img
+                        onClick={() => deleteTag(tag.id)}
+                        className="delete"
+                        src={close}
+                        alt="delete"
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          {(tags.add || tags.edit) && (
+            <div className="form-tag">
+              <input
+                className="form-tag__input"
+                placeholder="Описание метки"
+                maxLength="25"
+                value={tagInfo.description}
+                onChange={(e) =>
+                  setTagInfo((prevState) => ({
+                    ...prevState,
+                    description: e.target.value
+                  }))
+                }
+              />
+              <input
+                className="form-tag__input"
+                placeholder="Тег"
+                value={tagInfo.name}
+                maxLength="10"
+                onChange={(e) =>
+                  setTagInfo((prevState) => ({
+                    ...prevState,
+                    name: e.target.value
+                  }))
+                }
+              />
+              <HexColorPicker color={color} onChange={setColor} />
+              <button
+                onClick={() => {
+                  tags.add ? addNewTag() : editTag();
+                }}
+                className={
+                  tagInfo.name && tagInfo.description
+                    ? "form-tag__btn"
+                    : "form-tag__btn disable"
+                }
+              >
+                {tags.add ? "Добавить" : "Изменить"}
+              </button>
+              {(tags.add || tags.edit) && (
+                <button
+                  className={"form-tag__btn"}
+                  onClick={() => {
+                    setTags((prevState) => ({
+                      ...prevState,
+                      add: false,
+                      edit: false
+                    }));
+                    setTagInfo({
+                      description: "",
+                      name: ""
+                    });
+                    setColor("#aabbcc");
+                  }}
+                >
+                  Отмена
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TrackerTagList;

src/components/TrackerTagList/trackerTagList.scss

@@ -0,0 +1,208 @@
+.tasks {
+  &__head {
+    &__tags {
+      position: relative;
+      img {
+        transition: all 0.15s ease;
+        margin-left: 5px;
+      }
+      .open {
+        transform: rotate(180deg);
+      }
+      .tags {
+        &__add {
+          display: flex;
+          align-items: center;
+          margin: 0 10px;
+          column-gap: 5px;
+          cursor: pointer;
+          padding: 5px;
+          border-radius: 8px;
+          border: 1px solid #e3e2e2;
+          max-height: 30px;
+
+          p {
+            white-space: nowrap;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 17px;
+          }
+
+          span {
+            width: 14px;
+            height: 14px;
+            font-weight: 400;
+            line-height: 16px;
+            border-radius: 50px;
+            align-items: center;
+            justify-content: center;
+            display: flex;
+            background: #99b4f3;
+            color: white;
+            font-size: 14px;
+            transition: all 0.15s ease;
+          }
+        }
+        &__list {
+          position: absolute;
+          border-radius: 8px;
+          background: #d9d9d9;
+          z-index: 8;
+          top: 30px;
+          left: -35px;
+          width: 216px;
+          display: flex;
+          flex-direction: column;
+
+          @media (max-width: 900px) {
+            left: 0px;
+          }
+
+          .close {
+            cursor: pointer;
+            width: 20px;
+            height: 20px;
+            position: absolute;
+            right: 10px;
+            top: 2px;
+          }
+
+          &__created {
+            display: flex;
+            flex-direction: column;
+            row-gap: 8px;
+            margin-top: 8px;
+            padding: 0 8px 8px;
+
+            .tag-item {
+              display: flex;
+              align-items: center;
+              flex-direction: row;
+              justify-content: space-between;
+              column-gap: 5px;
+              padding: 0px 8px;
+              border-radius: 8px;
+              height: 40px;
+              max-height: 40px;
+              background: #fff;
+
+              &__description {
+                font-size: 12px;
+                word-break: break-word;
+                max-width: 115px;
+                max-height: 40px;
+                overflow: hidden;
+                text-wrap: wrap;
+                text-overflow: ellipsis;
+              }
+
+              &__color {
+                width: 22.25px;
+                height: 23.217px;
+                border-radius: 8px;
+              }
+
+              &__images {
+                display: flex;
+                flex-direction: column-reverse;
+                row-gap: 3px;
+
+                img {
+                  height: 14px;
+                  width: 14px;
+                  cursor: pointer;
+                }
+
+                .delete {
+                  width: 16px;
+                  height: 16px;
+                }
+              }
+
+              &__info {
+                display: flex;
+                align-items: center;
+                column-gap: 10px;
+
+                &__name {
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+              }
+            }
+          }
+
+          .add-new-tag {
+            display: flex;
+            align-items: center;
+            column-gap: 15px;
+            border-radius: 8px;
+            background: white;
+            color: #252c32;
+            height: 40px;
+            cursor: pointer;
+            justify-content: center;
+            margin: 8px 8px 0px;
+
+            p {
+              font-size: 15px;
+            }
+
+            span {
+              width: 19px;
+              height: 19px;
+              border-radius: 50px;
+              align-items: center;
+              justify-content: center;
+              display: flex;
+              background: #52b709;
+              color: white;
+              font-size: 16px;
+              transition: all 0.15s ease;
+            }
+          }
+
+          .form-tag {
+            display: flex;
+            flex-direction: column;
+            padding: 8px;
+            row-gap: 8px;
+
+            .arrow {
+              position: absolute;
+              cursor: pointer;
+              top: 5px;
+              width: 15px;
+              height: 15px;
+              transform: rotate(180deg);
+            }
+
+            &__input {
+              outline: none;
+              border-radius: 8px;
+              border: 1px solid #e3e2e2;
+              font-size: 15px;
+              padding: 5px;
+            }
+
+            &__btn {
+              outline: none;
+              border: none;
+              background: #252c32;
+              color: whitesmoke;
+              margin: 0 auto 0;
+              border-radius: 10px;
+              font-size: 15px;
+              padding: 5px 12px;
+            }
+
+            .disable {
+              opacity: 0.5;
+              pointer-events: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/TrackerTaskComment/TrackerTaskComment.jsx

@@ -127,11 +127,8 @@ export const TrackerTaskComment = ({
               "EasyImage",
               "Image",
               "ImageCaption",
-              "ImageStyle",
-              "ImageToolbar",
               "ImageUpload",
-              "MediaEmbed",
+              "MediaEmbed"
-              "BlockQuote"
             ]
           }}
           onChange={(event, editor) => {

src/pages/Landing/Landing.jsx

@@ -0,0 +1,104 @@
+import React from "react";
+import SVG from "react-inlinesvg";
+import { Link } from "react-router-dom";
+
+import { Footer } from "@components/Common/Footer/Footer";
+
+import arrow from "assets/icons/arrows/arrowLanding.svg";
+import authIcon from "assets/icons/authIcon.svg";
+import clue from "assets/icons/landingClue.svg";
+import codeBg from "assets/images/landingBackgroundCode.svg";
+import cat from "assets/images/landingCat.png";
+
+import "./landing.scss";
+
+export const Landing = () => {
+  const opportunities = [
+    {
+      name: "<span>Аутстаффинг</span> сотрудников",
+      class: "outstaffing__employees",
+      img: cat
+    },
+    {
+      name: "Модуль для видеоконференций"
+    },
+    {
+      name: "Система контроля версий GIT"
+    },
+    {
+      name: "Управление задачами"
+    },
+    {
+      name: "Система для отчётности"
+    },
+    {
+      name: "Все наши предложения",
+      class: "outstaffing__offers",
+      img: arrow
+    }
+  ];
+
+  return (
+    <section className="landing">
+      <div className="landing__container">
+        <div className="landing__head">
+          <h2 className="head__logo">ITGUILD</h2>
+          <Link className="head__signIn" to="/auth">
+            войти в систему
+          </Link>
+          <Link className="head__signUp" to="/auth">
+            <SVG src={authIcon} />
+            авторизация
+          </Link>
+        </div>
+        <div className="landing__info">
+          <p className="info__title">
+            <SVG className="code" src={codeBg} />
+            <span>Экосистема</span> для диджитализации бизнеса
+          </p>
+          <div className="landing__background">
+            <h3>ITGuild</h3>
+            <SVG className="clue" src={clue} />
+            <SVG className="code" src={codeBg} />
+          </div>
+          <div className="info__block">
+            <p>
+              Подберем и документально оформим IT-специалистов, после чего
+              передадим исполнителей под ваше руководство.
+              <br />
+              <br />
+              <span>Вы получаете полное управление над сотрудниками,</span> имея
+              возможность контролировать и заменять IT штат.
+            </p>
+          </div>
+        </div>
+        <div className="landing__opportunities">
+          {opportunities.map((opportunity, index) => {
+            return (
+              <div
+                className={
+                  opportunity.class ? opportunity.class : "landing__opportunity"
+                }
+                key={index}
+              >
+                {opportunity.class ? (
+                  <div>
+                    <p dangerouslySetInnerHTML={{ __html: opportunity.name }} />
+                    {opportunity.img ? (
+                      <img src={opportunity.img} alt="img" />
+                    ) : (
+                      ""
+                    )}
+                  </div>
+                ) : (
+                  <p>{opportunity.name}</p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <Footer />
+      </div>
+    </section>
+  );
+};

src/pages/Landing/landing.scss

@@ -0,0 +1,246 @@
+.landing {
+  background: #EEEEEE;
+  min-height: 100vh;
+  padding: 20px 0;
+  font-family: "GT Eesti Pro Display";
+
+  &__container {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: 100%;
+  }
+
+  &__head {
+    display: flex;
+    column-gap: 35px;
+    align-items: center;
+
+    .head {
+      &__logo {
+        margin-bottom: 0;
+        color: rgba(74, 74, 74, 1);
+        font-size: 35px;
+        font-weight: 900;
+        position: relative;
+
+        &:before {
+          content: '';
+          position: absolute;
+          background: rgba(167, 202, 96, 1);
+          width: 31px;
+          height: 31px;
+          border-radius: 50px;
+          left: 39%;
+          top: -35px;
+        }
+      }
+
+      &__signIn {
+        padding: 12px 30px 15px;
+        color: rgba(30, 30, 30, 1);
+        font-size: 13px;
+        background: rgba(167, 202, 96, 1);
+        font-weight: 400;
+        border-radius: 32px;
+      }
+
+      &__signUp {
+        display: flex;
+        column-gap: 8px;
+        align-items: center;
+        color: rgba(131, 131, 131, 1);
+        font-weight: 400;
+        font-size: 13px;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 75px;
+    column-gap: 45px;
+
+
+    .info {
+      &__title {
+        font-weight: 900;
+        font-size: 49px;
+        color: #4A4A4A;
+        max-width: 444px;
+        line-height: 1;
+        position: relative;
+
+        .code {
+          position: absolute;
+          left: -260px;
+          top: -55px;
+        }
+
+        span {
+          color: #A7CA60;
+        }
+      }
+
+      &__block {
+        backdrop-filter: blur(8.699999809265137px);
+        box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.03);
+        background: linear-gradient(137deg, rgba(255, 255, 255, 0.34) 0%, rgba(239, 239, 239, 0.34) 100%);
+        border: 0.5px solid;
+        border-image-source: linear-gradient(137.79deg, #FFFFFF 9.15%, #F4F4F4 76.22%);
+        border-radius: 8px;
+        padding: 59px 89px 68px 102px;
+        position: relative;
+        z-index: 1;
+
+        p {
+          font-weight: 250;
+          font-size: 14px;
+          line-height: 137%;
+          color: #4a4a4a;
+
+          span {
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+
+  &__background {
+    position: absolute;
+    right: -200px;
+    top: -100px;
+    h3 {
+      font-family: 'Geraspoheko';
+      color: rgba(255, 255, 255, 1);
+      font-size: 343px;
+      font-weight: 400;
+      margin-bottom: 0;
+    }
+    .clue {
+      width: 130px;
+      height: 120px;
+      top: 165px;
+      position: absolute;
+      right: 147px;
+    }
+
+    .code {
+      position: absolute;
+      width: 360px;
+      height: 134px;
+      right: -110px;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      width: 82px;
+      height: 82px;
+      border-radius: 50px;
+      background: rgba(167, 202, 96, 0.8);
+      right: 160px;
+      bottom: -75px;
+    }
+  }
+
+  &__opportunities {
+    margin: 120px 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  }
+
+  &__opportunity {
+    padding: 40px 60px;
+
+    p {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 107%;
+      color: rgba(131, 131, 131, 1);
+    }
+  }
+
+  &__opportunity:nth-child(-n+3) {
+    border-bottom: 1px solid rgba(245, 245, 245, 1);
+  }
+
+  &__opportunity:nth-child(-n+2) {
+    border-right: 1px solid rgba(245, 245, 245, 1);
+  }
+
+  &__opportunity:nth-child(4) {
+    border-right: 1px solid rgba(245, 245, 245, 1);
+  }
+
+  &__opportunity:nth-child(5) {
+    border-right: 1px solid rgba(245, 245, 245, 1);
+  }
+
+  .outstaffing__employees {
+    padding: 16px 12px 14px 2px;
+    border-right: 1px solid rgba(245, 245, 245, 1);
+    border-bottom: 1px solid rgba(245, 245, 245, 1);
+
+    div {
+      display: flex;
+      background: linear-gradient(95.54deg, #FFFFFF 5.13%, #EEEEEE 97.48%);
+      border-radius: 5px;
+      padding: 24px 0px 25px 33px;
+      height: 100%;
+      align-items: center;
+      position: relative;
+
+      p {
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 21.4px;
+        color: rgba(74, 74, 74, 1);
+        max-width: 135px;
+
+        span {
+          color: rgba(167, 202, 96, 1);
+        }
+      }
+    }
+
+    img {
+      position: absolute;
+      right: -50px;
+      bottom: -15px;
+    }
+  }
+
+  .outstaffing__offers {
+    padding: 10px 0 25px 10px;
+
+    div {
+      display: flex;
+      background: rgba(255, 255, 255, 1);
+      border-radius: 5px;
+      height: 91px;
+      padding: 24px 35px 24px 42px;
+      align-items: center;
+      justify-content: space-between;
+
+      p {
+        color: rgba(167, 202, 96, 1);
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 21.4px;
+        max-width: 215px;
+      }
+
+      img {
+        width: 27px;
+        height: 15px;
+      }
+    }
+  }
+}

src/pages/PartnerAddRequest/PartnerAddRequest.jsx

@@ -34,17 +34,20 @@ export const PartnerAddRequest = () => {
   const [specializationList, setSpecializationList] = useState([]);
   const [levelList, setLevelList] = useState([]);
   const [countList] = useState([1, 2, 3, 4, 5]);
+  const [locationList] = useState(["РФ", "Беларусь"]);
   const [openSkillsSelect, setOpenSkillsSelect] = useState(false);
   const [openSpecializationList, setOpenSpecializationListOpen] =
     useState(false);
   const [openLevelList, setOpenLevelList] = useState(false);
   const [openCountList, setOpenCountList] = useState(false);
+  const [openLocationList, setOpenLocationList] = useState(false);
   const [editRequest, setEditRequest] = useState(false);
   const [selectedSkills, setSelectedSkills] = useState([]);
   const [selectedSpecialization, setSelectedSpecialization] = useState(
     "Выберите специализацию"
   );
   const [selectedLevel, setSelectedLevel] = useState("Выберите уровень");
+  const [selectedLocation, setSelectedLocation] = useState("Выберите локацию");
   const [selectedCount, setSelectedCount] = useState(
     "Выберите кол-во сотрудников"
   );
@@ -177,6 +180,7 @@ export const PartnerAddRequest = () => {
       setOpenSpecializationListOpen(false);
       setOpenLevelList(false);
       setOpenCountList(false);
+      setOpenLocationList(false);
     }
   };
 
@@ -202,6 +206,7 @@ export const PartnerAddRequest = () => {
             ? "Страница редактирования заявки"
             : "Страница добавления заявки"}
         </h2>
+        <div className="partner-add-request__main">
           <div className="partner-add-request__section">
             <div className="partner-add-request__form">
               <div className="partner-add-request__form__block form__block">
@@ -357,7 +362,8 @@ export const PartnerAddRequest = () => {
                       src={arrowDown}
                     />
                   </div>
-                {openLevelList && Boolean(Object.values(levelList).length) && (
+                  {openLevelList &&
+                    Boolean(Object.values(levelList).length) && (
                       <div className="form__block__dropDown">
                         {Object.values(levelList).map((level, index) => {
                           return (
@@ -365,7 +371,10 @@ export const PartnerAddRequest = () => {
                               key={level}
                               onClick={() => {
                                 setOpenLevelList(false);
-                            setSelectedLevel({ name: level, id: index + 1 });
+                                setSelectedLevel({
+                                  name: level,
+                                  id: index + 1
+                                });
                               }}
                             >
                               {level}
@@ -417,21 +426,6 @@ export const PartnerAddRequest = () => {
                     </div>
                   )}
                 </div>
-              <div className="form__block__buttons">
-                <Link to="/profile/requests" className="form__block__cancel">
-                  Отмена
-                </Link>
-                <button
-                  onClick={() => handler()}
-                  className={
-                    disableBtn()
-                      ? "form__block__save"
-                      : "form__block__save disable"
-                  }
-                >
-                  Сохранить
-                </button>
-              </div>
               </div>
             </div>
             <div className="partner-add-request__info">
@@ -441,8 +435,8 @@ export const PartnerAddRequest = () => {
                   <h4>Процесс:</h4>
                 </div>
                 <p>
-                При аутстаффе мы предоставляем вам IT-специалистов при этом они
+                  При аутстаффе мы предоставляем вам IT-специалистов при этом
-                находятся в нашем штате.
+                  они находятся в нашем штате.
                   <br />
                   <br />
                   Вы сможете прособеседовать наших специалистов, посмотреть
@@ -474,8 +468,67 @@ export const PartnerAddRequest = () => {
                   </h4>
                 </div>
                 <p>
-                В Личном кабинете платформы получайте отчеты выполненных работ и
+                  В Личном кабинете платформы получайте отчеты выполненных работ
-                счеты на согласование и оплату
+                  и счеты на согласование и оплату
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="partner-add-request__special">
+            <h4>Основные требования по вакансии</h4>
+            <div className="form__block__section special__select">
+              <h3>Локация</h3>
+              <div
+                className="form__block__section__select"
+                onClick={() => setOpenLocationList(true)}
+              >
+                <span>{selectedLocation}</span>
+                <img
+                  className={openLocationList ? "rotate" : ""}
+                  src={arrowDown}
+                />
+              </div>
+              {openLocationList && (
+                <div className="form__block__dropDown">
+                  {locationList.map((location, index) => {
+                    return (
+                      <p
+                        key={index}
+                        onClick={() => {
+                          setOpenLocationList(false);
+                          setSelectedLocation(location);
+                        }}
+                      >
+                        {location}
+                      </p>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+            <div className="form__block__section">
+              <h3>Ставка</h3>
+              <div className="form__block__section__input special__select">
+                <input type="text" placeholder="Оплата" />
+              </div>
+            </div>
+            <div className="form__block__buttons">
+              <Link to="/profile/requests" className="form__block__cancel">
+                Отмена
+              </Link>
+              <button
+                onClick={() => handler()}
+                className={
+                  disableBtn()
+                    ? "form__block__save"
+                    : "form__block__save disable"
+                }
+              >
+                Сохранить
+              </button>
+              <p>
+                Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
+                использования персональных данных
               </p>
             </div>
           </div>

src/pages/PartnerAddRequest/partnerAddRequest.scss

@@ -23,6 +23,31 @@
     line-height: 32px;
   }
 
+  &__main {
+    display: flex;
+    flex-direction: column;
+    row-gap: 30px;
+  }
+
+  &__special {
+    background: rgba(255, 255, 255, 1);
+    border-radius: 12px;
+    padding: 41px 45px 35px 55px;
+    display: flex;
+    flex-direction: column;
+
+    h4 {
+      font-weight: 700;
+      color: rgba(91, 104, 113, 1);
+      font-size: 20px;
+      line-height: 24px;
+    }
+
+    .special__select {
+      max-width: 450px;
+    }
+  }
+
   &__section {
     margin-top: 25px;
     display: flex;
@@ -99,6 +124,7 @@
           font-size: 15px;
           line-height: 18px;
           outline: none;
+          width: 100%;
         }
       }
 
@@ -164,13 +190,23 @@
 
     &__buttons {
       display: flex;
-      margin-top: 50px;
 
       button {
         max-width: 150px;
         width: 100%;
         height: 40px;
       }
+
+      p {
+        font-weight: 300;
+        font-size: 12px;
+        line-height: 18px;
+        color: rgba(0, 0, 0, 1);
+        margin-left: 50px;
+        max-width: 360px;
+        display: flex;
+        align-items: center;
+      }
     }
 
     &__cancel {
@@ -321,7 +357,7 @@
     background: #ffffff;
     border-radius: 12px;
     width: 100%;
-    padding: 74px 48px 136px 62px;
+    padding: 74px 48px 67px 62px;
     display: flex;
     flex-direction: column;
     row-gap: 61px;

src/pages/PartnerEmployeeReport/PartnerEmployeeReport.jsx

@@ -1,7 +1,7 @@
 import moment from "moment/moment";
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Navigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 import { getRequestDates, setRequestDate } from "@redux/reportSlice";
 

src/pages/PartnerСategories/PartnerСategories.jsx

@@ -44,12 +44,28 @@ export const PartnerCategories = () => {
   const theme = useTheme(getTheme());
   const [nodes, setNodes] = useState([]);
   const [initialNodes, setInitialNodes] = useState([]);
+  const [activeTab, setActiveTab] = useState(1);
 
   const [search, setSearch] = useState("");
 
+  const tabs = [
+    {
+      id: 1,
+      name: "Все"
+    },
+    {
+      id: 2,
+      name: "Фронтенд"
+    },
+    {
+      id: 3,
+      name: "Бэкенд"
+    }
+  ];
+
   const COLUMNS = [
     {
-      label: "Аватар",
+      label: "",
       renderCell: (item) => (
         <img
           className="table__avatar"
@@ -60,7 +76,7 @@ export const PartnerCategories = () => {
     },
     {
       label: "ФИО",
-      renderCell: (item) => item?.employee.fio,
+      renderCell: (item) => <p>{item?.employee.fio}</p>,
       sort: { sortKey: "NAME" }
     },
     {
@@ -68,18 +84,21 @@ export const PartnerCategories = () => {
       renderCell: (item) => (
         <Link className="table__link" to={`/candidate/${item.user_id}`}>
           Резюме
+          <div className="img__wrapper">
+            <img src={rightArrow} alt="arrow" />
+          </div>
         </Link>
       )
     },
     {
-      label: "Отчет",
+      label: "Отчетность",
       renderCell: (item) => (
         <Link
           className="table__link"
           to={`/profile/employees/report/${item.user_id}`}
         >
           Подробный отчет
-          <div>
+          <div className="img__wrapper">
             <img src={rightArrow} alt="arrow" />
           </div>
         </Link>
@@ -105,7 +124,7 @@ export const PartnerCategories = () => {
   const pagination = usePagination(data, {
     state: {
       page: 0,
-      size: 5
+      size: 10
     }
   });
 
@@ -253,12 +272,28 @@ export const PartnerCategories = () => {
           <div className="partner-categories__items">
             {Boolean(initialNodes.length) ? (
               <>
+                <div className="table__tabs">
+                  {tabs.map((tab) => {
+                    return (
+                      <button
+                        onClick={() => setActiveTab(tab.id)}
+                        key={tab.id}
+                        className={`table__tab ${
+                          tab.id === activeTab ? "table__tab--active" : ""
+                        }`}
+                      >
+                        {tab.name}
+                      </button>
+                    );
+                  })}
+                </div>
                 <label className="table__search" htmlFor="search">
                   Поиск по имени:
                   <input
                     id="search"
                     type="text"
                     value={search}
+                    placeholder="Поиск по сотрудникам"
                     onChange={handleSearch}
                   />
                 </label>
@@ -270,26 +305,52 @@ export const PartnerCategories = () => {
                   pagination={pagination}
                 />
                 <div className="table__pagination">
-                  <span>
+                  <button
-                    Total Pages: {pagination.state.getTotalPages(data.nodes)}
+                    className={
-                  </span>
+                      pagination.state.page === 0 ? "switch disable" : "switch"
-
+                    }
+                    type="button"
+                    disabled={pagination.state.page === 0}
+                    onClick={() =>
+                      pagination.fns.onSetPage(pagination.state.page - 1)
+                    }
+                  >
+                    {"<"}
+                  </button>
                   <span className="table__pages">
-                    Page:{" "}
                     {pagination.state.getPages(data.nodes).map((_, index) => (
                       <button
                         key={index}
                         type="button"
-                        style={{
+                        className={
-                          fontWeight:
+                          pagination.state.page === index
-                            pagination.state.page === index ? "bold" : "normal"
+                            ? "page page--active "
-                        }}
+                            : "page"
+                        }
                         onClick={() => pagination.fns.onSetPage(index)}
                       >
                         {index + 1}
                       </button>
                     ))}
                   </span>
+                  <button
+                    className={
+                      pagination.state.page + 1 ===
+                      pagination.state.getPages(data.nodes).length
+                        ? "switch disable"
+                        : "switch"
+                    }
+                    type="button"
+                    disabled={
+                      pagination.state.page + 1 ===
+                      pagination.state.getPages(data.nodes).length
+                    }
+                    onClick={() =>
+                      pagination.fns.onSetPage(pagination.state.page + 1)
+                    }
+                  >
+                    {">"}
+                  </button>
                 </div>
               </>
             ) : (

src/pages/PartnerСategories/partnerСategories.scss

@@ -13,10 +13,13 @@
 
   &__items {
     display: flex;
-    gap: 10px;
     flex-wrap: wrap;
     justify-content: center;
+    background: white;
+    padding: 20px 0 30px;
+    border-radius: 7px;
   }
+
   &__empty {
     font-size: 18px;
     font-weight: 500;
@@ -161,8 +164,18 @@
       display: flex;
       width: 100%;
       gap: 10px;
-      font-size: 18px;
       align-items: center;
+      padding: 0 18px 35px;
+      margin-bottom: 0;
+      font-size: 16px;
+
+      input {
+        background: #F0F2F5;
+        outline: none;
+        border-radius: 6px;
+        padding: 6px;
+        border: none;
+      }
     }
 
      &__avatar {
@@ -175,20 +188,108 @@
       color: black;
       font-size: 16px;
       align-items: center;
+
+      .img__wrapper {
+        width: 22px;
+        height: 22px;
+        border-radius: 50px;
+        background: #D9D7D7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          width: 14px;
+        }
+      }
+    }
+
+    &__tabs {
+      margin: 0 auto 36px 18px;
+      background: rgba(240, 242, 245, 1);
+      padding: 4px 8px 4px 8px;
+      border-radius: 6px;
+      display: flex;
+    }
+
+    &__tab {
+      color: rgba(46, 58, 89, 1);
+      font-size: 15px;
+      outline: none;
+      background: none;
+      border: none;
+      padding: 0 12px;
+
+      &--active {
+        background: rgba(255, 255, 255, 1);
+        border-radius: 5px;
+        font-size: 16px;
+      }
     }
 
     &__pagination {
       width: 100%;
       display: flex;
-      justify-content: space-between;
+      font-size: 14px;
-      font-size: 16px;
       align-items: center;
+      padding: 39px 34px 0;
+      column-gap: 12px;
+
+      button {
+        font-size: 14px;
+        width: 32px;
+        border-radius: 5px;
+        height: 32px;
+        color: #2E3A59;
+      }
+
+      .switch {
+        border: none;
+        background: #F0F2F5;
+        font-weight: 600;
+      }
+
+      .disable {
+        opacity: 0.7;
+      }
     }
 
     &__pages {
       display: flex;
-      column-gap: 5px;
+      column-gap: 4px;
-      align-items: center;
+      color: black;
+      background: white;
+
+      .page {
+        border: 1px solid #E8ECF8;
+        background: none;
+
+        &--active {
+          border: none;
+          background: #9DA65D;
+          color: white;
+        }
+      }
+    }
+  }
+
+  table {
+    th {
+      border-top: 0;
+      border-bottom: 1px solid #EDEDED;
+      color: #1458DD;
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    td {
+      border-top: 0;
+      border-bottom: 1px solid #EDEDED;
+      color: #2E3A59;
+
+      p {
+        font-weight: 500;
+      }
     }
   }
 }

src/pages/Profile/Profile.jsx

@@ -11,7 +11,8 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
-// import paymentIcon from "assets/icons/paymentIcon.png";
+import financeIcon from "assets/icons/financeIcon.png";
+import paymentIcon from "assets/icons/paymentIcon.png";
 import settingIcon from "assets/icons/settingIcon.png";
 import summaryIcon from "assets/icons/summaryIcon.png";
 import timerIcon from "assets/icons/timerIcon.png";
@@ -28,34 +29,40 @@ export const Profile = () => {
   const [profileItemsInfo] = useState({
     developer: [
       {
-        path: "profile/calendar",
+        path: "profile",
-        img: reportsIcon,
+        img: paymentIcon,
-        title: "Ваша отчетность",
+        title: "Работа в IT <br/>открытые запросы",
-        description: "<span></span>Отработанных в этом месяце часов"
+        description: "Перейдите чтобы посмотреть <br/>открытые позиции"
       },
       {
         path: "profile/summary",
         img: summaryIcon,
         title: "Резюме",
-        description: "Ваше резюме<br/><span>заполнено</span>"
+        description: "Ваше резюме <br/><span>заполнено</span>"
       },
       {
         path: "profile/tracker",
         img: timerIcon,
-        title: "Трекер времени",
+        title: "Трекер <br/>времени",
-        description: "Сколько времени занимает<br/> выполнение задач"
+        description: "Сколько времени занимает <br/>выполнение задач"
+      },
+      {
+        path: "profile/payouts",
+        img: financeIcon,
+        title: "Выплаты и <br/>финансы",
+        description: "У вас <span>подтвержден</span> <br/>статус самозанятого"
       },
-      // {
-      //   path: "profile/payouts",
-      //   img: paymentIcon,
-      //   title: "Выплаты",
-      //   description: "У вас <span>подтвержден</span><br/> статус самозанятого"
-      // },
       {
         path: "profile/settings",
         img: settingIcon,
-        title: "Настройки профиля",
+        title: "Настройки <br/>профиля",
-        description: "Перейдите чтобы начать<br/> редактирование"
+        description: "Перейдите чтобы начать <br/>редактирование"
+      },
+      {
+        path: "profile/calendar",
+        img: reportsIcon,
+        title: "Ваша <br/>отчетность",
+        description: "<span></span>Отработанных в этом месяце часов"
       }
     ],
     partner: [
@@ -64,31 +71,31 @@ export const Profile = () => {
         img: reportsIcon,
         title: "Мои вакансии",
         description:
-          "<span>Ваши открытые вакансии, которыми вы можете управлять"
+          "Ваши открытые вакансии, <br/><span>которыми вы можете управлять</span>"
       },
       {
         path: "profile/employees",
         img: summaryIcon,
         title: "Данные персонала",
-        description: "Наши специалисты <br/><span>уже работающие у вас</span>"
+        description: "Наши специалисты, <br/><span>уже работающие у вас</span>"
       },
       {
         path: "profile/tracker",
         img: timerIcon,
         title: "Трекер времени",
-        description: "Контроль времени и<br/> выполнение задач"
+        description: "Контроль времени и <br/>выполнение задач"
       },
       // {
       //   path: "profile/treaties",
       //   img: paymentIcon,
       //   title: "Договоры и отчетность",
-      //   description: "Ключевые условия<br/> договора"
+      //   description: "Ключевые условия <br/>договора"
       // },
       {
         path: "profile/settings",
         img: settingIcon,
         title: "Настройки профиля",
-        description: "Перейдите чтобы начать<br/> редактирование"
+        description: "Перейдите чтобы начать <br/>редактирование"
       }
     ]
   });
@@ -116,9 +123,9 @@ export const Profile = () => {
             />
             <p className="summary__name">
               <span>
-                {profileInfo?.fio || profileInfo?.username},
+                {profileInfo?.fio || profileInfo?.username}
                 {user === "developer" &&
-                  ` ${profileInfo?.specification} разработчик`}
+                  `, ${profileInfo?.specification} разработчик`}
               </span>
             </p>
           </div>

src/pages/ProjectTracker/ProjectTracker.jsx

@@ -1,20 +1,15 @@
 import moment from "moment";
 import React, { useEffect, useRef, useState } from "react";
-import { HexColorPicker } from "react-colorful";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useParams } from "react-router-dom";
 
 import {
   activeLoader,
-  addNewTagToProject,
-  deleteTagProject,
   filterCreatedByMe,
-  filteredExecutorTasks,
   filteredParticipateTasks,
   getBoarderLoader,
   getProjectBoard,
   modalToggle,
-  movePositionProjectTask,
   moveProjectTask,
   setColumnId,
   setColumnName,
@@ -23,7 +18,7 @@ import {
   setToggleTab
 } from "@redux/projectsTrackerSlice";
 
-import { removeLast, urlForLocal } from "@utils/helper";
+import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
@@ -39,25 +34,20 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
-import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
+import TrackerCardTask from "@components/TrackerCardTask/TrackerCardTask";
+import TrackerSelectExecutor from "@components/TrackerSelectExecutor/TrackerSelectExecutor";
+import TrackerTagList from "@components/TrackerTagList/TrackerTagList";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
-import arrowDown from "assets/icons/arrows/selectArrow.png";
 import category from "assets/icons/category.svg";
-import close from "assets/icons/close.png";
-import commentsBoard from "assets/icons/commentsBoard.svg";
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
-import filesBoard from "assets/icons/filesBoard.svg";
 import trackerNoTasks from "assets/icons/trackerNoTasks.svg";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
 import accept from "assets/images/accept.png";
-import archive from "assets/images/archiveIcon.png";
 import avatarMok from "assets/images/avatarMok.png";
 
-import { getCorrectDate } from "../../utils/calendarHelper";
-
 export const ProjectTracker = () => {
   const dispatch = useDispatch();
   const projectId = useParams();
@@ -66,43 +56,22 @@ export const ProjectTracker = () => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [priorityTask, setPriorityTask] = useState(0);
   const [wrapperHover, setWrapperHover] = useState({});
-  const [taskHover, setTaskHover] = useState({});
   const [modalAdd, setModalAdd] = useState(false);
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
   const [selectedTicket, setSelectedTicket] = useState({});
   const [personListOpen, setPersonListOpen] = useState(false);
-  const [tags, setTags] = useState({
-    open: false,
-    add: false,
-    edit: false
-  });
   const [acceptModalOpen, setAcceptModalOpen] = useState(false);
   const [currentColumnDelete, setCurrentColumnDelete] = useState(null);
-  const [color, setColor] = useState("#aabbcc");
-  const [tagInfo, setTagInfo] = useState({ description: "", name: "" });
   const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
     useState(false);
   const [filteredNoTasks, setFilteredNoTasks] = useState(false);
   const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
   const [selectedExecutor, setSelectedExecutor] = useState(null);
-  const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
   const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
   const loader = useSelector(getBoarderLoader);
   const { showNotification } = useNotification();
 
-  const priority = {
-    2: "Высокий",
-    1: "Средний",
-    0: "Низкий"
-  };
-
-  const priorityClass = {
-    2: "high",
-    1: "middle",
-    0: "low"
-  };
-
   useEffect(() => {
     dispatch(activeLoader());
     dispatch(setProjectBoardFetch(projectId.id));
@@ -110,8 +79,6 @@ export const ProjectTracker = () => {
   }, []);
 
   useEffect(() => {
-    const tasksHover = {};
-    const columnHover = {};
     let columnsTasksEmpty = true;
     if (Object.keys(projectBoard).length) {
       projectBoard.columns.forEach((column) => {
@@ -120,8 +87,6 @@ export const ProjectTracker = () => {
           ...prevState,
           [column.id]: false
         }));
-        columnHover[column.id] = false;
-        column.tasks.forEach((task) => (tasksHover[task.id] = false));
       });
     }
     if (
@@ -132,48 +97,8 @@ export const ProjectTracker = () => {
     } else {
       setFilteredNoTasks(false);
     }
-    setWrapperHover(columnHover);
-    setTaskHover(tasksHover);
   }, [projectBoard]);
 
-  function dragStartHandler(e, task, columnId) {
-    startWrapperIndexTest.current = { task: task, index: columnId };
-  }
-
-  function dragOverTaskHandler(e, task) {
-    e.preventDefault();
-    if (startWrapperIndexTest.current.task.id === task.id) {
-      return;
-    }
-    setTaskHover((prevState) => ({ [prevState]: false, [task.id]: true }));
-  }
-
-  function dragLeaveTaskHandler() {
-    setTaskHover((prevState) => ({ [prevState]: false }));
-  }
-
-  function dragEndTaskHandler() {
-    setTaskHover((prevState) => ({ [prevState]: false }));
-    setWrapperHover((prevState) => ({
-      [prevState]: false
-    }));
-  }
-
-  function dragDropTaskHandler(e, task, column) {
-    e.preventDefault();
-    if (task.id === startWrapperIndexTest.current.task.id) {
-      return;
-    }
-    const finishTask = column.tasks.indexOf(task);
-    dispatch(
-      movePositionProjectTask({
-        startTask: startWrapperIndexTest.current.task,
-        finishTask: task,
-        finishIndex: finishTask
-      })
-    );
-  }
-
   function dragOverHandler(e) {
     e.preventDefault();
   }
@@ -288,11 +213,6 @@ export const ProjectTracker = () => {
     setCheckBoxMyTasks(!checkBoxMyTasks);
   }
 
-  function executorFilter(user) {
-    dispatch(filteredExecutorTasks(user.user_id));
-    setSelectedExecutor(user);
-  }
-
   function deleteSelectedExecutorFilter() {
     setSelectedExecutor(null);
     setCheckBoxParticipateTasks(false);
@@ -300,81 +220,6 @@ export const ProjectTracker = () => {
     dispatch(setProjectBoardFetch(projectId.id));
   }
 
-  function addNewTag() {
-    apiRequest("/mark/create", {
-      method: "POST",
-      data: {
-        title: tagInfo.description,
-        slug: tagInfo.name,
-        color: color,
-        status: 1
-      }
-    }).then((data) => {
-      apiRequest("/mark/attach", {
-        method: "POST",
-        data: {
-          mark_id: data.id,
-          entity_type: 1,
-          entity_id: projectId.id
-        }
-      }).then((data) => {
-        dispatch(addNewTagToProject(data.mark));
-        setTags((prevState) => ({
-          ...prevState,
-          add: false
-        }));
-        showNotification({
-          show: true,
-          text: "Тег успешно создан",
-          type: "success"
-        });
-      });
-    });
-  }
-
-  function editTag() {
-    apiRequest("/mark/update", {
-      method: "PUT",
-      data: {
-        mark_id: tagInfo.editMarkId,
-        title: tagInfo.description,
-        slug: tagInfo.name,
-        color: color
-      }
-    }).then(() => {
-      dispatch(setProjectBoardFetch(projectId.id));
-      setTags((prevState) => ({
-        ...prevState,
-        edit: false
-      }));
-      setTagInfo({ description: "", name: "" });
-      setColor("#aabbcc");
-      showNotification({
-        show: true,
-        text: "Тег успешно изменён",
-        type: "success"
-      });
-    });
-  }
-
-  function deleteTag(tagId) {
-    apiRequest("/mark/detach", {
-      method: "DELETE",
-      data: {
-        mark_id: tagId,
-        entity_type: 1,
-        entity_id: projectId.id
-      }
-    }).then(() => {
-      dispatch(deleteTagProject(tagId));
-      showNotification({
-        show: true,
-        text: "Тег удален",
-        type: "success"
-      });
-    });
-  }
-
   const initListeners = () => {
     document.addEventListener("click", closeByClickingOut);
   };
@@ -394,32 +239,6 @@ export const ProjectTracker = () => {
       setPersonListOpen(false);
     }
 
-    if (
-      event &&
-      !path.find(
-        (div) =>
-          div.classList &&
-          (div.classList.contains("tasks__head__executor") ||
-            div.classList.contains("tasks__head__executor-dropdown"))
-      )
-    ) {
-      setSelectedExecutorOpen(false);
-    }
-
-    if (
-      event &&
-      !path.find(
-        (div) =>
-          div.classList &&
-          (div.classList.contains("tasks__head__tags") ||
-            div.classList.contains("tags__list"))
-      )
-    ) {
-      setTags({ open: false, add: false, edit: false });
-      setTagInfo({ description: "", name: "" });
-      setColor("#aabbcc");
-    }
-
     if (
       event &&
       !path.find(
@@ -577,207 +396,16 @@ export const ProjectTracker = () => {
                       {checkBoxMyTasks && <img src={accept} alt="accept" />}
                     </div>
                   </div>
-                  {selectedExecutor ? (
+
-                    <div className="tasks__head__executor-selected">
+                  <TrackerSelectExecutor
-                      <p>{removeLast(selectedExecutor.user.fio)}</p>
+                    deleteSelectedExecutor={deleteSelectedExecutorFilter}
-                      <img
+                    projectBoard={projectBoard}
-                        className="avatar"
+                    selectedExecutor={selectedExecutor}
-                        src={
+                    setSelectedExecutor={setSelectedExecutor}
-                          selectedExecutor.user?.avatar
-                            ? urlForLocal(selectedExecutor.user.avatar)
-                            : avatarMok
-                        }
-                        alt="avatar"
                   />
-                      <img
+
-                        className="delete"
+                  <TrackerTagList projectBoard={projectBoard} />
-                        src={close}
+
-                        alt="delete"
-                        onClick={deleteSelectedExecutorFilter}
-                      />
-                    </div>
-                  ) : (
-                    <div
-                      className="tasks__head__executor"
-                      onClick={() =>
-                        setSelectedExecutorOpen(!selectExecutorOpen)
-                      }
-                    >
-                      <p>Выберите исполнителя</p>
-                      <img
-                        className={selectExecutorOpen ? "open" : ""}
-                        src={arrowDown}
-                        alt="arrow"
-                      />
-                      {selectExecutorOpen && (
-                        <div className="tasks__head__executor-dropdown">
-                          {projectBoard.projectUsers.map((user) => {
-                            return (
-                              <div
-                                className="executor-dropdown__person"
-                                key={user.user_id}
-                                onClick={() => executorFilter(user)}
-                              >
-                                <p>{removeLast(user.user?.fio)}</p>
-                                <img
-                                  src={
-                                    user.user?.avatar
-                                      ? urlForLocal(user.user.avatar)
-                                      : avatarMok
-                                  }
-                                  alt="avatar"
-                                />
-                              </div>
-                            );
-                          })}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                  <div className="tasks__head__tags">
-                    <div
-                      className="tags__add"
-                      onClick={() => {
-                        setTags((prevState) => ({
-                          ...prevState,
-                          open: !tags.open
-                        }));
-                      }}
-                    >
-                      <p>Список тегов</p>
-                      <img
-                        className={tags.open ? "open" : ""}
-                        src={arrowDown}
-                        alt="arrow"
-                      />
-                    </div>
-                    {tags.open && (
-                      <div className="tags__list">
-                        {!tags.add && !tags.edit && (
-                          <div
-                            className="add-new-tag"
-                            onClick={() =>
-                              setTags((prevState) => ({
-                                ...prevState,
-                                add: true
-                              }))
-                            }
-                          >
-                            <p>Добавить новый тег</p>
-                            <span>+</span>
-                          </div>
-                        )}
-                        {!tags.add && !tags.edit && (
-                          <div className="tags__list__created">
-                            {projectBoard.mark.map((tag) => {
-                              return (
-                                <div className="tag-item" key={tag.id}>
-                                  <div className="tag-item__info">
-                                    <span
-                                      className="tag-item__color"
-                                      style={{ background: tag.color }}
-                                    />
-                                    <div>
-                                      <span className="tag-item__info__name">
-                                        {tag.slug}
-                                      </span>
-                                      <p className="tag-item__description">
-                                        {tag.title}
-                                      </p>
-                                    </div>
-                                  </div>
-                                  <div className="tag-item__images">
-                                    <img
-                                      src={edit}
-                                      alt="edit"
-                                      onClick={() => {
-                                        setTags((prevState) => ({
-                                          ...prevState,
-                                          edit: true
-                                        }));
-                                        setTagInfo({
-                                          description: tag.title,
-                                          name: tag.slug,
-                                          editMarkId: tag.id
-                                        });
-                                        setColor(tag.color);
-                                      }}
-                                    />
-                                    <img
-                                      onClick={() => deleteTag(tag.id)}
-                                      className="delete"
-                                      src={close}
-                                      alt="delete"
-                                    />
-                                  </div>
-                                </div>
-                              );
-                            })}
-                          </div>
-                        )}
-                        {(tags.add || tags.edit) && (
-                          <div className="form-tag">
-                            <input
-                              className="form-tag__input"
-                              placeholder="Описание метки"
-                              maxLength="25"
-                              value={tagInfo.description}
-                              onChange={(e) =>
-                                setTagInfo((prevState) => ({
-                                  ...prevState,
-                                  description: e.target.value
-                                }))
-                              }
-                            />
-                            <input
-                              className="form-tag__input"
-                              placeholder="Тег"
-                              value={tagInfo.name}
-                              maxLength="10"
-                              onChange={(e) =>
-                                setTagInfo((prevState) => ({
-                                  ...prevState,
-                                  name: e.target.value
-                                }))
-                              }
-                            />
-                            <HexColorPicker color={color} onChange={setColor} />
-                            <button
-                              onClick={() => {
-                                tags.add ? addNewTag() : editTag();
-                              }}
-                              className={
-                                tagInfo.name && tagInfo.description
-                                  ? "form-tag__btn"
-                                  : "form-tag__btn disable"
-                              }
-                            >
-                              {tags.add ? "Добавить" : "Изменить"}
-                            </button>
-                            {(tags.add || tags.edit) && (
-                              <button
-                                className={"form-tag__btn"}
-                                onClick={() => {
-                                  setTags((prevState) => ({
-                                    ...prevState,
-                                    add: false,
-                                    edit: false
-                                  }));
-                                  setTagInfo({
-                                    description: "",
-                                    name: ""
-                                  });
-                                  setColor("#aabbcc");
-                                }}
-                              >
-                                Отмена
-                              </button>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
                   <Link to="/profile/tracker" className="tasks__head__back">
                     <p>К списку проектов</p>
                     <img src={arrow} alt="arrow" />
@@ -878,7 +506,7 @@ export const ProjectTracker = () => {
                           </div>
                         )}
                         <div className="tasks-container">
-                          {column.tasks.map((task) => {
+                          {column.tasks.map((task, index) => {
                             const dateDeadline = new Date(task.dead_line);
                             const currentDate = moment().format(
                               "YYYY-MM-DD HH:mm:ss"
@@ -889,119 +517,16 @@ export const ProjectTracker = () => {
                                 ? "red"
                                 : "#1a1919";
                             return (
-                              <div
+                              <TrackerCardTask
-                                key={task.id}
+                                column={column}
-                                className={`tasks__board__item ${
+                                key={index}
-                                  taskHover[task.id] ? "task__hover" : ""
+                                openTicket={openTicket}
-                                }`}
+                                projectBoard={projectBoard}
-                                draggable={true}
+                                setWrapperHover={setWrapperHover}
-                                onDragStart={(e) =>
+                                startWrapperIndexTest={startWrapperIndexTest}
-                                  dragStartHandler(e, task, column.id)
-                                }
-                                onDragOver={(e) => dragOverTaskHandler(e, task)}
-                                onDragLeave={(e) => dragLeaveTaskHandler(e)}
-                                onDragEnd={() => dragEndTaskHandler()}
-                                onDrop={(e) =>
-                                  dragDropTaskHandler(e, task, column)
-                                }
-                                onClick={(e) => openTicket(e, task)}
-                              >
-                                <div
-                                  className="tasks__board__item__title"
-                                  onClick={() => {
-                                    if (window.innerWidth < 985) {
-                                      window.location.replace(
-                                        `/tracker/task/${task.id}`
-                                      );
-                                    }
-                                  }}
-                                >
-                                  <p className="task__board__item__title">
-                                    {task.title}
-                                  </p>
-                                </div>
-                                <p
-                                  dangerouslySetInnerHTML={{
-                                    __html: task.description
-                                  }}
-                                  className="tasks__board__item__description"
-                                ></p>
-                                {Boolean(task.mark.length) && (
-                                  <div className="tasks__board__item__tags">
-                                    {task.mark.map((tag) => {
-                                      return (
-                                        <div
-                                          className="tag-item"
-                                          key={tag.id}
-                                          style={{ background: tag.color }}
-                                        >
-                                          <p>{tag.slug}</p>
-                                        </div>
-                                      );
-                                    })}
-                                  </div>
-                                )}
-                                <div className="tasks__board__item__container">
-                                  {typeof task.execution_priority ===
-                                    "number" && (
-                                    <div className="tasks__board__item__priority">
-                                      <p>⚡</p>
-                                      <span
-                                        className={
-                                          priorityClass[task.execution_priority]
-                                        }
-                                      >
-                                        {priority[task.execution_priority]}
-                                      </span>
-                                    </div>
-                                  )}
-                                  {task.dead_line && (
-                                    <div className="tasks__board__item__dead-line">
-                                      <p>⌛</p>
-                                      <span style={{ color: titleColor }}>
-                                        {getCorrectDate(task.dead_line)}
-                                      </span>
-                                    </div>
-                                  )}
-                                </div>
-
-                                <div className="tasks__board__item__info">
-                                  <div className="tasks__board__item__executor">
-                                    <img
-                                      src={
-                                        task.executor?.avatar
-                                          ? urlForLocal(task.executor?.avatar)
-                                          : avatarMok
-                                      }
-                                      alt="avatar"
-                                    />
-                                    <span>
-                                      {removeLast(task.executor?.fio) ||
-                                        "Исполнитель не назначен"}
-                                    </span>
-                                  </div>
-                                  <div className="tasks__board__item__info__tags">
-                                    <div className="tasks__board__item__info__more">
-                                      <img
-                                        src={commentsBoard}
-                                        alt="commentsImg"
-                                      />
-                                      <span>{task.comment_count}</span>
-                                    </div>
-                                    <div className="tasks__board__item__info__more">
-                                      <img src={filesBoard} alt="filesImg" />
-                                      <span>{task.file_count}</span>
-                                    </div>
-                                  </div>
-                                </div>
-                                <TrackerSelectColumn
-                                  columns={projectBoard.columns.filter(
-                                    (item) => item.id !== column.id
-                                  )}
-                                  currentColumn={column}
                                 task={task}
+                                titleColor={titleColor}
                               />
-                              </div>
                             );
                           })}
                         </div>

src/pages/Stack/Stack.jsx

@@ -0,0 +1,343 @@
+import React from "react";
+import SVG from "react-inlinesvg";
+
+import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
+
+import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
+import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
+import Ellipse from "assets/images/EllipseIntro.svg";
+import backgroundOpp from "assets/images/backgroundOpportunity.png";
+import cat from "assets/images/cat.png";
+import clue from "assets/images/clue.png";
+import code1 from "assets/images/landingBackgroundCode1.png";
+import code from "assets/images/landingBackgroundCode.png";
+import reviewsImgMok from "assets/images/reviewsImgMok.png";
+import flag from "assets/images/stackProjectsFlag.png";
+import fly from "assets/images/stackProjectsFly.png";
+import hand from "assets/images/stackProjectsHand.png";
+import rabota from "assets/images/stackProjectsRabota.png";
+import portfolio from "assets/images/stackSteptsPortfolio.png";
+
+import "./stack.scss";
+
+export const Stack = () => {
+  const subjects = [
+    {
+      name: "Backend",
+      skills: [
+        "php",
+        "yii2",
+        "laravel",
+        "symfony",
+        "django",
+        "nodejs",
+        "fastAPI",
+        "flask",
+        "python",
+        "exspress",
+        "adonis"
+      ]
+    },
+    {
+      name: "Front",
+      skills: [
+        "react",
+        "next.js",
+        "typescript",
+        "redux",
+        "angular",
+        "vue",
+        "jquery",
+        "css (sass/scss, tailwind, bootstrap, БЭМ)"
+      ]
+    }
+  ];
+
+  const projects = [
+    {
+      description:
+        "Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>",
+      img: flag,
+      name: "flag"
+    },
+    {
+      description:
+        "<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации.",
+      img: rabota,
+      name: "rabota"
+    },
+    {
+      description:
+        "<span>Внедрение искусственного интеллекта</span> (ИИ) в IT-проекты. Интеграции любых популярных сервисов.",
+      img: hand,
+      name: hand
+    },
+    {
+      description:
+        "Новостной портал и удобный каталог компаний <span>DaInfo.pro</span> предоставляющих различные услуги и товары.",
+      img: fly,
+      name: "fly"
+    }
+  ];
+
+  const steps = [
+    {
+      miniInfo: "Окунитесь в экосистему ITGUIL",
+      info: "<span>уточнение</span> деталей и <span>обсуждение</span> условий с менеджером ITGUILD"
+    },
+    {
+      miniInfo: "Окунитесь в экосистему ITGUIL",
+      info: "<span>подписание договора</span> без обязательств оплаты на данном этапе"
+    },
+    {
+      miniInfo: "Окунитесь в экосистему ITGUIL",
+      info: "<span>формирование</span> команды или подбор отдельных специалистов под требования клиентов"
+    },
+    {
+      miniInfo: "Окунитесь в экосистему ITGUIL",
+      info: "<span>интеграция специалистов</span> в команду клиента, ежедневная отчетность под контролем менеджера ITGUILD"
+    }
+  ];
+
+  return (
+    <section className="stack">
+      <AuthHeader />
+      <section className="stack__intro">
+        <div className="stack__container intro__container">
+          <div className="intro__info">
+            <span className="intro__suptitle">
+              Все еще пытаетесь
+              <br /> пасти котов?*
+            </span>
+            <h1 className="intro__title">
+              Аутстаф
+              <br />
+              финг
+            </h1>
+            <span className="intro__subtitle">IT-специалистов</span>
+            <p className="intro__about">
+              Подберем и документально оформим IT-специалистов, после чего
+              передадим исполнителей под ваше руководство.{" "}
+              <span>Вы получаете полное управление над сотрудниками,</span> имея
+              возможность контролировать и заменять IT штат.
+            </p>
+            <div className="intro__links">
+              <button className="stack__button">оставить заявку</button>
+              <span className="intro__link">
+                Окунитесь в<br /> экосистему ITGUIL
+              </span>
+            </div>
+          </div>
+          <SVG className="intro__ellipse" src={Ellipse} />
+          <div className="intro__aside">
+            <h3 className="aside__logo">ITGu ild</h3>
+            <div className="aside__clue">
+              <img src={clue} alt="clue" />
+              <p>
+                <span>Каждый день</span> база специалистов пополняется на{" "}
+                <span>+15 резюме</span>
+              </p>
+            </div>
+            <img className="aside__cat" src={cat} alt="cat" />
+          </div>
+        </div>
+      </section>
+      <section className="stack__opportunity">
+        <img src={backgroundOpp} className="background__opportunity--left" />
+        <img src={backgroundOpp} className="background__opportunity--right" />
+        <div className="stack__container opportunity__container">
+          <img src={code} className="opportunity__code" />
+          <img src={code} className="opportunity__code--center" />
+          <div className="opportunity__block">
+            <h3 className="opportunity__title">Stack</h3>
+            <div className="opportunity__info">
+              <span className="info__subtitle">
+                Окунитесь в экосистему ITGUIL
+              </span>
+              <p className="info__about">
+                <span>Вы получаете полное управление над сотрудниками,</span>{" "}
+                имея возможность контролировать и заменять IT штат.
+              </p>
+              <div className="info__notification">
+                <img src={clue} alt="clue" />
+                <p>
+                  Можем подготовить специалиста конкретно под ваш проект и
+                  используемый стек. Таким образом вы сможете сэкономить ресурсы
+                  на поиск кандидата.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="opportunity__subjects">
+            {subjects.map((subject) => {
+              return (
+                <div className="subject" key={subject.name}>
+                  <h4>{subject.name}</h4>
+                  <div className="subject__skills">
+                    {subject.skills.map((skill) => {
+                      return <span key={skill}>{skill}</span>;
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+      <section className="stack__projects projects">
+        <div className="stack__container projects__container">
+          <img className="projects__code" src={code} alt="code" />
+          <h3 className="projects__title">ITGUILD</h3>
+          <div className="projects__block">
+            <h4>Наши проекты</h4>
+            <div className="projects__examples">
+              {projects.map((project, index) => {
+                return (
+                  <div key={index} className="stack__project">
+                    <span className="project__img">
+                      <img
+                        className={project.name}
+                        src={project.img}
+                        alt="img"
+                      />
+                    </span>
+                    <p
+                      dangerouslySetInnerHTML={{ __html: project.description }}
+                    ></p>
+                  </div>
+                );
+              })}
+            </div>
+            <div className="projects__info">
+              <p>
+                <span>Мы обеспечиваем</span> финансовые, юридические и кадровые
+                гарантии, предоставляем SLA и берем на себя ответственность за
+                работу команды. Вам не требуется заниматься поиском, оформлением
+                или увольнением сотрудников —{" "}
+                <span>мы берем на себя все хлопоты.</span>
+              </p>
+              <button>оставить заявку</button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section className="stack__steps">
+        <div className="stack__container steps__container">
+          <div className="steps__head">
+            <h4>как это работает?</h4>
+            <div className="steps__info">
+              <p>
+                Аутстаффинг представляет собой специфическую модель найма
+                персонала, отличающуюся от аутсорсинга.
+              </p>
+              <p>
+                <span>
+                  В контексте аутстаффинга вы нанимаете специалистов в области
+                  ИТ,
+                </span>{" "}
+                оплачивая их по их конкретным навыкам, и берете на себя
+                организацию их работы.
+              </p>
+            </div>
+          </div>
+          <div className="steps__items">
+            {steps.map((step, index) => {
+              return (
+                <div key={index} className="item__wrapper">
+                  <div className="item__head">
+                    <h4>{`${index + 1}.`}</h4>
+                    <p>{step.miniInfo}</p>
+                  </div>
+                  <div className="steps__item" key={index}>
+                    <p
+                      className="item__info"
+                      dangerouslySetInnerHTML={{ __html: step.info }}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <div className="steps__portfolio">
+            <img src={portfolio} alt="portfolio" />
+          </div>
+          <img
+            className="steps__code steps__code--first"
+            src={code}
+            alt="code"
+          />
+          <img
+            className="steps__code steps__code--second"
+            src={code}
+            alt="code"
+          />
+        </div>
+        <img src={backgroundOpp} className="steps__background" />
+      </section>
+      <section className="stack__reviews">
+        <div className="stack__container reviews__container">
+          <div className="reviews__info">
+            <div className="reviews__info-counter">375</div>
+            <span>Довольных клиентов</span>
+            <p>
+              Предоставляем на аутстаффинг frontend- и backend - разработчиков
+              уровня от junior до middle+
+            </p>
+            <p>
+              Можем сделать оценку проекта, ревью кода, составить коммерческое
+              предложение, рекомендации касаемо стека технологий и организации
+              архитектуры разрабатываемого проекта.
+            </p>
+          </div>
+
+          <div className="reviews__content">
+            <h4>Что о нас говорят</h4>
+            <div className="reviews__content-container">
+              <div className="review">
+                <div className="review__client">
+                  <img src={reviewsImgMok} alt="reviewsImgMok" />
+                  <span>Александр Гузеев</span>
+                  <p>Руководитель проекта ООО “ЭЛАР”</p>
+                </div>
+
+                <div className="review__comment">
+                  <p>
+                    Команда ITGUILD берется за решение широкого круга задач, не
+                    боясь при этом ни сжатых сроков, ни сложной специфики
+                    проектов, и успешно доводит их ло решения. <br />
+                    <br />
+                    Разаработчики Кирилла смогли не только усилить существующую
+                    команду разработки, став ее полноценной частью, но и
+                    привести в проект новые идеи, свои знания и опыт.
+                  </p>
+                </div>
+              </div>
+
+              <div className="reviews__content-buttons">
+                <button>
+                  <img src={arrowReviewsLeft} alt="" />
+                </button>
+                <button>
+                  <img src={arrowReviewsRight} alt="" />
+                </button>
+              </div>
+            </div>
+          </div>
+          <img
+            className="reviews__code reviews__code--first"
+            src={code1}
+            alt="code"
+          />
+          <img
+            className="reviews__code reviews__code--second"
+            src={code1}
+            alt="code"
+          />
+        </div>
+      </section>
+      <section className="stack__contact">
+        <div className="stack__container contact__container"></div>
+      </section>
+    </section>
+  );
+};

src/pages/Stack/stack.scss

@@ -0,0 +1,830 @@
+.stack {
+  font-family: "GT Eesti Pro Display";
+
+  &__container {
+    margin: 0 auto;
+    padding: 85px 0 90px;
+    max-width: 1020px;
+    position: relative;
+    display: flex;
+  }
+  &__intro {
+    background: #eeeeee;
+
+    .intro {
+      &__container {
+        background-image: url("../../assets/images/backgroundLandingIntro.svg");
+        background-repeat: no-repeat;
+        background-position: center bottom;
+      }
+      &__info {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        z-index: 2;
+      }
+
+      &__suptitle {
+        font-weight: 700;
+        font-size: 16px;
+        color: #838383;
+      }
+
+      &__title {
+        font-weight: 900;
+        color: #a7ca60;
+        font-size: 88px;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        margin: 39px 0 6px;
+        z-index: 2;
+      }
+
+      &__subtitle {
+        letter-spacing: 0.05em;
+        font-size: 39px;
+        font-weight: 700;
+        color: #4a4a4a;
+      }
+
+      &__about {
+        max-width: 380px;
+        color: #4a4a4a;
+        font-size: 14px;
+        font-weight: 250;
+        margin-bottom: 34px;
+
+        span {
+          font-weight: 400;
+        }
+      }
+
+      &__links {
+        display: flex;
+        column-gap: 30px;
+        align-items: center;
+      }
+
+      &__link {
+        font-weight: 700;
+        font-size: 12px;
+        color: #a7ca60;
+      }
+
+      &__ellipse {
+        z-index: 1;
+        top: 45%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        position: absolute;
+      }
+
+      &__aside {
+        position: relative;
+        border-radius: 24px 0 113px 0;
+        top: 55px;
+        width: 330px;
+        height: 517px;
+        background: rgba(167, 202, 96, 0.7);
+        margin-left: 96px;
+        z-index: 1;
+
+        &:before {
+          content: "";
+          width: 182px;
+          height: 106px;
+          position: absolute;
+          backdrop-filter: blur(8.699999809265137px);
+          box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
+          background: linear-gradient(
+            137deg,
+            rgba(255, 255, 255, 0.34) 0%,
+            rgba(206, 198, 198, 0.34) 100%
+          );
+          border-radius: 8px;
+          top: -35px;
+          left: -25px;
+          z-index: 3;
+        }
+
+        .aside {
+          &__logo {
+            z-index: 2;
+            font-family: "Geraspoheko";
+            color: white;
+            font-size: 343px;
+            position: absolute;
+            line-height: 325.92px;
+            left: 80px;
+            top: -30px;
+          }
+
+          &__clue {
+            position: absolute;
+            backdrop-filter: blur(8.699999809265137px);
+            box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.03);
+            background: linear-gradient(
+              137deg,
+              rgba(255, 255, 255, 0.34) 0%,
+              rgba(206, 198, 198, 0.34) 100%
+            );
+            border-radius: 8px;
+            width: 182px;
+            height: 106px;
+            bottom: 35px;
+            right: -140px;
+            z-index: 2;
+            display: flex;
+            padding: 24px 20px 18px 30px;
+            border: 0.5px solid;
+            border-image-source: linear-gradient(
+              137.79deg,
+              #ffffff 9.15%,
+              #f4f4f4 76.22%
+            );
+
+            p {
+              color: rgba(141, 141, 141, 1);
+              font-size: 14px;
+              font-weight: 300;
+              letter-spacing: 0.03em;
+              line-height: 15.96px;
+
+              span {
+                font-weight: 700;
+              }
+            }
+
+            img {
+              position: absolute;
+              top: -25px;
+              left: 0;
+            }
+
+            &:before {
+              position: absolute;
+              content: "Подсказка";
+              font-weight: 700;
+              color: rgba(205, 205, 205, 1);
+              font-size: 14px;
+              line-height: 19.18px;
+              letter-spacing: 0.03em;
+              top: -22px;
+              right: 10px;
+            }
+          }
+
+          &__cat {
+            position: absolute;
+            z-index: 3;
+            bottom: 0;
+            left: -125px;
+          }
+        }
+      }
+    }
+  }
+
+  &__button {
+    max-width: 200px;
+    width: 100%;
+    background: #a7ca60;
+    font-size: 15px;
+    color: #4a4a4a;
+    padding: 14px 0;
+    border-radius: 44px;
+    border: none;
+  }
+
+  &__opportunity {
+    background: #1e1e1e;
+    position: relative;
+
+    .background__opportunity--left {
+      position: absolute;
+      top: -50%;
+      left: -5%;
+    }
+
+    .background__opportunity--right {
+      position: absolute;
+      bottom: -361px;
+      right: 0;
+    }
+
+    .opportunity {
+      &__container {
+        padding: 105px 0 0px;
+        flex-direction: column;
+      }
+
+      &__code {
+        position: absolute;
+        top: 35px;
+        left: 55px;
+
+        &--center {
+          position: absolute;
+          right: 31%;
+          top: 34%;
+        }
+      }
+
+      &__block {
+        display: flex;
+      }
+      &__title {
+        font-family: "Geraspoheko";
+        font-weight: 400;
+        font-size: 343px;
+        line-height: 1.03;
+        margin-bottom: 0;
+        z-index: 2;
+        background: linear-gradient(360deg, #171717 0%, #2a2a2a 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        margin-left: 15px;
+        .info {
+          &__subtitle {
+            padding-left: 31px;
+            color: rgba(167, 202, 96, 1);
+            font-weight: 700;
+            font-size: 14px;
+            line-height: 16.24px;
+            margin-bottom: 30px;
+          }
+
+          &__about {
+            padding-left: 31px;
+            font-size: 14px;
+            color: rgba(238, 238, 238, 1);
+            line-height: 19.18px;
+            font-weight: 250;
+            max-width: 355px;
+            margin-bottom: 27px;
+
+            span {
+              font-weight: 400;
+            }
+          }
+
+          &__notification {
+            padding: 21px 19px 23px 31px;
+            border-radius: 8px;
+            backdrop-filter: blur(8.699999809265137px);
+            box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
+            background: linear-gradient(
+              137deg,
+              rgba(87, 87, 87, 0.34) 0%,
+              rgba(104, 104, 104, 0.34) 100%
+            );
+            position: relative;
+            border: 0.5px solid #717171;
+
+            img {
+              position: absolute;
+              width: 80.93px;
+              height: 74.19px;
+              left: -68px;
+              top: -10px;
+            }
+
+            p {
+              color: rgba(238, 238, 238, 1);
+              line-height: 19.18px;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+
+      &__subjects {
+        display: flex;
+        column-gap: 100px;
+        position: relative;
+        top: -100px;
+        z-index: 3;
+        right: -35px;
+
+        .subject {
+          display: flex;
+          flex-direction: column;
+
+          h4 {
+            text-transform: uppercase;
+            color: rgba(167, 202, 96, 1);
+            letter-spacing: 0.03em;
+            font-weight: 900;
+            font-size: 88px;
+            line-height: 86.58px;
+            margin-bottom: 0;
+          }
+
+          &__skills {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 14px;
+            margin-top: 20px;
+
+            span {
+              border: 0.5px solid rgba(167, 202, 96, 0.5);
+              border-radius: 56px;
+              padding: 8px 25px 8px;
+              color: rgba(167, 202, 96, 1);
+              font-size: 17px;
+              line-height: 20.88px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &__projects {
+    background: rgba(238, 238, 238, 1);
+
+    .projects {
+      &__container {
+        padding-top: 190px;
+        padding-bottom: 81px;
+      }
+
+      &__code {
+        position: absolute;
+        left: -170px;
+        top: 24px;
+      }
+
+      &__title {
+        font-weight: 400;
+        font-size: 343px;
+        background: linear-gradient(to bottom, #ffffff, #dbdbdb);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-family: "Geraspoheko";
+        margin: 0 auto;
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        top: -50px;
+        z-index: 2;
+        filter: drop-shadow(0px 0px 30px #00000021);
+      }
+
+      &__block {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        align-items: center;
+        z-index: 3;
+        h4 {
+          font-weight: 900;
+          font-size: 46px;
+          line-height: 98%;
+          letter-spacing: 0.03em;
+          text-transform: uppercase;
+          color: #4a4a4a;
+        }
+      }
+
+      &__examples {
+        display: flex;
+        margin-top: 98px;
+        justify-content: space-between;
+        width: 100%;
+
+        .stack__project {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          row-gap: 35px;
+
+          .project__img {
+            border-radius: 8px;
+            width: 99px;
+            height: 81px;
+            background: #a7ca60;
+            position: relative;
+
+            img {
+              position: relative;
+            }
+
+            .flag {
+              bottom: 21px;
+              right: -10px;
+            }
+
+            .rabota {
+              top: -40px;
+              right: 25px;
+            }
+
+            .hand {
+              top: -45px;
+              left: -44px;
+            }
+
+            .fly {
+              top: -30px;
+            }
+          }
+
+          p {
+            font-weight: 250;
+            font-size: 14px;
+            line-height: 129%;
+            text-align: center;
+            color: #4a4a4a;
+            max-width: 226px;
+
+            span {
+              font-weight: 500;
+            }
+          }
+        }
+      }
+
+      &__info {
+        display: flex;
+        margin: 56px auto 0;
+        column-gap: 50px;
+        align-items: center;
+        border: 1px solid #f8f8f8;
+        border-radius: 8px;
+        padding: 47px 91px 47px 55px;
+
+        p {
+          max-width: 620px;
+          font-weight: 250;
+          font-size: 14px;
+          line-height: 129%;
+          color: #4a4a4a;
+
+          span {
+            font-weight: 500;
+          }
+        }
+
+        button {
+          padding: 15px 43px;
+          font-weight: 700;
+          font-size: 15px;
+          color: #4a4a4a;
+          background: #a7ca60;
+          border-radius: 44px;
+          border: none;
+          max-height: 46px;
+          width: 201px;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+
+  &__steps {
+    background: rgb(30, 30, 30);
+    padding: 90px 0 40px;
+    position: relative;
+
+    .steps {
+      &__container {
+        flex-direction: column;
+      }
+
+      &__head {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+
+        h4 {
+          font-weight: 900;
+          font-size: 66px;
+          line-height: 98%;
+          letter-spacing: 0.03em;
+          text-transform: uppercase;
+          color: #a7ca60;
+          max-width: 380px;
+          margin-bottom: 0;
+        }
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        row-gap: 20px;
+        max-width: 499px;
+
+        p {
+          font-weight: 300;
+          font-size: 15px;
+          line-height: 140%;
+          color: #bdbdbd;
+        }
+
+        span {
+          font-weight: 700;
+        }
+      }
+
+      &__items {
+        margin-top: 115px;
+        display: flex;
+        justify-content: space-between;
+
+        .item {
+          &__wrapper {
+            position: relative;
+          }
+
+          &__head {
+            position: absolute;
+            display: flex;
+            color: #a7ca60;
+            top: -45px;
+            left: 20px;
+
+            h4 {
+              margin-bottom: 0;
+              font-weight: 700;
+              font-size: 100px;
+              text-transform: uppercase;
+              line-height: 0.8;
+            }
+
+            p {
+              font-weight: 700;
+              font-size: 12px;
+              letter-spacing: 0.01em;
+              color: #a7ca60;
+              max-width: 114px;
+            }
+          }
+        }
+      }
+
+      &__item {
+        position: relative;
+        width: 235px;
+        height: 153px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        backdrop-filter: blur(3px);
+        box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
+        background: linear-gradient(
+          137deg,
+          rgba(87, 87, 87, 0.34) 0%,
+          rgba(104, 104, 104, 0.34) 100%
+        );
+        border: 0.5px solid #717171;
+        border-radius: 8px;
+
+        .item {
+          &__info {
+            font-size: 15px;
+            line-height: 131%;
+            text-align: center;
+            color: #fff;
+            font-weight: 250;
+            max-width: 160px;
+
+            span {
+              font-weight: 700;
+            }
+          }
+        }
+      }
+
+      &__portfolio {
+        width: 100%;
+        position: absolute;
+        bottom: -40px;
+        display: flex;
+
+        img {
+          margin: 0 auto;
+        }
+      }
+
+      &__code {
+        position: absolute;
+
+        &--first {
+          top: -40px;
+          left: 70px;
+        }
+
+        &--second {
+          bottom: -40px;
+          right: 0;
+        }
+      }
+    }
+    .steps__background {
+      position: absolute;
+      right: 0;
+      top: -260px;
+    }
+  }
+
+  &__reviews {
+    background-color: #eeeeee;
+
+    .reviews {
+      &__container {
+        align-items: center;
+        column-gap: 58px;
+        padding-bottom: 48px;
+      }
+
+      &__code {
+        position: absolute;
+        mix-blend-mode: plus-lighter;
+
+        &--first {
+          top: 90px;
+          left: -180px;
+        }
+
+        &--second {
+          bottom: 0;
+          left: 400px;
+        }
+      }
+
+      &__info {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        background-color: #a7ca60;
+        border-radius: 24px 0 113px 0;
+        padding: 50px 22px 64px 44px;
+        max-width: 311px;
+        z-index: 1;
+
+        &::before {
+          content: "";
+          width: 182px;
+          height: 106px;
+          position: absolute;
+          backdrop-filter: blur(8.699999809265137px);
+          box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
+          background: linear-gradient(
+            137deg,
+            rgba(255, 255, 255, 0.34) 0%,
+            rgba(206, 198, 198, 0.34) 100%
+          );
+          border-radius: 8px;
+          top: 62px;
+          left: 200px;
+        }
+
+        &::after {
+          content: "";
+          width: 182px;
+          height: 106px;
+          position: absolute;
+          backdrop-filter: blur(8.699999809265137px);
+          box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
+          background: linear-gradient(
+            137deg,
+            rgba(255, 255, 255, 0.34) 0%,
+            rgba(206, 198, 198, 0.34) 100%
+          );
+          border-radius: 8px;
+          bottom: -30px;
+          left: -100px;
+        }
+
+        &-counter {
+          color: #ffffff;
+          font-weight: 900;
+          font-size: 124px;
+          line-height: 122px;
+        }
+
+        span {
+          color: #ffffff;
+          font-weight: 900;
+          font-size: 29px;
+          line-height: 31.61px;
+          text-transform: uppercase;
+          margin-bottom: 28px;
+        }
+        p {
+          color: #607536;
+          font-weight: 700;
+          font-size: 14px;
+          line-height: 17.22px;
+
+          &:last-child {
+            color: #ffffff;
+            font-weight: 300;
+            font-size: 14px;
+            margin-top: 37px;
+          }
+        }
+      }
+
+      &__content {
+        margin: 0 0 45px 0;
+
+        h4 {
+          text-transform: uppercase;
+          color: #4a4a4a;
+          font-weight: 900;
+          font-size: 46px;
+          line-height: 45.26px;
+          margin-bottom: 24px;
+        }
+
+        &-container {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          column-gap: 20px;
+
+          .review {
+            display: grid;
+            grid-template-columns: 45% 55%;
+            align-items: center;
+            max-width: 517px;
+            padding: 35px;
+            border-radius: 8px;
+            border: 0.5px solid #ffffff;
+            background: linear-gradient(137deg, #ffffff -10%, #dddddd 100%);
+            box-shadow: inset;
+
+            &__client {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              text-align: center;
+              color: #7e7e7e;
+              font-weight: 300;
+              font-size: 14px;
+              line-height: 16.24px;
+              margin-right: 48px;
+
+              img {
+                width: 88px;
+                height: 88px;
+                border-radius: 100px;
+              }
+
+              span {
+                color: #1e1e1e;
+                font-weight: 500;
+                font-size: 17px;
+                line-height: 19.72px;
+                margin: 18px 0 16px 0;
+              }
+            }
+
+            &__comment {
+              color: #4a4a4a;
+              font-weight: 250;
+              font-size: 14px;
+              line-height: 17px;
+            }
+          }
+        }
+
+        &-buttons {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          button {
+            background-color: #ffffff;
+            width: 70px;
+            height: 64px;
+            border-radius: 5px;
+            border: none;
+          }
+
+          button:first-child {
+            margin-bottom: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  &__contact {
+    background-color: #1e1e1e;
+
+    .contact {
+      &__container {
+      }
+    }
+  }
+}

src/pages/Statistics/Statistics.jsx

@@ -15,7 +15,7 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import emailImg from "assets/icons/emailStatistics.svg";
 import link from "assets/icons/link.svg";
 import project from "assets/icons/trackerProject.svg";

src/pages/Summary/Summary.jsx

@@ -33,9 +33,9 @@ export const Summary = () => {
   const profileInfo = useSelector(getProfileInfo);
   const [openGit, setOpenGit] = useState(false);
   const [gitInfo, setGitInfo] = useState([]);
-  const [editSummeryOpen, setEditSummeryOpen] = useState(false);
+  const [editSummaryOpen, setEditSummaryOpen] = useState(false);
   const [editSkills, setEditSkills] = useState(false);
-  const [summery, setSummery] = useState("");
+  const [summary, setSummary] = useState("");
   const [selectedSkills, setSelectedSkills] = useState([]);
   const [selectSkillsOpen, setSelectSkillsOpen] = useState(false);
   const [skillsList, seSkillsList] = useState([]);
@@ -48,7 +48,7 @@ export const Summary = () => {
   }, []);
 
   useEffect(() => {
-    setSummery(profileInfo.vc_text);
+    setSummary(profileInfo.vc_text);
     setSelectedSkills(profileInfo.skillValues);
   }, [profileInfo]);
 
@@ -69,11 +69,11 @@ export const Summary = () => {
     }).then(() => {});
   }
 
-  function editSummery() {
+  function editSummary() {
     apiRequest("/resume/edit-text", {
       method: "PUT",
       data: {
-        resume: summery
+        resume: summary
       }
     }).then(() => {
       showNotification({
@@ -116,9 +116,12 @@ export const Summary = () => {
                 alt="avatar"
               />
               <p className="summary__name">
-                {profileInfo?.fio || profileInfo?.username},{" "}
+                {profileInfo?.fio || profileInfo?.username}{" "}
-                {profileInfo.specification} разработчик
+                {profileInfo.specification}
               </p>
+              <hr />
+              <div className="summary__direction">Front End</div>
+              <div className="summary__level">Middle+</div>
             </div>
             {!openGit && (
               <button className="summary__git" onClick={() => setOpenGit(true)}>
@@ -218,21 +221,21 @@ export const Summary = () => {
               <div className="summary__sections__head">
                 <h3>Опыт работы</h3>
                 <button
-                  className={editSummeryOpen ? "edit" : ""}
+                  className={editSummaryOpen ? "edit" : ""}
                   onClick={() => {
-                    if (editSummeryOpen) {
+                    if (editSummaryOpen) {
-                      editSummery();
+                      editSummary();
                     }
-                    setEditSummeryOpen(!editSummeryOpen);
+                    setEditSummaryOpen(!editSummaryOpen);
                   }}
                 >
-                  {editSummeryOpen ? "Сохранить" : "Редактировать"}
+                  {editSummaryOpen ? "Сохранить" : "Редактировать"}
                 </button>
               </div>
-              {editSummeryOpen ? (
+              {editSummaryOpen ? (
                 <CKEditor
                   editor={ClassicEditor}
-                  data={summery}
+                  data={summary}
                   config={{
                     removePlugins: [
                       "CKFinderUploadAdapter",
@@ -240,22 +243,19 @@ export const Summary = () => {
                       "EasyImage",
                       "Image",
                       "ImageCaption",
-                      "ImageStyle",
-                      "ImageToolbar",
                       "ImageUpload",
-                      "MediaEmbed",
+                      "MediaEmbed"
-                      "BlockQuote"
                     ]
                   }}
                   onChange={(event, editor) => {
                     const data = editor.getData();
-                    setSummery(data);
+                    setSummary(data);
                   }}
                 />
               ) : (
                 <div
                   className="experience__content"
-                  dangerouslySetInnerHTML={{ __html: summery }}
+                  dangerouslySetInnerHTML={{ __html: summary }}
                 ></div>
               )}
             </div>

src/pages/Summary/summary.scss

@@ -1,5 +1,5 @@
 .summary {
-  background: #f1f1f1;
+  background: #f4f7ff;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -36,6 +36,7 @@
   }
 
   &__info {
+    width: 100%;
     min-height: 110px;
     background: white;
     border-radius: 12px;
@@ -62,7 +63,13 @@
   &__person {
     display: flex;
     align-items: center;
-    column-gap: 45px;
+    column-gap: 20px;
+
+    hr {
+      background-color: #00000081;
+      height: 30px;
+      width: 1px;
+    }
 
     @media (max-width: 825px) {
       column-gap: 20px;
@@ -74,8 +81,8 @@
   }
 
   &__avatar {
-    width: 88px;
+    width: 50px;
-    height: 88px;
+    height: 50px;
     border-radius: 100px;
 
     @media (max-width: 690px) {
@@ -97,9 +104,9 @@
   }
 
   &__name {
+    color: #1458dd;
+    font-size: 15px;
     font-weight: 500;
-    font-size: 16px;
-    line-height: 32px;
     position: relative;
 
     @media (max-width: 690px) {
@@ -118,17 +125,20 @@
     @media (max-width: 450px) {
       max-width: 160px;
     }
-
-    &:after {
-      content: "";
-      position: absolute;
-      background: #52b709;
-      border-radius: 12px;
-      width: 70%;
-      height: 8px;
-      bottom: -14px;
-      left: 0;
   }
+
+  &__direction {
+    color: #6f6f6f;
+    font-size: 14px;
+  }
+
+  &__level {
+    background-color: #1458dd;
+    color: #ffffff;
+    border-radius: 44px;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 5px 17px;
   }
 
   &__git {

src/pages/Tracker/Tracker.jsx

@@ -330,8 +330,16 @@ export const Tracker = () => {
                     setModalCreateProject(true);
                   }}
                 >
+                  <p className="create-project-btn__text">
+                    Добавить новый проект
+                  </p>
+                  <div className="create-project-btn__content">
                     <img src={addProjectImg} alt="#"></img>
-                  <p className="create-project-btn__text">Добавить проект</p>
+                    <p>
+                      Ставьте задачи, следите за прогрессом, ведите учёт
+                      рабочего времени
+                    </p>
+                  </div>
                 </BaseButton>
               </>
             )}

src/pages/Tracker/tracker.scss

@@ -130,7 +130,6 @@
         row-gap: 30px;
         display: none;
         align-items: center;
-        justify-content: center;
 
         @media (max-width: 785px) {
           row-gap: 25px;
@@ -162,21 +161,39 @@
         }
 
         .create-project-btn {
-          width: 300px;
+          width: 22%;
-          height: 83px;
+          height: 140px;
           border-radius: 12px;
           background: #ecf8e5;
           color: #000000;
           display: flex;
-          align-items: center;
+          flex-direction: column;
-          justify-content: center;
+          justify-content: flex-start;
           transition: 0.4s;
+          padding: 10px 10px;
 
           &__text {
-            text-align: left;
+            color: #1458dd;
-            font-weight: 400;
+            text-align: center;
+            font-weight: 700;
             font-size: 18px;
-            margin-left: 15px;
+            margin: 0 0 25px 0;
+          }
+
+          &__content {
+            display: flex;
+            align-items: center;
+            margin: 0 20px 0 20px;
+            font-size: 10px;
+            font-weight: 400;
+
+            img {
+              margin: 0 20px 0 0;
+            }
+
+            p {
+              text-align: left;
+            }
           }
 
           &:hover {
@@ -344,132 +361,6 @@
             }
           }
 
-          &__executor {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            cursor: pointer;
-            margin-right: 10px;
-            border-radius: 8px;
-            border: 1px solid #e3e2e2;
-            padding: 2px 6px;
-            position: relative;
-            max-width: 190px;
-            width: 100%;
-
-            @media (max-width: 915px) {
-              margin-right: 0;
-              width: 100%;
-              max-width: none;
-            }
-
-            @media (max-width: 650px) {
-              border-color: gray;
-            }
-
-            &-selected {
-              display: flex;
-              align-items: center;
-              border-radius: 8px;
-              max-width: 220px;
-              width: 100%;
-              margin-right: 10px;
-              justify-content: center;
-
-              p {
-                color: #252c32;
-                font-weight: 400;
-                font-size: 14px;
-                line-height: 24px;
-                max-width: 155px;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-
-              .avatar {
-                margin: 0 5px;
-              }
-
-              .delete {
-                cursor: pointer;
-              }
-
-              img {
-                display: flex;
-                width: 20px;
-                height: 20px;
-              }
-
-              @media (max-width: 915px) {
-                width: 100%;
-                max-width: none;
-                justify-content: start;
-
-                p {
-                  font-size: 16px;
-                  max-width: none;
-                }
-              }
-            }
-            p {
-              color: #252c32;
-              font-weight: 400;
-              font-size: 14px;
-              line-height: 24px;
-            }
-
-            img {
-              transition: all 0.15s ease;
-              margin-left: 5px;
-            }
-
-            .open {
-              transform: rotate(180deg);
-            }
-
-            &-dropdown {
-              position: absolute;
-              top: 33px;
-              left: 0;
-              background: white;
-              border-radius: 8px;
-              z-index: 5;
-              padding: 10px 10px;
-              display: flex;
-              flex-direction: column;
-              row-gap: 7px;
-              width: 100%;
-
-              .executor-dropdown__person {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                p {
-                  max-width: 155px;
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-
-                  @media (max-width: 915px) {
-                    max-width: none;
-                  }
-                }
-
-                img {
-                  width: 20px;
-                  height: 20px;
-                }
-
-                &:hover {
-                  p {
-                    font-weight: 600;
-                  }
-                }
-              }
-            }
-          }
-
           &__back {
             cursor: pointer;
             display: flex;
@@ -500,211 +391,6 @@
               display: none;
             }
           }
-
-          &__tags {
-            position: relative;
-            img {
-              transition: all 0.15s ease;
-              margin-left: 5px;
-            }
-            .open {
-              transform: rotate(180deg);
-            }
-            .tags {
-              &__add {
-                display: flex;
-                align-items: center;
-                margin: 0 10px;
-                column-gap: 5px;
-                cursor: pointer;
-                padding: 5px;
-                border-radius: 8px;
-                border: 1px solid #e3e2e2;
-                max-height: 30px;
-
-                p {
-                  white-space: nowrap;
-                  font-weight: 400;
-                  font-size: 14px;
-                  line-height: 17px;
-                }
-
-                span {
-                  width: 14px;
-                  height: 14px;
-                  font-weight: 400;
-                  line-height: 16px;
-                  border-radius: 50px;
-                  align-items: center;
-                  justify-content: center;
-                  display: flex;
-                  background: #99b4f3;
-                  color: white;
-                  font-size: 14px;
-                  transition: all 0.15s ease;
-                }
-              }
-              &__list {
-                position: absolute;
-                border-radius: 8px;
-                background: #d9d9d9;
-                z-index: 8;
-                top: 30px;
-                left: -35px;
-                width: 216px;
-                display: flex;
-                flex-direction: column;
-
-                @media (max-width: 900px) {
-                  left: 0px;
-                }
-
-                .close {
-                  cursor: pointer;
-                  width: 20px;
-                  height: 20px;
-                  position: absolute;
-                  right: 10px;
-                  top: 2px;
-                }
-
-                &__created {
-                  display: flex;
-                  flex-direction: column;
-                  row-gap: 8px;
-                  margin-top: 8px;
-                  padding: 0 8px 8px;
-
-                  .tag-item {
-                    display: flex;
-                    align-items: center;
-                    flex-direction: row;
-                    justify-content: space-between;
-                    column-gap: 5px;
-                    padding: 0px 8px;
-                    border-radius: 8px;
-                    height: 40px;
-                    max-height: 40px;
-                    background: #fff;
-
-                    &__description {
-                      font-size: 12px;
-                      word-break: break-word;
-                      max-width: 115px;
-                      max-height: 40px;
-                      overflow: hidden;
-                      text-wrap: wrap;
-                      text-overflow: ellipsis;
-                    }
-
-                    &__color {
-                      width: 22.25px;
-                      height: 23.217px;
-                      border-radius: 8px;
-                    }
-
-                    &__images {
-                      display: flex;
-                      flex-direction: column-reverse;
-                      row-gap: 3px;
-
-                      img {
-                        height: 14px;
-                        width: 14px;
-                        cursor: pointer;
-                      }
-
-                      .delete {
-                        width: 16px;
-                        height: 16px;
-                      }
-                    }
-
-                    &__info {
-                      display: flex;
-                      align-items: center;
-                      column-gap: 10px;
-
-                      &__name {
-                        font-size: 12px;
-                        font-weight: 600;
-                      }
-                    }
-                  }
-                }
-
-                .add-new-tag {
-                  display: flex;
-                  align-items: center;
-                  column-gap: 15px;
-                  border-radius: 8px;
-                  background: white;
-                  color: #252c32;
-                  height: 40px;
-                  cursor: pointer;
-                  justify-content: center;
-                  margin: 8px 8px 0px;
-
-                  p {
-                    font-size: 15px;
-                  }
-
-                  span {
-                    width: 19px;
-                    height: 19px;
-                    border-radius: 50px;
-                    align-items: center;
-                    justify-content: center;
-                    display: flex;
-                    background: #52b709;
-                    color: white;
-                    font-size: 16px;
-                    transition: all 0.15s ease;
-                  }
-                }
-
-                .form-tag {
-                  display: flex;
-                  flex-direction: column;
-                  padding: 8px;
-                  row-gap: 8px;
-
-                  .arrow {
-                    position: absolute;
-                    cursor: pointer;
-                    top: 5px;
-                    width: 15px;
-                    height: 15px;
-                    transform: rotate(180deg);
-                  }
-
-                  &__input {
-                    outline: none;
-                    border-radius: 8px;
-                    border: 1px solid #e3e2e2;
-                    font-size: 15px;
-                    padding: 5px;
-                  }
-
-                  &__btn {
-                    outline: none;
-                    border: none;
-                    background: #252c32;
-                    color: whitesmoke;
-                    margin: 0 auto 0;
-                    border-radius: 10px;
-                    font-size: 15px;
-                    padding: 5px 12px;
-                  }
-
-                  .disable {
-                    opacity: 0.5;
-                    pointer-events: none;
-                  }
-                }
-              }
-            }
-          }
         }
 
         &__container {
@@ -740,372 +426,6 @@
           }
         }
 
-        &__board {
-          background: #f5f7f9;
-          box-shadow: 0px 2px 5px rgba(60, 66, 87, 0.04),
-            0px 0px 0px 1px rgba(60, 66, 87, 0.08),
-            0px 1px 1px rgba(0, 0, 0, 0.06);
-          border-radius: 8px;
-          padding: 12px 10px 12px 8px;
-          width: 360px;
-          display: flex;
-          flex-direction: column;
-          row-gap: 10px;
-          height: fit-content;
-          position: relative;
-          transition: all 0.3s ease;
-          transform: scaleY(-1);
-          min-height: 815px;
-
-          @media (max-width: 900px) {
-            min-width: auto;
-            width: 100%;
-            max-width: none;
-            transform: scaleX(1);
-          }
-
-          .tasks-container {
-            display: flex;
-            flex-direction: column;
-            row-gap: 8px;
-            max-height: 750px;
-            overflow: auto;
-            padding: 5px;
-
-            &::-webkit-scrollbar {
-              width: 3px;
-              border-radius: 10px;
-            }
-
-            &::-webkit-scrollbar-thumb {
-              background: #cbd9f9;
-              border-radius: 20px;
-            }
-
-            &::-webkit-scrollbar-track {
-              background: #c5c0c6;
-              border-radius: 20px;
-            }
-          }
-
-          &__hover {
-            box-shadow: 0px 2px 10px #9cc480,
-              0px 0px 0px 1px rgba(60, 66, 87, 0.08),
-              0px 1px 1px rgba(0, 0, 0, 0.06);
-          }
-
-          .task__hover {
-            box-shadow: 0 0 5px gray;
-          }
-
-          &__item {
-            width: 328px;
-            padding: 6px 10px 8px 10px;
-            position: relative;
-            box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06),
-              0px 5px 3px -2px rgba(0, 0, 0, 0.02);
-            border-radius: 6px;
-            background: #ffffff;
-            cursor: pointer;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            transition: 0.4s;
-
-            &:hover {
-              transform: scale(1.025);
-              transition: 0.3s;
-            }
-
-            @media (max-width: 900px) {
-              width: 100%;
-              max-height: none;
-
-              &:hover {
-                transform: none;
-              }
-            }
-
-            &__hide {
-              opacity: 0;
-            }
-
-            &__title {
-              display: flex;
-              justify-content: space-between;
-              position: relative;
-
-              p {
-                color: #1a1919;
-                font-weight: 500;
-                font-size: 16px;
-                line-height: 20px;
-                margin-bottom: 0;
-                max-height: 100px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                -webkit-line-clamp: 3;
-              }
-
-              span {
-                cursor: pointer;
-                display: flex;
-                border-radius: 6px;
-                align-items: center;
-                justify-content: center;
-                font-size: 20px;
-                padding-bottom: 10px;
-                width: 24px;
-                height: 24px;
-                border: 1px solid #dddddd;
-              }
-            }
-
-            &__description {
-              margin: 4px 0;
-              color: #5c6165;
-              font-weight: 400;
-              font-size: 14px;
-              line-height: 120%;
-              max-height: 100px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              display: -webkit-box;
-              -webkit-line-clamp: 2;
-              -webkit-box-orient: vertical;
-            }
-
-            &__container {
-              display: flex;
-              justify-content: space-between;
-            }
-
-            &__info {
-              display: flex;
-              column-gap: 10px;
-              align-items: center;
-              justify-content: space-between;
-              pointer-events: none;
-              margin-top: 5px;
-
-              &__tags {
-                display: flex;
-                column-gap: 5px;
-              }
-
-              &__more {
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                span {
-                  font-weight: 500;
-                  font-size: 12px;
-                  line-height: 15px;
-                  color: #6e7c87;
-                  margin-left: 5px;
-                }
-              }
-
-              &__avatars {
-                position: relative;
-                img {
-                  position: relative;
-                }
-                img:first-child {
-                  right: -15px;
-                  z-index: 2;
-                }
-              }
-            }
-
-            &__priority {
-              display: flex;
-              align-items: center;
-              column-gap: 5px;
-              margin-top: 3px;
-
-              p {
-                font-weight: 500;
-                font-size: 14px;
-              }
-
-              span {
-                font-weight: 500;
-                font-size: 14px;
-              }
-
-              .high {
-                color: red;
-              }
-
-              .middle {
-                color: #cece00;
-              }
-
-              .low {
-                color: green;
-              }
-            }
-
-            &__dead-line {
-              display: flex;
-              align-items: center;
-              column-gap: 5px;
-
-              p {
-                font-weight: 500;
-                font-size: 14px;
-                color: #1458dd;
-              }
-
-              span {
-                font-weight: 500;
-                font-size: 14px;
-              }
-
-              img {
-                margin-top: -2px;
-                width: 18px;
-              }
-            }
-
-            &__executor {
-              display: flex;
-              align-items: center;
-              font-size: 14px;
-              font-weight: 500;
-              column-gap: 5px;
-
-              span {
-                max-width: 210px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-              }
-
-              img {
-                width: 25px;
-                height: 25px;
-              }
-            }
-
-            &__tags {
-              display: flex;
-              flex-wrap: wrap;
-              column-gap: 6px;
-              row-gap: 3px;
-              margin: 3px 0;
-
-              .tag-item {
-                padding: 3px 10px;
-                border-radius: 10px;
-                color: white;
-                font-size: 12px;
-              }
-            }
-          }
-
-          .open-items {
-            cursor: pointer;
-            border-radius: 44px;
-            width: 33px;
-            height: 33px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            position: absolute;
-            bottom: -15px;
-            font-size: 20px;
-            left: 165px;
-            color: white;
-          }
-
-          .more-items {
-            background: #8bcc60;
-          }
-
-          .less-items {
-            background: #f92828;
-          }
-
-          &__more {
-            padding-bottom: 50px;
-          }
-
-          .column__select {
-            position: absolute;
-            padding: 15px;
-            background: #e1fccf;
-            border-radius: 12px;
-            right: -20px;
-            top: 5px;
-            z-index: 7;
-            row-gap: 10px;
-            display: flex;
-            flex-direction: column;
-
-            @media (max-width: 910px) {
-              right: 10px;
-              top: 40px;
-            }
-
-            &__item {
-              cursor: pointer;
-              display: flex;
-              align-content: center;
-              img {
-                margin-right: 5px;
-              }
-
-              span {
-                font-size: 14px;
-              }
-            }
-          }
-
-          &__no-items {
-            font-weight: 500;
-            font-size: 25px;
-            transform: scaleY(-1);
-
-            @media (max-width: 900px) {
-              transform: none;
-            }
-          }
-
-          &__no-tasks {
-            display: flex;
-            flex-direction: column;
-            transform: scaleY(-1);
-
-            &-info {
-              display: flex;
-              align-items: center;
-              margin-bottom: 15px;
-              img {
-                width: 27px;
-                height: 27px;
-                margin-right: 5px;
-              }
-
-              p {
-                font-weight: 700;
-                font-size: 22px;
-                line-height: 32px;
-              }
-            }
-
-            &-more {
-              font-size: 14px;
-              line-height: 22px;
-            }
-
-            @media (max-width: 900px) {
-              transform: none;
-            }
-          }
-        }
-
         .board {
           &__head {
             position: relative;
@@ -1371,7 +691,7 @@
                 gap: 10px;
 
                 p {
-                  width: 55px;
+                  width: 63px;
                   font-size: 12px;
                   color: #5b6871;
                   font-weight: 400;
@@ -1941,7 +1261,7 @@
   .table {
     &__search {
       display: flex;
-      background: #F0F2F5;
+      background: #f0f2f5;
       border-radius: 5px;
       width: 100%;
       padding: 14px 12px;
@@ -1959,11 +1279,11 @@
         border: none;
         outline: none;
         font-size: 16px;
-        color: #9BABC5;
+        color: #9babc5;
         width: 100%;
 
         &::placeholder {
-          color: #9BABC5;
+          color: #9babc5;
         }
       }
     }
@@ -1978,12 +1298,12 @@
         width: 32px;
         border-radius: 5px;
         height: 32px;
-        color: #2E3A59;
+        color: #2e3a59;
       }
 
       .switch {
         border: none;
-        background: #F0F2F5;
+        background: #f0f2f5;
         font-weight: 600;
       }
 
@@ -1999,12 +1319,12 @@
       background: white;
 
       .page {
-        border: 1px solid #E8ECF8;
+        border: 1px solid #e8ecf8;
         background: none;
 
         &--active {
           border: none;
-          background: #9DA65D;
+          background: #9da65d;
           color: white;
         }
       }
@@ -2012,17 +1332,20 @@
   }
 
   table {
-    grid-template-columns: minmax(0px, 2fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);
+    grid-template-columns: minmax(0px, 2fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(
+        0px,
+        1fr
+      );
     th {
       border-top: none;
-      border-bottom: 1px solid #F5F6F8;
+      border-bottom: 1px solid #f5f6f8;
-      color: #2E3A59;
+      color: #2e3a59;
       padding: 0 7.5px 15px;
     }
 
     td {
       padding: 22px 7.5px;
-      color: #2E3A59;
+      color: #2e3a59;
       border-top: none;
 
       p {

src/pages/ViewReport/ViewReport.jsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Link, useParams } from "react-router-dom";
 
+import { getProfileInfo } from "@redux/outstaffingSlice";
 import { setEditReport } from "@redux/reportSlice";
 
 import {
@@ -9,6 +10,7 @@ import {
   getCreatedDate,
   hourOfNum
 } from "@utils/calendarHelper";
+import { urlForLocal } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
@@ -20,8 +22,9 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
-import arrowSwitchDate from "assets/icons/arrows/arrowViewReport.png";
+import arrowSwitchDate from "assets/icons/arrows/arrowCalendar_right.png";
 import arrow from "assets/icons/arrows/left-arrow.png";
+import avatarMok from "assets/images/avatarMok.png";
 
 import "./viewReport.scss";
 
@@ -31,6 +34,7 @@ export const ViewReport = () => {
   const [previousReportDay] = useState(new Date(params.date));
   const [nextReportDay] = useState(new Date(params.date));
 
+  const profileInfo = useSelector(getProfileInfo);
   const [taskText, setTaskText] = useState([]);
   const [difficulties, setDifficulties] = useState([]);
   const [tomorrowTask, setTomorrowTask] = useState([]);
@@ -140,6 +144,33 @@ export const ViewReport = () => {
             <img src={arrow} alt="#" />
             <p>Вернуться</p>
           </Link>
+          <div className="summary__info">
+            <div className="summary__person">
+              <img
+                src={
+                  profileInfo?.photo
+                    ? urlForLocal(profileInfo.photo)
+                    : avatarMok
+                }
+                className="summary__avatar"
+                alt="avatar"
+              />
+              <p className="summary__name">
+                {profileInfo?.fio || profileInfo?.username}{" "}
+                {profileInfo.specification}
+              </p>
+              <hr />
+              <div className="summary__direction">Front End</div>
+              <div className="summary__level">Middle+</div>
+            </div>
+            <div className="summary__skill">
+              <p>Ключевые навыки:</p>
+              <div>Java</div>
+              <div>Java</div>
+              <div>Solid</div>
+              <div>Java</div>
+            </div>
+          </div>
           {localStorage.getItem("role_status") !== "18" && (
             <div className="view-report__bar">
               <Link
@@ -170,6 +201,10 @@ export const ViewReport = () => {
             </div>
           )}
         </div>
+
+        {loader && <Loader width={75} height={75} />}
+        {Boolean(taskText.length) && (
+          <div className="view-report__content">
             <div className="view-report__switch-date">
               <div onClick={() => previousDay()}>
                 <Link
@@ -192,9 +227,9 @@ export const ViewReport = () => {
                 }`}
               >
                 <Link
-              to={`/profile/calendar/view/${getCreatedDate(nextReportDay)}/${
+                  to={`/profile/calendar/view/${getCreatedDate(
-                params.id
+                    nextReportDay
-              }`}
+                  )}/${params.id}`}
                 >
                   <div className={`view-report__switch-date__next switch-date`}>
                     <img src={arrowSwitchDate} alt="arrow" />
@@ -202,55 +237,36 @@ export const ViewReport = () => {
                 </Link>
               </div>
             </div>
-        {loader && <Loader width={75} height={75} />}
+            <div className="view-report__done">
-        {Boolean(taskText.length) && (
+              <h2>Выполненные задачи</h2>
-          <div className="view-report__content">
-            <div className="table__container">
-              <table className="view-report__done">
-                <thead>
-                  <tr>
-                    <th>
-                      <p>Выполненные задачи</p>
-                    </th>
-                    <th>
-                      <p>Время</p>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
               {taskText.length &&
                 taskText.map((task, index) => {
                   return (
-                        <tr key={task.id}>
+                    <div className="view-report__done-task" key={task.id}>
-                          <td>
+                      <div>
                         <p>
                           {index + 1}. {task.task}
                         </p>
-                          </td>
+                      </div>
-                          <td>
+
                       <div className="view-report__done__hours__item">
                         <span>{Math.floor(task.hours)}</span>
                         <p className="hours">
-                                {hourOfNum(Math.floor(task.hours))}
+                          / {hourOfNum(Math.floor(task.hours))}
                         </p>
                       </div>
-                          </td>
+                      <div>Задача ( On Review ) - Уведомления </div>
-                        </tr>
+                    </div>
                   );
                 })}
-                  <tr>
+
-                    <td></td>
+              <p className="view-report__done-total-hours">
-                    <td>
+                Всего: {totalHours} <span>/ {hourOfNum(totalHours)}</span>
-                      <span>
+              </p>
-                        Всего: {totalHours} {hourOfNum(totalHours)}
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
             </div>
+            <div className="view-report__addition">
               {Boolean(difficulties.length) && (
-              <div className="view-report__item">
+                <div className="view-report__addition-item">
                   <h3>Возникшие сложности</h3>
                   {difficulties.map((item, index) => {
                     return <p key={index}>{item}</p>;
@@ -258,7 +274,7 @@ export const ViewReport = () => {
                 </div>
               )}
               {Boolean(tomorrowTask.length) && (
-              <div className="view-report__item">
+                <div className="view-report__addition-item">
                   <h3>Что планируется сделать завтра?</h3>
                   {tomorrowTask.map((item, index) => {
                     return <p key={index}>{item}</p>;
@@ -266,6 +282,7 @@ export const ViewReport = () => {
                 </div>
               )}
             </div>
+          </div>
         )}
         {!Boolean(taskText.length) && !loader && (
           <div className="view-report__no-task">

src/pages/ViewReport/viewReport.scss

@@ -4,6 +4,25 @@
   flex-direction: column;
   min-height: 100vh;
 
+  .summary__skill {
+    color: #6f6f6f;
+    font-size: 14px;
+    font-weight: 300;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 10px;
+
+    div {
+      font-size: 12px;
+      font-weight: 400;
+
+      border: #8dc63f 0.5px solid;
+      border-radius: 44px;
+      padding: 3px 20px;
+    }
+  }
+
   .container {
     max-width: 1160px;
     display: flex;
@@ -16,6 +35,12 @@
     }
   }
 
+  &__content {
+    background-color: #ffffff;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+  }
+
   &__info {
     display: flex;
     flex-direction: column;
@@ -39,13 +64,18 @@
   &__back {
     display: flex;
     align-items: center;
-    column-gap: 30px;
+    column-gap: 10px;
     margin-top: 20px;
     cursor: pointer;
 
     &:hover {
       text-decoration: none;
     }
+
+    img {
+      width: 23px;
+    }
+
     p {
       margin-bottom: 0;
       font-weight: 400;
@@ -60,8 +90,9 @@
     display: flex;
     margin-top: 20px;
     background: #ffffff;
-    border-radius: 12px;
+    border-top-left-radius: 12px;
-    padding: 20px 33px;
+    border-top-right-radius: 12px;
+    padding: 55px;
     align-items: center;
     column-gap: 20px;
     height: 72px;
@@ -121,10 +152,10 @@
 
   &__switch-date {
     display: flex;
-    margin: 20px 0;
-    justify-content: center;
     column-gap: 30px;
     align-items: center;
+    padding: 20px 20px 20px 30px;
+    border-bottom: #eeeeee 1px solid;
 
     @media (max-width: 500px) {
       column-gap: 0;
@@ -132,17 +163,16 @@
     }
 
     p {
-      font-weight: 400;
+      font-weight: 500;
-      font-size: 18px;
+      font-size: 22px;
-      line-height: 32px;
+      color: #2e3a59;
-      color: #000000;
     }
 
     .switch-date {
-      width: 48px;
+      width: 20px;
-      height: 48px;
+      height: 47px;
-      background: #8dc63f;
+      background-color: #e5f1fb;
-      border-radius: 50px;
+      border-radius: 5px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -186,6 +216,34 @@
     border-collapse: separate;
     border-spacing: 28px 0;
 
+    h2 {
+      color: #1458dd;
+      font-size: 20px;
+      font-weight: 500;
+      padding: 35px;
+    }
+
+    &-task {
+      display: grid;
+      grid-template-columns: 40% 15% 30%;
+      align-items: center;
+      font-size: 15px;
+      font-weight: 500;
+      color: #111112;
+      justify-content: space-evenly;
+      margin: 0 0 20px 0;
+
+      div {
+        background-color: #f4f7ff;
+        height: 61px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 10px;
+        padding: 10px 20px;
+      }
+    }
+
     @media (max-width: 1205px) {
       display: grid;
       border-collapse: collapse;
@@ -309,57 +367,17 @@
       }
 
       &__item {
-        display: flex;
-        column-gap: 25px;
-        align-items: center;
-        min-width: 155px;
-
-        .hours {
-          font-size: 15px;
-
-          @media (max-width: 1170px) {
-            font-size: 13px;
-            text-align: center;
-          }
-        }
-
-        @media (max-width: 900px) {
-          column-gap: 0;
-          justify-content: space-between;
-          min-width: auto;
-          width: 100%;
-        }
-
-        @media (max-width: 775px) {
-          flex-direction: column;
-          justify-content: center;
-          row-gap: 10px;
-        }
-
         span {
-          max-width: 48px;
-          height: 48px;
-          background: #8dc63f;
-          border-radius: 50px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
           font-weight: 700;
-          font-size: 22px;
+          font-size: 20px;
-          line-height: 32px;
           color: #000000;
-          width: 100%;
+          margin: 5px;
-
-          @media (max-width: 900px) {
-            max-width: 40px;
-            height: 40px;
-          }
         }
 
         p {
           font-weight: 400;
-          font-size: 12px;
+          font-size: 15px;
-          line-height: 32px;
+          color: #6f6f6f;
         }
       }
 
@@ -369,25 +387,42 @@
         line-height: 32px;
       }
     }
+
+    &-total-hours {
+      color: #000000;
+      font-size: 20px;
+      font-weight: 500;
+      margin: 35px 0 0 30px;
+
+      span {
+        font-weight: 400;
+        font-size: 15px;
+        color: #6f6f6f;
+      }
+    }
   }
 
-  &__item {
+  &__addition {
+    display: grid;
+    grid-template-columns: 55% 45%;
+    column-gap: 15px;
+    padding: 35px;
+
+    &-item {
       display: flex;
       flex-direction: column;
       row-gap: 10px;
-    background: #ffffff;
+      background-color: #f4f7ff;
-    border-radius: 12px;
+      border-radius: 10px;
-    margin: 20px 0;
       padding: 15px;
 
       h3 {
+        color: #1458dd;
         font-weight: 500;
-      font-size: 22px;
+        font-size: 20px;
-      line-height: 32px;
 
         @media (max-width: 650px) {
           font-size: 16px;
-        line-height: 20px;
         }
       }
 
@@ -400,9 +435,6 @@
         }
       }
     }
-
-  &__item:last-child {
-    margin-bottom: 0;
   }
 
   &__no-task {

src/pages/WelcomePage/WelcomePage.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router";
+
+import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
+import BaseButton from "@components/Common/BaseButton/BaseButton";
+import { Footer } from "@components/Common/Footer/Footer";
+import { Loader } from "@components/Common/Loader/Loader";
+import SideBar from "@components/SideBar/SideBar";
+
+import ITguild from "assets/images/logo/ITguild.svg";
+
+import "./welcomePage.scss";
+
+export const WelcomePage = () => {
+  const [loader, setLoader] = useState(false);
+  const navigate = useNavigate();
+
+  return (
+    <div className="welcome-page">
+      <AuthHeader />
+
+      <div className="welcome-page-component">
+        <div className="welcome-page-component__title">
+          <img src={ITguild}></img>
+          <h1>
+            Добро пожаловать в <span>ITGuild</span>
+          </h1>
+        </div>
+        <div className="welcome-page-component__text">
+          <p>
+            Создавайте и редактируйте задачи и проекты вместе с другими
+            участниками
+            <br /> команды. Сервис для работы с IT специалистами
+          </p>
+        </div>
+
+        <div className="button-box">
+          {loader ? (
+            <Loader />
+          ) : (
+            <BaseButton
+              onClick={() => {
+                setLoader(true);
+                navigate("/profile");
+              }}
+              styles="button-box__submit"
+            >
+              Начать
+            </BaseButton>
+          )}
+        </div>
+      </div>
+      <SideBar />
+      <Footer />
+    </div>
+  );
+};

src/pages/WelcomePage/welcomePage.scss

@@ -0,0 +1,44 @@
+.welcome-page {
+  overflow: hidden;
+  background-color: #f1f1f1;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  &-component {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    flex: 1;
+
+    &__title {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-weight: 500;
+      font-size: 30px;
+      line-height: 32px;
+      margin-bottom: 45px;
+
+      img {
+        width: 151px;
+        margin: 70px 0 19px 0;
+      }
+    }
+
+    &__text {
+      text-align: center;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 22px;
+      margin-bottom: 45px;
+    }
+
+    .button-box__submit {
+      width: 174px;
+      height: 50px;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+}

src/pages/roles/GuestPage.jsx

@@ -10,11 +10,14 @@ import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo";
 import { Forms } from "@pages/Forms/Forms";
 import { FrequentlyAskedQuestion } from "@pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
 import { FrequentlyAskedQuestions } from "@pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
+import { Landing } from "@pages/Landing/Landing";
 import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate";
 import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate";
 import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting";
 import { SingleReportPage } from "@pages/SingleReportPage/SingleReportPage";
+import { Stack } from "@pages/Stack/Stack";
 import { TrackerIntro } from "@pages/TrackerIntro/TrackerIntro";
+import { WelcomePage } from "@pages/WelcomePage/WelcomePage";
 
 import { FreeDevelopers } from "@components/FreeDevelopers/FreeDevelopers";
 
@@ -22,6 +25,9 @@ export const GuestPage = () => {
   return (
     <Routes>
       <Route exact path="/auth" element={<Auth />} />
+      <Route exact path="/welcome-page" element={<WelcomePage />} />
+      <Route exact path="/stack" element={<Stack />} />
+      <Route exact path="/" element={<Landing />} />
       <Route path="*" element={<Navigate to="/auth" replace />} />
       <Route exact path="/tracker-intro" element={<TrackerIntro />} />
       <Route exact path="/forms" element={<Forms />} />