removed animated counter

frontend/__tests__/e2e/pages/About.spec.ts

@@ -77,7 +77,7 @@ test.describe('About Page', () => {
     }
   })
 
-  test('displays animated counters with correct values', async ({ page }) => {
+  test('displays project statistics with correct values', async ({ page }) => {
     await expect(page.getByText('1.2K+Contributors')).toBeVisible()
     await expect(page.getByText('40+Open Issues')).toBeVisible()
     await expect(page.getByText('60+Forks')).toBeVisible()

frontend/__tests__/unit/pages/Home.test.tsx

@@ -2,7 +2,6 @@ import { useQuery } from '@apollo/client/react'
 import { addToast } from '@heroui/toast'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { mockAlgoliaData, mockGraphQLData } from '@unit/data/mockHomeData'
-import millify from 'millify'
 import { useRouter } from 'next/navigation'
 import { render } from 'wrappers/testUtil'
 import Home from 'app/page'
@@ -181,17 +180,6 @@ describe('Home', () => {
     })
   })
 
-  test('renders AnimatedCounter components', async () => {
-    render(<Home />)
-
-    await waitFor(() => {
-      expect(screen.getByText('Active Projects')).toBeInTheDocument()
-      expect(screen.getByText('Contributors')).toBeInTheDocument()
-      expect(screen.getByText('Local Chapters')).toBeInTheDocument()
-      expect(screen.getByText('Countries')).toBeInTheDocument()
-    })
-  })
-
   test('handles missing data gracefully', async () => {
     ;(useQuery as unknown as jest.Mock).mockReturnValue({
       data: mockGraphQLData,
@@ -271,18 +259,21 @@ describe('Home', () => {
     ]
     const stats = mockGraphQLData.statsOverview
 
-    await waitFor(() => {
-      for (const header of headers) {
-        expect(screen.getByText(header)).toBeInTheDocument()
-      }
-    })
+    const statTexts = [
+      stats.activeProjectsStats.toLocaleString('en-US'),
+      stats.activeChaptersStats.toLocaleString('en-US'),
+      stats.contributorsStats.toLocaleString('en-US'),
+      stats.countriesStats.toLocaleString('en-US'),
+      stats.slackWorkspaceStats.toLocaleString('en-US'),
+    ]
 
-    // Wait for animated counters to complete (2 seconds animation)
-    // Note: The "+" is rendered separately from the number, so we check for the number only
     await waitFor(
       () => {
-        for (const value of Object.values(stats)) {
-          expect(screen.getByText(millify(value), { exact: false })).toBeInTheDocument()
+        for (const stat of statTexts) {
+          expect(screen.getByText(stat)).toBeInTheDocument()
+        }
+        for (const header of headers) {
+          expect(screen.getByText(header)).toBeInTheDocument()
         }
       },
       { timeout: 3000 }

frontend/src/app/about/page.tsx

@@ -14,6 +14,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Tooltip } from '@heroui/tooltip'
 import upperFirst from 'lodash/upperFirst'
+import millify from 'millify'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
@@ -34,7 +35,6 @@ import {
   projectStory,
 } from 'utils/aboutData'
 import AnchorTitle from 'components/AnchorTitle'
-import AnimatedCounter from 'components/AnimatedCounter'
 import Leaders from 'components/Leaders'
 import Markdown from 'components/MarkdownWrapper'
 import SecondaryCard from 'components/SecondaryCard'
@@ -299,7 +299,7 @@ const About = () => {
             <div key={stat.label}>
               <SecondaryCard className="text-center">
                 <div className="mb-2 text-3xl font-bold text-blue-400">
-                  <AnimatedCounter end={Math.floor(stat.value / 10) * 10} duration={2} />+
+                  {millify(Math.floor(stat.value / 10 || 0) * 10)}+
                 </div>
                 <div className="text-gray-600 dark:text-gray-300">{stat.label}</div>
               </SecondaryCard>