Welcome page created

package.json

@@ -59,5 +59,8 @@
       "last 1 safari version"
     ]
   },
-  "description": "An Ionic project"
+  "description": "An Ionic project",
+  "devDependencies": {
+    "node-sass": "^5.0.0"
+  }
 }

src/App.tsx

@@ -1,7 +1,7 @@
 import { Redirect, Route } from 'react-router-dom';
 import { IonApp, IonRouterOutlet } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import Home from './pages/Home';
+import WelcomePage from './pages/onboarding/Welcome';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -21,16 +21,17 @@ import '@ionic/react/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
+import React from 'react';
 
 const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
       <IonRouterOutlet>
-        <Route exact path="/home">
-          <Home />
+        <Route exact path="/welcome">
+            <WelcomePage />
         </Route>
         <Route exact path="/">
-          <Redirect to="/home" />
+            <Redirect to="/welcome" />
         </Route>
       </IonRouterOutlet>
     </IonReactRouter>

src/pages/onboarding/Welcome.module.scss

@@ -0,0 +1,4 @@
+.upfold {
+    background-color: #1b1d1e;
+    height: 50vh;
+}

src/pages/onboarding/Welcome.tsx

@@ -0,0 +1,30 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { Component } from 'react';
+import styles from './Welcome.module.scss';
+
+type Props = { };
+
+type OwnState = { };
+
+class WelcomePage extends Component<Props, OwnState> {
+    constructor(
+        props: Props
+    ) {
+        super(props);
+        this.state = {};
+    }
+
+    render() {
+        return <IonPage>           
+            <IonContent fullscreen>
+
+                <section className={styles.upfold}>
+                    
+                </section>
+                
+            </IonContent>
+        </IonPage>
+    };
+};
+
+export default WelcomePage;

src/theme/variables.css

@@ -76,7 +76,7 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-light-tint: #f5f6f9;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
   /*
    * Dark Colors
    * -------------------------------------------