partially created skillinfo component and added assets

src/pages/skillInformationStep/SkillInformationStep.module.scss

@@ -0,0 +1,43 @@
+ion-content {
+    .description {
+        text-align: center;
+        width: 85%;
+        margin: 0 auto;
+        .heading {
+            color: #363636;
+            font-size: 2.4rem;
+            font-weight: 300;
+            letter-spacing: 0.024rem;
+            margin-top: 4rem;
+        }
+        .note {
+            color: #868686;
+            font-size: 1.4rem;
+            line-height: 1.4;
+            margin-top: 4rem;
+        }
+    }
+
+    .skillsCard {
+        .heading {
+            color: #363636;
+            font-size: 1.8rem;
+            letter-spacing: 0.018rem;
+            font-weight: 200;
+            text-align: center;
+            margin: 4rem 0;
+        }
+
+        .skills {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-gap: 2rem;
+            margin-left: 1.5rem;
+        }
+    }
+
+    ion-button {
+        margin: 5rem 0;
+        margin-left: 2.5rem;
+    }
+}

src/pages/skillInformationStep/SkillInformationStep.tsx

@@ -1,8 +1,22 @@
-import styles from './SlillInformation.module.scss';
-import { IonContent, IonPage } from "@ionic/react";
+import styles from './SkillInformationStep.module.scss';
+import { IonButton, IonContent, IonPage } from "@ionic/react";
 import StepsHeader from "../../components/stepsHeader/StepsHeader";
-import Skills from './Skills';
+import SkillsCard from './SkillsCard';
+
 import reactIcon from '../../assets/images/React.png';
+import angularIcon from '../../assets/images/Angular.png';
+import ionicIcon from '../../assets/images/IonicFramework.png';
+import reactNative from '../../assets/images/ReactNative.png';
+import vueIcon from '../../assets/images/VueJS.png';
+import nodeJSIcon from '../../assets/images/NodeJS.png';
+import ExpressJSICon from '../../assets/images/ExpressJS.png';
+import DjangoIcon from '../../assets/images/DjangoFramework.png';
+import MySqlIcon from '../../assets/images/MySql.png';
+import MongoDBIcon from '../../assets/images/Mongo.png';
+import postgreSqlIcon from '../../assets/images/PostgreSQL.png';
+import FirebaseIcon from '../../assets/images/Firebase.png';
+import DevOpsIcon from '../../assets/images/DevOps.png';
+
 
 const SkillInformationStep: React.FC = () => {
     return (
@@ -11,10 +25,69 @@ const SkillInformationStep: React.FC = () => {
                 stepNumber={1}
                 roundName="Skill Information" />
             <IonContent>
-                <Skills name='React JS/TS' icon={reactIcon} />
+                <div className={styles.description}>
+                    <h3 className={styles.heading}>What are you good at?</h3>
+
+                    <p className={styles.note}>
+                        Please note that you should have knowledge of at least 1 tech stack in each category & must know the basics of HTML/CSS/JS, Git.
+                    </p>
+
+                </div>
+
+                <div className={styles.skillsCard}>
+
+                    <h5 className={styles.heading}>Front-end:</h5>
+
+                    <div className={styles.skills}>
+                        <SkillsCard name='React JS/TS' icon={reactIcon} />
+                        <SkillsCard name='Angular8+' icon={angularIcon} />
+                        <SkillsCard name='Ionic FrameWork' icon={ionicIcon} />
+                        <SkillsCard name='React Native' icon={reactNative} />
+                        <SkillsCard name='VueJS' icon={vueIcon} />
+                    </div>
+
+                </div>
+
+                <div className={styles.skillsCard}>
+
+                    <h5 className={styles.heading}>Back-end:</h5>
+
+                    <div className={styles.skills}>
+                        <SkillsCard name='NodeJS' icon={nodeJSIcon} />
+                        <SkillsCard name='ExpressJS' icon={ExpressJSICon} />
+                        <SkillsCard name='Django FrameWork' icon={DjangoIcon} />
+                    </div>
+
+                </div>
+
+                <div className={styles.skillsCard}>
+
+                    <h5 className={styles.heading}>Database:</h5>
+
+                    <div className={styles.skills}>
+                        <SkillsCard name='MySql' icon={MySqlIcon} />
+                        <SkillsCard name='MongoDB' icon={MongoDBIcon} />
+                        <SkillsCard name='PostgreSQL' icon={postgreSqlIcon} />
+                    </div>
+
+                </div>
+
+                <div className={styles.skillsCard}>
+
+                    <h5 className={styles.heading}>Beneficial:</h5>
+
+                    <div className={styles.skills}>
+                        <SkillsCard name='Firebase' icon={FirebaseIcon} />
+                        <SkillsCard name='DevOps (Docker / Kubernetes)' icon={DevOpsIcon} />
+                    </div>
+
+                </div>
+
+                <IonButton shape="round" color='success' expand='block'>Done!</IonButton>
+
             </IonContent>
         </IonPage>
-    )
+    );
 }
 
 export default SkillInformationStep;

src/pages/skillInformationStep/Skills.module.scss → src/pages/skillInformationStep/SkillsCard.module.scss

@@ -6,11 +6,11 @@
     height: 7rem;
     border-radius: 2rem;
     justify-content: space-evenly;
-    margin: 5rem;
 
     .name {
         color: #868686;
         font-size: 1.4rem;
         font-weight: 500;
+        width: 8rem;
     }
 }

src/pages/skillInformationStep/Skills.tsx → src/pages/skillInformationStep/SkillsCard.tsx

@@ -1,12 +1,12 @@
 import { IonIcon } from '@ionic/react';
-import styles from './Skills.module.scss';
+import styles from './SkillsCard.module.scss';
 
 interface Props {
     icon: string;
     name: string;
 }
 
-const Skills: React.FC<Props> = (props) => {
+const SkillsCard: React.FC<Props> = (props) => {
     return (
         <div className={styles.skill}>
             <img src={props.icon} alt={props.name} />
@@ -15,4 +15,4 @@ const Skills: React.FC<Props> = (props) => {
     )
 }
 
-export default Skills;
+export default SkillsCard;