styled Joining letter

src/App.tsx

@@ -35,6 +35,9 @@ 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';
 
 
 
@@ -89,6 +92,16 @@ const App: React.FC = () => (
         <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" />

src/pages/celebration/Celebration.tsx

@@ -0,0 +1,12 @@
+import styles from "./Celebration.module.scss";
+import { IonPage } from "@ionic/react";
+
+const Celebration: React.FC = () => {
+    return (
+        <IonPage>
+
+        </IonPage>
+    );
+}
+
+export default Celebration;

src/pages/closingDocs/VerifiedDocs.module.scss

@@ -37,7 +37,6 @@
         align-items: center;
         width: 95%;
         margin: 0 auto;
-        // margin-top: 20vh;
 
         a{
           text-decoration: none;

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;