completed preliminary round results page

преди 3 години · 1a903e36af
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,11 +19,11 @@ import '@ionic/react/css/flex-utils.css';
 import '@ionic/react/css/display.css';

 import './App.scss';
 import ConnectWithUs from './pages/connectWithUs/ConnectWithUs';
 import InterviewRounds from './pages/interviewRounds/InterviewRounds';
 import SkillInformationStep from './pages/skillInformationStep/SkillInformationStep';
 import PreliminaryRound from './pages/preliminaryRound/PreliminaryRound';
 import Quiz from './pages/Quiz/Quiz';
 import PreliminaryRoundResults from './pages/preliminaryRoundResults/PreliminaryRoundResults';



@@ -45,6 +45,9 @@ const App: React.FC = () => (
        <Route exact path="/preliminaryRound">
          <PreliminaryRound />
        </Route>
        <Route exact path="/preliminaryRoundResults">
          <PreliminaryRoundResults />
        </Route>
        <Route exact path="/">
          <Redirect to="/interviewRounds" />
        </Route>
--- a/src/assets/icons/close-filled.svg
+++ b/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>
--- a/src/assets/icons/good_job.svg
+++ b/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>
--- a/src/components/stepsHeader/StepHeader.tsx
+++ b/src/components/stepsHeader/StepHeader.tsx
@@ -1,7 +1,7 @@
 import styles from './StepHeader.module.scss';

 import { IonHeader, IonIcon } from '@ionic/react';
 import { close } from 'ionicons/icons'
 import { closeOutline } from 'ionicons/icons'

 interface Props {
    stepNumber: number;
@@ -15,7 +15,7 @@ const StepHeader: React.FC<Props> = (props) => {
                <div className={styles.step}>Step {props.stepNumber}</div>
                <h3 className={styles.roundName}>{props.roundName}</h3>
            </div>
            <IonIcon icon={close}></IonIcon>
            <IonIcon icon={closeOutline}></IonIcon>
        </header>
    )
 }
--- a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss
+++ b/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);
                    }
                }
            }
        }
    }
--- a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx
+++ b/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;