created steps Header component

src/App.tsx

@@ -21,6 +21,7 @@ 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';
 
 
 
@@ -33,6 +34,9 @@ const App: React.FC = () => (
         <Route exact path="/interviewRounds">
           <InterviewRounds />
         </Route>
+        <Route exact path="/skillInformationStep">
+          <SkillInformationStep />
+        </Route>
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>

src/components/stepsHeader/StepsHeader.module.scss

@@ -0,0 +1,37 @@
+.header {
+    background-color: black;
+    height: 12vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .heading {
+
+        display: flex;
+        flex-direction: column;
+        margin-left: 4rem;
+
+        .step {
+            color: white;
+            font-size: 1.4rem;
+            font-weight: 600;
+        }
+
+        .roundName {
+            margin: 0;
+            color: white;
+            font-size: 2.4rem;
+            font-weight: 300;
+            opacity: 0.8;
+        }
+    }
+
+    ion-icon {
+        width: 3.5rem;
+        height: 4rem;
+        color: white;
+        opacity: 0.8;
+        margin-right: 4rem;
+    }
+}
+

src/components/stepsHeader/StepsHeader.tsx

@@ -0,0 +1,23 @@
+import styles from './StepsHeader.module.scss';
+
+import { IonHeader, IonIcon } from '@ionic/react';
+import { close } from 'ionicons/icons'
+
+interface Props {
+    stepNumber: number;
+    roundName: string;
+}
+
+const StepsHeader: React.FC<Props> = (props) => {
+    return (
+        <div className={styles.header}>
+            <div className={styles.heading}>
+                <div className={styles.step}>Step {props.stepNumber}</div>
+                <h3 className={styles.roundName}>{props.roundName}</h3>
+            </div>
+            <IonIcon icon={close}></IonIcon>
+        </div>
+    )
+}
+
+export default StepsHeader;

src/pages/interviewRounds/Steps.tsx

@@ -1,5 +1,5 @@
 import styles from './Steps.module.scss';
-import { lockOpen, lockClosed } from 'ionicons/icons'
+import { lockOpen, lockClosed } from 'ionicons/icons';
 import { IonIcon, IonItem } from '@ionic/react';
 import StepsDescription from './StepsDescreption';
 

src/pages/skillInformationStep/SkillInformationStep.tsx

@@ -0,0 +1,16 @@
+import styles from './SlillInformation.module.scss';
+
+import { IonContent, IonPage } from "@ionic/react";
+import StepsHeader from "../../components/stepsHeader/StepsHeader";
+
+const SkillInformationStep: React.FC = () => {
+    return (
+        <IonPage>
+            <StepsHeader
+                stepNumber={1}
+                roundName="Skill Information" />
+        </IonPage>
+    )
+}
+
+export default SkillInformationStep;