Common style page container with changeable colour in scss added

src/app/welcome/welcome.component.html

@@ -1,4 +1,4 @@
-<div class="page">
+<section class="page-container half-bg" color="black">
     <section class="upfold">
         <h1>
             Good Morning, <br>
@@ -72,4 +72,4 @@
     </ul>
 
     <button [routerLink]="['/tabs/home']" class="start-button"> All right let's Start! </button>
-</div>
+</section>

src/app/welcome/welcome.component.scss

@@ -1,22 +1,3 @@
-.page {
-    height: 100vh;
-    overflow: auto;
-    padding-bottom: 100px;
-
-    &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        height: 40vh;
-        width: 100%;
-        background-color: var(--black);
-        border-bottom-left-radius: 30px;
-        border-bottom-right-radius: 30px;
-        pointer-events: none;
-    }
-}
-
 .upfold {
     width: 100%;
     color: white;

src/styles.scss

@@ -22,6 +22,7 @@
     --danger-dark: #d65f5f;
 }
 
+// Confirmation pop up container style
 .confirmation-popup {
     position: fixed;
     left: 80%;
@@ -54,3 +55,48 @@
         transition: opacity 0.3s, transform 0.3s;
     }
 }
+
+
+// Common styles
+.page-container {
+    height: 100vh;
+    overflow: auto;
+    padding-bottom: 100px;
+
+    &.half-bg {
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 40vh;
+            width: 100%;
+            background-color: transparent;
+            border-bottom-left-radius: 30px;
+            border-bottom-right-radius: 30px;
+            pointer-events: none;
+        }
+
+        &[color="black"] {
+            &::before {
+                background-color: var(--black);
+            }
+        }
+
+        &[color="ash-black"] {
+            &::before {
+                background-color: var(--ash-black);
+            }
+        }
+    }
+
+    &.full-bg {
+        &[color="black"] {
+            background-color: var(--black);
+        }
+
+        &[color="ash-black"] {
+            background-color: var(--ash-black);
+        }
+    }
+}