feat: initial account implementation

Author: Novout

packages/app/src/pages/Account.vue

@@ -0,0 +1,40 @@
+<template>
+  <main class="wb-screen w-full flex flex-row justify-center flex-wrap gap-20 items-center bg-theme-background-2">
+    <section class="flex text-white justify-around items-center flex-col gap-5 w-80 h-140 rounded-xl bg-theme-background-4">
+      <h2 class="font-bold text-3xl">{{ t('account.common.title') }}</h2>
+      <h3 class="font-bold text-3xl">{{ t('account.common.price') }}</h3>
+      <p class="font-raleway text-lg text-center">{{ t('account.common.description') }}</p>
+      <Button @click="onCreateAccount('common')">{{ t('account.common.enter') }}</Button>
+    </section>
+    <section class="flex text-white justify-around items-center flex-col gap-5 w-80 h-140 rounded-xl bg-theme-background-3">
+      <h2 class="font-bold text-3xl">{{ t('account.adventure.title') }}</h2>
+      <h3 class="font-bold text-3xl">{{ t('account.adventure.price') }}</h3>
+      <p class="font-raleway text-lg text-center">{{ t('account.adventure.description') }}</p>
+      <Button @click="onCreateAccount('adventure')">{{ t('account.adventure.enter') }}</Button>
+    </section>
+    <section class="flex text-white justify-around items-center flex-col gap-5 w-80 h-140 rounded-xl bg-theme-background-1">
+      <h2 class="font-bold text-3xl">{{ t('account.force.title') }}</h2>
+      <h3 class="font-bold text-3xl">{{ t('account.force.price') }}</h3>
+      <p class="font-raleway text-lg text-center">{{ t('account.force.description') }}</p>
+      <Button @click="onCreateAccount('force')">{{ t('account.force.enter') }}</Button>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+  import { tryOnMounted } from '@vueuse/core'
+  import { usePlugin } from 'better-write-plugin-core'
+  import { useI18n } from 'vue-i18n'
+
+  const plugin = usePlugin()
+  const { t } = useI18n()
+
+  // TODO: images in background
+  tryOnMounted(async () => {
+    plugin.emit('plugin-theme-set', 'BetterWrite - Dark')
+  })
+
+  const onCreateAccount = (type: 'common' | 'adventure' | 'force') => {
+    plugin.emit('plugin-backend-register-user', type)
+  }
+</script>

packages/app/src/routes.ts

@@ -9,6 +9,11 @@ export const routes = [
     path: '/landing',
     component: () => import('@/pages/Landing.vue'),
   },
+  {
+    name: 'Account',
+    path: '/account',
+    component: () => import('@/pages/Account.vue'),
+  },
   {
     name: 'About',
     path: '/about',

packages/app/src/use/landing.ts

@@ -39,7 +39,7 @@ export const useLanding = () => {
 
     localStorage.setItem('visited', 'visited')
 
-    router.push('/').finally(() => {
+    router.push('/account').finally(() => {
       // for common reactivity in other routes
       document.body.style.overflowX = 'auto'
 

packages/languages/src/en-US.ts

@@ -5,6 +5,26 @@ export default {
     password: 'Password...',
     start: 'Log in'
   },
+  account: {
+    common: {
+      title: 'Common',
+      price: 'Free',
+      description: 'Use the default application.',
+      enter: 'Enter',
+    },
+    adventure: {
+      title: 'Adventure',
+      price: '5 / Mes',
+      description: 'Venturing into a larger storage capacity.',
+      enter: 'Enter',
+    },
+    force: {
+      title: 'Force',
+      price: '20/Mes',
+      description: 'Extensive cloud saving capabilities and direct support!',
+      enter: 'Enter',
+    },
+  },
   editor: {
     new: {
       title: 'New Project',

packages/languages/src/pt-BR.ts

@@ -1,11 +1,31 @@
 export default {
-  editor: {
-    backend: {
-      title: 'Entre ou crie sua conta!',
-      email: 'Email...',
-      password: 'Senha...',
-      start: 'Entrar'
+  account: {
+    common: {
+      title: 'Simples',
+      price: 'Gratuito',
+      description: 'Use a aplicação padrão.',
+      enter: 'Escolher',
+    },
+    adventure: {
+      title: 'Aventureiro',
+      price: '5 / Mes',
+      description: 'Se aventure em uma capacidade maior de armazenamento.',
+      enter: 'Escolher',
+    },
+    force: {
+      title: 'Força Maior',
+      price: '20/Mes',
+      description: 'Uma vasta capacidade de salvamento na nuvem e suporte direto!',
+      enter: 'Escolher',
     },
+  },
+  backend: {
+    title: 'Entre ou crie sua conta!',
+    email: 'Email...',
+    password: 'Senha...',
+    start: 'Entrar'
+  },
+  editor: {
     new: {
       title: 'Novo Projeto',
       description1: 'O ',