mlpcardgame/src/views/Home.vue

<template>
  <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 {
  private projectName: string = "MLPCARDGAME";
}
</script>