better welcome

2019-09-09 17:47:57 +10:00
parent 8c0b02e568
commit 7dbf8e2c89
3 changed files with 48 additions and 58 deletions
@@ -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>
    );