diff --git a/src/pages/ai.tsx b/src/pages/ai.tsx
index 1e02ead163..b20cf027a1 100644
--- a/src/pages/ai.tsx
+++ b/src/pages/ai.tsx
@@ -6,7 +6,7 @@ import ShareMeta from "@site/src/components/Common/ShareMeta";
import transitions from "@site/static/transitions.json";
import Layout from "@theme/Layout";
import clsx from "clsx";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence, useAnimation } from "framer-motion";
import LightHeroStyles from "@site/src/components/Common/LightHeroStyles";
import VideoCard, {
ImageOnlyVideoCard,
@@ -21,6 +21,7 @@ import LinkArrowUp from "../components/Common/Icons/LinkArrowUp";
import LinkArrowDown from "../components/Common/Icons/LinkArrowDown";
import ChevronDown from "../components/Common/Icons/ChevronDown";
import ChevronUp from "../components/Common/Icons/ChevronUp";
+import { useInView } from "react-intersection-observer";
interface FeatureCardProps {
imageSrc: string;
@@ -531,7 +532,49 @@ const faqData: FaqData[] = [
];
const MotionLink = motion(Link);
-const { events, websiteCategory, regions } = eventsData;
+const AnimatedCountUp = ({ end, duration = 2000 }) => {
+ const [count, setCount] = useState(0);
+ const controls = useAnimation();
+ const [ref, inView] = useInView({
+ triggerOnce: true,
+ threshold: 0.1,
+ });
+
+ useEffect(() => {
+ if (inView) {
+ controls.start({
+ opacity: 1,
+ y: 0,
+ transition: { duration: 0.5 },
+ });
+
+ let start = 0;
+ const increment = end / (duration / 16);
+
+ const timer = setInterval(() => {
+ start += increment;
+ setCount(Math.floor(start));
+ if (start >= end) {
+ clearInterval(timer);
+ setCount(end);
+ }
+ }, 16);
+
+ return () => clearInterval(timer);
+ }
+ }, [inView, controls]);
+
+ return (
+