feat: landing page + smart components

components/smart/ChangeLanguage.vue

@@ -0,0 +1,51 @@
+<template>
+  <span>
+    <tippy
+      ref="language"
+      trigger="click"
+      theme="popover"
+      arrow
+      interactive
+      :animate-fill="false"
+    >
+      <template #trigger>
+        <button
+          v-tippy="{ animateFill: false, theme: 'tooltip' }"
+          :title="$t('choose_language')"
+        >
+          <span class="mr-2 text-lg">
+            {{
+              $i18n.locales.find(({ code }) => code == $i18n.locale).country
+                | formatCountry
+            }}
+          </span>
+          {{ $i18n.locales.find(({ code }) => code == $i18n.locale).name }}
+        </button>
+      </template>
+      <NuxtLink
+        v-for="locale in $i18n.locales.filter(
+          ({ code }) => code !== $i18n.locale
+        )"
+        :key="locale.code"
+        class="
+          inline-flex
+          items-center
+          px-4
+          py-2
+          transition
+          rounded-lg
+          hover:bg-accentLight hover:text-secondaryDark
+          focus:bg-accentLight focus:text-secondaryDark focus:outline-none
+        "
+        :to="switchLocalePath(locale.code)"
+      >
+        <span class="mr-2 text-lg">
+          {{ locale.country | formatCountry }}
+        </span>
+        <span class="font-semibold">
+          {{ locale.name }}
+        </span>
+      </NuxtLink>
+    </tippy>
+  </span>
+</template>