feat: implement support landing page

components/SocialLinks.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="links">
+    <div class="link-container">
+      <a class="link" :href="urls.github" target="_blank">
+        <img
+          class="logo"
+          src="@/assets/svg/socials/github.svg"
+          alt="Github"
+          aria-hidden="true"
+        />
+      </a>
+      <h4 class="link-title">{{ $t('join-github') }}</h4>
+      <p class="link-description">{{ $t('join-github-description') }}</p>
+    </div>
+    <div class="link-container">
+      <a class="link" :href="urls.telegram" target="_blank">
+        <img
+          class="logo"
+          src="@/assets/svg/socials/telegram.svg"
+          alt="Telegram"
+          aria-hidden="true"
+        />
+      </a>
+      <h4 class="link-title">{{ $t('join-telegram') }}</h4>
+      <p class="link-description">{{ $t('join-telegram-description') }}</p>
+    </div>
+    <div class="link-container">
+      <a class="link" :href="urls.discord" target="_blank">
+        <img
+          class="logo"
+          src="@/assets/svg/socials/discord.svg"
+          alt="Discord"
+          aria-hidden="true"
+        />
+      </a>
+      <h4 class="link-title">{{ $t('join-discord') }}</h4>
+      <p class="link-description">{{ $t('join-discord-description') }}</p>
+    </div>
+    <div class="link-container">
+      <a class="link" :href="urls.twitter" target="_blank">
+        <img
+          class="logo"
+          src="@/assets/svg/socials/twitter.svg"
+          alt="Twitter"
+          aria-hidden="true"
+        />
+      </a>
+      <h4 class="link-title">{{ $t('join-twitter') }}</h4>
+      <p class="link-description">{{ $t('join-twitter-description') }}</p>
+    </div>
+    <div class="link-container">
+      <a class="link" :href="urls.email" target="_blank">
+        <img
+          class="logo"
+          src="@/assets/svg/socials/email.svg"
+          alt="Twitter"
+          aria-hidden="true"
+        />
+      </a>
+      <h4 class="link-title">{{ $t('join-email') }}</h4>
+      <p class="link-description">{{ $t('join-email-description') }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { urls } from '@/constants'
+</script>
+
+<style lang="scss" scoped>
+.links {
+  display: grid;
+  grid-template-columns: 1fr;
+  column-gap: 24px;
+  justify-items: flex-start;
+  row-gap: 24px;
+  .link-container {
+    display: grid;
+    column-gap: 16px;
+    grid-template-rows: max-content max-content;
+    justify-items: flex-start;
+    row-gap: 8px;
+    align-items: center;
+    grid-template-columns: max-content 1fr;
+  }
+  .link-description {
+    color: $white-2;
+    margin: 0;
+    text-align: start;
+    align-self: flex-start;
+  }
+  .link-title {
+    color: $white-2;
+    margin: 0;
+    text-align: start;
+  }
+  .link {
+    text-decoration: none;
+    padding: 24px;
+    grid-row: span 2;
+    background-color: $green;
+    border-radius: 8px;
+    font-size: 14px;
+  }
+  .logo {
+    width: 22px;
+  }
+}
+@media (max-width: 600px) {
+  .link-container {
+    grid-template-columns: 1fr;
+    justify-items: flex-start;
+  }
+  .link {
+    grid-row: span 1;
+  }
+}
+</style>

constants.ts

@@ -0,0 +1,7 @@
+export const urls = {
+  telegram: 'https://t.me/witnetio',
+  discord: 'https://discord.gg/witnet',
+  twitter: 'https://twitter.com/witnet_io',
+  github: 'https://github.com/witnet/my-wit-wallet/issues',
+  email: 'mailto:[email protected]',
+}

locales/en.json

@@ -1,3 +1,17 @@
 {
-  "title": "This website is under construction!"
+  "title": "myWitWallet Support",
+  "description": "Let us know what happened, and we'll find a solution to help. Our support team will will respond to you as soon as possible!",
+  "send-email": "Send an email",
+  "join-discord": "Join our Discord server",
+  "join-github": "Open an issue on GitHub",
+  "join-telegram": "Join our Telegram community",
+  "join-twitter": "Join our Twitter account",
+  "join-email": "Send an email",
+  "join-discord-description": "Click on myWitWallet channel and describe your problem",
+  "join-github-description": "We will resolve it as soon as possible",
+  "join-telegram-description": "Send a message describing your problem to our Telegram group",
+  "join-twitter-description": "Send a message to our Twitter account",
+  "join-email-description": "Email our support team",
+  "bye-bye-message": "Our support team will will respond to you as soon as possible!",
+  "contact-links-title": "Contact Witnet"
 }

nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   ssr: false,
   app: {
-    baseURL: '/',
+    baseURL: '/support-mywitwallet/',
     head: {
       title: 'myWitWallet Support',
       meta: [

package.json

@@ -15,6 +15,7 @@
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@types/node": "^18.16.19",
+    "@types/nodemailer": "^6.4.14",
     "@typescript-eslint/parser": "^5.59.5",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
@@ -23,10 +24,11 @@
     "prettier": "^2.8.8",
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
-    "vue-i18n": "^9.2.2",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "vue-i18n": "^9.2.2"
   },
   "dependencies": {
-    "@nuxtjs/eslint-config-typescript": "^12.0.0"
+    "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "nodemailer": "^6.9.7"
   }
 }