feat: initial work on portal layout and base setup

Author: Dragory

package-lock.json

@@ -26,7 +26,8 @@
   "workspaces": [
     "shared",
     "backend",
-    "dashboard"
+    "dashboard",
+    "portal"
   ],
   "dependencies": {
     "dotenv": "^16.5.0"

package.json

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

portal/.gitignore

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

portal/README.md

@@ -0,0 +1,105 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+:root {
+  --color-blue-50: rgb(193,245,255);
+  --color-blue-100: rgb(178,231,255);
+  --color-blue-200: rgb(149,203,255);
+  --color-blue-300: rgb(121,175,234);
+  --color-blue-400: rgb(92,149,206);
+  --color-blue-500: rgb(62,123,178);
+  --color-blue-600: rgb(26,98,151);
+  --color-blue-700: rgb(0,75,125);
+  --color-blue-800: rgb(0,52,100);
+  --color-blue-900: rgb(0,32,76);
+  --color-blue-950: rgb(0,22,64);
+  --color-steelblue-50: rgb(210,243,255);
+  --color-steelblue-100: rgb(196,229,255);
+  --color-steelblue-200: rgb(168,201,245);
+  --color-steelblue-300: rgb(141,174,216);
+  --color-steelblue-400: rgb(114,147,188);
+  --color-steelblue-500: rgb(88,121,161);
+  --color-steelblue-600: rgb(62,97,135);
+  --color-steelblue-700: rgb(34,73,109);
+  --color-steelblue-800: rgb(0,51,85);
+  --color-steelblue-900: rgb(0,30,61);
+  --color-steelblue-950: rgb(0,20,50);
+  --color-green-50: rgb(164,255,127);
+  --color-green-100: rgb(149,251,113);
+  --color-green-200: rgb(120,222,86);
+  --color-green-300: rgb(90,193,59);
+  --color-green-400: rgb(59,166,29);
+  --color-green-500: rgb(17,139,0);
+  --color-green-600: rgb(0,112,0);
+  --color-green-700: rgb(0,87,0);
+  --color-green-800: rgb(0,62,0);
+  --color-green-900: rgb(0,41,0);
+  --color-green-950: rgb(0,35,0);
+  --color-yellow-50: rgb(255,238,63);
+  --color-yellow-100: rgb(255,224,45);
+  --color-yellow-200: rgb(231,197,0);
+  --color-yellow-300: rgb(200,170,0);
+  --color-yellow-400: rgb(170,143,0);
+  --color-yellow-500: rgb(141,118,0);
+  --color-yellow-600: rgb(113,94,0);
+  --color-yellow-700: rgb(88,70,0);
+  --color-yellow-800: rgb(68,47,0);
+  --color-yellow-900: rgb(55,25,0);
+  --color-yellow-950: rgb(50,12,0);
+  --color-orange-50: rgb(255,210,101);
+  --color-orange-100: rgb(255,196,87);
+  --color-orange-200: rgb(255,168,60);
+  --color-orange-300: rgb(255,141,28);
+  --color-orange-400: rgb(224,115,0);
+  --color-orange-500: rgb(193,90,0);
+  --color-orange-600: rgb(162,64,0);
+  --color-orange-700: rgb(132,39,0);
+  --color-orange-800: rgb(105,9,0);
+  --color-orange-900: rgb(81,0,0);
+  --color-orange-950: rgb(72,0,0);
+  --color-red-50: rgb(255,178,120);
+  --color-red-100: rgb(255,164,107);
+  --color-red-200: rgb(255,134,81);
+  --color-red-300: rgb(255,105,56);
+  --color-red-400: rgb(255,75,29);
+  --color-red-500: rgb(231,39,0);
+  --color-red-600: rgb(198,0,0);
+  --color-red-700: rgb(166,0,0);
+  --color-red-800: rgb(135,0,0);
+  --color-red-900: rgb(106,0,0);
+  --color-red-950: rgb(94,0,0);
+  --color-gray-50: rgb(241,241,241);
+  --color-gray-100: rgb(226,226,226);
+  --color-gray-200: rgb(198,198,198);
+  --color-gray-300: rgb(171,171,171);
+  --color-gray-400: rgb(145,145,145);
+  --color-gray-500: rgb(119,119,119);
+  --color-gray-600: rgb(94,94,94);
+  --color-gray-700: rgb(71,71,71);
+  --color-gray-800: rgb(48,48,48);
+  --color-gray-900: rgb(27,27,27);
+  --color-gray-950: rgb(17,17,17);
+
+  --text-base: 16px;
+  --text-lg: 24px;
+  --text-xl: 32px;
+  --text-xl2: 40px;
+  --text-xl3: 48px;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font: 16px/1.2 "Roboto", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
+  font-weight: 350;
+}
+</style>

portal/app/app.vue

@@ -0,0 +1,41 @@
+<template>
+  <button>
+    <div aria-hidden="true" class="corner corner1"></div>
+    <div aria-hidden="true" class="corner corner2"></div>
+    <div aria-hidden="true" class="corner corner3"></div>
+    <div aria-hidden="true" class="corner corner4"></div>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+button {
+  --bg-color: rgba(255, 255, 255, 0.05);
+  --stripe-color: rgba(255, 255, 255, 0.05);
+
+  display: inline-block;
+  font: inherit;
+  display: block;
+  appearance: none;
+  color: currentColor;
+  border: 1.5px dashed var(--color-gray-100);
+  border-radius: 8px;
+  font-weight: 400;
+  cursor: pointer;
+
+  height: 32px;
+  padding: 0 16px;
+
+  background-color: var(--bg-color);
+  background-image: repeating-linear-gradient(135deg, var(--stripe-color) 0px, var(--stripe-color) 2px, transparent 2px, transparent 6px);
+  position: relative;
+}
+button:hover {
+  --bg-color: rgba(255, 255, 255, 0.1);
+  --stripe-color: rgba(255, 255, 255, 0.1);
+}
+</style>