From 4b5c30c11e9c18cf801147d1399b4acd61cca9b9 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 17 Sep 2025 14:58:10 +0200
Subject: [PATCH] ok

---
 src/components/CountUpNumber.tsx | 18 ++++++++++++++++++
 src/components/WorldMap.tsx      |  9 +++++----
 2 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 src/components/CountUpNumber.tsx

diff --git a/src/components/CountUpNumber.tsx b/src/components/CountUpNumber.tsx
new file mode 100644
index 0000000..0295a5f
--- /dev/null
+++ b/src/components/CountUpNumber.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import CountUp from 'react-countup'
+import { H2 } from './Texts'
+
+interface CountUpNumberProps {
+  end: number
+  className?: string
+  color?: 'light' | 'primary' | 'secondary' | 'custom'
+}
+
+export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
+  return (
+    <H2 color={color} className={className}>
+      <CountUp end={end} duration={2.75} separator="," />
+    </H2>
+  )
+}
diff --git a/src/components/WorldMap.tsx b/src/components/WorldMap.tsx
index fac5deb..c5b703b 100644
--- a/src/components/WorldMap.tsx
+++ b/src/components/WorldMap.tsx
@@ -3,6 +3,7 @@
 import { Globe } from "@/components/ui/globe"
 import { motion } from "framer-motion"
 import { H2, P, CT, CP } from "./Texts"
+import { CountUpNumber } from './CountUpNumber'
 
 export function WorldMap() {
   return (
@@ -45,7 +46,7 @@ export function WorldMap() {
           <div className="relative flex-1">
             <motion.div className="absolute top-12 -left-12 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
               <CT color="light" className="uppercase tracking-wide">CORES</CT>
-              <H2 color="light" className="mt-2 text-3xl font-bold">54,958</H2>
+              <CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
               <CP color="light" className="mt-2 text-sm">
                 Total Central Processing Unit Cores available on the grid.
               </CP>
@@ -53,7 +54,7 @@ export function WorldMap() {
 
             <motion.div className="absolute -top-10 right-0 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
               <CT color="light" className="uppercase tracking-wide">NODES</CT>
-              <H2 color="light" className="mt-2 text-3xl font-bold">54,958</H2>
+              <CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
               <CP color="light" className="mt-2 text-sm">
                 Total number of nodes on the grid.
               </CP>
@@ -61,7 +62,7 @@ export function WorldMap() {
 
             <motion.div className="absolute bottom-28 -left-12 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
               <CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT>
-              <H2 color="light" className="mt-2 text-3xl font-bold">54,958</H2>
+              <CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
               <CP color="light" className="mt-2 text-sm">
                 Total amount of storage (SSD, HDD, & RAM) on the grid.
               </CP>
@@ -69,7 +70,7 @@ export function WorldMap() {
 
             <motion.div className="absolute top-44 right-0 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
               <CT color="light" className="uppercase tracking-wide">COUNTRIES</CT>
-              <H2 color="light" className="mt-2 text-3xl font-bold">51</H2>
+              <CountUpNumber end={51} color="light" className="mt-2 text-3xl font-bold" />
               <CP color="light" className="mt-2 text-sm">
                 Total number of countries with active nodes.
               </CP>