feat: add status page in footer

Author: haxgun

frontend/src/components/icons/CheckCircle.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  size?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+})
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" id="root" viewBox="0 0 40 41" fill="none" class="hidden dark:block" :height="props.size" :width="props.size">
+  <path d="M27.187,16.156L27.187,16.157C23.88,19.315 21.045,22.933 18.768,26.899L18.768,26.899C18.692,27.033 18.586,27.146 18.458,27.232C18.331,27.318 18.185,27.373 18.033,27.393C17.88,27.413 17.726,27.398 17.58,27.349C17.434,27.299 17.302,27.217 17.194,27.109L12.794,22.706L12.787,22.7L12.781,22.694C12.683,22.603 12.604,22.492 12.549,22.37C12.495,22.247 12.465,22.115 12.463,21.98C12.46,21.846 12.485,21.713 12.535,21.588C12.586,21.464 12.661,21.35 12.756,21.256C12.85,21.161 12.964,21.086 13.088,21.035C13.213,20.985 13.346,20.96 13.48,20.963C13.615,20.965 13.747,20.994 13.87,21.049C13.992,21.104 14.103,21.183 14.194,21.281L14.2,21.287L14.207,21.294L17.251,24.336L17.694,24.779L18.028,24.248C20.215,20.758 22.828,17.555 25.805,14.71C25.9,14.619 26.012,14.548 26.135,14.5C26.257,14.453 26.388,14.43 26.519,14.433C26.65,14.436 26.78,14.465 26.9,14.518C27.02,14.571 27.129,14.647 27.219,14.742C27.31,14.837 27.381,14.949 27.429,15.072C27.476,15.194 27.499,15.325 27.496,15.456C27.493,15.587 27.464,15.717 27.411,15.837C27.358,15.957 27.282,16.066 27.187,16.156ZM20,37C24.376,37 28.573,35.262 31.667,32.167C34.762,29.073 36.5,24.876 36.5,20.5C36.5,16.124 34.762,11.927 31.667,8.833C28.573,5.738 24.376,4 20,4C15.624,4 11.427,5.738 8.333,8.833C5.238,11.927 3.5,16.124 3.5,20.5C3.5,24.876 5.238,29.073 8.333,32.167C11.427,35.262 15.624,37 20,37Z" stroke-width="1" stroke-linejoin="bevel" fill="#10B981" stroke="black"></path>
+  <circle cx="20" cy="20.5" r="15.5" stroke="url(#paint0_linear_343_10907)" stroke-opacity="0.3"></circle>
+  <circle cx="20" cy="20.5" r="18" stroke="url(#paint1_linear_343_10907)" stroke-opacity="0.3" stroke-width="4"></circle>
+  <defs>
+    <linearGradient id="paint0_linear_343_10907" x1="12.1082" y1="0.237206" x2="43.0515" y2="46.6521" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"></stop>
+      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
+    </linearGradient>
+    <linearGradient id="paint1_linear_343_10907" x1="-52.0569" y1="-87.8493" x2="40.5249" y2="45.237" gradientUnits="userSpaceOnUse">
+      <stop offset="0.63328" stop-color="#10B981"></stop>
+      <stop offset="1" stop-color="#10B981" stop-opacity="0"></stop>
+      </linearGradient>
+  </defs>
+</svg>
+</template>

frontend/src/components/ui/Footer.vue

@@ -8,6 +8,7 @@ import Twitch from '@/components/icons/Socials/Twitch.vue'
 import Discord from '@/components/icons/Socials/Discord.vue'
 import Telegram from '@/components/icons/Socials/Telegram.vue'
 import { Hearts } from 'untitledui-js/vue'
+import CheckCircle from "@/components/icons/CheckCircle.vue";
 </script>
 <template>
   <footer class="container m-auto py-16 flex flex-col gap-10">
@@ -64,6 +65,14 @@ import { Hearts } from 'untitledui-js/vue'
           >
             <Hearts color="#FA4454" :size="20" />
           </Button>
+          <Button
+            aria-label="Status"
+            variant="ghost"
+            @click="openLink('https://status.valory.su/')"
+            class="h-fit w-fit cursor-pointer p-2 hover:bg-[#0F121A]"
+          >
+            <CheckCircle :size="20" />
+          </Button>
         </div>
       </div>
       <div