added a page to techinical interview

src/App.tsx

@@ -25,13 +25,19 @@ 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';
 import Assignment from './pages/assignment/Assignment';
 import AssignmentDetails from './pages/assignment/AssignmentDetails';
 import SubmitAssignment from './pages/assignment/SubmitAssignment';
 import ReviewAssignment from './pages/assignment/ReviewAssignment';
 import AssignmentCompleted from './pages/assignment/AssignmentCompleted';
 import FinalInterview from './pages/FinalInterview/FinalInterview';
+import FinalInterviewResult from './pages/FinalInterview/FinalInterviewResult';
+import ClosingDocs from './pages/closingDocs/ClosingDocs';
+import VerifiedDocs from './pages/closingDocs/VerifiedDocs';
+import JoiningLetter from './pages/joiningLetter/JoiningLetter';
+import Celebration from './pages/celebration/Celebration';
+import SignaturePhoto from './pages/joiningLetter/SignaturePhoto';
+import TechinicalInterviewResults from './pages/technicalInterview/TechinicalInterviewResults';
 
 
 
@@ -59,6 +65,9 @@ const App: React.FC = () => (
         <Route exact path="/technicalInterview">
           <TechnicalInterview />
         </Route>
+        <Route exact path="/technicalInterview/techinicalInterviewResults">
+          <TechinicalInterviewResults />
+        </Route>
         <Route exact path="/assignment">
           <Assignment />
         </Route>
@@ -77,6 +86,26 @@ const App: React.FC = () => (
         <Route exact path="/finalInterview">
           <FinalInterview />
         </Route>
+        <Route exact path="/finalInterview/results">
+          <FinalInterviewResult />
+        </Route>
+        <Route exact path="/closingDocs">
+          <ClosingDocs />
+        </Route>
+        <Route exact path="/verifiedDocs">
+          <VerifiedDocs />
+        </Route>
+        <Route exact path="/joiningLetter">
+          <JoiningLetter />
+        </Route>
+        <Route exact path="/joiningLetter/signaturePhoto">
+          <SignaturePhoto />
+        </Route>
+        <Route exact path="/celebration">
+          <Celebration />
+        </Route>
+
+
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>

src/assets/icons/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12.262" viewBox="0 0 16 12.262">
+  <path id="check" d="M16.562,4.15a.956.956,0,0,1-.289.7L8.8,12.325l-1.4,1.4a1,1,0,0,1-1.4,0l-1.4-1.4L.851,8.589a1,1,0,0,1,0-1.4l1.4-1.4a.956.956,0,0,1,.7-.289.956.956,0,0,1,.7.289L6.693,8.826l6.771-6.781a1,1,0,0,1,1.4,0l1.4,1.4a.956.956,0,0,1,.289.7Z" transform="translate(-0.562 -1.756)" fill="#33ce93"/>
+</svg>

src/assets/icons/location.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.5" height="23.099" viewBox="0 0 16.5 23.099">
+  <g id="location" transform="translate(-6.75 -2.25)">
+    <path id="Path_4397" data-name="Path 4397" d="M20.25,13.5A2.25,2.25,0,1,1,18,11.25,2.25,2.25,0,0,1,20.25,13.5Z" transform="translate(-3 -2.8)" fill="#fff"/>
+    <path id="Path_4398" data-name="Path 4398" d="M15,2.25a8.085,8.085,0,0,0-8.25,7.889c0,2.071.944,4.826,2.806,8.187a60.509,60.509,0,0,0,4.125,6.354,1.637,1.637,0,0,0,2.641,0,60.748,60.748,0,0,0,4.125-6.354c1.86-3.36,2.8-6.115,2.8-8.187A8.085,8.085,0,0,0,15,2.25ZM15,13.8a3.3,3.3,0,1,1,3.3-3.3A3.3,3.3,0,0,1,15,13.8Z" fill="#fff"/>
+  </g>
+</svg>

src/assets/icons/upload.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <path id="uploadalt" d="M13.125,15H1.875a1.807,1.807,0,0,1-1.326-.549A1.8,1.8,0,0,1,0,13.125V11.719a.9.9,0,0,1,.278-.659.9.9,0,0,1,.659-.278.9.9,0,0,1,.659.278.9.9,0,0,1,.278.659v.469a.925.925,0,0,0,.938.938h9.375a.925.925,0,0,0,.938-.937v-.469a.938.938,0,0,1,1.875,0v1.406A1.875,1.875,0,0,1,13.125,15Zm-.308-9.375H9.375v4.688a.925.925,0,0,1-.937.938H6.563a.925.925,0,0,1-.938-.937V5.625H2.168q-.22,0-.271-.088t.125-.278l5-5.054a.672.672,0,0,1,.967,0l4.995,5.054q.176.19.117.278t-.278.088Z" transform="translate(0)" fill="#33ce93"/>
+</svg>

src/components/formInput/Input.module.scss

@@ -14,36 +14,38 @@ $dim-grey: #696969;
         border-radius: 2.5rem;
     }
 
-}
-
-ion-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-}
-
-ion-input {
-    font-size: 1.4rem !important;
-    --color: #696969 !important;
-    font-weight: 400 !important;
-    width: 25rem !important;
-
-    input {
-        --padding-start: 1rem;   
+    ion-icon {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+    
+    ion-input {
+        font-size: 1.4rem !important;
+        --color: #696969 !important;
+        font-weight: 400 !important;
+        width: 25rem !important;
+    
+        input {
+            --padding-start: 1rem;   
+        }
+    }
+    
+    .inputHolder {  
+        border-radius: 2.5rem;
+        width: 32rem;
+        height: 4rem;
+        margin: 0.2rem;
+    
+    }
+    
+    ion-label {
+        margin: 0;
+        margin-left: 0.8rem;
+        --color: #696969 !important;
+        font-size: 1.4rem !important;  
     }
-}
-
-ion-item {  
-    border-radius: 2.5rem;
-    width: 32rem;
-    height: 4rem;
-    margin: 0.2rem;
 
 }
 
-ion-label {
-    margin: 0;
-    margin-left: 0.8rem;
-    --color: #696969 !important;
-    font-size: 1.4rem !important;  
-}
+
 

src/components/formInput/Input.tsx

@@ -12,7 +12,7 @@ const Input: React.FC<Props> = (props) => {
     return (
         <div className={styles.inputContainer}>
             <div className={styles.inputHolder}>
-                <IonItem lines='none'>
+                <IonItem lines='none' className={styles.inputHolder}>
                     {props.icon &&
                         <IonIcon src={props.icon}></IonIcon>
                     }

src/components/stepsHeader/StepHeader.module.scss

@@ -25,7 +25,9 @@
             opacity: 0.8;
         }
     }
-
+    a {
+        text-decoration: none;
+    }
     ion-icon {
         width: 3.5rem;
         height: 4rem;

src/components/stepsHeader/StepHeader.tsx

@@ -16,9 +16,9 @@ const StepHeader: React.FC<Props> = (props) => {
                 <div className={styles.step}>Step {props.stepNumber}</div>
                 <h3 className={styles.roundName}>{props.roundName}</h3>
             </div>
-            {/* <Link to="/interviewRounds"> */}
-            <IonIcon icon={closeOutline}></IonIcon>
-            {/* </Link> */}
+            <Link to="/interviewRounds">
+                <IonIcon icon={closeOutline}></IonIcon>
+            </Link>
         </header>
     )
 }

src/components/timeSlot/TimeSlot.module.scss

@@ -20,88 +20,90 @@
     }
 }
 
-.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;
-        }
+.timeSlotContent {
+    .month {
+        color: #959595;
+        font-size: 1.6rem;
+        margin-top: 3.5rem;
+        margin-left: 3rem;
     }
-}
-
-.timeSlotHolder {
-    width: 90%;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 2rem;
-    margin: 0 auto;
-    margin-top: 4rem;
-
-    .time {
+    
+    .dateSlotHolder {
         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;
+        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;
+            }
+        }
     }
-}
-
-.timeSlotButton {
-    text-decoration: none;
-
-    ion-button {
+    
+    .timeSlotHolder {
         width: 90%;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 2rem;
         margin: 0 auto;
-        margin-top: 18vh;
-        margin-bottom: 0;
-        --background: #DDDDDD;
-       
+        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;
+        }
     }
-}
-
-.active {
     
-    box-shadow: 0px 0px 10px #00000039;
-    div {
-        color: #33CE93;
+    .timeSlotButton {
+        text-decoration: none;
+    
+        ion-button {
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 18vh;
+            margin-bottom: 0;
+            --background: #DDDDDD;
+           
+        }
     }
-}
-
-.activeTime {
-    color: #33CE93 !important;
-    box-shadow: 0px 0px 10px #00000039;
-}
-
-.buttonActive {
-    ion-button {
-        --background: var(--primary-button-color);
+    
+    .active {
+        
+        box-shadow: 0px 0px 10px #00000039;
+        div {
+            color: #33CE93;
+        }
     }
-}   
+    
+    .activeTime {
+        color: #33CE93 !important;
+        box-shadow: 0px 0px 10px #00000039;
+    }
+    
+    .buttonActive {
+        ion-button {
+            --background: var(--primary-button-color);
+        }
+    }   
+}

src/components/timeSlot/TimeSlot.tsx

@@ -69,7 +69,7 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
                 <h4>Find a Slot</h4>
             </header>
 
-            <IonContent>
+            <IonContent className={styles.timeSlotContent}>
                 <div className={styles.month}>
                     {props.month}
                 </div>

src/pages/FinalInterview/FInalInterview.module.scss

@@ -0,0 +1,137 @@
+.finalInterviewContent {
+    display: fixed;
+    height: 100vh;
+    width: 100vw;
+    .description {
+        ion-icon {
+            width: 15rem;
+            height: 10rem;
+            width: 95%;
+            margin: 0 auto;
+            margin-top: 4rem;
+        }
+
+        .meet {
+            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;
+            }
+        }
+
+        .countdown {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 45vh;
+            justify-content: space-around;
+            h4 {
+                color: #363636;
+                text-align: center;
+                font-size: 2.4rem;
+                font-weight: 300;
+                letter-spacing: 0.024rem;
+            }
+            .timeLeft {
+                .time {
+                    font-size: 3.6rem;
+                    font-weight: 600;
+                    color: #363636;
+                    letter-spacing: 0.036rem;
+                }
+                .days {
+                    font-size: 1.3rem;
+                    color: #9F9F9F;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 95%;
+                    margin: 0 auto;
+                    text-align: center;
+                }
+            }
+            .icon {
+                width: 6rem;
+                height: 6rem;
+                background-color: #33CE93;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                ion-icon {
+                    width: 2rem;
+                    height: 2rem;
+                    margin: 0;
+                }
+            }
+            
+        }
+
+    }
+
+    .techinicalInterviewBtn {
+        text-decoration: none;
+        
+        ion-button {
+            width: 95%;
+            margin: 0 auto;
+            margin-top: 38vh;
+            margin-bottom: 0;
+            --background: var(--primary-button-color);
+        }
+    }
+
+    .buttonHolder {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        width: 95%;
+        margin: 0 auto;
+        margin-top: 7rem;
+        a {
+            text-decoration: none;
+        }
+
+        .dashboardButton {
+            width: 18rem;
+            
+            ion-button {
+                margin: 0;
+                --border-style: solid;
+                --border-width: 0.1rem;
+                --border-color: var(--primary-button-color);
+                --background: transparent;
+                --color: var(--primary-button-color);
+                font-size: 1.6rem;
+                font-weight: 600;
+            }
+        }
+
+        .nextStepButton {
+            width: 18rem;
+
+            margin-left: 1rem;
+            ion-button {
+
+                font-size: 1.6rem;
+                font-weight: 600;
+                --background: var(--primary-button-color);
+
+            }
+        }
+      
+    }
+}

src/pages/FinalInterview/FinalInterview.tsx

@@ -1,14 +1,112 @@
-import { IonPage } from "@ionic/react";
+import styles from "./FInalInterview.module.scss";
+
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
 import StepHeader from "../../components/stepsHeader/StepHeader";
+import finalInterview from "../../assets/icons/Final_Interview.svg";
+import locationIcon from "../../assets/icons/location.svg";
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import TimeSlot from "../../components/timeSlot/TimeSlot";
+
+interface dates {
+    date: string;
+    day: string;
+}
 
 const FinalInterview: React.FC = () => {
+
+    const [isDateSet, setDate] = useState<boolean>(false);
+    const [isTimeSlot, setTimeSlot] = useState<boolean>(false);
+
+    const timeSlots = ["11:00 AM - 1:00 pm", "1:00 PM - 3:00 pm", "3:00 PM - 5:00 pm"];
+
+    const dates: dates[] = [
+        {
+            date: "27",
+            day: "Tue"
+        },
+        {
+            date: "29",
+            day: "Sat"
+        },
+        {
+            date: "01",
+            day: "Mon"
+        },
+        {
+            date: "03",
+            day: "Wed"
+        },
+    ];
+
+    const getDate = (date: string) => {
+        console.log(date);
+        setTimeSlot(false);
+        setDate(true);
+    }
+
     return (
         <IonPage>
-            <IonPage>
-                <StepHeader roundName="Final Interview" stepNumber={5} />
-            </IonPage>
+            <StepHeader roundName="Final Interview" stepNumber={5} />
+            <IonContent className={styles.finalInterviewContent}>
+                <div className={styles.description}>
+                    <IonIcon src={finalInterview} />
+                    {
+                        !isDateSet ?
+                            <div className={styles.meet}>
+                                <h4>We're Impressed! Let's meet once again</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+                                </p>
+                            </div>
+                            :
+                            <div className={styles.countdown}>
+
+                                <h4>Let's Meet in:</h4>
+                                <div className={styles.timeLeft}>
+                                    <h4 className={styles.time}>02 : 04 : 25 : 53</h4>
+                                    <div className={styles.days}>
+                                        <div>Days</div>
+                                        <div>Hrs</div>
+                                        <div>Mins</div>
+                                        <div>Secs</div>
+                                    </div>
+                                </div>
+                                <h4>Join us on Google Meet</h4>
+                                <div className={styles.icon}>
+                                    <IonIcon src={locationIcon} />
+                                </div>
+                            </div>
+                    }
+                </div>
+                {
+                    !isDateSet ?
+                        <div className={styles.techinicalInterviewBtn} onClick={() => setTimeSlot(true)}>
+                            <IonButton shape="round" expand='block'>Find a slot</IonButton>
+                        </div>
+                        :
+                        <div className={styles.buttonHolder}>
+                            <Link to="/interviewRounds" className={styles.dashboardButton}>
+                                <IonButton shape="round">Goto Dashboard</IonButton>
+                            </Link>
+                            <Link to="/finalInterview/results" className={styles.nextStepButton}>
+                                <IonButton shape="round">Goto Next Step</IonButton>
+                            </Link>
+                        </div>
+                }
+
+                {
+                    isTimeSlot &&
+                    <TimeSlot
+                        month="April-May"
+                        dates={dates}
+                        timeSlots={timeSlots}
+                        getDate={getDate} />
+                }
+
+            </IonContent>
         </IonPage>
-    )
+    );
 }
 
 export default FinalInterview;

src/pages/FinalInterview/FinalInterviewResult.module.scss

@@ -0,0 +1,79 @@
+.finalInterviewResults {
+
+    .finalInterviewResultsContent {
+
+        .description {
+            .icon {
+                margin-top: 4rem;
+                display: flex;
+                justify-content: center;
+                ion-icon {
+                    width: 10rem;
+                    height: 10rem;
+                }
+            }
+    
+            .stepDescription {
+                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;
+                }
+            }
+        }
+    
+        .buttonHolder {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            width: 95%;
+            margin: 0 auto;
+            margin-top: 22rem;
+            a {
+                text-decoration: none;
+            }
+    
+            .dashboardButton {
+                width: 18rem;
+                
+                ion-button {
+                    margin: 0;
+                    --border-style: solid;
+                    --border-width: 0.1rem;
+                    --border-color: var(--primary-button-color);
+                    --background: transparent;
+                    --color: var(--primary-button-color);
+                    font-size: 1.6rem;
+                    font-weight: 600;
+                }
+            }
+    
+            .nextStepButton {
+                width: 18rem;
+    
+                margin-left: 1rem;
+                ion-button {
+    
+                    font-size: 1.6rem;
+                    font-weight: 600;
+                    --background: var(--primary-button-color);
+    
+                }
+            }
+          
+        }
+    }
+    
+}

src/pages/FinalInterview/FinalInterviewResult.tsx

@@ -0,0 +1,42 @@
+import styles from "./FinalInterviewResult.module.scss";
+
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"
+import StepHeader from "../../components/stepsHeader/StepHeader"
+import { Link } from "react-router-dom";
+import finalInterviewImg from "../../assets/icons/Final_Interview.svg";
+
+
+const FinalInterviewResult: React.FC = () => {
+    return (
+        <IonPage className={styles.finalInterviewResults}>
+            <StepHeader roundName="Final Interview" stepNumber={5} />
+
+            <IonContent className={styles.finalInterviewResultsContent}>
+
+                <div className={styles.description}>
+                    <div className={styles.icon}>
+                        <IonIcon src={finalInterviewImg} />
+                    </div>
+
+                    <div className={styles.stepDescription}>
+                        <h4>You seem promising Employee!</h4>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                    </div>
+                </div>
+
+                <div className={styles.buttonHolder}>
+                    <Link to="/interviewRounds" className={styles.dashboardButton}>
+                        <IonButton shape="round">Goto Dashboard</IonButton>
+                    </Link>
+                    <Link to="/closingDocs" className={styles.nextStepButton}>
+                        <IonButton shape="round">Goto Next Step</IonButton>
+                    </Link>
+                </div>
+            </IonContent>
+        </IonPage>
+    )
+}
+
+export default FinalInterviewResult;

src/pages/Quiz/Options.module.scss

@@ -7,7 +7,7 @@
             justify-content: space-around;
             height: 40vh;
 
-            ion-item {
+            .options {
                 width: 99%;
                 margin: 0 auto;
                 --background: white;

src/pages/Quiz/Options.tsx

@@ -15,7 +15,7 @@ const Options: React.FC<OwnProps> = (props) => {
 
     const options = props.options.map((option, key) => {
         return (
-            <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
+            <IonItem lines='none' key={key} className={styles.options + " " + (option === selected) ? styles.highlighted : ""}>
                 <IonLabel>{option}</IonLabel>
                 <IonRadio mode='md' slot="start" value={option} />
             </IonItem>

src/pages/celebration/Celebration.tsx

@@ -0,0 +1,28 @@
+import styles from "./celebration.module.scss";
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import celebration from "../../assets/icons/Celebrations.svg";
+import { Link } from "react-router-dom";
+
+const Celebration: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader stepNumber={8} roundName="Celebration" />
+            <IonContent className={styles.celebrationContent}>
+                <div className={styles.celebrationDescription}>
+                    <IonIcon src={celebration} />
+                    <h4 className={styles.heading}>We have verified your Docs</h4>
+                    <p className={styles.description}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </p>
+                </div>
+                <Link to="/" className={styles.workexButton}>
+                    <IonButton shape="round" expand="block">Join workex</IonButton>
+                </Link>
+
+            </IonContent>
+        </IonPage >
+    );
+}
+
+export default Celebration;

src/pages/celebration/celebration.module.scss

@@ -0,0 +1,49 @@
+.celebrationContent {
+
+    .celebrationDescription {
+        height: 75vh;
+        ion-icon {
+            width: 12.8rem;
+            height: 12.8rem;
+            width: 100%;
+            margin: 0 auto;
+            margin-top: 4vh;
+        }
+    
+        .heading {
+            color: lighten($color: #363636, $amount: 10%);
+            font-size: 2.4rem;
+            font-weight: 300;
+            text-align: center;
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 4vh;
+        }
+    
+        .description {
+            font-size: 1.4rem;
+            color: #868686;
+            text-align: center;
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 4vh
+        }
+    }
+   
+
+
+
+    a {
+        text-decoration: none;
+    }
+
+    ion-button {
+        width: 95%;
+        margin: 0 auto;
+        height: 5rem;
+        margin-bottom: 0;
+        --background: var(--primary-button-color);
+    }
+        
+
+}

src/pages/closingDocs/ClosingDocs.module.scss

@@ -0,0 +1,75 @@
+.closingDocs {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    height: 88vh;
+
+    .closingDocsImg {
+        width: 12rem;
+        height: 12rem;
+    }
+
+    .docsHeader {
+        color: #363636;
+        font-size: 2.4rem;
+        font-weight: 300;
+        text-align: center;
+    }
+
+    .docsSubHeader {
+        color: #868686;
+        font-size: 1.6rem;
+        font-weight: 600;
+    }
+
+    .uploadDocsHolder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        height: 30vh;
+        width: 95%;
+
+        .docs {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 95%;
+            margin: 0 auto;
+            
+            .docsName {
+                font-size: 1.4rem;
+                color: #868686;
+            }
+
+            .iconBorder {
+                border: 0.1rem solid var(--primary-button-color);
+                border-radius: 50%;
+                width: 3rem;
+                height: 3rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+
+    .closingDocsButton {
+        width: 95%;
+        margin: 0 auto;
+        text-decoration: none;
+        
+        ion-button {
+            width: 100%;
+            --background: #DDDDDD;
+        }
+    }
+
+    .active {
+        ion-button {
+            --background: var(--primary-button-color);
+        }
+    }
+}

src/pages/closingDocs/ClosingDocs.tsx

@@ -0,0 +1,73 @@
+import styles from "./ClosingDocs.module.scss";
+
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"
+import StepHeader from "../../components/stepsHeader/StepHeader"
+import closingDocsImg from '../../assets/icons/Closing_Docs.svg';
+import uploadIcon from "../../assets/icons/upload.svg";
+import checkIcon from "../../assets/icons/check.svg";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+
+const ClosingDocs: React.FC = () => {
+
+    const [isUploaded, setUploaded] = useState<boolean>(false);
+
+    return (
+        <IonPage>
+            <StepHeader roundName="Closing Docs" stepNumber={6} />
+            <IonContent className={styles.closingDocsContent}>
+                <div className={styles.closingDocs} >
+
+                    <IonIcon src={closingDocsImg} className={styles.closingDocsImg} />
+                    <h4 className={styles.docsHeader}>Upload your docs to join our team</h4>
+                    <div className={styles.docsSubHeader}>Gather all documents as mentioned below:</div>
+                    <div className={styles.uploadDocsHolder}>
+                        <div className={styles.docs}>
+                            <div className={styles.docsName}>ID proof(Aadhar)</div>
+                            {!isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
+                            </div>}
+                            {isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={checkIcon} />
+                            </div>}
+                        </div>
+                        <div className={styles.docs}>
+                            <div className={styles.docsName}>convocation certificate</div>
+                            {!isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
+                            </div>}
+                            {isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={checkIcon} />
+                            </div>}
+                        </div>
+                        <div className={styles.docs}>
+                            <div className={styles.docsName}>Experience Letter</div>
+                            {!isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
+                            </div>}
+                            {isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={checkIcon} />
+                            </div>}
+                        </div>
+                        <div className={styles.docs}>
+                            <div className={styles.docsName}>Last 3 months Payslips</div>
+                            {!isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
+                            </div>}
+                            {isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={checkIcon} />
+                            </div>}
+                        </div>
+                    </div>
+                    <Link to="/verifiedDocs"
+                        className={styles.closingDocsButton + " " + (isUploaded && styles.active)}>
+                        <IonButton shape="round" expand='block'>Proceed</IonButton>
+                    </Link>
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default ClosingDocs;

src/pages/closingDocs/VerifiedDocs.module.scss

@@ -0,0 +1,70 @@
+.verifiedDocsContent {
+
+    .closingDocsDescription {
+        height: 75vh;
+        ion-icon {
+            width: 12.8rem;
+            height: 12.8rem;
+            width: 100%;
+            margin: 0 auto;
+            margin-top: 4vh;
+        }
+    
+        .heading {
+            color: lighten($color: #363636, $amount: 10%);
+            font-size: 2.4rem;
+            font-weight: 300;
+            text-align: center;
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 4vh;
+        }
+    
+        .description {
+            font-size: 1.4rem;
+            color: #868686;
+            text-align: center;
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 4vh
+        }
+    }
+   
+
+    .buttonHolder {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        width: 95%;
+        margin: 0 auto;
+
+        a{
+          text-decoration: none;
+        }
+
+        ion-button {
+            width: 18rem;
+            height: 5rem;
+        }
+
+        .dashboardButton {
+            ion-button {
+                margin-bottom: 0;
+                --background: transparent;
+                --border-width: 0.1rem;
+                --border-color: var(--primary-button-color);
+                --border-style: solid;
+                --color: var(--primary-button-color);
+            }
+        }
+
+        .nextStepButton {
+            ion-button {
+                margin-bottom: 0;
+                --background: var(--primary-button-color);
+            }
+        }
+        
+
+    }
+}

src/pages/closingDocs/VerifiedDocs.tsx

@@ -0,0 +1,34 @@
+import styles from "./VerifiedDocs.module.scss";
+
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import closingDocsImg from '../../assets/icons/Closing_Docs.svg';
+import { Link } from "react-router-dom";
+
+
+const VerifiedDocs: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader roundName="Closing Docs" stepNumber={6} />
+            <IonContent className={styles.verifiedDocsContent}>
+                <div className={styles.closingDocsDescription}>
+                    <IonIcon src={closingDocsImg} />
+                    <h4 className={styles.heading}>We have verified your Docs</h4>
+                    <p className={styles.description}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </p>
+                </div>
+                <div className={styles.buttonHolder}>
+                    <Link to="/interviewRounds" className={styles.dashboardButton}>
+                        <IonButton shape="round">Goto Dashboard</IonButton>
+                    </Link>
+                    <Link to="/joiningLetter" className={styles.nextStepButton}>
+                        <IonButton shape="round">Goto Next Step</IonButton>
+                    </Link>
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default VerifiedDocs;

src/pages/interviewRounds/InterviewRounds.tsx

@@ -63,7 +63,7 @@ const InterviewRounds: React.FC = () => {
             descriptionImage: finalInterview,
             buttonText: "Schedule meeting",
             isUnlocked: false,
-            link: "/assignment"
+            link: "/finalInterview"
         },
         {
             stepNumber: 6,
@@ -71,7 +71,7 @@ const InterviewRounds: React.FC = () => {
             descriptionImage: closingDocs,
             buttonText: "Upload docs",
             isUnlocked: false,
-            link: "/assignment"
+            link: "/closingDocs"
         },
         {
             stepNumber: 7,
@@ -79,7 +79,7 @@ const InterviewRounds: React.FC = () => {
             descriptionImage: joiningLetter,
             buttonText: "Show details",
             isUnlocked: false,
-            link: "/assignment"
+            link: "/joiningLetter"
         },
         {
             stepNumber: 8,
@@ -87,7 +87,7 @@ const InterviewRounds: React.FC = () => {
             descriptionImage: Celebrations,
             buttonText: "Join Workex",
             isUnlocked: false,
-            link: "/assignment"
+            link: "/celebration"
         },
     ];
 
@@ -108,7 +108,8 @@ const InterviewRounds: React.FC = () => {
                 buttonText={step.buttonText}
                 setDescription={setDescription}
                 showDescription={(stepNo === step.stepNumber) ? true : false}
-                link={step.link} />
+                link={step.link}
+            />
         );
     });
 

src/pages/interviewRounds/Steps.tsx

@@ -19,14 +19,15 @@ const Steps: React.FC<Props> = (props) => {
 
     return (
         <IonItem lines='none' onClick={() => props.setDescription(props.stepNumber)}>
-            {/* single step so use singular name */}
+
             {props.showDescription ? <StepDescription
                 stepNumber={props.stepNumber}
                 roundName={props.roundName}
                 isUnlocked={props.isUnlocked}
                 buttonText={props.buttonText}
                 descriptionImage={props.descriptionImage}
-                link={props.link} /> :
+                link={props.link}
+            /> :
                 <div className={styles.stepHolder}>
                     <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>
 

src/pages/joiningLetter/JoiningLetter.module.scss

@@ -0,0 +1,43 @@
+.joiningLetterContent {
+
+    .offerLetter {
+        height: 78vh;
+    }
+
+    .buttonHolder {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        width: 95%;
+        margin: 0 auto;
+
+        a{
+          text-decoration: none;
+        }
+
+        ion-button {
+            width: 15rem;
+            height: 4rem;
+        }
+
+        .callUs {
+            ion-button {
+                margin-bottom: 0;
+                --background: transparent;
+                --border-width: 0.1rem;
+                --border-color: var(--primary-button-color);
+                --border-style: solid;
+                --color: var(--primary-button-color);
+            }
+        }
+
+        .agree {
+            ion-button {
+                margin-bottom: 0;
+                --background: var(--primary-button-color);
+            }
+        }
+        
+
+    }
+}

src/pages/joiningLetter/JoiningLetter.tsx

@@ -0,0 +1,27 @@
+import styles from "./JoiningLetter.module.scss";
+import { IonButton, IonContent, IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import { Link } from "react-router-dom";
+
+const JoiningLetter: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader roundName="Joining Letter" stepNumber={7} />
+            <IonContent className={styles.joiningLetterContent}>
+                <div className={styles.offerLetter}>
+
+                </div>
+                <div className={styles.buttonHolder}>
+                    <Link to="/interviewRounds" className={styles.callUs}>
+                        <IonButton shape="round">Call Us</IonButton>
+                    </Link>
+                    <Link to="/joiningLetter/signaturePhoto" className={styles.agree}>
+                        <IonButton shape="round">I Agree</IonButton>
+                    </Link>
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default JoiningLetter;

src/pages/joiningLetter/SignaturePhoto.module.scss

@@ -0,0 +1,110 @@
+.signatureContent {
+    .upfold {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        height: 40vh;
+        ion-icon {
+            width: 17.5rem;
+            height: 12rem;
+            width: 100%;
+            margin: 0 auto;
+        }
+
+        .heading {
+            color: lighten($color: #363636, $amount: 10%);
+            font-size: 2.4rem;
+            font-weight: 300;
+            letter-spacing: 0.024rem;
+            text-align: center;
+            width: 90%;
+            margin: 0 auto;
+
+        }
+
+        .description {
+            color: #868686;
+            font-size: 1.4rem;
+            text-align: center;
+            width: 90%;
+            margin: 0 auto;
+            line-height: 1.8;
+        }
+    }
+
+    .photoHolder {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        height: 32vh;
+        .signaturePhoto {
+            width: 17rem;
+            height: 17rem;
+            background-color: black;
+            border-radius: 2.5rem;
+        }
+        .takePhoto {
+
+            .iconBorder {
+                width: 6rem;
+                height: 6rem;
+                background-color: var(--primary-button-color);
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                ion-icon {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    color: white;
+                }  
+            }
+
+            div:nth-child(2) {
+                color: #A8A8A8;
+                font-size: 1.2rem;
+                margin-top: 1rem;
+            }
+        }
+    }
+
+    .buttonHolder {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        width: 95%;
+        margin: 0 auto;
+        margin-top: 4rem;
+
+        a{
+          text-decoration: none;
+        }
+
+        ion-button {
+            width: 15rem;
+            height: 4rem;
+        }
+
+        .goBack {
+            ion-button {
+                margin-bottom: 0;
+                --background: transparent;
+                --border-width: 0.1rem;
+                --border-color: var(--primary-button-color);
+                --border-style: solid;
+                --color: var(--primary-button-color);
+            }
+        }
+
+        .nextStep {
+            ion-button {
+                margin-bottom: 0;
+                --background: var(--primary-button-color);
+            }
+        }
+        
+
+    }
+}

src/pages/joiningLetter/SignaturePhoto.tsx

@@ -0,0 +1,48 @@
+import styles from "./SignaturePhoto.module.scss";
+
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"
+import { camera } from "ionicons/icons";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import JoiningLetterImg from "../../assets/icons/Joining_Letter.svg";
+import { Link } from "react-router-dom";
+import { useState } from "react";
+
+const SignaturePhoto: React.FC = () => {
+
+    const [isPicture, setPicture] = useState<boolean>(false)
+
+    return (
+        <IonPage>
+            <StepHeader stepNumber={7} roundName="Joining Letter" />
+            <IonContent className={styles.signatureContent}>
+                <div className={styles.upfold}>
+                    <IonIcon src={JoiningLetterImg} />
+                    <h4 className={styles.heading}>Take a photo of your signature</h4>
+                    <p className={styles.description}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </p>
+                </div>
+                <div className={styles.photoHolder}>
+                    {isPicture &&
+                        <div className={styles.signaturePhoto}></div>}
+                    <div className={styles.takePhoto}>
+                        <div className={styles.iconBorder} onClick={() => setPicture(true)}>
+                            <IonIcon icon={camera} />
+                        </div>
+                        <div>Take Photo</div>
+                    </div>
+                </div>
+                <div className={styles.buttonHolder}>
+                    <Link to="/interviewRounds" className={styles.goBack}>
+                        <IonButton shape="round">Go Back</IonButton>
+                    </Link>
+                    <Link to="/celebration" className={styles.nextStep}>
+                        <IonButton shape="round">Goto Next Step</IonButton>
+                    </Link>
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default SignaturePhoto;

src/pages/preliminaryRound/PreliminaryRound.module.scss

@@ -1,90 +1,92 @@
-.roundDescription {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    justify-content: space-around;
-    height: 44.5vh;
-    width: 90%;
-    margin: 0 auto;
-    ion-icon {
-        width: 8rem;
-        height: 8rem;
-        padding-top: 2rem;
-    }
+.preliminaryRoundContent{
+    .roundDescription {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        justify-content: space-around;
+        height: 44.5vh;
+        width: 90%;
+        margin: 0 auto;
+        ion-icon {
+            width: 8rem;
+            height: 8rem;
+            padding-top: 2rem;
+        }
 
-    .heading {
-        color: #363636;
-        font-weight: 300;
-        font-size: 2.4rem;
-    }
+        .heading {
+            color: #363636;
+            font-weight: 300;
+            font-size: 2.4rem;
+        }
 
-    .description {
-        color: #868686;
-        font-size: 1.4rem;
-        line-height: 2.8rem;
+        .description {
+            color: #868686;
+            font-size: 1.4rem;
+            line-height: 2.8rem;
 
+        }
     }
-}
 
-.quizDescription {
-    height: 44vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    background-color: #151515;
-    background-image: url("../../assets/icons/desktop-particles-2.svg");
-    background-repeat: no-repeat;
-    background-position: 25% 30%;
-    border-top-right-radius: 75%;
+    .quizDescription {
+        height: 44vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        background-color: #151515;
+        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: 50%;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        background-color: #151515;
-        height: 30vh; 	
-        transform: skewY(5deg);
-        z-index: -1;
-    }
+        &::before {
+            position: absolute;
+            content:" ";
+            top: 50%;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            background-color: #151515;
+            height: 30vh; 	
+            transform: skewY(5deg);
+            z-index: -1;
+        }
 
-    .heading {
-        color: #BCBCBC;
-        font-weight: 300;
-        letter-spacing: 0.024rem;
-        font-size: 2.4rem;
-        margin-left: 2rem;
-    }
+        .heading {
+            color: #BCBCBC;
+            font-weight: 300;
+            letter-spacing: 0.024rem;
+            font-size: 2.4rem;
+            margin-left: 2rem;
+        }
 
-    .description {
-        margin-left: 2rem;
-        .textHolder {
-            display: flex;
-            margin-bottom: 2rem;
-            .text {
-                color: #E5E5E5;
-                font-size: 1.4rem;
-                font-weight: 600;
-                margin-left: 2rem;
+        .description {
+            margin-left: 2rem;
+            .textHolder {
+                display: flex;
+                margin-bottom: 2rem;
+                .text {
+                    color: #E5E5E5;
+                    font-size: 1.4rem;
+                    font-weight: 600;
+                    margin-left: 2rem;
+                }
             }
         }
-    }
 
-    ion-button {
-        --background: var(--primary-button-color);
-        font-weight: 500;
-        font-family: 'Poppins', sans-serif;
-        width: 90%;
-        margin: 0 auto;
-    }
+        ion-button {
+            --background: var(--primary-button-color);
+            font-weight: 500;
+            font-family: 'Poppins', sans-serif;
+            width: 90%;
+            margin: 0 auto;
+        }
 
-    .wish {
-        color: #E5E5E5;
-        font-size: 1.8rem;
-        text-align: center;
+        .wish {
+            color: #E5E5E5;
+            font-size: 1.8rem;
+            text-align: center;
+        }
     }
 }

src/pages/preliminaryRound/PreliminaryRound.tsx

@@ -11,7 +11,7 @@ const PreliminaryRound: React.FC = () => {
     return (
         <IonPage>
             <StepHeader stepNumber={2} roundName="Preliminary Round" />
-            <IonContent>
+            <IonContent className={styles.preliminaryRoundContent}>
                 <div className={styles.roundDescription}>
 
                     <IonIcon src={preliminaryRound}></IonIcon>

src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss

@@ -1,4 +1,4 @@
-ion-content {
+.preliminaryRoundResultsContent {
     .quizResultsContainer {
         height: 88vh;
             .upfold {

src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx

@@ -12,7 +12,7 @@ const PreliminaryRoundResults: React.FC = () => {
     return (
         <IonPage>
             <StepHeader stepNumber={2} roundName="Preliminary Round" />
-            <IonContent>
+            <IonContent className={styles.preliminaryRoundResultsContent}>
                 <div className={styles.quizResultsContainer}>
                     <div className={styles.upfold}>
                         <IonIcon src={goodJobIcon} />

src/pages/technicalInterview/TechinicalInterviewResults.module.scss

@@ -0,0 +1,70 @@
+.techinicalInterviewResultsContent {
+
+    .resultsDescription {
+        height: 75vh;
+        ion-icon {
+            width: 12.8rem;
+            height: 12.8rem;
+            width: 100%;
+            margin: 0 auto;
+            margin-top: 4vh;
+        }
+    
+        .heading {
+            color: lighten($color: #363636, $amount: 10%);
+            font-size: 2.4rem;
+            font-weight: 300;
+            text-align: center;
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 4vh;
+        }
+    
+        .description {
+            font-size: 1.4rem;
+            color: #868686;
+            text-align: center;
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 4vh
+        }
+    }
+   
+
+    .buttonHolder {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        width: 95%;
+        margin: 0 auto;
+
+        a{
+          text-decoration: none;
+        }
+
+        ion-button {
+            width: 17rem;
+            height: 4.5rem;
+        }
+
+        .dashboardButton {
+            ion-button {
+                margin-bottom: 0;
+                --background: transparent;
+                --border-width: 0.1rem;
+                --border-color: var(--primary-button-color);
+                --border-style: solid;
+                --color: var(--primary-button-color);
+            }
+        }
+
+        .nextStepButton {
+            ion-button {
+                margin-bottom: 0;
+                --background: var(--primary-button-color);
+            }
+        }
+        
+
+    }
+}

src/pages/technicalInterview/TechinicalInterviewResults.tsx

@@ -0,0 +1,32 @@
+import styles from "./TechinicalInterviewResults.module.scss";
+import techinicalInterview from "../../assets/icons/Technical_Interview.svg";
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import { Link } from "react-router-dom";
+
+const TechinicalInterviewResults: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader roundName="Techinical Interview" stepNumber={3} />
+            <IonContent className={styles.techinicalInterviewResultsContent}>
+                <div className={styles.resultsDescription}>
+                    <IonIcon src={techinicalInterview} />
+                    <h4 className={styles.heading}>Meeting went nice!</h4>
+                    <p className={styles.description}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </p>
+                </div>
+                <div className={styles.buttonHolder}>
+                    <Link to="/interviewRounds" className={styles.dashboardButton}>
+                        <IonButton shape="round">Goto Dashboard</IonButton>
+                    </Link>
+                    <Link to="/assignment" className={styles.nextStepButton}>
+                        <IonButton shape="round">Goto Next Step</IonButton>
+                    </Link>
+                </div>
+            </IonContent>
+        </IonPage>
+    )
+}
+
+export default TechinicalInterviewResults;

src/pages/technicalInterview/TechnicalInterview.module.scss

@@ -1,4 +1,4 @@
-ion-content {
+.techinicalInterviewContent {
     display: fixed;
     height: 100vh;
     width: 100vw;

src/pages/technicalInterview/TechnicalInterview.tsx

@@ -48,7 +48,7 @@ const TechnicalInterview: React.FC = () => {
     return (
         <IonPage>
             <StepHeader stepNumber={3} roundName="Technical Interview" />
-            <IonContent>
+            <IonContent className={styles.techinicalInterviewContent}>
                 <div className={styles.description}>
                     <IonIcon src={techinicalInterview} />
                     {
@@ -89,7 +89,7 @@ const TechnicalInterview: React.FC = () => {
                             <Link to="/interviewRounds" className={styles.dashboardButton}>
                                 <IonButton shape="round">Goto Dashboard</IonButton>
                             </Link>
-                            <Link to="/assignment" className={styles.nextStepButton}>
+                            <Link to="/technicalInterview/techinicalInterviewResults" className={styles.nextStepButton}>
                                 <IonButton shape="round">Goto Next Step</IonButton>
                             </Link>
                         </div>