add odometerjs

src/components/Card.css

@@ -1,26 +0,0 @@
-.odometer {
-    display: inline-block;
-    overflow: hidden;
-    font-size: 1em; /* Set the font size as needed */
-  }
-  
-  .odometer > div {
-    transition: transform 0.3s ease-out;
-  }
-  
-  .odometer-enter {
-    transform: translateY(1em);
-  }
-  
-  .odometer-enter-active {
-    transform: translateY(0);
-  }
-  
-  .odometer-exit {
-    transform: translateY(0);
-  }
-  
-  .odometer-exit-active {
-    transform: translateY(-1em);
-  }
-  

src/components/Card.js

@@ -1,5 +1,8 @@
 import React, { useEffect, useState } from 'react';
+import Odometer from 'react-odometerjs';
+
 import './Card.css'; // Import your CSS file
+import 'odometer/themes/odometer-theme-default.css';
 
 const Card = ({ title, counter, color, backgroundColor }) => {
   const [animatedCounter, setAnimatedCounter] = useState(0);
@@ -39,9 +42,11 @@ const Card = ({ title, counter, color, backgroundColor }) => {
     <div className='numeric-card' style={{ color, backgroundColor }}>
       <div className='card-title'>{title}</div>
       <div className='card-data'>
-        <div className='odometer'>
+        {/* <div className='odometer'>
           <div>{animatedCounter}</div>
-        </div>
+        </div> */}
+
+        <Odometer value={counter} style={{ cursor: 'pointer' }} />
       </div>
     </div>
   );