feat: first tool base

components/Tool.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+import {Component, Vue} from 'nuxt-property-decorator'
+import ToolWrapper from '~/components/ToolWrapper.vue';
+
+interface ToolConfig {
+  title: string;
+  description: string;
+}
+
+export {ToolConfig}
+
+@Component({components: {ToolWrapper}})
+export default class Tool extends Vue {
+  public isTool = true;
+  public config: ToolConfig = {
+    title: 'Tool',
+    description: 'Tool description'
+  }
+
+  public head() {
+    const {title, description} = this.config
+
+    return {
+      title,
+      description
+    }
+  }
+}
+
+</script>

components/ToolWrapper.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="tool-wrapper">
+    <v-row no-gutters justify="center" align="center">
+      <v-col cols="12" lg="6">
+        <div class="tool-wrapper-info">
+          <h1>{{ config.title }}</h1>
+          <div class="spacer"></div>
+          <div class="description">{{ config.description }}</div>
+        </div>
+        <v-card flat>
+          <v-card-text class="pa-10">
+            <slot></slot>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue} from 'nuxt-property-decorator'
+import {ToolConfig} from '~/components/Tool.vue'
+
+@Component
+export default class ToolWrapper extends Vue {
+  @Prop() config!: ToolConfig;
+}
+
+</script>
+
+<style scoped lang="less">
+.tool-wrapper {
+  height: 100%;
+
+  .tool-wrapper-info{
+    padding: 50px 0 30px;
+  }
+
+  .category {
+    color: #546167;
+  }
+
+  h1 {
+    font-weight: 300;
+    font-size: 50px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .spacer{
+    width: 130px;
+    height: 1px;
+    background-color: var(--v-primary-base);
+    margin-bottom: 10px;
+  }
+
+  .description {
+    color: #829097;
+  }
+}
+</style>