Fix transparent AI avatar cutout and woven Mento logo mark.

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

apps/web/public/brand/mento-logo.svg

@@ -1,7 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
-  <rect width="64" height="64" rx="16" fill="#ECFDF8"/>
+  <!-- Woven M mark matching brand: teal #2EB29B + navy #134E4A -->
-  <path d="M14 46V18.5c0-1.4 1.6-2.2 2.7-1.4L32 28.2l15.3-11.1c1.1-.8 2.7 0 2.7 1.4V46c0 1.1-.9 2-2 2H16c-1.1 0-2-.9-2-2Z" fill="#134E4A"/>
+  <rect x="8" y="12" width="10" height="40" rx="5" fill="#2EB29B"/>
-  <path d="M18 44V22.8L32 33.2 46 22.8V44H18Z" fill="#2EB29B"/>
+  <path d="M12 13c1.3-2.1 4.4-2.4 6.1-.6L34 28l5.4-5.1c1.7-1.6 4.5-1.4 5.9.5L47 26.2 33.6 39.3c-1.3 1.3-3.4 1.3-4.7 0L10.5 21.2 12 13Z" fill="#134E4A"/>
-  <path d="M32 33.2 18 22.8V44h14V33.2Z" fill="#14B8A6"/>
+  <path d="M25.2 30.8 37.5 18.8c1.6-1.6 4.3-1.5 5.8.2L55 32.1l-3.2 3.3L41 25.3 30.2 35.8c-1.3 1.3-3.5 1.2-4.7-.1l-.3-.3Z" fill="#2EB29B"/>
-  <path d="M32 33.2 46 22.8V44H32V33.2Z" fill="#0D9488"/>
+  <rect x="46" y="12" width="10" height="40" rx="5" fill="#134E4A"/>
+  <path d="M44.8 13.2c1.6-1.7 4.4-1.6 5.9.2l2 2.2-8.7 8.3-2.6-2.5c-1.5-1.4-1.1-4 3.4-8.2Z" fill="#2EB29B"/>
 </svg>

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

@@ -6,7 +6,7 @@ withDefaults(
     showBubble?: boolean;
   }>(),
   {
-    size: 140,
+    size: 148,
     bubble: 'من دستیار فروش هوشمند سیستم هستم',
     showBubble: true,
   },
@@ -16,16 +16,13 @@ withDefaults(
 <template>
   <div class="ai-avatar" :style="{ width: `${size}px` }">
     <div v-if="showBubble" class="bubble">{{ bubble }}</div>
-    <div class="figure">
+    <img
-      <img
+      class="img"
-        class="img"
+      src="/brand/mento-ai-avatar.png"
-        src="/brand/mento-ai-avatar.png"
+      alt="دستیار هوشمند منتو"
-        alt="دستیار هوشمند منتو"
+      :width="size"
-        :width="size"
+      :height="size"
-        :height="size"
+    />
-      />
-      <span class="glow" aria-hidden="true" />
-    </div>
   </div>
 </template>
 
@@ -33,7 +30,7 @@ withDefaults(
 .ai-avatar {
   display: grid;
   justify-items: center;
-  gap: 0.45rem;
+  gap: 0.4rem;
 }
 
 .bubble {
@@ -49,30 +46,13 @@ withDefaults(
   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%;
+  height: auto;
+  display: block;
   object-fit: contain;
-  position: relative;
+  background: transparent;
-  z-index: 1;
+  /* soft presence without rectangular plate */
-  filter: drop-shadow(0 12px 28px rgba(14, 165, 233, 0.35));
+  filter: drop-shadow(0 10px 18px rgba(14, 165, 233, 0.28));
-}
-
-.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>

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

@@ -15,13 +15,24 @@ withDefaults(
 
 <template>
   <div class="mento-logo" :class="variant">
-    <img
+    <span class="mark" :style="{ width: `${size}px`, height: `${size}px` }" aria-hidden="true">
-      class="mark"
+      <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-      src="/brand/mento-logo.svg"
+        <rect x="8" y="12" width="10" height="40" rx="5" fill="#2EB29B" />
-      alt="Mento"
+        <path
-      :width="size"
+          d="M12 13c1.3-2.1 4.4-2.4 6.1-.6L34 28l5.4-5.1c1.7-1.6 4.5-1.4 5.9.5L47 26.2 33.6 39.3c-1.3 1.3-3.4 1.3-4.7 0L10.5 21.2 12 13Z"
-      :height="size"
+          fill="#134E4A"
-    />
+        />
+        <path
+          d="M25.2 30.8 37.5 18.8c1.6-1.6 4.3-1.5 5.8.2L55 32.1l-3.2 3.3L41 25.3 30.2 35.8c-1.3 1.3-3.5 1.2-4.7-.1l-.3-.3Z"
+          fill="#2EB29B"
+        />
+        <rect x="46" y="12" width="10" height="40" rx="5" fill="#134E4A" />
+        <path
+          d="M44.8 13.2c1.6-1.7 4.4-1.6 5.9.2l2 2.2-8.7 8.3-2.6-2.5c-1.5-1.4-1.1-4 3.4-8.2Z"
+          fill="#2EB29B"
+        />
+      </svg>
+    </span>
     <div v-if="showText && variant === 'full'" class="text">
       <strong>Mento</strong>
       <small>by Mentech</small>
@@ -38,11 +49,16 @@ withDefaults(
 }
 
 .mark {
-  display: block;
+  display: grid;
-  border-radius: 12px;
+  place-items: center;
   flex-shrink: 0;
-  object-fit: cover;
+  background: transparent;
-  background: #ecfdf8;
+}
+
+.mark svg {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 .text {
@@ -52,10 +68,11 @@ withDefaults(
 }
 
 .text strong {
-  font-size: 1.05rem;
+  font-size: 1.08rem;
   letter-spacing: -0.02em;
   color: #0f172a;
   line-height: 1.1;
+  font-weight: 800;
 }
 
 .text small {

apps/web/src/components/dashboard/HomeHero.vue

@@ -74,7 +74,7 @@ function alertIcon(tone: string) {
       </form>
     </div>
 
-    <MentoAiAvatar class="hero-bot" :size="150" />
+    <MentoAiAvatar class="hero-bot" :size="168" />
   </header>
 </template>
 
@@ -82,15 +82,15 @@ function alertIcon(tone: string) {
 .hero {
   position: relative;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 180px;
+  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.7fr);
-  gap: 1rem;
+  gap: 0.5rem 1rem;
   align-items: center;
-  min-height: 196px;
+  min-height: 210px;
-  padding: 1.35rem 1.4rem;
+  padding: 1.4rem 1.5rem 1.35rem;
   border-radius: 28px;
   overflow: hidden;
   color: #fff;
-  background: linear-gradient(110deg, #5eead4 0%, #14b8a6 26%, #0f766e 55%, #163a5f 100%);
+  background: linear-gradient(105deg, #4fd1c5 0%, #14b8a6 24%, #0f766e 52%, #123a5c 100%);
   box-shadow: 0 18px 40px rgba(15, 118, 110, 0.22);
 }
 

apps/web/src/layouts/AppLayout.vue

@@ -760,30 +760,32 @@ onUnmounted(() => {
   padding: 0 0.35rem;
 }
 
-.desktop-topbar {
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1.05rem 1.5rem 0.85rem;
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  background: rgba(245, 247, 250, 0.9);
-  backdrop-filter: blur(10px);
-}
-
 .global-search {
   flex: 1;
-  max-width: 560px;
+  max-width: 620px;
+  margin-inline: auto;
   display: flex;
   align-items: center;
   gap: 0.7rem;
   background: #eef2f6;
   border-radius: 999px;
-  padding: 0.72rem 1rem;
+  padding: 0.78rem 1.1rem;
   border: 1px solid transparent;
 }
 
+.desktop-topbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.05rem 1.5rem 0.85rem;
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: rgba(245, 247, 250, 0.92);
+  backdrop-filter: blur(10px);
+}
+
 .global-search:focus-within {
   background: #fff;
   border-color: #cbd5e1;

scripts/cleanup_avatar_plate.py

@@ -0,0 +1,26 @@
+from PIL import Image
+
+# Force-clear any remaining opaque black plate around AI avatar too
+path = r"e:\projeha\crm\apps\web\public\brand\mento-ai-avatar.png"
+img = Image.open(path).convert("RGBA")
+px = img.load()
+w, h = img.size
+cleared = 0
+for y in range(h):
+    for x in range(w):
+        r, g, b, a = px[x, y]
+        if a == 0:
+            continue
+        # leftover flat dark teal/black plate
+        if r < 45 and g < 70 and b < 85 and max(r, g, b) - min(r, g, b) < 35:
+            # keep cyan glow pixels (more green/blue variance + brighter cyan)
+            if b > 120 or g > 140:
+                continue
+            px[x, y] = (r, g, b, 0)
+            cleared += 1
+        elif r > 248 and g > 248 and b > 248:
+            px[x, y] = (255, 255, 255, 0)
+            cleared += 1
+
+img.save(path, "PNG")
+print("cleared", cleared, "pixels; size", img.size)

scripts/process_ai_avatar.py

@@ -0,0 +1,35 @@
+from PIL import Image
+
+src = r"C:\Users\Mahdi\.cursor\projects\e-projeha-crm\assets\mento-ai-avatar-transparent.png"
+dst = r"e:\projeha\crm\apps\web\public\brand\mento-ai-avatar.png"
+
+img = Image.open(src).convert("RGBA")
+pixels = img.load()
+w, h = img.size
+cx, cy = w / 2, h / 2
+radius = min(w, h) * 0.42
+
+for y in range(h):
+    for x in range(w):
+        r, g, b, a = pixels[x, y]
+        if r > 245 and g > 245 and b > 245:
+            pixels[x, y] = (r, g, b, 0)
+            continue
+        # leftover dark plate far from character
+        if r < 40 and g < 70 and b < 80 and a > 200:
+            dist = ((x - cx) ** 2 + (y - cy) ** 2) ** 0.5
+            if dist > radius:
+                pixels[x, y] = (r, g, b, 0)
+
+bbox = img.getbbox()
+if bbox:
+    img = img.crop(bbox)
+    pad = 12
+    padded = Image.new("RGBA", (img.width + pad * 2, img.height + pad * 2), (0, 0, 0, 0))
+    padded.paste(img, (pad, pad), img)
+    img = padded
+
+img.save(dst, "PNG")
+px = img.load()
+print("saved", dst, img.size)
+print("corner alpha", px[0, 0][3], px[img.width - 1, 0][3])

scripts/process_logo.py

@@ -0,0 +1,40 @@
+from PIL import Image
+
+src = r"C:\Users\Mahdi\.cursor\projects\e-projeha-crm\assets\mento-logo-mark.png"
+dst_png = r"e:\projeha\crm\apps\web\public\brand\mento-logo.png"
+
+img = Image.open(src).convert("RGBA")
+pixels = img.load()
+w, h = img.size
+
+for y in range(h):
+    for x in range(w):
+        r, g, b, a = pixels[x, y]
+        # white canvas
+        if r > 235 and g > 235 and b > 235:
+            pixels[x, y] = (255, 255, 255, 0)
+            continue
+        # black / near-black canvas
+        if r < 28 and g < 28 and b < 28:
+            pixels[x, y] = (0, 0, 0, 0)
+            continue
+        # dark fringe around logo on black plate
+        if r < 40 and g < 45 and b < 50 and (r + g + b) < 110:
+            pixels[x, y] = (0, 0, 0, 0)
+
+bbox = img.getbbox()
+if not bbox:
+    raise SystemExit("empty image after bg remove")
+
+img = img.crop(bbox)
+pad = 10
+padded = Image.new("RGBA", (img.width + pad * 2, img.height + pad * 2), (0, 0, 0, 0))
+padded.paste(img, (pad, pad), img)
+img = padded
+
+side = max(img.width, img.height)
+canvas = Image.new("RGBA", (side, side), (0, 0, 0, 0))
+canvas.paste(img, ((side - img.width) // 2, (side - img.height) // 2), img)
+canvas.save(dst_png, "PNG")
+px = canvas.load()
+print("logo saved", dst_png, canvas.size, "corner", px[0, 0])