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,78 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: number;
+    bubble?: string;
+    showBubble?: boolean;
+  }>(),
+  {
+    size: 140,
+    bubble: 'من دستیار فروش هوشمند سیستم هستم',
+    showBubble: true,
+  },
+);
+</script>
+
+<template>
+  <div class="ai-avatar" :style="{ width: `${size}px` }">
+    <div v-if="showBubble" class="bubble">{{ bubble }}</div>
+    <div class="figure">
+      <img
+        class="img"
+        src="/brand/mento-ai-avatar.png"
+        alt="دستیار هوشمند منتو"
+        :width="size"
+        :height="size"
+      />
+      <span class="glow" aria-hidden="true" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ai-avatar {
+  display: grid;
+  justify-items: center;
+  gap: 0.45rem;
+}
+
+.bubble {
+  max-width: 170px;
+  padding: 0.55rem 0.75rem;
+  border-radius: 16px 16px 4px 16px;
+  background: rgba(255, 255, 255, 0.18);
+  backdrop-filter: blur(8px);
+  color: #fff;
+  font-size: 0.78rem;
+  line-height: 1.45;
+  text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.figure {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  position: relative;
+  z-index: 1;
+  filter: drop-shadow(0 12px 28px rgba(14, 165, 233, 0.35));
+}
+
+.glow {
+  position: absolute;
+  bottom: 8%;
+  width: 55%;
+  height: 14%;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.75), transparent 70%);
+  filter: blur(4px);
+}
+</style>
@@ -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>