completed techinical interview page and time slot page

src/App.tsx

@@ -24,6 +24,8 @@ import SkillInformationStep from './pages/skillInformationStep/SkillInformationS
 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';
 
 
 
@@ -48,6 +50,12 @@ const App: React.FC = () => (
         <Route exact path="/preliminaryRoundResults">
           <PreliminaryRoundResults />
         </Route>
+        <Route exact path="/technicalInterview">
+          <TechnicalInterview />
+        </Route>
+        <Route exact path="/timeSlot">
+          <TimeSlot />
+        </Route>
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>

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;
+}

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;

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;
+        }
+    }
+}

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;