refactor(dashboard, docs): finish SparkleIcon sweep

Second pass through the callsites the first commit missed:
- smart-insights and cockpit-signals use Lightbulb for the insight
  generation / idea state
- agent-page-content swaps Sparkle for Lightbulb (ideas) and Coins
  (credit balance)
- feature-gate, ambassadors/sponsors hero pick icons that fit the
  surrounding copy instead of a generic sparkle

Author: izadoesdev

apps/dashboard/app/(main)/home/_components/smart-insights-section.tsx

@@ -2,7 +2,7 @@
 
 import { ArrowClockwiseIcon } from "@phosphor-icons/react/dist/ssr/ArrowClockwise";
 import { CheckCircleIcon } from "@phosphor-icons/react/dist/ssr/CheckCircle";
-import { SparkleIcon } from "@phosphor-icons/react/dist/ssr/Sparkle";
+import { LightbulbIcon } from "@phosphor-icons/react/dist/ssr/Lightbulb";
 import { WarningCircleIcon } from "@phosphor-icons/react/dist/ssr/WarningCircle";
 import { useState } from "react";
 import { InsightCard } from "@/app/(main)/insights/_components/insight-card";
@@ -46,7 +46,7 @@ function AnalyzingState() {
 		<div className="divide-y">
 			<div className="flex items-center gap-3 px-5 py-4">
 				<div className="flex size-7 shrink-0 items-center justify-center rounded bg-primary/10">
-					<SparkleIcon
+					<LightbulbIcon
 						className="size-4 animate-pulse text-primary"
 						weight="duotone"
 					/>
@@ -135,7 +135,7 @@ export function SmartInsightsSection({
 			<Card className={variant === "full" ? "min-h-0 flex-1" : ""}>
 				<Card.Header className="flex-row items-center justify-between gap-3">
 					<div className="flex items-center gap-2">
-						<SparkleIcon className="size-4 text-primary" weight="duotone" />
+						<LightbulbIcon className="size-4 text-primary" weight="duotone" />
 						<Card.Title className="text-sm">Actionable Insights</Card.Title>
 					</div>
 				</Card.Header>
@@ -149,7 +149,7 @@ export function SmartInsightsSection({
 			<Card className={variant === "full" ? "min-h-0 flex-1" : ""}>
 				<Card.Header className="flex-row items-center justify-between gap-3">
 					<div className="flex items-center gap-2">
-						<SparkleIcon className="size-4 text-primary" weight="duotone" />
+						<LightbulbIcon className="size-4 text-primary" weight="duotone" />
 						<Card.Title className="text-sm">Actionable Insights</Card.Title>
 					</div>
 				</Card.Header>
@@ -166,7 +166,7 @@ export function SmartInsightsSection({
 			<Card.Header className="flex-row items-center justify-between gap-3">
 				<div className="min-w-0 flex-1">
 					<div className="flex items-center gap-2">
-						<SparkleIcon
+						<LightbulbIcon
 							className="size-4 shrink-0 text-primary"
 							weight="duotone"
 						/>

apps/dashboard/app/(main)/insights/_components/cockpit-signals.tsx

@@ -439,7 +439,7 @@ function InsightsFetchStatusRow({
 					className="size-4 shrink-0 animate-spin text-primary"
 				/>
 			) : (
-				<SparkleIcon
+				<LightbulbIcon
 					aria-hidden
 					className="size-4 shrink-0 animate-pulse text-primary"
 					weight="duotone"

apps/dashboard/app/(main)/websites/[id]/agent/_components/agent-page-content.tsx

@@ -4,8 +4,9 @@ import {
 	ArrowRightIcon,
 	BrainIcon,
 	ChartBarIcon,
+	CoinsIcon,
+	LightbulbIcon,
 	LightningIcon,
-	SparkleIcon,
 	TableIcon,
 } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
@@ -214,7 +215,7 @@ function WelcomeState({
 					: prompts.map((item, idx) => {
 							const Icon =
 								item.source === "insight"
-									? SparkleIcon
+									? LightbulbIcon
 									: (FALLBACK_ICONS[idx] ?? FALLBACK_ICONS[0]);
 							return (
 								<button
@@ -287,7 +288,7 @@ function AgentCreditBalance() {
 					onClick={() => router.push("/billing")}
 					type="button"
 				>
-					<SparkleIcon className="size-3" weight="duotone" />
+					<CoinsIcon className="size-3" weight="duotone" />
 					<span className="font-medium tabular-nums">∞ credits</span>
 				</button>
 			</Tooltip>
@@ -318,7 +319,7 @@ function AgentCreditBalance() {
 				onClick={() => router.push(isEmpty ? "/billing#topup" : "/billing")}
 				type="button"
 			>
-				<SparkleIcon className="size-3" weight="duotone" />
+				<CoinsIcon className="size-3" weight="duotone" />
 				<span className="font-medium tabular-nums">
 					{balance.toLocaleString()} / {limit.toLocaleString()}
 				</span>

apps/dashboard/components/feature-gate.tsx

@@ -10,7 +10,7 @@ import { ArrowRightIcon } from "@phosphor-icons/react";
 import { CrownIcon } from "@phosphor-icons/react";
 import { LockSimpleIcon } from "@phosphor-icons/react";
 import { RocketLaunchIcon } from "@phosphor-icons/react";
-import { SparkleIcon } from "@phosphor-icons/react";
+import { LeafIcon } from "@phosphor-icons/react";
 import { StarIcon } from "@phosphor-icons/react";
 import Link from "next/link";
 import type { ReactNode } from "react";
@@ -25,7 +25,7 @@ const PLAN_CONFIG: Record<
 > = {
 	[PLAN_IDS.FREE]: {
 		name: "Free",
-		icon: SparkleIcon,
+		icon: LeafIcon,
 		color: "text-muted-foreground",
 	},
 	[PLAN_IDS.HOBBY]: {

apps/docs/app/(home)/ambassadors/ambassador-hero.tsx

@@ -5,7 +5,7 @@ import {
 	GiftIcon,
 	HeartIcon,
 	RocketLaunchIcon,
-	SparkleIcon,
+	TrophyIcon,
 } from "@phosphor-icons/react";
 import { SciFiCard } from "@/components/scifi-card";
 
@@ -77,7 +77,7 @@ export default function AmbassadorHero() {
 					/>
 					<FeatureCard
 						description="Stand out"
-						icon={SparkleIcon}
+						icon={TrophyIcon}
 						title="Recognition"
 					/>
 				</div>

apps/docs/app/(home)/sponsors/sponsors-hero.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { IconWeight } from "@phosphor-icons/react";
-import { HeartIcon, SparkleIcon } from "@phosphor-icons/react";
+import { HeartIcon, StarIcon } from "@phosphor-icons/react";
 import { SciFiCard } from "@/components/scifi-card";
 
 interface SponsorsHeroProps {
@@ -80,7 +80,7 @@ export default function SponsorsHero({
 					/>
 					<StatCard
 						description="Featured partners"
-						icon={SparkleIcon}
+						icon={StarIcon}
 						label="Featured Sponsors"
 						value={featuredSponsors}
 					/>