From 7dbf8e2c8996beb8427947c6b50c9350f3e0530a Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Mon, 9 Sep 2019 17:47:57 +1000
Subject: [PATCH] better welcome

---
 client/assets/styles/menu.less    |  7 ++-
 client/assets/styles/styles.less  | 22 ---------
 client/src/components/welcome.jsx | 77 +++++++++++++++++--------------
 3 files changed, 48 insertions(+), 58 deletions(-)

diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less
index dabdce28..1d76995f 100644
--- a/client/assets/styles/menu.less
+++ b/client/assets/styles/menu.less
@@ -77,6 +77,12 @@
             }
         }
     }
+
+    .login {
+        display: flex;
+        flex-flow: column;
+        margin-bottom: 2em;
+    }
 }
 
 section {
@@ -126,5 +132,4 @@ section {
         flex: 1;
         display: inline;
     }
-
 }
\ No newline at end of file
diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index cec86633..d6e292e7 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -195,28 +195,6 @@ button[disabled] {
     border-color: #222;
 }
 
-/*
-    LOGIN
-*/
-
-.welcome {
-    .login {
-        width: 50%;
-        display: flex;
-        flex-flow: column;
-        margin-bottom: 2em;
-    }
-
-    .options {
-        display: flex;
-        width: 50%;
-    }
-
-    h2 {
-        margin-bottom: 0.5em;
-    }
-}
-
 #mnml input, #mnml select {
     border-color: #222;
     background-color: #222;
diff --git a/client/src/components/welcome.jsx b/client/src/components/welcome.jsx
index 759a6b88..df0df4ff 100644
--- a/client/src/components/welcome.jsx
+++ b/client/src/components/welcome.jsx
@@ -20,42 +20,49 @@ function Welcome() {
     };
 
     return (
-        <main class="welcome">
-            <h1>mnml.gg</h1>
-            <div class="login">
-                <div>mnml is an abstract turn based strategy game</div>
-                <div>free to play</div>
-                <div>no email required</div>
-                <div>glhf</div>
+        <main class="menu">
+            <header>
+                <div class="options">
+                    <button
+                        class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
+                        disabled={page === 'login'}
+                        onClick={() => this.setState({ page: 'login' })}>
+                        Login
+                    </button>
+                    <button
+                        class={`login-btn ${page === 'register' ? 'highlight' : ''}`}
+                        disabled={page === 'register'}
+                        onClick={() => this.setState({ page: 'register' })}>
+                        Register
+                    </button>
+                    <button
+                        class={`login-btn ${page === 'about' ? 'highlight' : ''}`}
+                        disabled={page === 'about'}
+                        onClick={() => this.setState({ page: 'about' })}>
+                        About
+                    </button>
+                    <button
+                        class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
+                        disabled={page === 'help'}
+                        onClick={() => this.setState({ page: 'help' })}>
+                        Help
+                    </button>
+                </div>
+            </header>
+            <div class="top">
+                <section>
+                    <div>
+                        <h1>mnml.gg</h1>
+                        <p>mnml is a turn-based 1v1 strategy game in an abstract setting.</p>
+                        <p>form your team of 3 constructs from a deep pool of skills, effects and specialisations in order to outplay your opponents.</p>
+                        <p>featuring complex interactions arising from simple rules, simultaneous turns to increase the pace, and a unique speed mechanic mnml is a tactical game in a genre of its own.</p>
+                        <p>free to play</p>
+                        <p>no email required</p>
+                        <p>glhf</p>
+                    </div>
+                    {pageEl()}
+                </section>
             </div>
-            <div class="options">
-                <button
-                    class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
-                    disabled={page === 'login'}
-                    onClick={() => this.setState({ page: 'login' })}>
-                    Login
-                </button>
-                <button
-                    class={`login-btn ${page === 'register' ? 'highlight' : ''}`}
-                    disabled={page === 'register'}
-                    onClick={() => this.setState({ page: 'register' })}>
-                    Register
-                </button>
-                <button
-                    class={`login-btn ${page === 'about' ? 'highlight' : ''}`}
-                    disabled={page === 'about'}
-                    onClick={() => this.setState({ page: 'about' })}>
-                    About
-                </button>
-                <button
-                    class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
-                    disabled={page === 'help'}
-                    onClick={() => this.setState({ page: 'help' })}>
-                    Help
-                </button>
-            </div>
-            {pageEl()}
-            <hr />
             <Demo />
         </main>
     );