Add home page content

src/views/Home.vue

@@ -1,12 +1,122 @@
 <template>
-  <section class="home"></section>
+  <section class="home">
+    <section class="hero is-medium is-primary is-bold">
+      <div class="hero-body">
+        <div class="container has-text-centered">
+          <h1 class="title">
+            {{ projectName }}
+          </h1>
+          <h2 class="subtitle">
+            An unofficial, fan-made MLP:CCG simulator
+          </h2>
+          <br />
+          <b-button
+            tag="router-link"
+            to="/lobby"
+            @click="gotoLobby"
+            class="is-primary"
+            inverted
+            outlined
+            >Play now!</b-button
+          >
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="container is-widescreen landing-content">
+        <div class="columns">
+          <div class="column">
+            <section class="has-text-centered">
+              <div class="title is-4">
+                <strong>Web-based</strong>
+              </div>
+            </section>
+            <div class="content">
+              The entire client runs in your browser. No downloads necessary!
+            </div>
+          </div>
+          <div class="column">
+            <section class="has-text-centered">
+              <div class="title is-4">
+                <strong>Constructed</strong>
+                <span class="behind fantasy"> & </span>
+                <strong>Limited</strong>
+              </div>
+            </section>
+            <div class="content">
+              You can build decks or draft them with friends. You can even do
+              cube drafts!
+            </div>
+          </div>
+          <div class="column">
+            <section class="has-text-centered">
+              <div class="title is-4">
+                <strong>Peer-to-Peer</strong>
+              </div>
+            </section>
+            <div class="content">
+              The entire client uses WebRTC for P2P communications. No
+              registration required to play!
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <footer class="footer">
+      <div class="container is-widescreen">
+        <div class="content has-text-centered">
+          <p>
+            <strong>{{ projectName }}</strong> is not affiliated with Hasbro in
+            any way.<br />
+            Come look at the
+            <a href="https://git.fromouter.space/mcg/mlpcardgame"
+              >source code</a
+            >
+            (ISC licensed)!
+          </p>
+        </div>
+      </div>
+    </footer>
+  </section>
 </template>
 
+<style lang="scss" scoped>
+@import "@/assets/scss/_variables.scss";
+
+.home {
+  user-select: text;
+}
+
+.behind {
+  opacity: 0.8;
+}
+
+.fantasy {
+  font-family: $fantasy;
+}
+
+.landing-content .column {
+  border: 1px solid $grey;
+  border-radius: 10px;
+  margin: 10px;
+  .title {
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba($white, 0.2);
+  }
+  .content {
+    padding: 10px;
+    font-size: 11pt;
+  }
+}
+</style>
+
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 
 @Component({
   components: {}
 })
-export default class Home extends Vue {}
+export default class Home extends Vue {
+  private projectName: string = "MLPCARDGAME";
+}
 </script>