Added the rolling numbers effect

Author: Adez017

src/theme/Footer/Layout/Counter.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useRef, useState } from "react";
+
+interface CounterProps {
+  value: number;
+  duration?: number; // animation duration in ms
+  suffix?: string;   // optional suffix like %, K+, etc.
+}
+
+const Counter: React.FC<CounterProps> = ({ value, duration = 1500, suffix = "" }) => {
+  const [count, setCount] = useState(0);
+  const [hasAnimated, setHasAnimated] = useState(false);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry.isIntersecting && !hasAnimated) {
+          animateCount();
+          setHasAnimated(true);
+        }
+      },
+      { threshold: 0.5 } // Trigger when 50% of element is visible
+    );
+
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [hasAnimated]);
+
+  const animateCount = () => {
+    const startTime = performance.now();
+
+    const step = (now: number) => {
+      const progress = Math.min((now - startTime) / duration, 1);
+      const current = Math.floor(progress * value);
+      setCount(current);
+
+      if (progress < 1) {
+        requestAnimationFrame(step);
+      }
+    };
+
+    requestAnimationFrame(step);
+  };
+
+  return (
+    <div ref={ref}>
+      {count.toLocaleString()}
+      {suffix}
+    </div>
+  );
+};
+
+export default Counter;

src/theme/Footer/Layout/index.tsx

@@ -3,6 +3,7 @@ import React, {type ReactNode, useState, useEffect} from 'react';
 import Link from "@docusaurus/Link";
 import type {Props} from '@theme/Footer/Layout';
 import './enhanced-footer.css';
+import Counter from './Counter';
 
 // Dynamic stats interface
 interface FooterStats {
@@ -105,7 +106,9 @@ export default function FooterLayout({
                 </svg>
               </div>
               <div className="stat-content">
-                <div className="stat-number">{stats.activeUsers}</div>
+                <div className="stat-number">
+                <Counter value={parseInt(stats.activeUsers)} suffix="K+" />
+                </div>
                 <div className="stat-label">Active Learners</div>
               </div>
             </div>
@@ -117,7 +120,9 @@ export default function FooterLayout({
                 </svg>
               </div>
               <div className="stat-content">
-                <div className="stat-number">{stats.tutorials}</div>
+                <div className="stat-number">
+                  <Counter value={parseInt(stats.tutorials)} suffix="+" />
+                </div>
                 <div className="stat-label">Tutorials</div>
               </div>
             </div>
@@ -129,7 +134,9 @@ export default function FooterLayout({
                 </svg>
               </div>
               <div className="stat-content">
-                <div className="stat-number">{stats.successRate}</div>
+                <div className="stat-number">
+                  <Counter value={parseInt(stats.successRate)} suffix="%" />
+                </div>
                 <div className="stat-label">Success Rate</div>
               </div>
             </div>