refactor: rewrite dashboard components to match prototype design

- Rewrite TrafficProgressBar with multi-segment gradient fill, flex-based
  zone tints, shimmer + highlight overlays, radial glow at fill edge
- Rewrite SubscriptionCardActive with zone header, big percentage on right,
  connect device card with device dots, tariff/days-left two-column row,
  sparkline placeholder, traffic refresh controls
- Rewrite SubscriptionCardExpired with red glow, grid pattern, gradient
  renew button, outline tariffs button
- Rewrite TrialOfferCard with animated glow background, grid pattern,
  icon glow animation, price tag with old price, gradient CTA buttons
- Rewrite StatsGrid with 2x2 card layout, icon+label+chevron header,
  big value numbers, zone-colored balance/earnings cards
- Update Sparkline with color prop and last-point dot indicator
- Update useAnimatedNumber to use easeOutExpo matching prototype
- Add formatTraffic utility for MB/GB/TB unit formatting
- Add mainHex to trafficZone for inline style support
- Update animations to match prototype timing
- Add new i18n keys for redesigned components

src/utils/formatTraffic.ts

@@ -0,0 +1,9 @@
+/**
+ * Format traffic amount with appropriate unit (MB/GB/TB).
+ * Matches the prototype's formatBytes logic.
+ */
+export function formatTraffic(gb: number): string {
+  if (gb >= 1000) return `${(gb / 1000).toFixed(1)} TB`;
+  if (gb >= 1) return `${gb.toFixed(1)} GB`;
+  return `${(gb * 1024).toFixed(0)} MB`;
+}

src/utils/trafficZone.ts

@@ -8,6 +8,8 @@ interface TrafficZoneResult {
   labelKey: string;
   gradientFrom: string;
   gradientTo: string;
+  /** Hex color for inline styles */
+  mainHex: string;
 }
 
 const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
@@ -18,6 +20,7 @@ const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
     labelKey: 'dashboard.zone.normal',
     gradientFrom: 'rgb(var(--color-success-500))',
     gradientTo: 'rgb(var(--color-success-400))',
+    mainHex: '#00E5A0',
   },
   warning: {
     textClass: 'text-warning-400',
@@ -26,6 +29,7 @@ const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
     labelKey: 'dashboard.zone.warning',
     gradientFrom: 'rgb(var(--color-warning-500))',
     gradientTo: 'rgb(var(--color-warning-400))',
+    mainHex: '#FFB800',
   },
   danger: {
     textClass: 'text-warning-300',
@@ -34,6 +38,7 @@ const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
     labelKey: 'dashboard.zone.danger',
     gradientFrom: 'rgb(var(--color-warning-600))',
     gradientTo: 'rgb(var(--color-warning-400))',
+    mainHex: '#FF6B35',
   },
   critical: {
     textClass: 'text-error-400',
@@ -42,6 +47,7 @@ const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
     labelKey: 'dashboard.zone.critical',
     gradientFrom: 'rgb(var(--color-error-500))',
     gradientTo: 'rgb(var(--color-error-400))',
+    mainHex: '#FF3B5C',
   },
 };