Componentize dashboard middle section and add Mento brand assets.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-01 16:05:29 +03:30
parent da6c494fcb
commit 57fa6c8d12
15 changed files with 1491 additions and 1015 deletions
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: number;
+    showText?: boolean;
+    variant?: 'full' | 'mark';
+  }>(),
+  {
+    size: 40,
+    showText: true,
+    variant: 'full',
+  },
+);
+</script>
+
+<template>
+  <div class="mento-logo" :class="variant">
+    <img
+      class="mark"
+      src="/brand/mento-logo.svg"
+      alt="Mento"
+      :width="size"
+      :height="size"
+    />
+    <div v-if="showText && variant === 'full'" class="text">
+      <strong>Mento</strong>
+      <small>by Mentech</small>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mento-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.7rem;
+  min-width: 0;
+}
+
+.mark {
+  display: block;
+  border-radius: 12px;
+  flex-shrink: 0;
+  object-fit: cover;
+  background: #ecfdf8;
+}
+
+.text {
+  display: grid;
+  gap: 0.05rem;
+  min-width: 0;
+}
+
+.text strong {
+  font-size: 1.05rem;
+  letter-spacing: -0.02em;
+  color: #0f172a;
+  line-height: 1.1;
+}
+
+.text small {
+  color: #94a3b8;
+  font-size: 0.72rem;
+}
+</style>