ok

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>
+  )
+}

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>