From d914e8735d54e7db1bbf2ff70155b079ec3df3bd Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Fri, 21 Aug 2026 16:50:21 +0800
Subject: [PATCH] feat: emphasize growth analyst promotion

---
 DESIGN.md                               |  1 +
 src/lib/components/GrowthTeaser.svelte  | 32 +++++++++++++++++++++----
 src/lib/components/GrowthTeaser.test.ts |  6 ++---
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 4c1a170..19d8086 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -132,6 +132,7 @@ The approved Persian-first baseline remains authoritative where the shipped arti
 
 | Version | Date       | Decision                                                                                                                                                                                                                                                                                                    |
 | ------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 0.11.1  | 2026-08-21 | Hardened narrow-screen shell, calendar, and chart behavior: the navbar wordmark and duplicate drawer terminal selector are hidden on mobile, exact-period fields cannot overlap, payment charts keep their readable width with horizontal scrolling, and the growth teaser gains an action-blue emphasis with a restrained reduced-motion-safe pulse. |
 | 0.11.0  | 2026-08-21 | Added the feature-gated AI growth analyst: a cache-first 90-day forecast view with count/amount modes, P10–P90 uncertainty band, keyboard and tabular alternatives, evidence-linked Persian campaign guidance, preserved-content refresh states, and restrained semantic opportunity/risk styling.          |
 | 0.10.0  | 2026-08-20 | Reframed retry guidance around the share of failed payment paths retried, including an explicit zero state; made payment-flow bars proportional to counts; and removed single-day hover styling from whole-week selection.                                                                                  |
 | 0.9.3   | 2026-08-20 | Replaced stacked field focus outlines with one narrow semantic-blue border across text fields, textareas, native selects, and custom select triggers; other keyboard targets retain a subtle 1px outline.                                                                                                   |
diff --git a/src/lib/components/GrowthTeaser.svelte b/src/lib/components/GrowthTeaser.svelte
index 025d115..c70fab3 100644
--- a/src/lib/components/GrowthTeaser.svelte
+++ b/src/lib/components/GrowthTeaser.svelte
@@ -7,12 +7,17 @@
   let { href = '/growth' }: { href?: string } = $props();
 </script>
 
-<Card class="border-primary/20 bg-primary/[.035] mt-4 rounded-lg shadow-xs">
+<Card class="border-primary/35 bg-primary/[.06] relative mt-4 overflow-hidden rounded-lg shadow-xs">
   <CardContent class="flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between">
     <div class="flex items-start gap-3">
-      <SparklesIcon class="text-primary mt-1 size-5 shrink-0" />
+      <span
+        class="growth-promotion-icon bg-primary text-primary-foreground grid size-11 shrink-0 place-items-center rounded-md"
+        aria-hidden="true"
+      >
+        <SparklesIcon class="size-5" />
+      </span>
       <div>
-        <h2 class="font-bold">تحلیل‌گر رشد</h2>
+        <h2 class="text-primary font-bold">تحلیل‌گر رشد</h2>
         <p class="text-muted-foreground mt-1 text-sm leading-7">
           فرصت‌های پیش رو و دوره‌های کم‌رونق احتمالی را با تکیه بر داده‌های خودتان ببینید.
         </p>
@@ -20,10 +25,29 @@
     </div>
     <a
       {href}
-      class="border-primary/25 text-primary hover:bg-accent inline-flex min-h-11 shrink-0 items-center justify-center gap-2 rounded-md border px-4 text-sm font-bold"
+      class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex min-h-11 shrink-0 items-center justify-center gap-2 rounded-md px-4 text-sm font-bold transition-colors"
     >
       دیدن تحلیل ۹۰ روزه
       <ArrowLeftIcon class="size-4" />
     </a>
   </CardContent>
 </Card>
+
+<style>
+  .growth-promotion-icon {
+    animation: growth-attention 2.8s ease-in-out infinite;
+  }
+
+  @keyframes growth-attention {
+    0%,
+    68%,
+    100% {
+      box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 24%, transparent);
+      transform: scale(1);
+    }
+    82% {
+      box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 0%, transparent);
+      transform: scale(1.04);
+    }
+  }
+</style>
diff --git a/src/lib/components/GrowthTeaser.test.ts b/src/lib/components/GrowthTeaser.test.ts
index 5716982..18a72c4 100644
--- a/src/lib/components/GrowthTeaser.test.ts
+++ b/src/lib/components/GrowthTeaser.test.ts
@@ -7,9 +7,9 @@ describe('GrowthTeaser', () => {
   it('links to the growth analyst without starting a generation request', () => {
     render(GrowthTeaser, { href: '/growth?terminal=terminal-1' });
 
-    expect(screen.getByRole('link', { name: /دیدن تحلیل ۹۰ روزه/ }).getAttribute('href')).toBe(
-      '/growth?terminal=terminal-1',
-    );
+    const link = screen.getByRole('link', { name: /دیدن تحلیل ۹۰ روزه/ });
+    expect(link.getAttribute('href')).toBe('/growth?terminal=terminal-1');
+    expect(link.className).toContain('bg-primary');
     expect(screen.getByText('تحلیل‌گر رشد')).not.toBeNull();
   });
 });