Fix transparent AI avatar cutout and woven Mento logo mark.

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

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
-        class="img"
-        src="/brand/mento-ai-avatar.png"
-        alt="دستیار هوشمند منتو"
-        :width="size"
-        :height="size"
-      />
-      <span class="glow" aria-hidden="true" />
-    </div>
+    <img
+      class="img"
+      src="/brand/mento-ai-avatar.png"
+      alt="دستیار هوشمند منتو"
+      :width="size"
+      :height="size"
+    />
   </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;
-  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);
+  background: transparent;
+  /* soft presence without rectangular plate */
+  filter: drop-shadow(0 10px 18px rgba(14, 165, 233, 0.28));
 }
 </style>

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

@@ -15,13 +15,24 @@ withDefaults(
 
 <template>
   <div class="mento-logo" :class="variant">
-    <img
-      class="mark"
-      src="/brand/mento-logo.svg"
-      alt="Mento"
-      :width="size"
-      :height="size"
-    />
+    <span class="mark" :style="{ width: `${size}px`, height: `${size}px` }" aria-hidden="true">
+      <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="8" y="12" width="10" height="40" rx="5" 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="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;
-  border-radius: 12px;
+  display: grid;
+  place-items: center;
   flex-shrink: 0;
-  object-fit: cover;
-  background: #ecfdf8;
+  background: transparent;
+}
+
+.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;
-  gap: 1rem;
+  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.7fr);
+  gap: 0.5rem 1rem;
   align-items: center;
-  min-height: 196px;
-  padding: 1.35rem 1.4rem;
+  min-height: 210px;
+  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);
 }