6 コミット
67c9938c9b
...
695c7d5678
6 コミット
67c9938c9b
...
695c7d5678
| 作成者 | SHA1 | メッセージ | 日付 |
|---|---|---|---|
 Ajay_S
|
695c7d5678 | completed techinical interview page and time slot page | 3年前 |
|
Ajay_S
|
1a903e36af | completed preliminary round results page | 3年前 |
|
Ajay_S
|
eed212f393 | partially created questions component | 3年前 |
|
Ajay_S
|
e17c3d971f | partially completed quiz page functionality | 3年前 |
|
Ajay_S
|
a09ac91883 | soft coded interviewround and skill info data | 3年前 |
|
Ajay_S
|
a59ed2686d | partially created quiz and options component | 3年前 |
-
+17 -2src/App.tsx
-
+3 -0src/assets/icons/close-filled.svg
-
+105 -0src/assets/icons/desktop-particles.svg
-
+101 -0src/assets/icons/good_job.svg
-
+4 -0src/common/styles/global.scss
-
+2 -2src/components/stepsHeader/StepHeader.tsx
-
+89 -0src/components/timeSlot/TimeSlot.module.scss
-
+57 -0src/components/timeSlot/TimeSlot.tsx
-
+40 -0src/pages/Quiz/Options.module.scss
-
+36 -0src/pages/Quiz/Options.tsx
-
+40 -0src/pages/Quiz/Question.module.scss
-
+33 -0src/pages/Quiz/Question.tsx
-
+115 -0src/pages/Quiz/Quiz.module.scss
-
+57 -0src/pages/Quiz/Quiz.tsx
-
+82 -67src/pages/interviewRounds/InterviewRounds.tsx
-
+0 -1src/pages/interviewRounds/Steps.module.scss
-
+1 -1src/pages/preliminaryRound/PreliminaryRound.tsx
-
+133 -0src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss
-
+57 -0src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx
-
+131 -16src/pages/skillInformationStep/SkillInformationStep.tsx
-
+38 -0src/pages/technicalInterview/TechnicalInterview.module.scss
-
+29 -0src/pages/technicalInterview/TechnicalInterview.tsx
+ 17
- 2
src/App.tsx
ファイルの表示
| @@ -19,10 +19,13 @@ import '@ionic/react/css/flex-utils.css'; | |||||
| import '@ionic/react/css/display.css'; | import '@ionic/react/css/display.css'; | ||||
| import './App.scss'; | import './App.scss'; | ||||
| import ConnectWithUs from './pages/connectWithUs/ConnectWithUs'; | |||||
| import InterviewRounds from './pages/interviewRounds/InterviewRounds'; | import InterviewRounds from './pages/interviewRounds/InterviewRounds'; | ||||
| import SkillInformationStep from './pages/skillInformationStep/SkillInformationStep'; | import SkillInformationStep from './pages/skillInformationStep/SkillInformationStep'; | ||||
| import PreliminaryRound from './pages/preliminaryRound/PreliminaryRound'; | import PreliminaryRound from './pages/preliminaryRound/PreliminaryRound'; | ||||
| import Quiz from './pages/Quiz/Quiz'; | |||||
| import PreliminaryRoundResults from './pages/preliminaryRoundResults/PreliminaryRoundResults'; | |||||
| import TechnicalInterview from './pages/technicalInterview/TechnicalInterview'; | |||||
| import TimeSlot from './components/timeSlot/TimeSlot'; | |||||
| @@ -38,9 +41,21 @@ const App: React.FC = () => ( | |||||
| <Route exact path="/skillInformationStep"> | <Route exact path="/skillInformationStep"> | ||||
| <SkillInformationStep /> | <SkillInformationStep /> | ||||
| </Route> | </Route> | ||||
| <Route exact path="/PreliminaryRound"> | |||||
| <Route exact path="/quiz"> | |||||
| <Quiz /> | |||||
| </Route> | |||||
| <Route exact path="/preliminaryRound"> | |||||
| <PreliminaryRound /> | <PreliminaryRound /> | ||||
| </Route> | </Route> | ||||
| <Route exact path="/preliminaryRoundResults"> | |||||
| <PreliminaryRoundResults /> | |||||
| </Route> | |||||
| <Route exact path="/technicalInterview"> | |||||
| <TechnicalInterview /> | |||||
| </Route> | |||||
| <Route exact path="/timeSlot"> | |||||
| <TimeSlot /> | |||||
| </Route> | |||||
| <Route exact path="/"> | <Route exact path="/"> | ||||
| <Redirect to="/interviewRounds" /> | <Redirect to="/interviewRounds" /> | ||||
| </Route> | </Route> | ||||
+ 3
- 0
src/assets/icons/close-filled.svg
ファイルの表示
| @@ -0,0 +1,3 @@ | |||||
| <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"> | |||||
| <path id="close-filled" d="M11.25,2.25a9,9,0,1,0,9,9A8.945,8.945,0,0,0,11.25,2.25Zm3.471,13.5L11.25,12.279,7.779,15.75,6.75,14.721l3.471-3.471L6.75,7.779,7.779,6.75l3.471,3.471L14.721,6.75,15.75,7.779,12.279,11.25l3.471,3.471Z" transform="translate(-2.25 -2.25)" fill="#d13232"/> | |||||
| </svg> | |||||
+ 105
- 0
src/assets/icons/desktop-particles.svg
ファイルの表示
| @@ -0,0 +1,105 @@ | |||||
| <svg xmlns="http://www.w3.org/2000/svg" width="1372.384" height="684.949" viewBox="0 0 1372.384 684.949"> | |||||
| <g id="Group_4325" data-name="Group 4325" transform="translate(6.384 -91.801)"> | |||||
| <g id="Ellipse_14" data-name="Ellipse 14" transform="translate(199 194.552) rotate(-180)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15"> | |||||
| <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/> | |||||
| <circle cx="13.5" cy="13.5" r="11" fill="none"/> | |||||
| </g> | |||||
| <g id="Ellipse_105" data-name="Ellipse 105" transform="translate(488 662.552) rotate(-180)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15"> | |||||
| <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/> | |||||
| <circle cx="13.5" cy="13.5" r="11" fill="none"/> | |||||
| </g> | |||||
| <g id="Ellipse_17" data-name="Ellipse 17" transform="translate(256 414.552) rotate(-180)" fill="none" stroke="#313131" stroke-width="5"> | |||||
| <circle cx="8.5" cy="8.5" r="8.5" stroke="none"/> | |||||
| <circle cx="8.5" cy="8.5" r="6" fill="none"/> | |||||
| </g> | |||||
| <path id="Polygon_1" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(448.042 262.052) rotate(-137)" fill="#626262"/> | |||||
| <path id="Polygon_22" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(53.042 580.941) rotate(-137)" fill="#626262"/> | |||||
| <path id="Polygon_3" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(187.358 469.552) rotate(-137)" fill="#626262"/> | |||||
| <path id="Polygon_23" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(146.843 623.851) rotate(-137)" fill="#626262"/> | |||||
| <path id="Polygon_2" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(427.82 552.723) rotate(-137)" fill="#2e2e2e"/> | |||||
| <path id="Polygon_24" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(427.82 757.78) rotate(-137)" fill="#2e2e2e"/> | |||||
| <rect id="Rectangle_40" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, 0.469, -0.469, -0.883, 172, 277.796)" fill="#383838"/> | |||||
| <rect id="Rectangle_296" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, 0.469, -0.469, -0.883, 388.5, 665.796)" fill="#383838"/> | |||||
| <rect id="Rectangle_41" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(435.696 169.606) rotate(115)" fill="#383838"/> | |||||
| <rect id="Rectangle_297" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(129.444 668.901) rotate(115)" fill="#383838"/> | |||||
| <rect id="Rectangle_43" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(278.583 593.532) rotate(115)" fill="#383838"/> | |||||
| <rect id="Rectangle_42" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(425.938 425) rotate(115)" fill="#383838"/> | |||||
| <rect id="Rectangle_301" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(312.521 234.634) rotate(115)" fill="#383838"/> | |||||
| <rect id="Rectangle_299" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(235.938 760.057) rotate(115)" fill="#383838"/> | |||||
| <rect id="Rectangle_298" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(298.098 502.258) rotate(115)" fill="#383838"/> | |||||
| <rect id="Rectangle_300" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(298.098 707.315) rotate(115)" fill="#383838"/> | |||||
| <circle id="Ellipse_15" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(402 295.552) rotate(-180)" fill="#383838"/> | |||||
| <circle id="Ellipse_107" data-name="Ellipse 107" cx="5" cy="5" r="5" transform="translate(288.583 105.185) rotate(-180)" fill="#383838"/> | |||||
| <circle id="Ellipse_106" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(7 614.441) rotate(-180)" fill="#383838"/> | |||||
| <circle id="Ellipse_16" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(142 209.552) rotate(-180)" fill="#383838"/> | |||||
| <circle id="Ellipse_18" data-name="Ellipse 18" cx="16.5" cy="16.5" r="16.5" transform="translate(139 502.552) rotate(-180)" fill="#383838"/> | |||||
| <circle id="Ellipse_104" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(266 658.552) rotate(-180)" fill="#383838"/> | |||||
| <g id="Ellipse_14-2" data-name="Ellipse 14" transform="translate(1050 674)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15"> | |||||
| <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/> | |||||
| <circle cx="13.5" cy="13.5" r="11" fill="none"/> | |||||
| </g> | |||||
| <g id="Ellipse_105-2" data-name="Ellipse 105" transform="translate(1339 206)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15"> | |||||
| <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/> | |||||
| <circle cx="13.5" cy="13.5" r="11" fill="none"/> | |||||
| </g> | |||||
| <g id="Ellipse_17-2" data-name="Ellipse 17" transform="translate(1117 454)" fill="none" stroke="#313131" stroke-width="5"> | |||||
| <circle cx="8.5" cy="8.5" r="8.5" stroke="none"/> | |||||
| <circle cx="8.5" cy="8.5" r="6" fill="none"/> | |||||
| </g> | |||||
| <path id="Polygon_1-2" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(1310.684 620.822) rotate(-43)" fill="#626262"/> | |||||
| <path id="Polygon_22-2" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(915.684 301.933) rotate(-43)" fill="#626262"/> | |||||
| <path id="Polygon_3-2" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(1057.515 406.314) rotate(-43)" fill="#626262"/> | |||||
| <path id="Polygon_23-2" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(1017 252.015) rotate(-43)" fill="#626262"/> | |||||
| <path id="Polygon_2-2" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(1289.942 330.635) rotate(-43)" fill="#2e2e2e"/> | |||||
| <path id="Polygon_24-2" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(1289.942 125.578) rotate(-43)" fill="#2e2e2e"/> | |||||
| <rect id="Rectangle_40-2" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, -0.469, 0.469, -0.883, 1042.958, 604)" fill="#383838"/> | |||||
| <rect id="Rectangle_296-2" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, -0.469, 0.469, -0.883, 1262.518, 210.246)" fill="#383838"/> | |||||
| <rect id="Rectangle_41-2" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(1300.387 705.152) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_297-2" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(994.135 205.857) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_43-2" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(1147.805 279.113) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_42-2" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(1290.629 449.758) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_301-2" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(1177.212 640.124) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_299-2" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(1100.629 114.701) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_298-2" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(1162.789 372.5) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_300-2" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(1162.789 167.443) rotate(-115)" fill="#383838"/> | |||||
| <circle id="Ellipse_15-2" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(1270 573)" fill="#383838"/> | |||||
| <circle id="Ellipse_107-2" data-name="Ellipse 107" cx="5" cy="5" r="5" transform="translate(1156.583 763.366)" fill="#383838"/> | |||||
| <circle id="Ellipse_106-2" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(875 254.111)" fill="#383838"/> | |||||
| <circle id="Ellipse_16-2" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(1004 659)" fill="#383838"/> | |||||
| <circle id="Ellipse_18-2" data-name="Ellipse 18" cx="10" cy="10" r="10" transform="translate(984 366)" fill="#383838"/> | |||||
| <circle id="Ellipse_104-2" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(1131 210)" fill="#383838"/> | |||||
| <g id="Ellipse_14-3" data-name="Ellipse 14" transform="translate(623.5 674)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15"> | |||||
| <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/> | |||||
| <circle cx="13.5" cy="13.5" r="11" fill="none"/> | |||||
| </g> | |||||
| <g id="Ellipse_105-3" data-name="Ellipse 105" transform="translate(912.5 206)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15"> | |||||
| <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/> | |||||
| <circle cx="13.5" cy="13.5" r="11" fill="none"/> | |||||
| </g> | |||||
| <g id="Ellipse_17-3" data-name="Ellipse 17" transform="translate(690.5 454)" fill="none" stroke="#313131" stroke-width="5"> | |||||
| <circle cx="8.5" cy="8.5" r="8.5" stroke="none"/> | |||||
| <circle cx="8.5" cy="8.5" r="6" fill="none"/> | |||||
| </g> | |||||
| <path id="Polygon_1-3" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(884.184 620.822) rotate(-43)" fill="#626262"/> | |||||
| <path id="Polygon_22-3" data-name="Polygon 22" d="M10.5,0,21,19H0Z" transform="translate(489.184 301.933) rotate(-43)" fill="#626262"/> | |||||
| <path id="Polygon_3-3" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(631.015 406.314) rotate(-43)" fill="#626262"/> | |||||
| <path id="Polygon_23-3" data-name="Polygon 23" d="M5.362,0l5.362,9.7H0Z" transform="translate(590.5 252.015) rotate(-43)" fill="#626262"/> | |||||
| <path id="Polygon_2-3" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(863.442 330.635) rotate(-43)" fill="#2e2e2e"/> | |||||
| <path id="Polygon_24-3" data-name="Polygon 24" d="M10.855,0,21.71,19.642H0Z" transform="translate(863.442 125.578) rotate(-43)" fill="#2e2e2e"/> | |||||
| <rect id="Rectangle_40-3" data-name="Rectangle 40" width="15" height="15" transform="matrix(-0.883, -0.469, 0.469, -0.883, 616.458, 604)" fill="#383838"/> | |||||
| <rect id="Rectangle_296-3" data-name="Rectangle 296" width="8.483" height="8.483" transform="matrix(-0.883, -0.469, 0.469, -0.883, 836.018, 210.246)" fill="#383838"/> | |||||
| <rect id="Rectangle_41-3" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(873.887 705.152) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_297-3" data-name="Rectangle 297" width="14.685" height="14.685" transform="translate(567.635 205.857) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_43-3" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(721.305 279.113) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_42-3" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(864.129 449.758) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_301-3" data-name="Rectangle 301" width="14.685" height="14.685" transform="translate(750.712 640.124) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_299-3" data-name="Rectangle 299" width="14.685" height="14.685" transform="translate(674.129 114.701) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_298-3" data-name="Rectangle 298" width="14.685" height="14.685" transform="translate(736.289 372.5) rotate(-115)" fill="#383838"/> | |||||
| <rect id="Rectangle_300-3" data-name="Rectangle 300" width="14.685" height="14.685" transform="translate(736.289 167.443) rotate(-115)" fill="#383838"/> | |||||
| <circle id="Ellipse_15-3" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(843.5 573)" fill="#383838"/> | |||||
| <circle id="Ellipse_106-3" data-name="Ellipse 106" cx="5" cy="5" r="5" transform="translate(448.5 254.111)" fill="#383838"/> | |||||
| <circle id="Ellipse_16-3" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(577.5 659)" fill="#383838"/> | |||||
| <circle id="Ellipse_18-3" data-name="Ellipse 18" cx="10" cy="10" r="10" transform="translate(557.5 366)" fill="#383838"/> | |||||
| <circle id="Ellipse_104-3" data-name="Ellipse 104" cx="6.5" cy="6.5" r="6.5" transform="translate(704.5 210)" fill="#383838"/> | |||||
| </g> | |||||
| </svg> | |||||
+ 101
- 0
src/assets/icons/good_job.svg
ファイルの表示
| @@ -0,0 +1,101 @@ | |||||
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="135.372" height="120.185" viewBox="0 0 135.372 120.185"> | |||||
| <defs> | |||||
| <clipPath id="clip-path"> | |||||
| <path id="Path_4379" data-name="Path 4379" d="M637.263,106.61s-3.088,42.013,42.174,43.042,54.706-59.557,27.041-84.386c-14.3-12.836-44.661-8.947-55.6,2.2C642.27,76.231,637.691,90.008,637.263,106.61Z" transform="translate(-637.218 -57.23)" fill="none"/> | |||||
| </clipPath> | |||||
| </defs> | |||||
| <g id="Group_3632" data-name="Group 3632" transform="matrix(0.966, -0.259, 0.259, 0.966, -575.481, 152.895)"> | |||||
| <g id="Group_3630" data-name="Group 3630" transform="translate(591.18 17.174)"> | |||||
| <g id="Group_3626" data-name="Group 3626" transform="translate(24.801 21.578)"> | |||||
| <g id="Group_3625" data-name="Group 3625" clip-path="url(#clip-path)"> | |||||
| <g id="Group_3624" data-name="Group 3624" transform="translate(20.003 10.856)"> | |||||
| <g id="Group_3620" data-name="Group 3620"> | |||||
| <g id="Group_3604" data-name="Group 3604" transform="translate(7.537)"> | |||||
| <g id="Group_3599" data-name="Group 3599" transform="translate(0 24.618)"> | |||||
| <g id="Group_3597" data-name="Group 3597"> | |||||
| <path id="Path_4365" data-name="Path 4365" d="M738.713,163.448c-1.09-.241-7.513-6.887-10.09-14.592a16.733,16.733,0,0,0,1.135-4.685c.828-9.187-11.96-20.9-11.96-20.9s-11.5-2.3-24.849,9.166,6.543,22.588,6.543,22.588l-5.513,6.174s3.046,2.453,10.944,1.748L712.5,178.8S739.858,163.7,738.713,163.448Z" transform="translate(-688.34 -123.081)" fill="#ea9649"/> | |||||
| </g> | |||||
| <g id="Group_3598" data-name="Group 3598" transform="translate(17.337 32.992)"> | |||||
| <path id="Path_4366" data-name="Path 4366" d="M753.559,191.7c-.723-.159-3.792-3.139-6.53-7.375l-26.506,8.456,6.82,14.271S754.7,191.952,753.559,191.7Z" transform="translate(-720.523 -184.323)" fill="#d68041"/> | |||||
| </g> | |||||
| </g> | |||||
| <g id="Group_3603" data-name="Group 3603" transform="translate(16.428)"> | |||||
| <g id="Group_3600" data-name="Group 3600" transform="translate(0.473 0.206)"> | |||||
| <path id="Path_4367" data-name="Path 4367" d="M742.047,128.791s7.874-11.715-.77-25.878,2.7-21.989-6.774-24.8-12.021,12-6.587,23.292c0,0-13.273,7.879-6.054,21.967S739.075,132.459,742.047,128.791Z" transform="translate(-719.712 -77.764)" fill="#ffa94d"/> | |||||
| </g> | |||||
| <g id="Group_3602" data-name="Group 3602"> | |||||
| <g id="Group_3601" data-name="Group 3601"> | |||||
| <path id="Path_4368" data-name="Path 4368" d="M738.142,82.823a5.4,5.4,0,0,0-.428-2.231,3.884,3.884,0,0,0-.635-.925,4.486,4.486,0,0,0-.882-.694,8.122,8.122,0,0,0-2.09-.86,7.906,7.906,0,0,0-2.221-.3,5.423,5.423,0,0,0-2.146.453,5.886,5.886,0,0,0-1.79,1.248,8.37,8.37,0,0,0-1.283,1.8,12.188,12.188,0,0,0-.834,2.075,15.839,15.839,0,0,0-.484,2.2,19.144,19.144,0,0,0-.208,2.25c-.034.754-.014,1.509.017,2.264.017.377.052.754.077,1.131l.125,1.127.172,1.122.217,1.114.26,1.1.3,1.093.346,1.08.388,1.065.43,1.048.474,1.028.181.393-.371.236a17.76,17.76,0,0,0-2.417,1.883,19.719,19.719,0,0,0-2.1,2.256,17.675,17.675,0,0,0-1.7,2.554,15.121,15.121,0,0,0-1.181,2.82,13.849,13.849,0,0,0-.535,3,14.855,14.855,0,0,0,.426,4.568c.106.5.275.991.43,1.483s.368.964.549,1.447l.656,1.4a31.035,31.035,0,0,0,1.55,2.717,20.813,20.813,0,0,0,1.865,2.485,15.263,15.263,0,0,0,2.279,2.084,10.415,10.415,0,0,0,2.709,1.447,9.813,9.813,0,0,0,6.09.12,11.992,11.992,0,0,0,2.849-1.286,10.767,10.767,0,0,0,2.418-2.009,11.334,11.334,0,0,1-5.172,3.592,10.713,10.713,0,0,1-3.161.576,9.35,9.35,0,0,1-3.2-.465,10.993,10.993,0,0,1-2.9-1.452,15.993,15.993,0,0,1-2.444-2.119,21.662,21.662,0,0,1-2-2.525,28.589,28.589,0,0,1-1.653-2.744c-.247-.5-.474-.971-.7-1.463-.194-.5-.421-.993-.587-1.508s-.348-1.024-.465-1.554a15.765,15.765,0,0,1-.492-4.849,14.793,14.793,0,0,1,.546-3.222,16.686,16.686,0,0,1,3.027-5.739,20.818,20.818,0,0,1,2.232-2.354,18.616,18.616,0,0,1,2.593-1.98l-.19.629-.481-1.069-.436-1.088-.392-1.1-.347-1.118-.3-1.131-.259-1.142-.214-1.151-.168-1.159-.119-1.165c-.023-.39-.056-.779-.07-1.17-.024-.781-.016-1.563.037-2.344a20.028,20.028,0,0,1,.277-2.332,16.728,16.728,0,0,1,.565-2.286,12.906,12.906,0,0,1,.94-2.172,8.99,8.99,0,0,1,1.434-1.905,6.434,6.434,0,0,1,2-1.319,5.783,5.783,0,0,1,2.349-.4c.2.012.4.011.594.033l.59.093a11.493,11.493,0,0,1,1.132.286,8.394,8.394,0,0,1,2.121.98,4.694,4.694,0,0,1,.893.767,3.735,3.735,0,0,1,.617,1A5.463,5.463,0,0,1,738.142,82.823Z" transform="translate(-718.834 -77.382)" fill="#d68041"/> | |||||
| </g> | |||||
| </g> | |||||
| </g> | |||||
| </g> | |||||
| <g id="Group_3619" data-name="Group 3619" transform="translate(0 23.563)"> | |||||
| <g id="Group_3609" data-name="Group 3609" transform="translate(0.381 0.489)"> | |||||
| <g id="Group_3605" data-name="Group 3605" transform="translate(1.169)"> | |||||
| <path id="Path_4369" data-name="Path 4369" d="M703.681,124.918s-1.753-4.11-14.151-2.525-14.3,10.033-10.645,12.282S708.9,135.13,703.681,124.918Z" transform="translate(-677.226 -122.029)" fill="#ffb564"/> | |||||
| </g> | |||||
| <g id="Group_3606" data-name="Group 3606" transform="translate(0 10.956)"> | |||||
| <path id="Path_4370" data-name="Path 4370" d="M705.085,144.071s-2.166-3.2-17.356-.832c-15.558,2.422-13.874,10.618-10.127,12.713S710.727,154.057,705.085,144.071Z" transform="translate(-675.057 -142.368)" fill="#ffb564"/> | |||||
| </g> | |||||
| <g id="Group_3607" data-name="Group 3607" transform="translate(4.957 20.212)"> | |||||
| <path id="Path_4371" data-name="Path 4371" d="M708.826,162.3s-1.39-4.737-12.813-1.772c-14.231,3.7-12.956,9.915-9.456,11.872S713.1,169,708.826,162.3Z" transform="translate(-684.258 -159.549)" fill="#ffb564"/> | |||||
| </g> | |||||
| <g id="Group_3608" data-name="Group 3608" transform="translate(10.761 27.327)"> | |||||
| <path id="Path_4372" data-name="Path 4372" d="M716.747,175.185s-1.229-4.187-11.325-1.566c-12.578,3.266-11.451,8.764-8.358,10.493S720.528,181.11,716.747,175.185Z" transform="translate(-695.033 -172.756)" fill="#ffb564"/> | |||||
| </g> | |||||
| </g> | |||||
| <g id="Group_3618" data-name="Group 3618"> | |||||
| <g id="Group_3611" data-name="Group 3611" transform="translate(1.245)"> | |||||
| <g id="Group_3610" data-name="Group 3610"> | |||||
| <path id="Path_4373" data-name="Path 4373" d="M699.314,132.46l.5-.268c.324-.175.78-.454,1.341-.836a8.032,8.032,0,0,0,1.757-1.652,6.749,6.749,0,0,0,.39-.591,4.7,4.7,0,0,0,.291-.68,3.788,3.788,0,0,0,.206-1.548,5.009,5.009,0,0,0-.424-1.658l-.2-.41c-.03-.06-.068-.151-.105-.214a1.575,1.575,0,0,0-.107-.149,3.3,3.3,0,0,0-.641-.614,9.033,9.033,0,0,0-3.735-1.417,22.28,22.28,0,0,0-4.407-.3,41.829,41.829,0,0,0-4.595.338,23.438,23.438,0,0,0-4.469.928,15.914,15.914,0,0,0-3.964,1.839,9.873,9.873,0,0,0-2.876,2.81,5.83,5.83,0,0,0-.992,3.372,3.411,3.411,0,0,0,1.3,2.583l.133.1.14.08a1.72,1.72,0,0,0,.294.144,5.27,5.27,0,0,0,.582.207c.389.114.757.192,1.091.256.67.116,1.2.2,1.567.236l.559.062-.563-.006c-.367-.009-.907-.019-1.592-.093-.343-.039-.722-.09-1.133-.179a5.368,5.368,0,0,1-.644-.178,1.943,1.943,0,0,1-.326-.131c-.058-.027-.094-.041-.17-.081l-.157-.1a3.548,3.548,0,0,1-1.116-1.151,4.165,4.165,0,0,1-.553-1.7,6.287,6.287,0,0,1,.925-3.825,10.191,10.191,0,0,1,3.022-3.16,15.874,15.874,0,0,1,4.17-2.036,24.388,24.388,0,0,1,4.65-1,42.656,42.656,0,0,1,4.712-.309,21.544,21.544,0,0,1,4.589.406,9.4,9.4,0,0,1,4.038,1.705,4.029,4.029,0,0,1,.756.789,2.034,2.034,0,0,1,.162.258c.041.079.061.14.1.225l.2.462a5.626,5.626,0,0,1,.376,1.892,4.473,4.473,0,0,1-1.18,3.081,8.348,8.348,0,0,1-1.945,1.58,12.416,12.416,0,0,1-1.427.719Z" transform="translate(-676.66 -121.122)" fill="#d68041"/> | |||||
| </g> | |||||
| </g> | |||||
| <g id="Group_3613" data-name="Group 3613" transform="translate(0 11.083)"> | |||||
| <g id="Group_3612" data-name="Group 3612"> | |||||
| <path id="Path_4374" data-name="Path 4374" d="M704.45,143.965l-.015-.019-.069-.065a2.711,2.711,0,0,0-.443-.3,7.457,7.457,0,0,0-2.1-.728,21.878,21.878,0,0,0-3.552-.4,43.531,43.531,0,0,0-4.682.129c-1.716.117-3.572.35-5.527.636a32.986,32.986,0,0,0-6.009,1.373,17.051,17.051,0,0,0-2.954,1.289,9.712,9.712,0,0,0-2.558,1.981,5.293,5.293,0,0,0-1.378,2.835,4.582,4.582,0,0,0,.689,3.049,4.741,4.741,0,0,0,1.062,1.186,3.928,3.928,0,0,0,.656.423,3.5,3.5,0,0,0,.732.223,16.951,16.951,0,0,0,3.335.22,49.189,49.189,0,0,0,6.59-.6,44.449,44.449,0,0,0,11.27-3.129,14.814,14.814,0,0,0,3.882-2.447,4.958,4.958,0,0,0,1.693-2.867,4.083,4.083,0,0,0-.294-2.105,4.519,4.519,0,0,0-.244-.527Zm.628-.384.1.2a5.094,5.094,0,0,1,.276.593,4.558,4.558,0,0,1-.261,4.185,7.087,7.087,0,0,1-1.313,1.6,15.523,15.523,0,0,1-4.076,2.583,45.135,45.135,0,0,1-11.466,3.2,49.933,49.933,0,0,1-6.7.618,17.64,17.64,0,0,1-3.5-.232,4.251,4.251,0,0,1-.915-.284,4.669,4.669,0,0,1-.8-.51,5.5,5.5,0,0,1-1.238-1.379,5.356,5.356,0,0,1-.8-3.563,6.059,6.059,0,0,1,1.57-3.245,10.455,10.455,0,0,1,2.757-2.137,17.81,17.81,0,0,1,3.082-1.342,33.708,33.708,0,0,1,6.144-1.4c1.972-.286,3.844-.519,5.584-.636a44.149,44.149,0,0,1,4.763-.125,22.6,22.6,0,0,1,3.682.416,8.148,8.148,0,0,1,2.31.811,3.348,3.348,0,0,1,.571.4,1.939,1.939,0,0,1,.156.158l.053.065Z" transform="translate(-674.349 -141.696)" fill="#d68041"/> | |||||
| </g> | |||||
| </g> | |||||
| <g id="Group_3615" data-name="Group 3615" transform="translate(5.093 21.15)"> | |||||
| <g id="Group_3614" data-name="Group 3614"> | |||||
| <path id="Path_4375" data-name="Path 4375" d="M686.6,164.907a9.579,9.579,0,0,0-1.52,1.735,4.573,4.573,0,0,0-.761,2.082,3.56,3.56,0,0,0,.464,2.074,4.363,4.363,0,0,0,1.511,1.5l.231.138.235.092a.848.848,0,0,0,.253.074l.234.048a7.9,7.9,0,0,0,1.091.089,18.041,18.041,0,0,0,2.267-.1c.76-.071,1.517-.191,2.274-.309s1.511-.268,2.261-.434c1.5-.335,2.988-.722,4.451-1.184q1.1-.345,2.17-.757c.719-.263,1.424-.561,2.114-.884A21.924,21.924,0,0,0,705.884,168a10.465,10.465,0,0,0,1.777-1.358,4.046,4.046,0,0,0,1.127-1.8,2.826,2.826,0,0,0-.335-2.059l-.017-.031-.005-.019a1.943,1.943,0,0,0-.175-.391,3.461,3.461,0,0,0-.25-.379,1.576,1.576,0,0,0-.15-.173l-.156-.17a3.159,3.159,0,0,0-.349-.307,2.14,2.14,0,0,0-.379-.275l-.4-.252a1.384,1.384,0,0,0-.211-.107l-.216-.1-.435-.2.457.146.23.073a1.517,1.517,0,0,1,.227.082l.437.21a2.285,2.285,0,0,1,.419.249,3.529,3.529,0,0,1,.4.29l.183.166a1.744,1.744,0,0,1,.178.173,3.832,3.832,0,0,1,.313.392,2.219,2.219,0,0,1,.253.462l-.023-.05a3.186,3.186,0,0,1,.573,2.384,4.582,4.582,0,0,1-1.169,2.18,11.24,11.24,0,0,1-1.846,1.556,18.392,18.392,0,0,1-2.06,1.194c-.707.356-1.426.684-2.157.976s-1.472.558-2.218.8a41.149,41.149,0,0,1-4.549,1.217,33.973,33.973,0,0,1-4.668.681,18.325,18.325,0,0,1-2.386.038,8.539,8.539,0,0,1-1.222-.161,3.854,3.854,0,0,1-.63-.2l-.133-.06-.066-.03-.033-.015-.016-.008-.043-.022-.009-.005-.262-.172a4.789,4.789,0,0,1-1.654-1.845,3.934,3.934,0,0,1-.368-2.429,4.922,4.922,0,0,1,1.014-2.169A8.137,8.137,0,0,1,686.6,164.907Z" transform="translate(-683.803 -160.383)" fill="#d68041"/> | |||||
| </g> | |||||
| </g> | |||||
| <g id="Group_3617" data-name="Group 3617" transform="translate(11.009 27.919)"> | |||||
| <g id="Group_3616" data-name="Group 3616"> | |||||
| <path id="Path_4376" data-name="Path 4376" d="M695.532,179.008a4,4,0,0,0-.48,1.8,3.066,3.066,0,0,0,.494,1.716,4.046,4.046,0,0,0,1.266,1.237,2.307,2.307,0,0,0,.374.191l.224.085c.069.017.133.024.2.037a2.985,2.985,0,0,0,.419.059,3.85,3.85,0,0,0,.451.033,13.7,13.7,0,0,0,1.851-.068c.62-.067,1.242-.134,1.861-.238s1.237-.212,1.85-.345,1.229-.261,1.837-.418c1.219-.3,2.422-.669,3.609-1.07q.889-.305,1.755-.664c.575-.242,1.146-.491,1.7-.772.276-.14.553-.28.816-.44s.529-.315.781-.487.488-.36.735-.538a6.365,6.365,0,0,0,.647-.614,2.928,2.928,0,0,0,.805-1.471,2.426,2.426,0,0,0-.317-1.622l-.026-.049,0-.02a2.3,2.3,0,0,0-.09-.221c-.038-.079-.09-.154-.134-.233a4.169,4.169,0,0,0-.336-.437c-.133-.13-.279-.25-.419-.378a1.447,1.447,0,0,0-.234-.162l-.244-.153a2.287,2.287,0,0,0-.514-.264l-.538-.229c-.374-.113-.755-.214-1.138-.324l.59.079c.2.029.4.048.594.085l.577.177a2.45,2.45,0,0,1,.566.219l.275.135a1.7,1.7,0,0,1,.27.148c.167.121.341.237.5.367a4.672,4.672,0,0,1,.438.461c.063.088.132.17.19.264a2.1,2.1,0,0,1,.156.317l-.031-.068a3.044,3.044,0,0,1,.539,2.007,3.556,3.556,0,0,1-.877,1.889,7.562,7.562,0,0,1-1.472,1.362c-.267.2-.538.382-.819.549s-.561.337-.847.493a24.548,24.548,0,0,1-3.559,1.556c-.608.215-1.219.423-1.84.6s-1.241.345-1.868.491-1.254.29-1.888.4-1.27.214-1.911.291-1.284.143-1.931.171a14.567,14.567,0,0,1-1.961-.036,4.454,4.454,0,0,1-.5-.064,2.965,2.965,0,0,1-.517-.115c-.088-.026-.182-.051-.264-.081l-.216-.1a2.986,2.986,0,0,1-.455-.277,4.2,4.2,0,0,1-1.313-1.526,3.408,3.408,0,0,1-.35-1.947A3.728,3.728,0,0,1,695.532,179.008Z" transform="translate(-694.786 -172.948)" fill="#d68041"/> | |||||
| </g> | |||||
| </g> | |||||
| </g> | |||||
| </g> | |||||
| </g> | |||||
| <g id="Group_3623" data-name="Group 3623" transform="translate(21.71 57.658)"> | |||||
| <g id="Group_3621" data-name="Group 3621"> | |||||
| <path id="Path_4377" data-name="Path 4377" d="M714.65,200.08l35.656-15.668,10.479,16.73-35.371,19.816Z" transform="translate(-714.65 -184.412)" fill="#22689e"/> | |||||
| </g> | |||||
| <g id="Group_3622" data-name="Group 3622" transform="translate(4.115 4.427)"> | |||||
| <path id="Path_4378" data-name="Path 4378" d="M756.6,192.63,722.29,211.854l6.649,12.9,35.371-19.816Z" transform="translate(-722.29 -192.63)" fill="#1e5d87"/> | |||||
| </g> | |||||
| </g> | |||||
| </g> | |||||
| </g> | |||||
| </g> | |||||
| <g id="Group_3629" data-name="Group 3629"> | |||||
| <g id="Group_3627" data-name="Group 3627"> | |||||
| <path id="Path_4380" data-name="Path 4380" d="M654.836,69.379l-5.13-6.925c9.039-13.48,5.334-33.457-9.481-42.14-11.559-6.775-33.974-1.63-41.391,6.336-5.831,6.264-8.315,15.311-7.505,25.761,0,0,.552,26.621,34.437,23.232,8.787-.879,15.488-4.145,20.211-8.725Z" transform="translate(-591.18 -17.174)" fill="#ff8255"/> | |||||
| </g> | |||||
| <g id="Group_3628" data-name="Group 3628" transform="translate(6.213 11.76)"> | |||||
| <path id="Path_4381" data-name="Path 4381" d="M627.382,46.149a3.454,3.454,0,0,1-.194,1.573,3.806,3.806,0,0,1-.876,1.4,3.437,3.437,0,0,1-1.386.869,3.808,3.808,0,0,1-.772.175,4.059,4.059,0,0,1-1.835-.213,4.277,4.277,0,0,1-1.594-1,4.033,4.033,0,0,1-1-1.6,3.893,3.893,0,0,1-.163-.773,4.246,4.246,0,0,1,1.16-3.408,3.905,3.905,0,0,1,1.568-.993,4.786,4.786,0,0,1,.878-.187,4.945,4.945,0,0,1,1.453.046,2.933,2.933,0,0,1,1.2.476l-.934,1.885a1.591,1.591,0,0,0-.655-.277,2.512,2.512,0,0,0-.79-.034,2.3,2.3,0,0,0-.476.109,1.649,1.649,0,0,0-.894.769,1.92,1.92,0,0,0-.248,1.195,1.9,1.9,0,0,0,.84,1.373,1.652,1.652,0,0,0,1.163.306,1.6,1.6,0,0,0,.307-.067,2.107,2.107,0,0,0,.658-.368.884.884,0,0,0,.357-.529l-1.947-.145.22-1.966,3.623.3A2.832,2.832,0,0,1,627.382,46.149Z" transform="translate(-610.472 -40.367)" fill="#fff"/> | |||||
| <path id="Path_4382" data-name="Path 4382" d="M638.126,45.023a2.017,2.017,0,0,1,.7.457l-.548,1.743a1,1,0,0,0-.894-.331.983.983,0,0,0-.815.511,2.673,2.673,0,0,0-.172,1.381l.235,2.055-1.991.228-.653-5.705,1.991-.227.057.492a2.218,2.218,0,0,1,.612-.477,2.02,2.02,0,0,1,.717-.228A1.6,1.6,0,0,1,638.126,45.023Z" transform="translate(-617.141 -41.729)" fill="#fff"/> | |||||
| <path id="Path_4383" data-name="Path 4383" d="M647.5,44.634a3,3,0,0,1,.982,2.047q.026.225.029.343l-3.784.476a1.552,1.552,0,0,0,.426.542.83.83,0,0,0,.569.19,1.276,1.276,0,0,0,1.184-.645l1.581.264a2.065,2.065,0,0,1-.432.965,2.808,2.808,0,0,1-.876.735,3.02,3.02,0,0,1-1.113.355,1.68,1.68,0,0,1-.216.014,2.749,2.749,0,0,1-1.419-.326,3.113,3.113,0,0,1-1.124-1.01,3.215,3.215,0,0,1-.543-1.477,2.13,2.13,0,0,1-.017-.248,2.419,2.419,0,0,1,.289-1.312,2.666,2.666,0,0,1,.929-.985,3.191,3.191,0,0,1,1.372-.471A2.743,2.743,0,0,1,647.5,44.634Zm-2.912,1.559,1.809-.2a.733.733,0,0,0-.306-.454.851.851,0,0,0-.5-.137A.98.98,0,0,0,644.585,46.193Z" transform="translate(-621.177 -41.338)" fill="#fff"/> | |||||
| <path id="Path_4384" data-name="Path 4384" d="M658.275,48.216l-.068-.5a2.233,2.233,0,0,1-.672.478,2.654,2.654,0,0,1-.86.25,2.36,2.36,0,0,1-1.351-.242,2.817,2.817,0,0,1-1.073-.945,3.056,3.056,0,0,1-.519-1.415,3.011,3.011,0,0,1,.2-1.509,2.725,2.725,0,0,1,2.246-1.7,2.237,2.237,0,0,1,.8.048,1.526,1.526,0,0,1,.639.318l-.053-.461,1.777-.2.9,5.656Zm-.923-1.814a1.229,1.229,0,0,0,.355-.5,1.283,1.283,0,0,0,.08-.622,1.021,1.021,0,0,0-.367-.7.954.954,0,0,0-.745-.214,1.173,1.173,0,0,0-.786.426,1.059,1.059,0,0,0-.263.833,1.08,1.08,0,0,0,.218.528,1.236,1.236,0,0,0,.456.381.926.926,0,0,0,1.053-.131Z" transform="translate(-626.237 -40.541)" fill="#fff"/> | |||||
| <path id="Path_4385" data-name="Path 4385" d="M670.071,45a2.242,2.242,0,0,1-.773.874,2.788,2.788,0,0,1-1.208.393,1.95,1.95,0,0,1-1.512-.332,2.251,2.251,0,0,1-.665-1.544,8.1,8.1,0,0,1-.039-.82l.009-1.248-.846.1-.268-1.683,1.132-.151.007-1.27,1.895-.314,0,1.344,1.2-.159.4,1.722L667.8,42.1l0,.976a2.715,2.715,0,0,0,.011.28,1.226,1.226,0,0,0,.238.656.493.493,0,0,0,.456.2.933.933,0,0,0,.457-.172,1.8,1.8,0,0,0,.4-.469Z" transform="translate(-631.339 -39.005)" fill="#fff"/> | |||||
| <path id="Path_4386" data-name="Path 4386" d="M616.572,79.354A7.8,7.8,0,0,1,617,81.205a7.584,7.584,0,0,1-.5,3.777,7.135,7.135,0,0,1-2.229,2.972,6.827,6.827,0,0,1-3.505,1.4,8.406,8.406,0,0,1-3.106-.247,8.708,8.708,0,0,1-2.927-1.378,6.511,6.511,0,0,1-2.013-2.271l4.1-3.466a2.248,2.248,0,0,0,1.041,1.152,2.513,2.513,0,0,0,1.535.32,1.873,1.873,0,0,0,1.392-.815,2.469,2.469,0,0,0,.376-1.743,5.356,5.356,0,0,0-.2-.806L608.8,73.874l-5.884.486.184-4.7,12.484-.812.9,4.366-2.04.179Z" transform="translate(-602.714 -52.77)" fill="#fff"/> | |||||
| <path id="Path_4387" data-name="Path 4387" d="M635.068,90.689a7.584,7.584,0,0,1-3.023-2.45,7.355,7.355,0,0,1-1.412-3.572,6.365,6.365,0,0,1,.693-3.879,7.342,7.342,0,0,1,2.552-2.726,7.942,7.942,0,0,1,3.353-1.214,8.711,8.711,0,0,1,4.06.406,6.266,6.266,0,0,1,2.894,2.144,7.26,7.26,0,0,1,1.348,3.593,7.538,7.538,0,0,1-.544,3.9,7.176,7.176,0,0,1-2.374,2.987,7.476,7.476,0,0,1-3.652,1.408A7.242,7.242,0,0,1,635.068,90.689Zm5.294-4.833a2.634,2.634,0,0,0,.5-2.038,3.044,3.044,0,0,0-.917-1.929,2.521,2.521,0,0,0-2.127-.586,2.665,2.665,0,0,0-1.877,1.017,2.7,2.7,0,0,0-.555,2.044,2.616,2.616,0,0,0,1.043,1.874,2.925,2.925,0,0,0,2.176.54A2.533,2.533,0,0,0,640.362,85.856Z" transform="translate(-615.569 -56.428)" fill="#fff"/> | |||||
| <path id="Path_4388" data-name="Path 4388" d="M670.238,68.3a8.1,8.1,0,0,1,3.677,5.828,8.524,8.524,0,0,1-.375,3.735,6.914,6.914,0,0,1-1.832,2.926,4.847,4.847,0,0,1-2.793,1.322,7.378,7.378,0,0,1-2.56-.162,6.466,6.466,0,0,1-2.194-.927l.17,1.479-5.151.589-2.393-20.919,5.234-1.027.884,8.194a7.1,7.1,0,0,1,4.424-1.79A4.641,4.641,0,0,1,670.238,68.3Zm-2.214,8.951a3.1,3.1,0,0,0,.908-1.188,2.725,2.725,0,0,0-.831-3.289,2.648,2.648,0,0,0-2.011-.613,2.79,2.79,0,0,0-1.9,1.06,2.611,2.611,0,0,0-.068,3.379,3.241,3.241,0,0,0,1.194.961,2.58,2.58,0,0,0,1.419.253A2.479,2.479,0,0,0,668.024,77.255Z" transform="translate(-627.658 -49.22)" fill="#fff"/> | |||||
| <path id="Path_4389" data-name="Path 4389" d="M687.009,60.523l5.785-.662,1.4,13.165-5.179.806ZM690.681,80.1a3.242,3.242,0,0,1-1.282-1.031,3.09,3.09,0,0,1-.6-1.523,2.767,2.767,0,0,1,.668-2.231,3.355,3.355,0,0,1,2.242-1.1,2.961,2.961,0,0,1,2.2.511,2.708,2.708,0,0,1,1.026,1.957,3.389,3.389,0,0,1-.614,2.465,2.835,2.835,0,0,1-2.042,1.21A2.983,2.983,0,0,1,690.681,80.1Z" transform="translate(-641.599 -48.626)" fill="#fff"/> | |||||
| </g> | |||||
| </g> | |||||
| </g> | |||||
| </g> | |||||
| </svg> | |||||
+ 4
- 0
src/common/styles/global.scss
ファイルの表示
| @@ -16,3 +16,7 @@ ion-button { | |||||
| font-family: 'Poppins', sans-serif; | font-family: 'Poppins', sans-serif; | ||||
| } | } | ||||
| ion-label { | |||||
| font-family: 'Poppins', sans-serif !important; | |||||
| } | |||||
+ 2
- 2
src/components/stepsHeader/StepHeader.tsx
ファイルの表示
| @@ -1,7 +1,7 @@ | |||||
| import styles from './StepHeader.module.scss'; | import styles from './StepHeader.module.scss'; | ||||
| import { IonHeader, IonIcon } from '@ionic/react'; | import { IonHeader, IonIcon } from '@ionic/react'; | ||||
| import { close } from 'ionicons/icons' | |||||
| import { closeOutline } from 'ionicons/icons' | |||||
| interface Props { | interface Props { | ||||
| stepNumber: number; | stepNumber: number; | ||||
| @@ -15,7 +15,7 @@ const StepHeader: React.FC<Props> = (props) => { | |||||
| <div className={styles.step}>Step {props.stepNumber}</div> | <div className={styles.step}>Step {props.stepNumber}</div> | ||||
| <h3 className={styles.roundName}>{props.roundName}</h3> | <h3 className={styles.roundName}>{props.roundName}</h3> | ||||
| </div> | </div> | ||||
| <IonIcon icon={close}></IonIcon> | |||||
| <IonIcon icon={closeOutline}></IonIcon> | |||||
| </header> | </header> | ||||
| ) | ) | ||||
| } | } | ||||
+ 89
- 0
src/components/timeSlot/TimeSlot.module.scss
ファイルの表示
| @@ -0,0 +1,89 @@ | |||||
| .header { | |||||
| background-color: #FCFCFC; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| height: 12vh; | |||||
| ion-icon { | |||||
| color: black; | |||||
| width: 2.8rem; | |||||
| height: 2.8rem; | |||||
| margin-left: 2rem; | |||||
| } | |||||
| h4 { | |||||
| color: #4A4A4A; | |||||
| font-size: 2.4rem; | |||||
| font-weight: 300; | |||||
| letter-spacing: 0.024rem; | |||||
| margin-left: 4rem; | |||||
| } | |||||
| } | |||||
| .month { | |||||
| color: #959595; | |||||
| font-size: 1.6rem; | |||||
| margin-top: 3.5rem; | |||||
| margin-left: 3rem; | |||||
| } | |||||
| .dateSlotHolder { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-evenly; | |||||
| margin-top: 4rem; | |||||
| .date { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 7rem; | |||||
| height: 7rem; | |||||
| border: 1px solid #EFEFEF; | |||||
| border-radius: 25px; | |||||
| color: lighten($color: #959595, $amount: 15%); | |||||
| font-size: 1.8rem; | |||||
| font-weight: 600; | |||||
| .day { | |||||
| font-size: 1.4rem; | |||||
| font-weight: 200; | |||||
| } | |||||
| } | |||||
| } | |||||
| .timeSlotHolder { | |||||
| width: 90%; | |||||
| display: grid; | |||||
| grid-template-columns: repeat(2, 1fr); | |||||
| grid-gap: 2rem; | |||||
| margin: 0 auto; | |||||
| margin-top: 4rem; | |||||
| .time { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| width: 15.5rem; | |||||
| height: 5rem; | |||||
| border: 1px solid #EFEFEF; | |||||
| border-radius: 25px; | |||||
| color: lighten($color: #959595, $amount: 10%); | |||||
| font-size: 1.6rem; | |||||
| } | |||||
| } | |||||
| .timeSlotButton { | |||||
| text-decoration: none; | |||||
| ion-button { | |||||
| margin-top: 28vh; | |||||
| margin-bottom: 0; | |||||
| } | |||||
| } | |||||
| .active { | |||||
| color: #33CE93; | |||||
| box-shadow: 0px 0px 10px #00000039; | |||||
| } | |||||
+ 57
- 0
src/components/timeSlot/TimeSlot.tsx
ファイルの表示
| @@ -0,0 +1,57 @@ | |||||
| import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"; | |||||
| import styles from "./TimeSlot.module.scss"; | |||||
| import { chevronBack } from 'ionicons/icons' | |||||
| import { Link } from "react-router-dom"; | |||||
| interface OwnProps { | |||||
| } | |||||
| const TimeSlot: React.FC = () => { | |||||
| return ( | |||||
| <IonPage> | |||||
| <header className={styles.header}> | |||||
| <IonIcon icon={chevronBack} /> | |||||
| <h4>Find a Slot</h4> | |||||
| </header> | |||||
| <IonContent> | |||||
| <div className={styles.month}> | |||||
| April-May | |||||
| </div> | |||||
| <div className={styles.dateSlotHolder}> | |||||
| <div className={styles.date}> | |||||
| <div className={styles.day}>Tue</div> | |||||
| <div>27</div> | |||||
| </div> | |||||
| <div className={styles.date}> | |||||
| <div className={styles.day}>Sat</div> | |||||
| <div>29</div> | |||||
| </div> | |||||
| <div className={styles.date}> | |||||
| <div className={styles.day}>Mon</div> | |||||
| <div>01</div> | |||||
| </div> | |||||
| <div className={styles.date}> | |||||
| <div className={styles.day}>Wed</div> | |||||
| <div>03</div> | |||||
| </div> | |||||
| </div> | |||||
| <div className={styles.timeSlotHolder}> | |||||
| <div className={styles.time}>11:00 AM - 1:00 pm</div> | |||||
| <div className={styles.time}>1:00 PM - 3:00 pm</div> | |||||
| <div className={styles.time}>3:00 PM - 5:00 pm</div> | |||||
| </div> | |||||
| <Link to="/" className={styles.timeSlotButton}> | |||||
| <IonButton shape="round" expand='block'>Confirm for Apr 29, 2021, 11:00 AM</IonButton> | |||||
| </Link> | |||||
| </IonContent> | |||||
| </IonPage> | |||||
| ) | |||||
| } | |||||
| export default TimeSlot; | |||||
+ 40
- 0
src/pages/Quiz/Options.module.scss
ファイルの表示
| @@ -0,0 +1,40 @@ | |||||
| .optionHolder { | |||||
| ion-list { | |||||
| ion-radio-group { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: space-around; | |||||
| height: 40vh; | |||||
| ion-item { | |||||
| width: 99%; | |||||
| margin: 0 auto; | |||||
| --background: white; | |||||
| border: 1px solid #DBDBDB; | |||||
| border-radius: 25px; | |||||
| ion-label { | |||||
| --color: #626262; | |||||
| font-size: 1.2rem !important; | |||||
| font-weight: 200; | |||||
| } | |||||
| ion-radio { | |||||
| --color-checked: var(--primary-button-color); | |||||
| margin-left: 1.5rem; | |||||
| } | |||||
| } | |||||
| .highlighted { | |||||
| box-shadow: 0px 0px 10px #00000029; | |||||
| ion-radio { | |||||
| --color: var(--primary-button-color); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 36
- 0
src/pages/Quiz/Options.tsx
ファイルの表示
| @@ -0,0 +1,36 @@ | |||||
| import { IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react'; | |||||
| import { useState } from 'react'; | |||||
| import styles from './Options.module.scss'; | |||||
| interface OwnProps { | |||||
| options: string[]; | |||||
| isSelected: (option: string) => void; | |||||
| } | |||||
| const Options: React.FC<OwnProps> = (props) => { | |||||
| const [selected, setSelected] = useState<string>("null"); | |||||
| if (selected !== "null") props.isSelected(selected); | |||||
| const options = props.options.map((option, key) => { | |||||
| return ( | |||||
| <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}> | |||||
| <IonLabel>{option}</IonLabel> | |||||
| <IonRadio mode='md' slot="start" value={option} /> | |||||
| </IonItem> | |||||
| ); | |||||
| }); | |||||
| return ( | |||||
| <div className={styles.optionHolder}> | |||||
| <IonList> | |||||
| <IonRadioGroup onIonChange={e => setSelected(e.detail.value)}> | |||||
| {options} | |||||
| </IonRadioGroup> | |||||
| </IonList> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| export default Options; | |||||
+ 40
- 0
src/pages/Quiz/Question.module.scss
ファイルの表示
| @@ -0,0 +1,40 @@ | |||||
| section { | |||||
| .questionHolder { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| text-align: center; | |||||
| color: white; | |||||
| width: 90%; | |||||
| margin: 0 auto; | |||||
| height: 27vh; | |||||
| background-image: url("../../assets/icons/desktop-particles.svg"); | |||||
| background-position: center; | |||||
| background-repeat: no-repeat; | |||||
| background-size: 150% 150%; | |||||
| .questionNumber { | |||||
| font-size: 1.3rem; | |||||
| font-weight: 600; | |||||
| } | |||||
| .question { | |||||
| font-size: 1.8rem; | |||||
| font-weight: 300; | |||||
| } | |||||
| .quizTimer { | |||||
| .border { | |||||
| width: 6rem; | |||||
| height: 6rem; | |||||
| border-radius: 50%; | |||||
| border: 0.2rem solid #6BD534; | |||||
| .time { | |||||
| margin-top: 1.8rem; | |||||
| font-size: 1.4rem; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 33
- 0
src/pages/Quiz/Question.tsx
ファイルの表示
| @@ -0,0 +1,33 @@ | |||||
| import { useState } from "react"; | |||||
| import styles from "./Question.module.scss"; | |||||
| interface OwnProp { | |||||
| questionNumber: number; | |||||
| question: string; | |||||
| timeLimit: number; | |||||
| } | |||||
| const Question: React.FC<OwnProp> = (props) => { | |||||
| return ( | |||||
| <section> | |||||
| <div className={styles.questionHolder}> | |||||
| <div className={styles.questionNumber}>Question {props.questionNumber}</div> | |||||
| <div className={styles.question}> | |||||
| {props.question} | |||||
| </div> | |||||
| <div className={styles.quizTimer}> | |||||
| <div className={styles.border}> | |||||
| <div className={styles.time}>01:00</div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </section> | |||||
| ); | |||||
| } | |||||
| export default Question; | |||||
+ 115
- 0
src/pages/Quiz/Quiz.module.scss
ファイルの表示
| @@ -0,0 +1,115 @@ | |||||
| .quizContainer { | |||||
| .upfold { | |||||
| height: 40vh; | |||||
| background-color: #151515; | |||||
| position: relative; | |||||
| &::after { | |||||
| content: ""; | |||||
| display: block; | |||||
| width: 0; | |||||
| height: 0; | |||||
| border-left: 68vw solid #262626; | |||||
| border-right: 75vw solid white; | |||||
| border-top: 3rem solid transparent; | |||||
| position: absolute; | |||||
| bottom: 0; | |||||
| left: 0; | |||||
| } | |||||
| .header { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| width: 54.5%; | |||||
| margin-left: auto; | |||||
| height: 10vh; | |||||
| h4 { | |||||
| color: white; | |||||
| font-size: 2.4rem; | |||||
| font-weight: 200; | |||||
| letter-spacing: 0.024rem; | |||||
| margin-top: 0; | |||||
| align-self: flex-end; | |||||
| } | |||||
| ion-icon { | |||||
| color: white; | |||||
| margin-right: 3rem; | |||||
| width: 3rem; | |||||
| height: 4rem; | |||||
| align-self: flex-end; | |||||
| } | |||||
| } | |||||
| // .questionHolder { | |||||
| // display: flex; | |||||
| // flex-direction: column; | |||||
| // align-items: center; | |||||
| // justify-content: space-between; | |||||
| // text-align: center; | |||||
| // color: white; | |||||
| // width: 90%; | |||||
| // margin: 0 auto; | |||||
| // height: 27vh; | |||||
| // background-image: url("../../assets/icons/desktop-particles.svg"); | |||||
| // background-position: center; | |||||
| // background-repeat: no-repeat; | |||||
| // background-size: 150% 150%; | |||||
| // .questionNumber { | |||||
| // font-size: 1.3rem; | |||||
| // font-weight: 600; | |||||
| // } | |||||
| // .question { | |||||
| // font-size: 1.8rem; | |||||
| // font-weight: 300; | |||||
| // } | |||||
| // .quizTimer { | |||||
| // .border { | |||||
| // width: 6rem; | |||||
| // height: 6rem; | |||||
| // border-radius: 50%; | |||||
| // border: 0.2rem solid #6BD534; | |||||
| // .time { | |||||
| // margin-top: 1.8rem; | |||||
| // font-size: 1.4rem; | |||||
| // } | |||||
| // } | |||||
| // } | |||||
| // } | |||||
| } | |||||
| .quizOptions { | |||||
| height: 60vh; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: space-around; | |||||
| .options { | |||||
| width: 90%; | |||||
| margin: 0 auto; | |||||
| } | |||||
| .button { | |||||
| text-decoration: none; | |||||
| width: 100%; | |||||
| ion-button { | |||||
| --background: #DDDDDD; | |||||
| width: 90%; | |||||
| margin: 0 auto; | |||||
| } | |||||
| } | |||||
| .active { | |||||
| ion-button { | |||||
| --background: var(--primary-button-color); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 57
- 0
src/pages/Quiz/Quiz.tsx
ファイルの表示
| @@ -0,0 +1,57 @@ | |||||
| import styles from './Quiz.module.scss'; | |||||
| import { IonButton, IonCheckbox, IonIcon, IonItem, IonLabel, IonPage, IonRadio } from '@ionic/react'; | |||||
| import Options from './Options'; | |||||
| import { closeOutline } from 'ionicons/icons' | |||||
| import { Link } from 'react-router-dom'; | |||||
| import { useState } from 'react'; | |||||
| import Question from './Question'; | |||||
| const options: string[] = [ | |||||
| "System.out.println(“Hello, how are you?”);", | |||||
| "println('Hello, how are you?');", | |||||
| "out.print(Hello, how are you?);", | |||||
| "System.out.println(Hello, how are you?);" | |||||
| ]; | |||||
| const Quiz: React.FC = () => { | |||||
| const [selected, setSelected] = useState<boolean>(false); | |||||
| const isSelected = (option: string) => { | |||||
| if (option !== "null") { | |||||
| setSelected(true); | |||||
| } | |||||
| } | |||||
| return ( | |||||
| <div className={styles.quizContainer}> | |||||
| <div className={styles.upfold}> | |||||
| <header className={styles.header}> | |||||
| <h4 className={styles.heading}>Quiz</h4> | |||||
| <IonIcon icon={closeOutline} /> | |||||
| </header> | |||||
| <Question question='How would you correctly display, “Hello, how are you?”?' | |||||
| questionNumber={1} | |||||
| timeLimit={1} /> | |||||
| </div> | |||||
| <div className={styles.quizOptions}> | |||||
| <div className={styles.options}> | |||||
| <Options options={options} isSelected={isSelected} /> | |||||
| </div> | |||||
| <Link to="/" className={styles.button + " " + (selected ? styles.active : "")}> | |||||
| <IonButton shape="round" expand='block'>Next</IonButton> | |||||
| </Link> | |||||
| </div> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| export default Quiz; | |||||
+ 82
- 67
src/pages/interviewRounds/InterviewRounds.tsx
ファイルの表示
| @@ -13,85 +13,100 @@ import closingDocs from '../../assets/icons/Closing_Docs.svg'; | |||||
| import joiningLetter from '../../assets/icons/Joining_Letter.svg'; | import joiningLetter from '../../assets/icons/Joining_Letter.svg'; | ||||
| import Celebrations from '../../assets/icons/Celebrations.svg'; | import Celebrations from '../../assets/icons/Celebrations.svg'; | ||||
| interface stepDetail { | |||||
| stepNumber: number; | |||||
| stepName: string; | |||||
| descriptionImage: string; | |||||
| buttonText: string; | |||||
| isUnlocked: boolean; | |||||
| } | |||||
| const InterviewRounds: React.FC = () => { | const InterviewRounds: React.FC = () => { | ||||
| const [step, setStep] = useState(1); | |||||
| let steps: stepDetail[] = [ | |||||
| { | |||||
| stepNumber: 1, | |||||
| stepName: "Skill Information", | |||||
| descriptionImage: skillInfo, | |||||
| buttonText: "Let's start now", | |||||
| isUnlocked: true | |||||
| }, | |||||
| { | |||||
| stepNumber: 2, | |||||
| stepName: "Preliminary Round", | |||||
| descriptionImage: preliminaryRound, | |||||
| buttonText: "Let's do this", | |||||
| isUnlocked: false | |||||
| }, | |||||
| { | |||||
| stepNumber: 3, | |||||
| stepName: "Technical Interview", | |||||
| descriptionImage: technicalInterview, | |||||
| buttonText: "Schedule meeting", | |||||
| isUnlocked: false | |||||
| }, | |||||
| { | |||||
| stepNumber: 4, | |||||
| stepName: "Assignment", | |||||
| descriptionImage: assignment, | |||||
| buttonText: "Show details", | |||||
| isUnlocked: false | |||||
| }, | |||||
| { | |||||
| stepNumber: 5, | |||||
| stepName: "Final Interview", | |||||
| descriptionImage: finalInterview, | |||||
| buttonText: "Schedule meeting", | |||||
| isUnlocked: false | |||||
| }, | |||||
| { | |||||
| stepNumber: 6, | |||||
| stepName: "Closing Docs", | |||||
| descriptionImage: closingDocs, | |||||
| buttonText: "Upload docs", | |||||
| isUnlocked: false | |||||
| }, | |||||
| { | |||||
| stepNumber: 7, | |||||
| stepName: "Joining Letter", | |||||
| descriptionImage: joiningLetter, | |||||
| buttonText: "Show details", | |||||
| isUnlocked: false | |||||
| }, | |||||
| { | |||||
| stepNumber: 8, | |||||
| stepName: "Celebrations", | |||||
| descriptionImage: Celebrations, | |||||
| buttonText: "Join Workex", | |||||
| isUnlocked: false | |||||
| }, | |||||
| ]; | |||||
| const [stepNo, setStep] = useState(1); | |||||
| const setDescription = (stepNumbera: number) => { | const setDescription = (stepNumbera: number) => { | ||||
| setStep(stepNumbera); | setStep(stepNumbera); | ||||
| } | } | ||||
| const stepsList = steps.map((step, key) => { | |||||
| return ( | |||||
| <Steps | |||||
| key={key} | |||||
| stepNumber={step.stepNumber} | |||||
| roundName={step.stepName} | |||||
| isUnlocked={step.isUnlocked} | |||||
| descriptionImage={step.descriptionImage} | |||||
| buttonText={step.buttonText} | |||||
| setDescription={setDescription} | |||||
| showDescription={(stepNo === step.stepNumber) ? true : false} /> | |||||
| ); | |||||
| }); | |||||
| return ( | return ( | ||||
| <IonPage> | <IonPage> | ||||
| <Header /> | <Header /> | ||||
| <IonContent> | <IonContent> | ||||
| <Steps | |||||
| // descriptionimage stepnumber round name and button text and isUnlocked store in an array of obj use map and render it | |||||
| stepNumber={1} | |||||
| roundName="Skill Information" | |||||
| isUnlocked={true} | |||||
| descriptionImage={skillInfo} | |||||
| buttonText="Let's start now!" | |||||
| setDescription={setDescription} | |||||
| showDescription={(step === 1) ? true : false} /> | |||||
| <Steps | |||||
| stepNumber={2} | |||||
| roundName="Preliminary Round" | |||||
| isUnlocked={false} | |||||
| descriptionImage={preliminaryRound} | |||||
| buttonText="Let's do this" | |||||
| setDescription={setDescription} | |||||
| showDescription={(step === 2) ? true : false} /> | |||||
| <Steps | |||||
| stepNumber={3} | |||||
| roundName="Technical Interview" | |||||
| isUnlocked={false} | |||||
| descriptionImage={technicalInterview} | |||||
| buttonText="Schedule meeting" | |||||
| setDescription={setDescription} | |||||
| showDescription={(step === 3) ? true : false} /> | |||||
| <Steps | |||||
| stepNumber={4} | |||||
| roundName="Assignment" | |||||
| isUnlocked={false} | |||||
| descriptionImage={assignment} | |||||
| buttonText="Show details" | |||||
| setDescription={setDescription} | |||||
| showDescription={(step === 4) ? true : false} /> | |||||
| <Steps | |||||
| stepNumber={5} | |||||
| roundName="Final Interview" | |||||
| isUnlocked={false} | |||||
| descriptionImage={finalInterview} | |||||
| buttonText="Schedule meeting" | |||||
| setDescription={setDescription} | |||||
| showDescription={(step === 5) ? true : false} /> | |||||
| <Steps | |||||
| stepNumber={6} | |||||
| roundName="Closing Docs" | |||||
| isUnlocked={false} | |||||
| descriptionImage={closingDocs} | |||||
| buttonText="Upload docs" | |||||
| setDescription={setDescription} | |||||
| showDescription={(step === 6) ? true : false} /> | |||||
| <Steps | |||||
| stepNumber={7} | |||||
| roundName="Joining Letter" | |||||
| isUnlocked={false} | |||||
| descriptionImage={joiningLetter} | |||||
| buttonText="Show details" | |||||
| setDescription={setDescription} | |||||
| showDescription={(step === 7) ? true : false} /> | |||||
| <Steps | |||||
| stepNumber={8} | |||||
| roundName="Celebrations" | |||||
| isUnlocked={false} | |||||
| descriptionImage={Celebrations} | |||||
| buttonText="Join workex" | |||||
| setDescription={setDescription} | |||||
| showDescription={(step === 8) ? true : false} /> | |||||
| {stepsList} | |||||
| </IonContent> | </IonContent> | ||||
| </IonPage> | </IonPage> | ||||
| ) | ) | ||||
+ 0
- 1
src/pages/interviewRounds/Steps.module.scss
ファイルの表示
| @@ -1,5 +1,4 @@ | |||||
| ion-item { | ion-item { | ||||
| // background-color: #F7F7F7; | |||||
| --background: #F7F7F7; | --background: #F7F7F7; | ||||
| width: 100vw; | width: 100vw; | ||||
| border-bottom: 0.2rem solid #ffffff; | border-bottom: 0.2rem solid #ffffff; | ||||
+ 1
- 1
src/pages/preliminaryRound/PreliminaryRound.tsx
ファイルの表示
| @@ -38,7 +38,7 @@ const PreliminaryRound: React.FC = () => { | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <IonButton shape="round" expand='block'>Done!</IonButton> | |||||
| <IonButton shape="round" expand='block'>Start quiz</IonButton> | |||||
| <div className={styles.wish}>All the best!</div> | <div className={styles.wish}>All the best!</div> | ||||
| </div> | </div> | ||||
+ 133
- 0
src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss
ファイルの表示
| @@ -0,0 +1,133 @@ | |||||
| ion-content { | |||||
| .quizResultsContainer { | |||||
| height: 88vh; | |||||
| .upfold { | |||||
| height: 50vh; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: space-around; | |||||
| text-align: center; | |||||
| padding-bottom: 2rem; | |||||
| ion-icon { | |||||
| height: 17rem; | |||||
| width: 12rem; | |||||
| } | |||||
| .score { | |||||
| h5 { | |||||
| color: #363636; | |||||
| font-size: 2.4rem; | |||||
| font-weight: 300; | |||||
| letter-spacing: 0.024rem; | |||||
| } | |||||
| .result { | |||||
| font-size: 4.4rem; | |||||
| font-weight: 600; | |||||
| letter-spacing: 0.044rem; | |||||
| opacity: 0.7; | |||||
| } | |||||
| } | |||||
| .description { | |||||
| color: #868686; | |||||
| font-size: 1.4rem; | |||||
| line-height: 1.2; | |||||
| width: 90%; | |||||
| } | |||||
| } | |||||
| .quizResults { | |||||
| height: 38vh; | |||||
| background-color: #151515; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-around; | |||||
| background-image: url("../../assets/icons/desktop-particles-2.svg"); | |||||
| background-repeat: no-repeat; | |||||
| background-position: 25% 30%; | |||||
| border-top-right-radius: 75%; | |||||
| &::before { | |||||
| position: absolute; | |||||
| content:" "; | |||||
| top: 57%; | |||||
| right: 0; | |||||
| left: 0; | |||||
| bottom: 0; | |||||
| background-color: #151515; | |||||
| height: 30vh; | |||||
| transform: skewY(3deg); | |||||
| z-index: -1; | |||||
| } | |||||
| h5 { | |||||
| color: #BCBCBC; | |||||
| font-size: 2.4rem; | |||||
| font-weight: 300; | |||||
| letter-spacing: 0.024rem; | |||||
| margin-left: 2rem; | |||||
| } | |||||
| .resultsHolder { | |||||
| margin-left: 2rem; | |||||
| .correct{ | |||||
| display: flex; | |||||
| color: #E5E5E5; | |||||
| font-size: 1.4rem; | |||||
| font-weight: 600; | |||||
| div { | |||||
| margin-left: 2rem; | |||||
| } | |||||
| ion-icon { | |||||
| color: #209787; | |||||
| } | |||||
| } | |||||
| .wrong { | |||||
| display: flex; | |||||
| color: #E5E5E5; | |||||
| font-size: 1.4rem; | |||||
| font-weight: 600; | |||||
| margin: 2rem 0; | |||||
| div { | |||||
| margin-left: 2rem; | |||||
| } | |||||
| ion-icon { | |||||
| color: #D13232; | |||||
| } | |||||
| } | |||||
| } | |||||
| .buttonHolder { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-evenly; | |||||
| margin: 1rem 0; | |||||
| ion-button { | |||||
| width: 15rem; | |||||
| --background: transparent; | |||||
| color: var(--primary-button-color); | |||||
| --border-color: var(--primary-button-color); | |||||
| --border-width: 0.1rem; | |||||
| --border-style: solid; | |||||
| margin: 0; | |||||
| font-size: 1.4rem; | |||||
| font-weight: 600; | |||||
| } | |||||
| .goToNextStep { | |||||
| width: 15rem; | |||||
| color: white; | |||||
| --background: var(--primary-button-color); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 57
- 0
src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx
ファイルの表示
| @@ -0,0 +1,57 @@ | |||||
| import styles from "./PreliminaryRoundResults.module.scss" | |||||
| import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"; | |||||
| import StepHeader from "../../components/stepsHeader/StepHeader"; | |||||
| import checkIcon from "../../assets/icons/check-circle-fill.svg"; | |||||
| import closeIcon from "../../assets/icons/close-filled.svg"; | |||||
| import goodJobIcon from "../../assets/icons/good_job.svg"; | |||||
| import { closeCircle, checkmarkCircle } from "ionicons/icons"; | |||||
| import { Link } from "react-router-dom"; | |||||
| const PreliminaryRoundResults: React.FC = () => { | |||||
| return ( | |||||
| <IonPage> | |||||
| <StepHeader stepNumber={2} roundName="Preliminary Round" /> | |||||
| <IonContent> | |||||
| <div className={styles.quizResultsContainer}> | |||||
| <div className={styles.upfold}> | |||||
| <IonIcon src={goodJobIcon} /> | |||||
| <div className={styles.score}> | |||||
| <h5>You have scored</h5> | |||||
| <h5 className={styles.result}>85%</h5> | |||||
| </div> | |||||
| <p className={styles.description}> | |||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. | |||||
| </p> | |||||
| </div> | |||||
| <div className={styles.quizResults}> | |||||
| <h5>Quiz Results</h5> | |||||
| <div className={styles.resultsHolder}> | |||||
| <div className={styles.correct}> | |||||
| <IonIcon icon={checkmarkCircle} /> | |||||
| <div>17 Questions</div> | |||||
| </div> | |||||
| <div className={styles.wrong}> | |||||
| <IonIcon icon={closeCircle} /> | |||||
| <div>3 Questions</div> | |||||
| </div> | |||||
| </div> | |||||
| <div className={styles.buttonHolder}> | |||||
| <Link to="/" > | |||||
| <IonButton shape="round">Goto Dashboard</IonButton> | |||||
| </Link> | |||||
| <Link to="/interviewRounds" > | |||||
| <IonButton shape="round" class={styles.goToNextStep}>Goto Next Step</IonButton> | |||||
| </Link> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </IonContent> | |||||
| </IonPage > | |||||
| ) | |||||
| } | |||||
| export default PreliminaryRoundResults; | |||||
+ 131
- 16
src/pages/skillInformationStep/SkillInformationStep.tsx
ファイルの表示
| @@ -6,7 +6,7 @@ import SkillsCard from './SkillsCard'; | |||||
| import reactIcon from '../../assets/images/React.png'; | import reactIcon from '../../assets/images/React.png'; | ||||
| import angularIcon from '../../assets/images/Angular.png'; | import angularIcon from '../../assets/images/Angular.png'; | ||||
| import ionicIcon from '../../assets/images/IonicFramework.png'; | import ionicIcon from '../../assets/images/IonicFramework.png'; | ||||
| import reactNative from '../../assets/images/ReactNative.png'; | |||||
| import reactNativeIcon from '../../assets/images/ReactNative.png'; | |||||
| import vueIcon from '../../assets/images/VueJS.png'; | import vueIcon from '../../assets/images/VueJS.png'; | ||||
| import nodeJSIcon from '../../assets/images/NodeJS.png'; | import nodeJSIcon from '../../assets/images/NodeJS.png'; | ||||
| import ExpressJSICon from '../../assets/images/ExpressJS.png'; | import ExpressJSICon from '../../assets/images/ExpressJS.png'; | ||||
| @@ -19,6 +19,10 @@ import DevOpsIcon from '../../assets/images/DevOps.png'; | |||||
| import { useState } from 'react'; | import { useState } from 'react'; | ||||
| import { Link } from 'react-router-dom'; | import { Link } from 'react-router-dom'; | ||||
| interface skill { | |||||
| name: string; | |||||
| icon: string; | |||||
| } | |||||
| const SkillInformationStep: React.FC = () => { | const SkillInformationStep: React.FC = () => { | ||||
| @@ -34,9 +38,85 @@ const SkillInformationStep: React.FC = () => { | |||||
| setSkills(newSkills); | setSkills(newSkills); | ||||
| } | } | ||||
| const skillsArr = [ | |||||
| { | |||||
| frontEnd: [ | |||||
| { | |||||
| name: "React JS/TS", | |||||
| icon: reactIcon, | |||||
| }, | |||||
| { | |||||
| name: "Angular8+", | |||||
| icon: angularIcon, | |||||
| }, { | |||||
| name: "Ionic FrameWork", | |||||
| icon: ionicIcon, | |||||
| }, { | |||||
| name: "React Native", | |||||
| icon: reactNativeIcon, | |||||
| }, { | |||||
| name: "VueJS", | |||||
| icon: vueIcon, | |||||
| } | |||||
| ], | |||||
| backEnd: [ | |||||
| { | |||||
| name: "NodeJS", | |||||
| icon: nodeJSIcon, | |||||
| }, | |||||
| { | |||||
| name: "ExpressJS", | |||||
| icon: ExpressJSICon, | |||||
| }, | |||||
| { | |||||
| name: "Django FrameWork", | |||||
| icon: DjangoIcon, | |||||
| } | |||||
| ], | |||||
| Database: [ | |||||
| { | |||||
| name: "MySql", | |||||
| icon: MySqlIcon, | |||||
| }, | |||||
| { | |||||
| name: "MongoDB", | |||||
| icon: MongoDBIcon, | |||||
| }, | |||||
| { | |||||
| name: "PostgreSQL", | |||||
| icon: postgreSqlIcon, | |||||
| }, | |||||
| ], | |||||
| Beneficial: [ | |||||
| { | |||||
| name: "Firebase", | |||||
| icon: FirebaseIcon, | |||||
| }, | |||||
| { | |||||
| name: "DevOps (Docker / Kubernetes)", | |||||
| icon: DevOpsIcon, | |||||
| } | |||||
| ] | |||||
| } | |||||
| ]; | |||||
| const frontEndSkills: skill[] = []; | |||||
| const backendSkills: skill[] = []; | |||||
| const database: skill[] = []; | |||||
| const beneficial: skill[] = []; | |||||
| skillsArr.forEach(skill => { | |||||
| frontEndSkills.push(...skill.frontEnd); | |||||
| backendSkills.push(...skill.backEnd); | |||||
| database.push(...skill.Database); | |||||
| beneficial.push(...skill.Beneficial); | |||||
| }); | |||||
| return ( | return ( | ||||
| <IonPage> | <IonPage> | ||||
| <StepHeader | <StepHeader | ||||
| stepNumber={1} | stepNumber={1} | ||||
| roundName="Skill Information" /> | roundName="Skill Information" /> | ||||
| @@ -55,11 +135,18 @@ const SkillInformationStep: React.FC = () => { | |||||
| <h5 className={styles.heading}>Front-end:</h5> | <h5 className={styles.heading}>Front-end:</h5> | ||||
| <div className={styles.skills}> | <div className={styles.skills}> | ||||
| <SkillsCard name='React JS/TS' icon={reactIcon} isHighlighted={skills.includes("React JS/TS")} toggleSkills={toggleSkill} /> | |||||
| <SkillsCard name='Angular8+' icon={angularIcon} isHighlighted={skills.includes("Angular8+")} toggleSkills={toggleSkill} /> | |||||
| <SkillsCard name='Ionic FrameWork' icon={ionicIcon} isHighlighted={skills.includes("Ionic FrameWork")} toggleSkills={toggleSkill} /> | |||||
| <SkillsCard name='React Native' icon={reactNative} isHighlighted={skills.includes("React Native")} toggleSkills={toggleSkill} /> | |||||
| <SkillsCard name='VueJS' icon={vueIcon} isHighlighted={skills.includes("VueJS")} toggleSkills={toggleSkill} /> | |||||
| { | |||||
| frontEndSkills.map((skill, index) => { | |||||
| return ( | |||||
| <SkillsCard | |||||
| key={index} | |||||
| name={skill.name} | |||||
| icon={skill.icon} | |||||
| isHighlighted={skills.includes(skill.name)} | |||||
| toggleSkills={toggleSkill} /> | |||||
| ); | |||||
| }) | |||||
| } | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -69,9 +156,18 @@ const SkillInformationStep: React.FC = () => { | |||||
| <h5 className={styles.heading}>Back-end:</h5> | <h5 className={styles.heading}>Back-end:</h5> | ||||
| <div className={styles.skills}> | <div className={styles.skills}> | ||||
| <SkillsCard name='NodeJS' icon={nodeJSIcon} isHighlighted={skills.includes("NodeJS")} toggleSkills={toggleSkill} /> | |||||
| <SkillsCard name='ExpressJS' icon={ExpressJSICon} isHighlighted={skills.includes("ExpressJS")} toggleSkills={toggleSkill} /> | |||||
| <SkillsCard name='Django FrameWork' icon={DjangoIcon} isHighlighted={skills.includes("Django FrameWork")} toggleSkills={toggleSkill} /> | |||||
| { | |||||
| backendSkills.map((skill, index) => { | |||||
| return ( | |||||
| <SkillsCard | |||||
| key={index} | |||||
| name={skill.name} | |||||
| icon={skill.icon} | |||||
| isHighlighted={skills.includes(skill.name)} | |||||
| toggleSkills={toggleSkill} /> | |||||
| ); | |||||
| }) | |||||
| } | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -79,13 +175,22 @@ const SkillInformationStep: React.FC = () => { | |||||
| <div className={styles.skillsCard}> | <div className={styles.skillsCard}> | ||||
| <h5 className={styles.heading}>Database:</h5> | <h5 className={styles.heading}>Database:</h5> | ||||
| <div className={styles.skills}> | <div className={styles.skills}> | ||||
| <SkillsCard name='MySql' icon={MySqlIcon} isHighlighted={skills.includes("MySql")} toggleSkills={toggleSkill} /> | |||||
| <SkillsCard name='MongoDB' icon={MongoDBIcon} isHighlighted={skills.includes("MongoDB")} toggleSkills={toggleSkill} /> | |||||
| <SkillsCard name='PostgreSQL' icon={postgreSqlIcon} isHighlighted={skills.includes("PostgreSQL")} toggleSkills={toggleSkill} /> | |||||
| { | |||||
| database.map((skill, index) => { | |||||
| return ( | |||||
| <SkillsCard | |||||
| key={index} | |||||
| name={skill.name} | |||||
| icon={skill.icon} | |||||
| isHighlighted={skills.includes(skill.name)} | |||||
| toggleSkills={toggleSkill} /> | |||||
| ); | |||||
| }) | |||||
| } | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div className={styles.skillsCard}> | <div className={styles.skillsCard}> | ||||
| @@ -93,8 +198,18 @@ const SkillInformationStep: React.FC = () => { | |||||
| <h5 className={styles.heading}>Beneficial:</h5> | <h5 className={styles.heading}>Beneficial:</h5> | ||||
| <div className={styles.skills}> | <div className={styles.skills}> | ||||
| <SkillsCard name='Firebase' isHighlighted={skills.includes("Firebase")} icon={FirebaseIcon} toggleSkills={toggleSkill} /> | |||||
| <SkillsCard name='DevOps (Docker / Kubernetes)' isHighlighted={skills.includes("DevOps (Docker / Kubernetes)")} icon={DevOpsIcon} toggleSkills={toggleSkill} /> | |||||
| { | |||||
| beneficial.map((skill, index) => { | |||||
| return ( | |||||
| <SkillsCard | |||||
| key={index} | |||||
| name={skill.name} | |||||
| icon={skill.icon} | |||||
| isHighlighted={skills.includes(skill.name)} | |||||
| toggleSkills={toggleSkill} /> | |||||
| ); | |||||
| }) | |||||
| } | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
+ 38
- 0
src/pages/technicalInterview/TechnicalInterview.module.scss
ファイルの表示
| @@ -0,0 +1,38 @@ | |||||
| ion-content { | |||||
| .description { | |||||
| ion-icon { | |||||
| width: 15rem; | |||||
| height: 10rem; | |||||
| width: 95%; | |||||
| margin: 0 auto; | |||||
| margin-top: 4rem; | |||||
| } | |||||
| h4 { | |||||
| color: #363636; | |||||
| text-align: center; | |||||
| font-size: 2.4rem; | |||||
| font-weight: 300; | |||||
| letter-spacing: 0.024rem; | |||||
| margin-top: 3rem; | |||||
| } | |||||
| p { | |||||
| color: #868686; | |||||
| font-size: 1.4rem; | |||||
| text-align: center; | |||||
| width: 90%; | |||||
| margin: 0 auto; | |||||
| margin-top: 2rem; | |||||
| line-height: 1.8; | |||||
| } | |||||
| } | |||||
| .techinicalInterviewBtn { | |||||
| text-decoration: none; | |||||
| ion-button { | |||||
| margin-top: 38vh; | |||||
| margin-bottom: 0; | |||||
| } | |||||
| } | |||||
| } | |||||
+ 29
- 0
src/pages/technicalInterview/TechnicalInterview.tsx
ファイルの表示
| @@ -0,0 +1,29 @@ | |||||
| import styles from "./TechnicalInterview.module.scss"; | |||||
| import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"; | |||||
| import StepHeader from "../../components/stepsHeader/StepHeader"; | |||||
| import techinicalInterview from "../../assets/icons/Technical_Interview.svg"; | |||||
| import { Link } from "react-router-dom"; | |||||
| const TechnicalInterview: React.FC = () => { | |||||
| return ( | |||||
| <IonPage> | |||||
| <StepHeader stepNumber={3} roundName="Technical Interview" /> | |||||
| <IonContent> | |||||
| <div className={styles.description}> | |||||
| <IonIcon src={techinicalInterview} /> | |||||
| <h4>You seem interesting! Let's meet.</h4> | |||||
| <p> | |||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. | |||||
| </p> | |||||
| </div> | |||||
| <Link to="/" className={styles.techinicalInterviewBtn}> | |||||
| <IonButton shape="round" expand='block'>Find a slot</IonButton> | |||||
| </Link> | |||||
| </IonContent> | |||||
| </IonPage> | |||||
| ); | |||||
| } | |||||
| export default TechnicalInterview; | |||||