Rebrand the product to Montact and point local UI at production API.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/brand/BrandName.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { brand } from '@mento/shared';
+
+const props = withDefaults(
+  defineProps<{
+    lang?: 'fa' | 'en' | 'full';
+  }>(),
+  { lang: 'fa' },
+);
+
+const text = computed(() => {
+  if (props.lang === 'en') return brand.name;
+  if (props.lang === 'full') return brand.fullName;
+  return brand.nameFa;
+});
+</script>
+
+<template>
+  <span class="brand-name">{{ text }}</span>
+</template>

apps/web/src/components/brand/MentoAiAvatar.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { brand } from '@mento/shared';
+
 withDefaults(
   defineProps<{
     size?: number;
@@ -25,7 +27,7 @@ withDefaults(
     <img
       class="bot-img"
       src="/brand/mento-ai-avatar.png"
-      alt="دستیار هوشمند منتو"
+      :alt="brand.aiNameFa"
       :width="size"
       :height="size"
     />

apps/web/src/components/brand/MentoLogo.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { brand } from '@mento/shared';
+
 withDefaults(
   defineProps<{
     size?: number;
@@ -14,38 +16,22 @@ withDefaults(
 </script>
 
 <template>
-  <div class="mento-logo" :class="variant">
-    <span
+  <div class="brand-logo" :class="variant">
+    <img
       class="mark"
-      :style="{ width: `${size}px`, height: `${size}px`, borderRadius: `${Math.round(size * 0.3)}px` }"
-      aria-hidden="true"
-    >
-      <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect x="14" y="16" width="8" height="32" rx="4" fill="#fff" />
-        <path
-          d="M17 17.5c1-1.6 3.5-1.8 4.8-.5L36 30l4.3-4c1.4-1.3 3.6-1.2 4.7.4L44 27.5 33 37.5c-1.1 1-2.8 1-3.9 0L16.5 24.5 17 17.5Z"
-          fill="#134e4a"
-        />
-        <path
-          d="M27.5 32 38 21.5c1.3-1.3 3.4-1.2 4.6.2L50 29.5l-2.6 2.6L40 25.5 31 34c-1 1-2.8 1-3.8-.1l-.7-.9Z"
-          fill="#ecfdf5"
-        />
-        <rect x="42" y="16" width="8" height="32" rx="4" fill="#134e4a" />
-        <path
-          d="M41 17.5c1.3-1.4 3.5-1.3 4.7.2l1.6 1.8-7 6.6-2.1-2c-1.2-1.1-.9-3.2 2.8-6.6Z"
-          fill="#ecfdf5"
-        />
-      </svg>
-    </span>
+      :src="brand.logo"
+      :alt="brand.name"
+      :style="{ width: `${size}px`, height: `${size}px` }"
+    />
     <div v-if="showText && variant === 'full'" class="text">
-      <strong>Mento</strong>
-      <small>by Mentech</small>
+      <strong>{{ brand.name }}</strong>
+      <small>by {{ brand.company }}</small>
     </div>
   </div>
 </template>
 
 <style scoped>
-.mento-logo {
+.brand-logo {
   display: inline-flex;
   align-items: center;
   gap: 0.7rem;
@@ -53,20 +39,10 @@ withDefaults(
 }
 
 .mark {
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  background: linear-gradient(145deg, #5eead4, #14b8a6);
-  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.28);
-  overflow: hidden;
-  padding: 4px;
-  box-sizing: border-box;
-}
-
-.mark svg {
-  width: 100%;
-  height: 100%;
   display: block;
+  flex-shrink: 0;
+  object-fit: contain;
+  background: transparent;
 }
 
 .text {