Page confirmation emails ✨

client/components/carte/Wrapper.vue

@@ -22,7 +22,7 @@ const currentDate = new Date();
 <template>
   <div :class="embedded ? '' : 'carte-wrapper fr-py-4w'">
     <div class="fr-container">
-      <div v-if="!embedded" class="fr-mb-4w">
+      <div class="fr-mb-4w">
         <div class="fr-col-12 fr-col-lg-9 fr-grid-row fr-grid-row--middle header-wrapper">
           <h2 class="fr-mb-0">Carte et historique</h2>
           <div class="full-width fr-hidden-lg" />
@@ -64,10 +64,10 @@ const currentDate = new Date();
 <style scoped lang="scss">
 .carte-wrapper {
   background: var(--yellow-tournesol-975-75);
+}
 
-  .header-wrapper {
-    justify-content: space-between;
-  }
+.header-wrapper {
+  justify-content: space-between;
 }
 
 .fr-tabs {
@@ -88,10 +88,8 @@ const currentDate = new Date();
 }
 
 @media screen and (max-width: 991px) {
-  .carte-wrapper {
-    .header-wrapper {
-      justify-content: center;
-    }
+  .header-wrapper {
+    justify-content: center;
   }
 }
 </style>

client/pages/emails/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'basic',
+});
+
+const appName = useRuntimeConfig().public.appName;
+useHead({
+  title: `Emails - ${appName}`,
+});
+</script>
+
+<template>
+  <div class="fr-container">
+    <h1 class="text-align-center">Merci</h1>
+    <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
+      <div class="fr-col-3 text-align-right">
+        <img src="/emails_popcorn.png"
+             style="max-width: 100%"
+             height="100"
+             title="Image d'illustration popcorn"
+        />
+      </div>
+      <div class="fr-col-9">
+        Retrouvez notre prochain épisode le samedi 15 juin dans votre boite email !
+      </div>
+    </div>
+  </div>
+</template>

purgecss.config.js

@@ -11,7 +11,8 @@ module.exports = {
     /^maplibregl/,
     /^fr-tooltip/,
     /^fr-placement/,
-    /^fr-alert/
+    /^fr-alert/,
+    /^text-align/
   ],
   output: [".output/public/_nuxt"]
 };