feat: add Spanish translations

components/FooterSection.vue

@@ -8,7 +8,7 @@
       <div class="footer grid gap-xl">
         <div class="grid grid-cols-[max-content_1fr] md:grid-cols-1 gap-xl">
           <div
-            class="grid grid-cols-[130px_130px_130px] gap-2xl sm:gap-md sm:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[130px_130px_130px] gap-2xl sm:gap-md sm:grid-cols-2 justify-items-start"
           >
             <div
               v-for="section in footerLinks"
@@ -31,7 +31,12 @@
           </div>
           <div class="w-full grid gap-md xs:mt-lg">
             <AdoIcon class="mb-2 w-[50px] h-auto" />
-            <i18n-t keypath="footer.ado_text" tag="p" class="footer-text" scope="global">
+            <i18n-t
+              keypath="footer.ado_text"
+              tag="p"
+              class="footer-text"
+              scope="global"
+            >
               <a
                 class="py-1 underline footer-text"
                 :href="URLS.ado"

components/MailchimpEmbed.vue

@@ -54,14 +54,19 @@
           id="mc-embedded-subscribe"
           type="submit"
           name="subscribe"
-          class="margin rounded-r-full py-sm px-md inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-black-950 bg-black-950 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
-          value="Subscribe"
+          class="margin rounded-r-full py-sm px-md inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-black-950 bg-black-950 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
+          :value="subscribeLocale"
         />
       </div>
     </div>
   </form>
 </template>
 
+<script setup>
+const { t } = useI18n()
+const subscribeLocale = t('newsletter.action')
+</script>
+
 <style lang="scss">
 #mc-embedded-subscribe {
   margin: 0px !important;

components/sections/BuySection.vue

@@ -6,7 +6,14 @@
     :height="'h-lg-y-screen sm:h-[max-content]'"
   >
     <template #content>
-      <h2 class="title-h2 text-center">{{ t('buy-section.title') }}</h2>
+      <i18n-t
+        keypath="buy-section.title"
+        class="title-h2"
+        tag="h2"
+        scope="global"
+      >
+        <span class="text-wit-blue-500">.</span>
+      </i18n-t>
       <p class="text text-center max-w-screen-md">
         {{ t('buy-section.description') }}
       </p>

components/sections/HeroSection.vue

@@ -31,9 +31,7 @@
         <SquareDots
           class="absolute right-xl bottom-xl z-10 sm:hidden md:bottom-sm"
         />
-        <div
-          class="grid auto-rows-min gap-y-lg z-20 max-w-c-3xl"
-        >
+        <div class="grid auto-rows-min gap-y-lg z-20 max-w-c-3xl">
           <i18n-t
             keypath="hero.title.main"
             class="title-h1 text-center"
@@ -42,9 +40,14 @@
           >
             <br />
             {{ $t('hero.title.main2') }}
-            <span class="text-wit-blue-500">{{
-              $t('hero.title.gradient')
-            }}</span>
+            <i18n-t
+              keypath="hero.title.gradient"
+              class="text-wit-blue-500 gradient"
+              tag="span"
+              scope="global"
+            >
+              <span class="break">-</span>
+            </i18n-t>
           </i18n-t>
 
           <h2 class="text text-center">{{ $t('hero.description') }}</h2>
@@ -76,6 +79,15 @@ import SquareDots from '@/assets/svg/square-dots.svg?component'
   animation: down 1s infinite alternate;
 }
 
+.break {
+  display: none;
+}
+
+@media (max-width: 500px) {
+  .break {
+    display: inline-block;
+  }
+}
 @keyframes down {
   0% {
     transform: translateY(0px);

components/sections/SecureSection.vue

@@ -63,7 +63,7 @@ const wallets: Array<WalletInfo> = [
     title: t('my-wit-wallet.title'),
     description: t('my-wit-wallet.description'),
     url: URLS.my_wit_wallet,
-    action: t('sheikah.action'),
+    action: t('my-wit-wallet.action'),
     icon: MywitwalletIcon,
   },
 ]

components/sections/TutorialsSection.vue

@@ -4,7 +4,12 @@
     :content-classes="'grid justify-items-center gap-md'"
   >
     <template #content>
-      <i18n-t keypath="tutorials.title.text" class="title-h2" tag="h2" scope="global">
+      <i18n-t
+        keypath="tutorials.title.text"
+        class="title-h2"
+        tag="h2"
+        scope="global"
+      >
         <span class="text-wit-blue-500">{{ $t('tutorials.title.dot') }}</span>
       </i18n-t>
       <p class="text text-center max-w-screen-md">

constants.ts

@@ -78,11 +78,10 @@ export const languageLocales: LanguageDictionary = {
     name: 'ENGLISH',
     file: 'en-US.json',
   },
-  // TODO: uncomment when spanish is supported
-  // [localeCodes.es]: {
-  //   code: 'es-ES',
-  //   iso: 'es-ES',
-  //   name: 'ESPAÑOL',
-  //   file: 'es-ES.json',
-  // },
+  [localeCodes.es]: {
+    code: 'es-ES',
+    iso: 'es-ES',
+    name: 'ESPAÑOL',
+    file: 'es-ES.json',
+  },
 }

layouts/default.vue

@@ -19,7 +19,7 @@
             <NavigationCursor v-if="link.active" class="w-sm h-auto" /><span
               class="slash text-wit-blue-500"
               >/</span
-            >{{ link.locale }}
+            >{{ t(link.locale) }}
           </InnerLink>
         </template>
       </TopBar>
@@ -40,31 +40,38 @@ import { useI18n } from 'vue-i18n'
 import WitnetLogo from '@/assets/svg/witnet-logo.svg?component'
 import NavigationCursor from '@/assets/svg/navigation-cursor.svg?component'
 const { t } = useI18n()
+type NavLink = {
+  key: string
+  active: boolean
+  to: string
+  rel: string
+  locale: string
+}
 
-const navLinks: Array<{ key: string }> = ref([
+const navLinks: Ref<Array<NavLink>> = ref([
   {
     key: 'stake',
     active: false,
     to: '/stake',
     rel: 'stake',
-    locale: t('nav_bar.route.stake'),
+    locale: 'nav_bar.route.stake',
   },
   {
     key: 'buy',
     active: false,
     to: '/buy',
     rel: 'buy',
-    locale: t('nav_bar.route.buy'),
+    locale: 'nav_bar.route.buy',
   },
   {
     key: 'build',
     active: false,
     to: '/build',
     rel: 'build',
-    locale: t('nav_bar.route.build'),
+    locale: 'nav_bar.route.build',
   },
 ])
-function activateLink(link) {
+function activateLink(link: NavLink) {
   link.active = true
 }
 function clearActiveLinks() {

locales/en-US.json

@@ -18,7 +18,7 @@
       "main2": "powerful oracle,",
       "gradient": "provably."
     },
-    "description": "The Wit oracle pairs a state-of-the-art Proof of Stake algorithm with its own native coin $WIT to deliver unparalleled security for all your Web3 data needs.",
+    "description": "The Wit/Oracle pairs a state-of-the-art Proof of Stake algorithm with its own native coin $WIT to deliver unparalleled security for all your Web3 data needs.",
     "action": "Join the WIT gang today"
   },
   "what-is-witnet": {
@@ -61,7 +61,7 @@
     }
   },
   "buy-section": {
-    "title": "Buy $WIT",
+    "title": "Buy $WIT{0}",
     "description": "$WIT, the native coin of Witnet, is available on trusted and well-known crypto exchanges. By acquiring and staking $WIT, you become a valuable part of the Witnet Community, contributing to the security, growth, and success of the decentralized future with Witnet.",
     "exchanges": {
       "gate": "Gate.io",
@@ -73,7 +73,7 @@
     }
   },
   "secure-section": {
-    "title1": "Secure {0} {1} {2}",
+    "title1": "Secure {0} {1}{2}",
     "title2": "Your $WIT",
     "description": "$WIT, the native coin of Witnet, is available on trusted and well-known crypto exchanges. By acquiring and staking $WIT, you become a valuable part of the Witnet Community, contributing to the security, growth, and success of the decentralized future with Witnet."
   },