AppFlatPlan.vue

<template>
  <div id="container-flatplan" class="container mb-12">
    <section class="gap-6 grid lg:grid-cols-4 md:grid-cols-2">
      <nuxt-link
        v-for="(section, i) in sections"
        :key="i"
        :to="section.to"
        class="bg-blue-100 dark:bg-blue-900 p-4 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
        :class="currentPage === i + 1 && 'is-active'"
      >
        <div class="flex items-center justify-between">
          <h2 class="font-semibold text-lg">{{ section.title }}</h2>
          <fa icon="arrow-right" class="ml-4"></fa>
        </div>
        <ul class="mt-1 font-light list-flatplan">
          <li v-for="(item, ii) in section.children" :key="ii">
            {{ item }}
          </li>
        </ul>
      </nuxt-link>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    document: {
      type: Object,
      required: true,
    },
    currentPage: {
      type: Number,
      default: null,
    },
  },
  computed: {
    sections() {
      return this.document.body.children
        .filter((item) => item.tag === 'section')
        .map((item) => {
          const title = item.children.filter(
            (item) => item.type === 'element'
          )[0].children[1]
          const children = item.children
            .filter((item) => item.type === 'element')[1]
            .children.filter((item) => item.type === 'element')
            .map((li) => li.children[0].value)
          return {
            children,
            title: title.children[0].value,
            to: title.props.to,
          }
        })
    },
  },
}
</script>

<style lang="postcss" scoped>
.list-flatplan > li {
  position: relative;
  padding-left: 1.75em;
  margin: 0.5em 0;
  line-height: 1.2em;
}
.list-flatplan > li::before {
  content: '';
  position: absolute;
  background-color: #3b82f6;
  border-radius: 50%;
  width: 0.375em;
  height: 0.375em;
  top: 0.375em;
  left: 0.25em;
}

#container-flatplan .svg-inline--fa {
  animation: shake 10s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
  animation-delay: 5s;
}
#container-flatplan .grid > a:nth-child(2) .svg-inline--fa {
  animation-delay: 5.5s;
}
#container-flatplan .grid > a:nth-child(3) .svg-inline--fa {
  animation-delay: 6s;
}
#container-flatplan .grid > a:nth-child(4) .svg-inline--fa {
  animation-delay: 6.5s;
}
@keyframes shake {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }

  1% {
    -webkit-transform: translate(-1px, -2px) rotate(-3deg);
  }

  2% {
    -webkit-transform: translate(-3px, 0px) rotate(3deg);
  }

  3% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
  }

  4% {
    -webkit-transform: translate(1px, -1px) rotate(3deg);
  }

  5% {
    -webkit-transform: translate(-1px, 2px) rotate(-3deg);
  }

  6% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }

  7% {
    -webkit-transform: translate(2px, 1px) rotate(-3deg);
  }

  8% {
    -webkit-transform: translate(-1px, -1px) rotate(3deg);
  }

  9% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }

  10% {
    -webkit-transform: translate(1px, -2px) rotate(-3deg);
  }

  11% {
    transform: translate(0, 0) rotate(0deg);
  }
}
</style>