feat: Add a welcome page

src/components/app.tsx

@@ -29,6 +29,7 @@ import LevelListPage from "../pages/levelList";
 import LevelPage from "../pages/level";
 import ReviewPage from "../pages/review";
 import SummaryPage from "../pages/summary";
+import WelcomePage from "../pages/intro";
 
 import { ILevel } from "../models/level";
 import { ILearner } from "../models/learner";
@@ -207,6 +208,7 @@ export default class Application extends React.Component<{}, IState> {
         console.log("STUB: Application::login");
 
         return new Promise((res, rej) => {
+            // TODO: First login? Redirect to /welcome
             // TODO
             this.setState({
                 loggedIn: true
@@ -361,6 +363,12 @@ export default class Application extends React.Component<{}, IState> {
                                 lastReview={this.getLastReview}
                                 getTopTen={this.getTopTenLearners} />
                         }} />
+                    <AuthRoute
+                        isAuth={this.isAuthenticated}
+                        path="/welcome"
+                        component={() => {
+                            return <WelcomePage />
+                        }} />
                     <AuthRoute
                         isAuth={this.isAuthenticated}
                         path="/levelList"

src/index.css

@@ -44,3 +44,20 @@ body {
 .content {
     padding: 16px;
 }
+
+.vert-spacer {
+    padding: 5px;
+}
+
+.intro-card-lg {
+    width: 50%;
+}
+.intro-card-xs {
+    width: 100%;
+}
+.intro-subheading {
+    border-right: solid;
+    border-left: solid;
+    
+    border-color: red;
+}

src/pages/intro.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+
+import { Link } from "react-router-dom";
+
+import Typography from "@material-ui/core/Typography";
+import Grid from "@material-ui/core/Grid";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardActions from "@material-ui/core/CardActions";
+import Button from "@material-ui/core/Button";
+
+export default class IntroPage extends React.Component<{}> {
+    render() {
+        const small = window.matchMedia("(max-width: 700px)").matches;
+        const cName = small ? "intro-card-xs" : "intro-card-lg";
+        return <div>
+            <Grid container justify="center">
+                <Card className={cName}>
+                    <CardContent>
+                        <Typography
+                            component="p"
+                            variant="title">
+                            Wilkommen bei Lateinicus!
+                        </Typography>
+
+                        <div className="vert-spacer" />
+                        <Typography
+                            className="intro-subheading"
+                            component="p"
+                            variant="subheading">
+                            Was ist Lateinicus?
+                        </Typography>
+
+                        <Typography
+                            variant="body1"
+                            component="p">
+                            Lateinicus ist eine experimentelle Lernanwendung für Lateinvokabeln. Mit Hilfe dieser
+                            Anwendung wollen wir die Frage beantworten, ob "Gamification" tatsächlich effektiver
+                            ist als klassisches Lernen mit Vokabelheft.
+                        </Typography>
+                        <Typography
+                            variant="body1"
+                            component="p">
+                            Um die Effektivität zu bewerten wird vor und nach Verwendung von Lateinicus
+                            ein Vokabeltest geschrieben, welche von uns zum Zwecke der Datenerhebung benutzt
+                            werden.
+                        </Typography>
+
+                        <Typography
+                            variant="body1"
+                            component="p">
+                            Zudem erfassen wir Daten darüber, wann und wie lange gelernt wird, damit wir diese
+                            Werte auch in unser Fazit mit einfließen lassen können.
+                        </Typography>
+
+                        <div className="vert-spacer" />
+                        <Typography
+                            className="intro-subheading"
+                            component="p"
+                            variant="subheading">
+                            Was ist Gamification?
+                        </Typography>
+
+                        <Typography
+                            variant="body1">
+                            Gamification ist ein Konzept, bei welchem eine Tätigkeit, wie hier das Lernen von
+                            Lateinvokabeln, in ein Spiel umgewandelt wird.
+                        </Typography>
+                    </CardContent>
+                    <CardActions>
+                        <Button
+                            fullWidth={true}
+                            component={Link}
+                            to="/dashboard">
+                            Lass uns loslegen
+                        </Button>
+                    </CardActions>
+                </Card>
+            </Grid>
+        </div>;
+    }
+};