feat: add a language change

src/components/Footer.vue

@@ -3,12 +3,23 @@ import IconGithub from '@/components/icons/IconGithub.vue'
 import IconHeart from '@/components/icons/IconHeart.vue'
 import IconTelegram from '@/components/icons/IconTelegram.vue'
 import IconTwitch from '@/components/icons/IconTwitch.vue'
+import { useLocalStorage } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
+const { locale } = useI18n()
+
+let localValue
+const switchLang = () => {
+  locale.value === 'en' ? (locale.value = 'ru') : (locale.value = 'en')
+  useLocalStorage('valoryLocale', locale.value)
+  localValue = locale.value
+}
 </script>
 
 <template>
   <footer>
     <span class="copyright"
-      >Made with <IconHeart style="fill: red" :size="24" /> © 2023 VALORY</span
+      >{{ $t('landing.footer') }} <IconHeart style="fill: red" :size="24" /> © 2023 VALORY</span
     >
     <ul class="socials">
       <li class="social">
@@ -31,6 +42,15 @@ import IconTwitch from '@/components/icons/IconTwitch.vue'
           <IconHeart :size="18" />
         </a>
       </li>
+      <li class="social">
+        {{ locale.value }}
+        <a v-if="localValue === 'en'" target="__blank" @click="switchLang">
+          <Icon icon="flag:ru-4x3" width="18" height="18" />
+        </a>
+        <a v-else target="__blank" @click="switchLang">
+          <Icon icon="flag:us-4x3" width="18" height="18" />
+        </a>
+      </li>
     </ul>
   </footer>
 </template>

src/i18n.js

@@ -0,0 +1,12 @@
+import messages from '@intlify/unplugin-vue-i18n/messages'
+import { useLocalStorage } from '@vueuse/core'
+import { createI18n } from 'vue-i18n'
+
+const locale = useLocalStorage('valoryLocale', 'en')
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: locale.value,
+  fallbackLocale: 'en',
+  messages
+})

src/locales/en.json

@@ -0,0 +1,16 @@
+{
+  "landing": {
+    "pretitle": "STREAM OVERLAY 2.0",
+    "description": "Grab your audience's attention with real-time VALORANT stats!",
+    "features": {
+      "first": "Customize your overlay according to your stream.",
+      "second": "It's absolutely FREE! There is support for many popular streaming programs like OBS and others.",
+      "third": "Setup once and everything will always work!"
+    },
+    "buttons": {
+      "first": "How does it work?",
+      "second": "Create your overlay"
+    },
+    "footer": "Made with"
+  }
+}

src/locales/ru.json

@@ -0,0 +1,16 @@
+{
+  "landing": {
+    "pretitle": "ОВЕРЛЕЙ ДЛЯ СТРИМА 2.0",
+    "description": "Привлекайте внимание аудитории статистикой VALORANT!",
+    "features": {
+      "first": "Кастомизируйте свой оверлей в соответствии с Вашим стримом.",
+      "second": "Это абсолютно бесплатно! Есть поддержка для многих популярных стриминг-программ, например OBS и другие.",
+      "third": "Установите один раз и все будет работать как по маслу!"
+    },
+    "buttons": {
+      "first": "Как это работает?",
+      "second": "Создайте свой оверлей"
+    },
+    "footer": "Сделано с"
+  }
+}

src/views/HomeView.vue

@@ -11,32 +11,31 @@ import Button from '@/components/ui/Button.vue'
   <main>
     <div class="main__body">
       <div class="main__container">
-        <p class="pretitle">STREAM OVERLAY 2.0</p>
+        <p class="pretitle">{{ $t('landing.pretitle') }}</p>
         <div class="logo">
           <IconValory :size="60" />
           <h1 class="title">VALORY</h1>
         </div>
-        <p class="description">Catch your audience's attention with real-time VALORANT stats!</p>
+        <p class="description">{{ $t('landing.description') }}</p>
         <div class="features">
           <div class="feature">
             <IconPalette />
-            <p>Customize your overlay according to your stream.</p>
+            <p>{{ $t('landing.features.first') }}</p>
           </div>
           <div class="feature">
             <IconBillCheck />
             <p>
-              It's absolutely FREE! There is support for many popular streaming programs like OBS
-              and others.
+              {{ $t('landing.features.second') }}
             </p>
           </div>
           <div class="feature">
             <IconMagicStick />
-            <p>Setup once and everything will always work!</p>
+            <p>{{ $t('landing.features.third') }}</p>
           </div>
         </div>
         <div class="buttons">
-          <Button variant="outline">How it does work?</Button>
-          <Button @click="$router.push('/editor')">Create your overlay</Button>
+          <Button variant="outline">{{ $t('landing.buttons.first') }}</Button>
+          <Button @click="$router.push('/editor')">{{ $t('landing.buttons.second') }}</Button>
         </div>
       </div>
       <Footer />