<template>
  <div
    class="
      sui-background-primary
      flex flex-col
      items-center
      justify-center
      min-h-screen
      w-full
    "
  >
    <div>
      <h1 class="h1">{{ page.title }}</h1>
      <article class="max-w-3xl mx-auto flex flex-col items-center">
        <div class="intro">
          <nuxt-content :document="page" />
        </div>
        <the-button @click="$router.push({ path: '/setup' })"
          >Start here</the-button
        >
      </article>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  async asyncData({ $content }) {
    const page = await $content('hello').fetch()
    return {
      page,
    }
  },
  computed: {},
}
</script>
<style lang="postcss" scoped>
.intro {
  @apply py-16;
}
</style>
