From b63a36d0f0013c19120a290cb5d30d3029483e6b Mon Sep 17 00:00:00 2001
From: Alexander Polynomdivision <digitalmail555@googlemail.com>
Date: Sat, 15 Sep 2018 15:28:27 +0200
Subject: [PATCH] feat: Add a welcome page

---
 src/components/app.tsx |  8 +++++
 src/index.css          | 17 +++++++++
 src/pages/intro.tsx    | 82 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 107 insertions(+)
 create mode 100644 src/pages/intro.tsx

diff --git a/src/components/app.tsx b/src/components/app.tsx
index 3907043..1e1fee8 100644
--- a/src/components/app.tsx
+++ b/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"
diff --git a/src/index.css b/src/index.css
index ebf14e9..6901b67 100644
--- a/src/index.css
+++ b/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;
+}
diff --git a/src/pages/intro.tsx b/src/pages/intro.tsx
new file mode 100644
index 0000000..d4e2c2f
--- /dev/null
+++ b/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>;
+    }
+};