.nvmrc

+v16.15.1

README.md

-## Site [monnaie-libre.fr](https://monnaie-libre.fr)
+# Site [monnaie-libre.fr](https://monnaie-libre.fr)
 
-Lien provisoire : https://monnaie-libre-fr.vercel.app/
+Ceci est le dépôt du site.
 
-> Ceci est le dépôt du générateur du site.
-> Pour éditer son contenu, passez par l'admin du site, ou modifier directement les fichiers dans le dépôt du contenu.
+## Sommaire
+
+[[_TOC_]]
+
+<div class="panel panel-warning">
+<div class="panel-body">
+Si vous n'êtes pas développeur et souhaitez contribuer à la rédaction du site, passez par l'[administration du site](https://monnaie-libre.fr/admin/).
+</div>
+</div>
 
 ### Build Setup
 
@@ -23,39 +30,47 @@ $ yarn start
 
 For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
 
-## Le back office (netlify)
+# Administration : le back office
+
+Vous pouvez accéder à l'administration ici : https://monnaie-libre.fr/admin/
+Le back office est conçu avec [netlify cms](https://www.netlifycms.org/) qui est lui même couplé à ce dépôt gitlab. Tout changement effectué en back office créera une demande de fusion dans ce dépôt.
+Vous devez avoir un compte sur ce gitlab (git.duniter.org) pour pouvoir accéder au back office.
 
-Ici pour l'instant : https://monnaie-libre-fr.vercel.app/
+## Lancer le back office (netlify)
 
-### Lancer le back office (netlify)
+Si vous avez cloner le dépôt sur votre ordinateur, vous pouvez lancer le back office en local :
 
      yarn admin
 
-Puis aller sur http://localhost:3000/admin
+Puis aller sur http://localhost:3000/admin/
 
-### Fichier de configuration
+## Configuration de netlify
 
-     - `static/admin/config.yml` Paramètres de netlify
-     - `static/admin/index.html` HTML de la page d'administration de netlify
+- `static/admin/config.yml` Paramètres de netlify
+- `static/admin/index.html` HTML de la page d'administration de netlify
 
-## Design
+# Design
 
-### Storybook
+## Illustration
 
-Idée abandonnée. J'ai installé, configuré et testé. Mais c'est compliqué, et finalement pas super intégré pour vue.js...
+Toutes les images utilisées sur le site :
+https://www.figma.com/file/Gof5rulCCUMvwk3WDKlgVY/monnaie-libre.fr
 
-### Afficher toutes les `class` de tailwindcss
+Ressources :
+https://www.pixeltrue.com/free-packs/minimalistic-illustrations#preview
+
+## Afficher toutes les `class` de tailwindcss
 
      http://localhost:3000/_tailwind/
 
 Sur cette page, vous pouvez copier une class css en cliquant sur le nom, ou maj+click pour copier plusieurs class.
 
-### Icônes
+## Icônes
 
 https://fontawesome.com/icons?m=free
 https://www.figma.com/file/Gof5rulCCUMvwk3WDKlgVY/H%C3%A9ro-monnaie-libre.fr?node-id=30%3A0
 
-## Docs
+# Docs
 
 - @nuxt/content https://content.nuxtjs.org/fr et https://nuxtjs.org/docs/2.x/directory-structure/content/
 - @nuxt/svg https://github.com/nuxt-community/svg-module
@@ -78,12 +93,12 @@ https://mertjf.github.io/tailblocks/
 http://blocks.wickedtemplates.com/
 https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/download
 
-### Divers
+## Divers
 
 https://maizzle.com
 https://vuetensils.stegosource.com/introduction.html
 
-## Generate fake data
+# Generate fake data
 
 Modifier le fichier `test/generate-md-files.js` puis :
 
@@ -105,10 +120,23 @@ Then start our Nginx Docker container with this command:
 
     dk run --rm -d -v $(pwd)/dist:/usr/share/nginx/html -p 80:80 nginx:alpine
 
-Go to [](http://localhost/) !
+Go to http://localhost/ !
+
+You can change the port. In the command above, replace `80:80` by `4000:80` and go to http://localhost:4000/
 
-You can change the port. In the command above, replace `80:80` by `4000:80` and go to [](http://localhost:4000/)
+# Gitlab
 
-# CI Gitlab
+## Graphql
+
+Graphql Endpoint : https://git.duniter.org/api/graphql
+Graphql Explorer : https://git.duniter.org/-/graphql-explorer
+
+## About CI
 
 https://blog.logrocket.com/how-to-auto-deploy-a-vue-application-using-gitlab-ci-cd-on-ubuntu/
+
+# Discourse
+
+## API Docs
+
+https://docs.discourse.org/

assets/css/tailwind.css

@@ -5,7 +5,7 @@
 @import 'tailwindcss/utilities';
 
 /* helper for development only */
-.nuxt-content-container {
+.nuxt-content-container:hover {
   background: linear-gradient(90deg, transparent 90%, #ffff0030);
 }
 
@@ -29,6 +29,14 @@ html {
   @apply text-white;
 }
 
+/* For emojis from discourse */
+img.emoji {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  display: inline;
+}
+
 /* Loader */
 @keyframes spinner {
   to {

components/home/HomeHeroParticles.vue → components/404/ParticlesML.vue

 <template>
-  <div>
-    <div
-      id="tsparticles-limit"
-      class="absolute bg-blue-50 dark:bg-black left-0 top-0"
-    />
-    <Particles
-      id="tsparticles"
-      :options="$options.config"
-      class="h-screen absolute right-0 top-0 opacity-70 dark:opacity-50"
-    />
-  </div>
+  <Particles
+    id="tsparticles"
+    :options="$options.config"
+    class="h-screen absolute right-0 top-0 opacity-70 dark:opacity-50"
+  />
 </template>
 
 <script>
@@ -234,14 +228,4 @@ export default {
 #tsparticles {
   width: 100vw;
 }
-#tsparticles-limit {
-  box-shadow: rgb(239 246 255) 0px 0px 80px 100px;
-  width: 60vw;
-  height: 60vh;
-  border-radius: 0 0 40vh;
-  z-index: 1;
-}
-.dark #tsparticles-limit {
-  box-shadow: black 0px 0px 80px 100px;
-}
 </style>

components/app/AppBreadcrumb.vue

@@ -21,7 +21,7 @@
           :class="
             index !== items.length - 1
               ? 'text-gray-400'
-              : 'text-gray-600 font-extralight select-all'
+              : 'text-gray-500 font-light select-all'
           "
         >
           {{ item.title }}

components/app/AppDarkMode.vue → components/app/AppDarkModeToggle.vue

 <template>
-  <t-toggle v-model="mode" value="dark" unchecked-value="light" variant="dark">
+  <t-toggle
+    v-model="mode"
+    value="dark"
+    unchecked-value="light"
+    variant="dark"
+    :aria-checked="mode === 'light' ? 'false' : 'true'"
+    aria-label="Toggle dark mode"
+  >
     <fa
       slot="unchecked"
       icon="sun"

components/app/AppReadingTime.vue

 <template>
-  <div class="flex items-center mb-8">
-    <fa :icon="['far', 'clock']" class="text-gray-400 text-lg mr-2" />
+  <div class="flex items-center mb-8 text-gray-500">
+    <fa :icon="['far', 'clock']" class="text-xl mr-2" />
 
     <div>
       <span>{{ readingTimeToStr }}</span>
-      <span class="text-gray-400 text-sm pl-1">
+      <span
+        class="text-sm text-gray-400 dark:text-gray-600 pl-1 hidden xl:inline"
+      >
         {{ `(${readingTime.words} mots)` }}
       </span>
     </div>

components/app/AppShareModal.vue

+<template>
+  <div class="relative">
+    <t-dropdown
+      :show.sync="show"
+      toggle-on-focus
+      toggle-on-hover
+      :hide-on-leave-timeout="0"
+      :classes="{
+        dropdown:
+          'absolute rounded-md shadow-lg dark:border-gray-500 border -top-3 -left-3 z-10 overflow-hidden w-40 bg-white dark:bg-gray-600 transition duration-150 ease-in-out',
+      }"
+    >
+      <button
+        slot="button"
+        class="relative flex items-center text-gray-500"
+        :class="show && 'z-20 text-gray-800 dark:text-gray-200'"
+        aria-label="Partager"
+        aria-haspopup="true"
+      >
+        <fa icon="share-alt" class="text-xl mr-2.5" />
+        <div>Partager</div>
+      </button>
+
+      <div class="mt-11 pt-0.5 pb-1">
+        <div class="border-t dark:border-gray-500 pt-1 mx-2"></div>
+
+        <ShareNetwork
+          v-for="network in networks"
+          :key="network.name"
+          :network="network.network"
+          :url="$config.site_url + document.path.replace(/^\/pages\//, '/')"
+          :title="document.title"
+          :description="document.description"
+          :quote="document.description"
+          :hashtags="$config.social_networks_hashtags"
+          :twitter-user="$config.twitter_user"
+          :media="media"
+          class="
+            flex
+            items-center
+            pl-4
+            pr-2
+            py-1
+            text-gray-600
+            hover:text-gray-700 hover:bg-hover-light
+            dark:text-gray-200
+          "
+        >
+          <fa :icon="network.icon" :class="network.class" />
+          <span class="pl-2">
+            {{ network.name }}
+          </span>
+        </ShareNetwork>
+      </div>
+    </t-dropdown>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    document: {
+      type: Object,
+      required: true,
+    },
+    media: {
+      type: String,
+      default: null,
+    },
+  },
+  setup() {
+    const show = ref(false)
+
+    return {
+      show,
+      networks: [
+        { network: 'email', name: 'Email', icon: 'envelope', class: 'email' },
+        {
+          network: 'facebook',
+          name: 'Facebook',
+          icon: ['fab', 'facebook'],
+          class: 'facebook',
+        },
+        {
+          network: 'twitter',
+          name: 'Twitter',
+          icon: ['fab', 'twitter'],
+          class: 'twitter',
+        },
+        {
+          network: 'linkedin',
+          name: 'Linkedin',
+          icon: ['fab', 'linkedin'],
+          class: 'linkedin',
+        },
+        {
+          network: 'reddit',
+          name: 'Reddit',
+          icon: ['fab', 'reddit'],
+          class: 'reddit',
+        },
+        {
+          network: 'skype',
+          name: 'Skype',
+          icon: ['fab', 'skype'],
+          class: 'skype',
+        },
+        { network: 'sms', name: 'SMS', icon: 'comment', class: 'sms' },
+        {
+          network: 'telegram',
+          name: 'Telegram',
+          icon: ['fab', 'telegram'],
+          class: 'telegram',
+        },
+        {
+          network: 'whatsapp',
+          name: 'Whatsapp',
+          icon: ['fab', 'whatsapp'],
+          class: 'whatsapp',
+        },
+      ],
+    }
+  },
+})
+</script>
+
+<style scoped>
+.email,
+.sms {
+  color: #444;
+}
+.twitter {
+  color: #1da1f2;
+}
+.facebook {
+  color: #3b5998;
+}
+.linkedin {
+  color: #0077b5;
+}
+.skype {
+  color: #00aff0;
+}
+.reddit {
+  color: #ff4500;
+}
+.telegram {
+  color: #0088cc;
+}
+.whatsapp {
+  color: #43d854;
+}
+</style>

components/app/MiniMap.vue

@@ -4,7 +4,17 @@
     <span
       v-show="hovered"
       id="tooltip-mini-map"
-      class="absolute whitespace-nowrap pointer-events-none p-1 shadow-lg rounded text-xs bg-opacity-90 bg-white dark:bg-gray-700"
+      class="
+        absolute
+        whitespace-nowrap
+        pointer-events-none
+        p-1
+        shadow-lg
+        rounded
+        text-xs
+        bg-opacity-90 bg-white
+        dark:bg-gray-700
+      "
     >
       {{ hovered && hovered.name }}
     </span>
@@ -223,7 +233,7 @@ export default {
 
       region.addEventListener('click', (evt) => {
         window.open(
-          `https://forum.monnaie-libre.fr/c/${regions[evt.target.id].id}`,
+          `${this.$config.forum_url}/c/${regions[evt.target.id].id}`,
           '_blank'
         )
       })

components/app/TInputIcon.vue

@@ -8,7 +8,10 @@
       v-bind="$attrs"
       v-on="$listeners"
     />
-    <div class="absolute flex items-center ml-3 bottom-0 top-0">
+    <div
+      class="absolute flex items-center bottom-0 top-0 ml-4"
+      :class="iconWrapperClass"
+    >
       <fa slot="icon" :icon="icon" :class="iconClass" />
     </div>
   </div>
@@ -26,6 +29,10 @@ export default {
       type: String,
       default: null,
     },
+    iconWrapperClass: {
+      type: String,
+      default: null,
+    },
     iconClass: {
       type: String,
       default: null,
@@ -34,13 +41,18 @@ export default {
       type: String,
       default: null,
     },
-    focus: {
+    hasFocus: {
       type: Boolean,
       default: false,
     },
   },
   mounted() {
-    if (this.focus) this.$refs.inputIcon.$el.focus()
+    if (this.hasFocus) this.focus()
+  },
+  methods: {
+    focus() {
+      this.$refs.inputIcon.$el.focus()
+    },
   },
 }
 </script>

components/blog/BlogNextPrev.vue

@@ -12,7 +12,7 @@
       :to="next.path"
       class="group next-blog flex-1 py-8 text-right"
     >
-      <span class="group-hover:text-hover">
+      <span v-prevent-last-char-break class="group-hover:text-hover">
         {{ next.title }}
       </span>
       <fa icon="chevron-right" class="text-gray-300 ml-3 transition" />

components/global/Alert.vue

@@ -45,13 +45,12 @@ export default {
   @apply m-0 !important;
 }
 .alert a {
-  @apply text-gray-700 !important;
-}
-.dark-mode .alert a {
-  @apply text-gray-300 !important;
+  @apply text-current !important;
+  filter: brightness(1.25);
 }
 .alert strong {
-  @apply text-current;
+  @apply text-current !important;
+  filter: brightness(1.25);
 }
 .alert-content pre code {
   background-color: inherit !important;
@@ -69,13 +68,13 @@ export default {
 .alert-info .alert-content {
   @apply text-blue-700;
 }
-.dark-mode .alert-info {
+.dark .alert-info {
   @apply bg-blue-900 border-blue-700;
 }
-.dark-mode .alert-info code {
+.dark .alert-info code {
   @apply bg-blue-800;
 }
-.dark-mode .alert-info .alert-content {
+.dark .alert-info .alert-content {
   @apply text-blue-300;
 }
 /* Success */
@@ -91,13 +90,13 @@ export default {
 .alert-success .alert-content {
   @apply text-green-700;
 }
-.dark-mode .alert-success {
+.dark .alert-success {
   @apply bg-green-900 border-green-700;
 }
-.dark-mode .alert-success code {
+.dark .alert-success code {
   @apply bg-green-800;
 }
-.dark-mode .alert-success .alert-content {
+.dark .alert-success .alert-content {
   @apply text-green-300;
 }
 /* Warning */
@@ -113,13 +112,13 @@ export default {
 .alert-warning .alert-content {
   @apply text-yellow-700;
 }
-.dark-mode .alert-warning {
-  @apply bg-yellow-900 border-yellow-700;
+.dark .alert-warning {
+  @apply bg-yellow-800 border-yellow-600;
 }
-.dark-mode .alert-warning code {
+.dark .alert-warning code {
   @apply bg-yellow-800;
 }
-.dark-mode .alert-warning .alert-content {
+.dark .alert-warning .alert-content {
   @apply text-yellow-300;
 }
 /* Danger */
@@ -135,13 +134,13 @@ export default {
 .alert-danger .alert-content {
   @apply text-red-700;
 }
-.dark-mode .alert-danger {
+.dark .alert-danger {
   @apply bg-red-900 border-red-700;
 }
-.dark-mode .alert-danger code {
+.dark .alert-danger code {
   @apply bg-red-800;
 }
-.dark-mode .alert-danger .alert-content {
+.dark .alert-danger .alert-content {
   @apply text-red-300;
 }
 </style>

components/global/Box.vue

+<template>
+  <component
+    :is="to ? 'nuxt-link' : 'div'"
+    :to="to"
+    class="block rounded p-4"
+    :class="computedClass"
+  >
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'Box',
+  props: {
+    to: {
+      type: [String, Object],
+      default: null,
+    },
+    color: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    computedClass() {
+      let classes = ''
+      if (this.color) {
+        classes += `bg-${this.color}-100 dark:bg-${this.color}-900`
+      } else {
+        classes = `border dark:border-gray-700`
+      }
+      if (this.to)
+        classes +=
+          ' transition transform hover:shadow-xl hover:-translate-y-0.5 is-box-with-link'
+      return classes
+    },
+  },
+}
+</script>
+
+<style lang="postcss" scoped>
+.is-box-with-link {
+  text-decoration: none !important;
+  color: currentColor !important;
+  font-weight: normal !important;
+}
+</style>

components/global/G1Crowdfunding.vue

@@ -40,7 +40,17 @@
     </slot>
 
     <div
-      class="flex items-center w-full lg:w-max justify-center px-2 lg:px-0 pt-2 lg:pt-0"
+      class="
+        flex
+        items-center
+        w-full
+        lg:w-max
+        justify-center
+        px-2
+        lg:px-0
+        pt-2
+        lg:pt-0
+      "
     >
       <slot
         v-if="!isKeyCopied"
@@ -140,9 +150,8 @@ export default {
   computed: {
     endpoint() {
       // Build url from props. Prevent missing protocol.
-      return (/^https:\/\//.test(this.node)
-        ? this.node
-        : `https://${this.node}`
+      return (
+        /^https:\/\//.test(this.node) ? this.node : `https://${this.node}`
       ).replace(/\/$/, '')
     },
     startDateTimestamp() {

components/global/Lexique.vue

 <template>
   <span
     class="tooltip-box relative"
-    :class="page && 'cursor-pointer'"
-    v-on="page ? { click: onClick } : {}"
+    :class="document && 'cursor-pointer'"
+    v-on="document ? { click: onClick } : {}"
   >
-    <abbr :aria-label="page ? page.title : title" :title="page ? '' : null">
+    <abbr
+      :aria-label="document ? document.title : title"
+      :title="document ? '' : null"
+    >
       <slot />
     </abbr>
 
     <client-only>
       <div
-        v-if="page"
-        class="tooltip absolute bg-gray-200 invisible opacity-0 left-1/2 px-4 py-2 rounded-xl shadow-lg text-gray-600 text-sm z-50"
+        v-if="document"
+        class="
+          tooltip
+          absolute
+          bg-blue-100
+          border-blue-200 border
+          invisible
+          opacity-0
+          left-1/2
+          px-4
+          py-3
+          rounded-xl
+          shadow-2xl
+          text-gray-600 text-sm
+          z-50
+          dark:bg-blue-900 dark:text-gray-100 dark:border-blue-800
+        "
       >
         <span class="triangle absolute"></span>
 
-        <span v-if="title" class="block mb-2 uppercase">
-          {{ title }}
+        <span class="block font-bold text-lg uppercase leading-6 pb-2">
+          {{ document.title }} :
         </span>
 
-        <span>{{ page.description }}</span>
+        <span>{{ document.description }}</span>
 
-        <span class="block font-extralight mt-2 text-xs">
+        <span
+          class="
+            block
+            font-light
+            mt-3
+            text-xs text-purple-800
+            dark:text-purple-500
+          "
+        >
           {{ $t('lexique.tooltipReadmore') }}
         </span>
       </div>
@@ -40,23 +66,24 @@ export default {
   },
   data() {
     return {
-      page: null,
+      document: null,
     }
   },
   async fetch() {
     if (this.computedTitle) {
-      try {
-        this.page = await this.$content(
-          'lexique',
-          this.computedTitle.toLowerCase()
-        )
-          .only(['title', 'description'])
-          .fetch()
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          `lexique term '${this.computedTitle}' not found in /content/lexique/ from file ${this.$parent.fileUrl}`
-        )
+      const term = this.computedTitle.toLowerCase()
+      const results = await this.$content('lexique')
+        .where({
+          $or: [
+            { title: { $regex: [`^${term}$`, 'i'] } }, // case insensitive
+            { synonyms: { $contains: term } }, // search in synonyms
+          ],
+        })
+        .limit(1)
+        .fetch()
+
+      if (results.length) {
+        this.document = results[0]
       }
     }
   },
@@ -68,7 +95,7 @@ export default {
   },
   methods: {
     onClick() {
-      this.$router.push(`/lexique/${this.computedTitle.toLowerCase()}`)
+      this.$router.push(this.document.path)
     },
   },
 }
@@ -92,11 +119,26 @@ abbr {
   opacity: 1;
 }
 .triangle {
-  border-width: 0 6px 6px;
+  border-width: 0 10px 10px;
   border-color: transparent;
-  border-bottom-color: rgba(229, 231, 235, var(--tw-bg-opacity));
-  top: -6px;
+  border-bottom-color: #bfdbfe;
+  top: -10px;
   left: 50%;
   transform: translateX(-50%);
 }
+.triangle:before {
+  content: '';
+  position: absolute;
+  border-width: 0 10px 10px;
+  border-color: transparent;
+  border-bottom-color: #dbeafe;
+  top: 2px;
+  left: -10px;
+}
+.dark .triangle {
+  border-bottom-color: #1e40af;
+}
+.dark .triangle:before {
+  border-bottom-color: #1e3a8a;
+}
 </style>

components/global/List.vue

+<template>
+  <div class="prose dark:prose-dark">
+    <slot />
+
+    <slot v-if="Array.isArray(data)" name="items" :items="data">
+      <ul class="list">
+        <li v-for="(item, i) in data" :key="i">
+          <nuxt-link :to="item.path.replace(/^\/pages\//, '/')">
+            <div v-if="title">{{ item.title }}</div>
+          </nuxt-link>
+          <span v-if="description">{{ item.description }}</span>
+        </li>
+      </ul>
+    </slot>
+    <slot v-else-if="data" name="item">
+      <h2 v-if="title">{{ data.title }}</h2>
+      <p v-if="description">{{ data.description }}</p>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'List',
+  props: {
+    content: {
+      type: String,
+      default: null,
+    },
+    only: {
+      type: [String, Array],
+      default: null,
+    },
+    where: {
+      type: Object,
+      default: null,
+    },
+    sortBy: {
+      type: String,
+      default: null,
+    },
+    direction: {
+      type: String,
+      default: 'asc',
+      validator(value) {
+        return ['asc', 'desc'].includes(value)
+      },
+    },
+    skip: {
+      type: [Number, String],
+      default: null,
+    },
+    search: {
+      type: String,
+      default: null,
+    },
+    searchField: {
+      type: String,
+      default: null,
+    },
+    limit: {
+      type: [Number, String],
+      default: null,
+    },
+
+    title: {
+      type: Boolean,
+      default: true,
+    },
+    description: {
+      type: Boolean,
+      default: false,
+    },
+    readingTime: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      data: null,
+    }
+  },
+  async fetch() {
+    if (this.content) {
+      const content = this.$content(this.content)
+      if (this.only) content.only(this.only)
+      if (this.where) content.where(this.where)
+      if (this.sortBy) content.sortBy(this.sortBy, this.direction)
+      if (this.skip) content.skip(+this.skip)
+      if (this.search) {
+        this.searchField
+          ? content.search(this.searchField, this.search)
+          : content.search(this.search)
+      }
+      if (this.limit) content.limit(+this.limit)
+
+      this.data = await content.fetch()
+    }
+  },
+}
+</script>
+
+<style lang="postcss" scoped></style>

components/home/HomeCTA.vue

+<template>
+  <div class="pt-8">
+    <t-button
+      class="flex items-center rounded-2xl"
+      variant="success"
+      @click="$modal.show('videoIntro')"
+    >
+      <fa :icon="['fab', 'youtube']" class="text-4xl mr-4" />
+      <div class="text-left pr-1">
+        <div class="text-xl font-bold">Introduction</div>
+        <div class="-mt-1">3 min en vidéo</div>
+      </div>
+    </t-button>
+
+    <t-modal name="videoIntro" variant="video">
+      <div style="padding: 56.25% 0 0 0; position: relative">
+        <iframe
+          src="https://player.vimeo.com/video/514975135?h=7f6183d68c&portrait=0&autoplay=1"
+          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
+          frameborder="0"
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowfullscreen
+        ></iframe>
+      </div>
+    </t-modal>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="postcss"></style>

components/home/HomeHero.vue

 <template>
-  <div class="hero container flex">
-    <div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full z-10">
-      <nuxt-content :document="hero" />
+  <div class="hero container flex lg:items-center">
+    <div class="max-w-2xl 2xl:max-w-3xl w-full">
+      <nuxt-content :document="document" />
+
+      <HomeCTA />
     </div>
-    <HomeHeroSky class="fill-current text-white absolute" />
 
-    <LazyHomeHeroParticles v-if="isDesktop" />
+    <SuperHero
+      class="
+        superhero
+        absolute
+        h-40
+        hidden
+        lg:h-full lg:relative lg:right-0 lg:w-full
+        md:block
+        right-6
+        w-1/3
+      "
+    />
   </div>
 </template>
 
 <script>
+import SuperHero from '~/static/img/superhero.svg?inline'
+
 export default {
+  components: {
+    SuperHero,
+  },
   props: {
-    hero: {
+    document: {
       type: Object,
       required: true,
     },
   },
-  data() {
-    return {
-      isDesktop: false,
-    }
-  },
-  mounted() {
-    if (window.innerWidth > 640) this.isDesktop = true
-  },
 }
 </script>
 
 <style lang="postcss" scoped>
 .hero {
-  min-height: 50vh;
-  padding-top: 15vh;
+  padding: max(8vh, 4rem) 1.5rem;
 }
 
-.hero >>> .svg-inline--fa {
-  animation: shake 10s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
-  animation-delay: 5s;
+@keyframes floatHero {
+  0% {
+    transform: translate(0px, 0px);
+  }
+  50% {
+    transform: translate(0px, -20px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
 }
-.hero >>> .link-contribute svg {
-  animation-delay: 5.5s;
+@keyframes floatDots {
+  0% {
+    transform: translate(0px, 0px);
+  }
+  50% {
+    transform: translate(-30px, -20px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
 }
-@keyframes shake {
+@keyframes floatZigzag {
   0% {
-    -webkit-transform: translate(2px, 1px) rotate(0deg);
+    transform: rotate(0deg);
   }
-
-  1% {
-    -webkit-transform: translate(-1px, -2px) rotate(-3deg);
+  50% {
+    transform: rotate(15deg) translate(10px);
   }
-
-  2% {
-    -webkit-transform: translate(-3px, 0px) rotate(3deg);
+  100% {
+    transform: rotate(0deg);
   }
-
-  3% {
-    -webkit-transform: translate(0px, 2px) rotate(0deg);
+}
+@keyframes floatCape {
+  0% {
+    transform: skewY(0deg);
   }
-
-  4% {
-    -webkit-transform: translate(1px, -1px) rotate(3deg);
+  50% {
+    transform: skewY(2deg);
   }
-
-  5% {
-    -webkit-transform: translate(-1px, 2px) rotate(-3deg);
+  100% {
+    transform: skewY(0deg);
   }
-
-  6% {
-    -webkit-transform: translate(-3px, 1px) rotate(0deg);
+}
+@keyframes floatBall {
+  0% {
+    transform: rotate(0deg);
   }
-
-  7% {
-    -webkit-transform: translate(2px, 1px) rotate(-3deg);
+  50% {
+    transform: rotate(5deg);
   }
-
-  8% {
-    -webkit-transform: translate(-1px, -1px) rotate(3deg);
+  100% {
+    transform: rotate(0deg);
   }
-
-  9% {
-    -webkit-transform: translate(2px, 2px) rotate(0deg);
+}
+@keyframes pulseBreak {
+  0% {
+    transform: scale(1);
   }
-
-  10% {
-    -webkit-transform: translate(1px, -2px) rotate(-3deg);
+  50% {
+    transform: scale(1.3);
   }
-
-  11% {
-    transform: translate(0, 0) rotate(0deg);
+  100% {
+    transform: scale(1);
   }
 }
+@keyframes wind {
+  0% {
+    transform: translateX(-2000px);
+  }
+  100% {
+    transform: translateX(2000px);
+  }
+}
+
+.superhero #man {
+  animation: floatHero 4s ease-in-out infinite;
+}
+.superhero #cape {
+  animation: floatCape 3s ease-in-out infinite;
+}
+.superhero #break_chain {
+  animation: pulseBreak 3s ease-in-out infinite;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.superhero #chain_ball {
+  animation: floatBall 3s ease-in-out infinite;
+  transform-origin: top left;
+  transform-box: fill-box;
+}
+/* red particles */
+.superhero #dots path[fill='#DC2626']:nth-child(odd) {
+  animation: floatDots 4s ease-in-out infinite;
+}
+.superhero #dots path[fill='#DC2626']:nth-child(even) {
+  animation: floatDots 3s ease-in-out infinite;
+}
+/* blue particles */
+.superhero #dots path[fill='#5222D0']:nth-child(odd) {
+  animation: floatDots 5s ease-in-out infinite;
+}
+.superhero #dots path[fill='#5222D0']:nth-child(even) {
+  animation: floatDots 2s ease-in-out infinite;
+}
+/* zigzags */
+.superhero #zigzag path {
+  animation: floatZigzag 5s ease-in-out infinite;
+  transform-box: fill-box;
+}
+/* gray lines */
+.superhero #wind *:nth-child(3n + 1) {
+  animation: wind 6s linear infinite;
+}
+.superhero #wind *:nth-child(3n + 2) {
+  animation: wind 10s linear infinite;
+}
+.superhero #wind *:nth-child(3n + 3) {
+  animation: wind 12s linear infinite;
+}
 </style>