styles celebrations page component

src/pages/celebration/Celebration.tsx

@@ -1,11 +1,27 @@
-import styles from "./Celebration.module.scss";
-import { IonPage } from "@ionic/react";
+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>
 
-        </IonPage>
+            </IonContent>
+        </IonPage >
     );
 }
 

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