feat: emphasize growth analyst promotion

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>

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();
   });
 });