Refactoring home page : events + map

components/home/HomeNextEvents.vue

 <template>
-  <aside v-if="!loading" class="lg:flex">
-    <div
-      v-for="(column, num) in columns"
-      :key="num"
-      class="flex-1"
-      :class="num === 1 && 'lg:ml-4'"
-    >
+  <section id="agenda" class="container py-12">
+    <div class="border-b-2 container flex items-end mb-3 pb-2">
+      <JuneCalendar class="w-12 mr-3 fill-current dark:text-gray-100" />
       <a
-        v-for="(event, index) in column"
-        :key="index"
-        :href="`https://forum.monnaie-libre.fr/t/${event.slug}/${event.id}`"
-        targe="_blank"
-        class="block hover:bg-hover-light dark-hover:text-gray-800 p-2 mt-1 rounded-lg transition-colors"
+        href="https://forum.monnaie-libre.fr/calendar"
+        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"
       >
-        <div class="event-date text-sm text-gray-500">
-          {{ prettyDate(event.event.start) }}
-        </div>
-        <div>{{ event.title }}</div>
+        Agenda
+        <fa
+          icon="external-link-alt"
+          class="w-3 ml-1.5 text-gray-500 opacity-0 group-hover:opacity-75"
+        />
       </a>
     </div>
-  </aside>
 
-  <div v-else class="h-80 flex items-center">
-    <span class="loading-state h-12 w-12 scale-150 transform mx-auto" />
-  </div>
+    <aside v-if="!loading" class="lg:flex">
+      <div
+        v-for="(column, num) in columns"
+        :key="num"
+        class="flex-1"
+        :class="num === 1 && 'lg:ml-4'"
+      >
+        <a
+          v-for="(event, index) in column"
+          :key="index"
+          :href="`https://forum.monnaie-libre.fr/t/${event.slug}/${event.id}`"
+          targe="_blank"
+          class="block hover:bg-hover-light dark-hover:text-gray-800 p-2 mt-1 rounded-lg transition-colors"
+        >
+          <div class="event-date text-sm text-gray-500">
+            {{ prettyDate(event.event.start) }}
+            <div v-for="(tag, i) in event.tag" :key="i">{{ tag }}</div>
+          </div>
+          <div>{{ event.title }}</div>
+        </a>
+      </div>
+    </aside>
+
+    <div v-else class="h-80 flex items-center">
+      <span class="loading-state h-12 w-12 scale-150 transform mx-auto" />
+    </div>
+  </section>
 </template>
 
 <script>
+import JuneCalendar from '~/static/img/june-calendar.svg?inline'
 import { fetchNextEvents } from '~/libs/api-forum'
 
 export default {
   name: 'HomeNextEvents',
+  components: {
+    JuneCalendar,
+  },
   data() {
     return {
       events: [],

pages/index.vue

 <template>
   <div>
-    <div class="above-the-fold flex flex-col justify-between bg-blue-50">
+    <div
+      class="h-screen -mt-16 flex flex-col justify-between bg-blue-50 shadow-lg"
+    >
       <HomeHero :hero="hero" />
       <HomeSearch />
     </div>
 
-    <section class="container mx-auto m-12">
-      <div class="block md:flex justify-between">
-        <div class="flex flex-col w-full md:w-1/2">
-          <div>
-            <h2 class="text-3xl uppercase text-gray-400 font-bold">
-              Ça se passe près de chez vous !
-            </h2>
-            <p class="text-lg mt-3 mb-6">
-              Cliquez sur votre région pour accéder à son forum dédié...
-            </p>
-            <MiniMap class="" />
-          </div>
-
-          <h2 class="text-3xl uppercase text-gray-400 font-bold mt-3 mb-4">
-            Localisez un événement
-          </h2>
-          <div class="relative flex-1">
-            <div
-              class="bg-white border border-gray-400 cursor-pointer flex hover:bg-gray-100 p-2 right-2.5 rounded shadow-md top-2.5 z-10"
-              :class="isFullMap ? 'fixed' : 'absolute'"
-              @click="isFullMap = !isFullMap"
-            >
-              <fa
-                :icon="isFullMap ? 'compress-arrows-alt' : 'expand-arrows-alt'"
-                class="text-lg"
-              />
-            </div>
-            <iframe
-              src="https://carte.monnaie-libre.fr/?zoom=5"
-              class="h-full w-full"
-              :class="isFullMap && 'fixed inset-0'"
-              title="Carte monnaie-libre"
-            />
-          </div>
-        </div>
-
-        <HomeNextEvents class="w-full ml-0 md:w-1/2 md:ml-8 mt-8 md:mt-0" />
-      </div>
-    </section>
-
     <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()
@@ -64,16 +56,7 @@ export default {
       document,
     }
   },
-  data() {
-    return {
-      isFullMap: false,
-    }
-  },
 }
 </script>
 
-<style lang="postcss" scoped>
-.above-the-fold {
-  min-height: calc(100vh - 64px);
-}
-</style>
+<style lang="postcss" scoped></style>

static/img/june-calendar.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.805 32.805">
+  <path d="M28.392 2.356V0h-1.276v2.356h-4.398V0h-1.277v2.356h-4.397V0h-1.277v2.356h-4.398V0H10.09v2.356H5.692V0H4.415v2.356H1.178v30.449h30.449V2.356h-3.235zm-7.037 3.106h3.713v.973h-2.5v.815h2.285v.938h-2.285v.889h2.564v1.044h-3.777V5.462zm-4.847 0h1.247l1.618 2.871h.013V5.462h1.142v4.659h-1.246l-1.617-2.904h-.015v2.904h-1.143V5.462zm-4.854 0h1.214v2.806c0 .301.061.526.183.679.122.152.332.229.633.229.3 0 .511-.076.632-.229.122-.152.183-.378.183-.679V5.462h1.213v2.734c0 .674-.162 1.18-.486 1.517-.324.337-.838.506-1.543.506s-1.219-.169-1.543-.506c-.324-.337-.486-.843-.486-1.517V5.462zM7.582 8.267h1.142v.431c0 .152.041.271.121.352.08.083.196.125.349.125a.402.402 0 00.323-.134c.076-.09.114-.247.114-.473V5.462h1.214v3.184c0 1.05-.543 1.573-1.631 1.573a2.06 2.06 0 01-.776-.128 1.232 1.232 0 01-.502-.358 1.4 1.4 0 01-.271-.552 2.837 2.837 0 01-.082-.71l-.001-.204zm22.199 21.494H3.024V12.709h26.757v17.052z"/>
+  <path d="M14.41 16.402h3.987v3.987H14.41zM20.572 16.402h3.986v3.987h-3.986zM8.247 22.564h3.987v3.987H8.247zM14.409 22.564h3.988v3.987h-3.988zM20.57 22.564h3.987v3.987H20.57z"/>
+</svg>
\ No newline at end of file