Implement rolling numbers effect on footer stats using SlotCounter

Co-authored-by: Adez017 <[email protected]>

Author: Copilot

src/theme/Footer/Layout/index.tsx

@@ -2,6 +2,7 @@
 import React, {type ReactNode, useState, useEffect} from 'react';
 import Link from "@docusaurus/Link";
 import type {Props} from '@theme/Footer/Layout';
+import SlotCounter from "react-slot-counter";
 import './enhanced-footer.css';
 
 // Dynamic stats interface
@@ -12,6 +13,15 @@ interface FooterStats {
   supportHours: string;
 }
 
+// Helper function to parse stat values for SlotCounter
+const parseStatValue = (statValue: string) => {
+  // Extract numeric part and suffix from strings like "52K+", "215+", "95%", "24/7"
+  const numericMatch = statValue.match(/^(\d+)/);
+  const numericValue = numericMatch ? parseInt(numericMatch[1]) : 0;
+  const suffix = statValue.replace(/^\d+/, '');
+  return { numericValue, suffix };
+};
+
 export default function FooterLayout({
   style,
   links,
@@ -105,7 +115,14 @@ export default function FooterLayout({
                 </svg>
               </div>
               <div className="stat-content">
-                <div className="stat-number">{stats.activeUsers}</div>
+                <div className="stat-number">
+                  <SlotCounter
+                    value={parseStatValue(stats.activeUsers).numericValue}
+                    autoAnimationStart={true}
+                    duration={1.2}
+                  />
+                  {parseStatValue(stats.activeUsers).suffix}
+                </div>
                 <div className="stat-label">Active Learners</div>
               </div>
             </div>
@@ -117,7 +134,14 @@ export default function FooterLayout({
                 </svg>
               </div>
               <div className="stat-content">
-                <div className="stat-number">{stats.tutorials}</div>
+                <div className="stat-number">
+                  <SlotCounter
+                    value={parseStatValue(stats.tutorials).numericValue}
+                    autoAnimationStart={true}
+                    duration={1.2}
+                  />
+                  {parseStatValue(stats.tutorials).suffix}
+                </div>
                 <div className="stat-label">Tutorials</div>
               </div>
             </div>
@@ -129,7 +153,14 @@ export default function FooterLayout({
                 </svg>
               </div>
               <div className="stat-content">
-                <div className="stat-number">{stats.successRate}</div>
+                <div className="stat-number">
+                  <SlotCounter
+                    value={parseStatValue(stats.successRate).numericValue}
+                    autoAnimationStart={true}
+                    duration={1.2}
+                  />
+                  {parseStatValue(stats.successRate).suffix}
+                </div>
                 <div className="stat-label">Success Rate</div>
               </div>
             </div>
@@ -141,7 +172,32 @@ export default function FooterLayout({
                 </svg>
               </div>
               <div className="stat-content">
-                <div className="stat-number">{stats.supportHours}</div>
+                <div className="stat-number">
+                  {stats.supportHours === '24/7' ? (
+                    <>
+                      <SlotCounter
+                        value={24}
+                        autoAnimationStart={true}
+                        duration={1.2}
+                      />
+                      /
+                      <SlotCounter
+                        value={7}
+                        autoAnimationStart={true}
+                        duration={1.2}
+                      />
+                    </>
+                  ) : (
+                    <>
+                      <SlotCounter
+                        value={parseStatValue(stats.supportHours).numericValue}
+                        autoAnimationStart={true}
+                        duration={1.2}
+                      />
+                      {parseStatValue(stats.supportHours).suffix}
+                    </>
+                  )}
+                </div>
                 <div className="stat-label">Support</div>
               </div>
             </div>