index.vue

<template>
  <div>
    <div
      class="h-screen -mt-16 flex flex-col justify-between bg-blue-50 shadow-lg"
    >
      <HomeHero :hero="hero" />
      <HomeSearch />
    </div>

    <nuxt-content
      class="container my-12 prose dark:prose-dark"
      :document="document"
    />

    <HomeNextEvents />

    <section id="map">
      <div class="container flex items-end mb-3">
        <FaviconMap class="w-12 h-12 mr-3 fill-current dark:text-gray-100" />
        <a
          href="https://carte.monnaie-libre.fr"
          target="_blank"
          class="group bg-clip-text bg-gradient-to-r font-extrabold from-purple-800 hover:underline text-4xl text-transparent to-blue-600 uppercase"
        >
          Carte
          <fa
            icon="external-link-alt"
            class="w-3 ml-1.5 text-gray-500 opacity-0 group-hover:opacity-75"
          />
        </a>
      </div>
      <iframe
        src="https://carte.monnaie-libre.fr/?zoom=5"
        class="w-screen"
        style="height: 50vh; min-height: 600px"
        title="Carte monnaie-libre"
      />
    </section>
  </div>
</template>

<script>
import FaviconMap from '~/static/img/favicon-map-g1.svg?inline'

export default {
  name: 'HomePage',
  components: {
    FaviconMap,
  },
  async asyncData({ $content }) {
    const hero = await $content('ui/home-hero').fetch()
    const document = await $content('ui/home').fetch()

    return {
      hero,
      document,
    }
  },
}
</script>

<style lang="postcss" scoped></style>