The home "إحسانكم لعام 2026" stats numbers now count up from zero to their
final value when the section scrolls into view, like a counter.
New component (artifacts/ehsan-poc/src/components/CountUp.tsx):
- Parses the formatted value string: first space-separated token is the
number, the rest is the suffix (مليون/ألف/مليار / Million/Thousand/Billion).
- Detects the decimal separator present in the token (comma for AR "85,4",
period for "3.113"/EN) and the decimal-digit count; parses to float by
normalizing the separator to ".".
- Uses framer-motion useInView (once, amount 0.3) to trigger a
requestAnimationFrame ease-out animation (~1.6s) from 0 -> target,
re-formatting each frame with the same decimals + separator + suffix.
- Respects useReducedMotion: renders final value immediately.
- Safe fallback: if the token has no parseable number, renders the original
string unchanged.
Wire-up (artifacts/ehsan-poc/src/pages/home.tsx):
- Destructured `language` from useLanguage.
- Replaced raw {value} in the stat number div with
<CountUp key={`${language}-${value}`} value={value} /> so it re-parses and
re-animates on AR<->EN toggle. Color (#14573A), size, layout unchanged.
Verified: tsc --noEmit clean; screenshot shows numbers mid-animation with
correct separators/suffixes in AR (RTL).
Replit Agent
464e42aaa1