Merge pull request #2641 from ankaboot-source/docs/update-readme-features

feat(unsubscribe): fix preview link, add redirects, and fix newlines

Author: baderdean

frontend/src/pages/unsubscribe/failure.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="m-auto text-center flex flex-col space-y-6 max-w-[30rem]">
+    <div>
+      <div class="inline-flex p-3">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="5rem"
+          height="5rem"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="#e53e3e"
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+          />
+        </svg>
+      </div>
+      <div class="text-4xl font-bold font-serif">
+        {{ $t('unsubscribe.failure_header') }}
+      </div>
+    </div>
+    <div>
+      <p>
+        {{ $t('unsubscribe.failure_message') }}
+      </p>
+    </div>
+    <div>
+      <Button :label="$t('unsubscribe.go_home')" @click="navigateTo('/')" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const $route = useRoute();
+const isPreview = Boolean($route.query.preview);
+</script>

frontend/src/pages/unsubscribe/success.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="m-auto text-center flex flex-col space-y-6 max-w-[30rem]">
+    <div>
+      <div class="inline-flex p-3">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="5rem"
+          height="5rem"
+          viewBox="0 0 36 36"
+        >
+          <path
+            fill="#55acee"
+            d="M7 12a1 1 0 0 1-1 1H1a1 1 0 0 1 0-2h5a1 1 0 0 1 1 1m-2 5a1 1 0 0 1-1 1H1a1 1 0 0 1 0-2h3a1 1 0 0 1 1 1m-2 5a1 1 0 0 1-1 1H1a1 1 0 0 1 0-2h1a1 1 0 0 1 1 1"
+          />
+          <path
+            fill="#ccd6dd"
+            d="M32.301 25c-.626 2.209-2.925 4-5.134 4h-20c-2.209 0-3.492-1.791-2.866-4l3.398-12c.626-2.209 2.924-4 5.133-4h20c2.209 0 3.493 1.791 2.867 4z"
+          />
+          <path
+            fill="#99aab5"
+            d="M17.336 17.636L4.384 26.949c-.034.028-.054.063-.085.091a2.66 2.66 0 0 0 .992 1.384c.035-.023.073-.033.107-.06L18.35 19.05c.501-.391.681-1.023.401-1.414c-.281-.391-.913-.391-1.415 0m13.81 9.404c-.015-.028-.016-.063-.034-.09l-7.674-9.314c-.281-.391-.913-.391-1.416 0c-.501.391-.68 1.023-.4 1.414l7.676 9.314c.018.026.051.037.072.06a6.04 6.04 0 0 0 1.776-1.384"
+          />
+          <path
+            fill="#99aab5"
+            d="M35.699 13c.626-2.209-.658-4-2.867-4h-20c-2.209 0-4.507 1.791-5.133 4l-.021.074l8.806 8.452c1.631 1.584 3.788 1.475 5.725.371l13.227-7.964z"
+          />
+          <path
+            fill="#e1e8ed"
+            d="M32.832 9h-20c-1.578 0-3.189.921-4.217 2.248l9.217 8.794c.749.719 2.434.729 3.656 0l14.294-8.768C35.516 9.933 34.42 9 32.832 9"
+          />
+        </svg>
+      </div>
+      <div class="text-4xl font-bold font-serif">
+        {{ $t('unsubscribe.success_header') }}
+      </div>
+    </div>
+    <div>
+      <p>
+        {{ $t('unsubscribe.success_message') }}
+      </p>
+    </div>
+    <div v-if="isPreview" class="bg-blue-50 border border-blue-200 rounded p-4">
+      <p class="text-sm text-blue-800">
+        {{ $t('unsubscribe.preview_notice') }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const $route = useRoute();
+const isPreview = Boolean($route.query.preview);
+</script>