Add Count Up Animation On Deerhack Stats Section

frontend/src/app/components/CountUp/CountUpAnimation.tsx

@@ -0,0 +1,54 @@
+"use client"
+import gsap from 'gsap';
+import React, { useLayoutEffect, useRef } from 'react'
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { cabinetBold, cabinetRegular } from "@/app/utils/fonts"
+
+gsap.registerPlugin(ScrollTrigger)
+
+interface CountdownProps{
+    target: number;
+    isExtra: boolean;
+    time?: number;
+    className?: string;
+}
+
+const CountUpAnimation = ({target, isExtra, time = 2, className = ""} : CountdownProps) => {
+
+    const numberRef = useRef<HTMLParagraphElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() =>{
+        const ctx = gsap.context(() =>{
+            const countObj = {val : 0}
+            gsap.to(countObj, {
+                val: target,
+                duration: time,
+                ease: 'power2.out',
+                scrollTrigger: {
+                    trigger: containerRef.current,
+                    start: "top 95%",
+                    toggleActions: "play none none none",
+                    // markers: true // debugging ko bela only
+                },
+                onUpdate: () => {
+                    if(numberRef.current){
+                        const currentVal  = Math.floor(countObj.val);
+                        const formatted = currentVal
+                        numberRef.current.innerText = isExtra ? `${formatted}+` : `${formatted}`
+                    }
+                }
+            })
+        }, containerRef)
+
+        return () => ctx.revert()
+    }, [target, isExtra, time])
+
+    return (
+    <div className='tabular-nums' ref={containerRef}>
+        <p ref={numberRef} className={`${cabinetRegular.className} ${className}`}>0{isExtra && "+"}</p>
+    </div>
+    )
+}
+
+export default CountUpAnimation

frontend/src/app/components/DeerhackStats/CardMedium.tsx

@@ -1,5 +1,6 @@
 import ApplicantsSVG from "@/app/assets/images/applicants"
 import { cabinetBold, cabinetRegular } from "@/app/utils/fonts"
+import CountUpAnimation from "../CountUp/CountUpAnimation"
 
 export default function CardMedium() {
   return (
@@ -9,14 +10,16 @@ export default function CardMedium() {
         {/* Mobile View */}
         <div className="flex justify-between items-center lg:hidden">
           <p className={`${cabinetBold.className} text-white text-2xl leading-tight`}>Total</p>
-          <p className={`${cabinetRegular.className} text-white text-4xl`}>3840+</p>
+          {/* <p className={`${cabinetRegular.className} text-white text-4xl`}>3840+</p> */}
+          <CountUpAnimation target={3840} isExtra={true} time={3} className=" text-white text-4xl"/>
         </div>
         <p className={`${cabinetBold.className} text-white text-2xl leading-tight lg:hidden`}>Applicants</p>
         {/* DeskTop View */}
         <div className="hidden lg:flex lg:flex-col lg:h-full lg:justify-between">
           <p className={`${cabinetBold.className} text-white text-2xl leading-tight`}>Total Applicants</p>
           <div className="flex justify-end">
-            <p className={`${cabinetRegular.className} text-white text-5xl`}>3840+</p>
+            {/* <p className={`${cabinetRegular.className} text-white text-5xl`}>3840+</p> */}
+            <CountUpAnimation target={3840} isExtra={true} time={3} className=" text-white text-5xl"/>
           </div>
         </div>
       </div>

frontend/src/app/components/DeerhackStats/CardMini.tsx

@@ -1,5 +1,6 @@
 import { cabinetBold, cabinetRegular } from "@/app/utils/fonts";
 import { ReactElement } from "react";
+import CountUpAnimation from "../CountUp/CountUpAnimation";
 
 export default function CardMini({
   svg,
@@ -18,9 +19,10 @@ export default function CardMini({
           {title}
         </p>
       </div>
-      <p className={`${cabinetRegular.className} text-[45px] text-white`}>
+      {/* <p className={`${cabinetRegular.className} text-[45px] text-white`}>
         {numbers}
-      </p>
+      </p> */}
+      <CountUpAnimation target={numbers} isExtra={false} className="text-[45px] text-white" time={4}/>
     </div>
   );
 }