Polish dashboard UI to match Mento mockup with IRANSans and brand assets.

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

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

@@ -15,12 +15,19 @@ const icons: Record<string, 'calendar' | 'users' | 'briefcase' | 'check'> = {
   'open-deals': 'briefcase',
   followups: 'check',
 };
+
+const iconTones: Record<string, string> = {
+  sales: '#14b8a6',
+  customers: '#38bdf8',
+  'open-deals': '#fb923c',
+  followups: '#a78bfa',
+};
 </script>
 
 <template>
   <div class="kpi-row">
     <article v-for="kpi in kpis" :key="kpi.key" class="kpi-card">
-      <div class="kpi-icon">
+      <div class="kpi-icon" :style="{ color: iconTones[kpi.key] ?? '#14b8a6' }">
         <UiIcon :name="icons[kpi.key] ?? 'chart'" :size="20" />
       </div>
       <div class="kpi-text">
@@ -31,6 +38,7 @@ const icons: Record<string, 'calendar' | 'users' | 'briefcase' | 'check'> = {
           class="kpi-change"
           :class="{ down: kpi.changePercent < 0 }"
         >
+          <span class="arrow">{{ kpi.changePercent >= 0 ? '↑' : '↓' }}</span>
           {{ formatChange(kpi.changePercent) }} {{ kpi.changeLabel }}
         </span>
       </div>
@@ -60,8 +68,7 @@ const icons: Record<string, 'calendar' | 'users' | 'briefcase' | 'check'> = {
   width: 48px;
   height: 48px;
   border-radius: 16px;
-  background: #ecfdf8;
-  color: #14b8a6;
+  background: #f8fafc;
   display: grid;
   place-items: center;
   flex-shrink: 0;
@@ -82,7 +89,9 @@ const icons: Record<string, 'calendar' | 'users' | 'briefcase' | 'check'> = {
 }
 
 .kpi-change {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
   margin-top: 0.45rem;
   padding: 0.18rem 0.5rem;
   border-radius: 999px;
@@ -92,6 +101,11 @@ const icons: Record<string, 'calendar' | 'users' | 'briefcase' | 'check'> = {
   font-weight: 700;
 }
 
+.arrow {
+  font-size: 0.82rem;
+  line-height: 1;
+}
+
 .kpi-change.down {
   background: #fee2e2;
   color: #dc2626;