"use client"; import React, { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; import { BarChart3, ArrowUpRight, Database, Globe, Activity, ChevronRight } from "lucide-react"; export default function MultiValueMetricCard() { const containerRef = useRef(null); const x = useMotionValue(0.5); const y = useMotionValue(0.5); const rotateX = useSpring(useTransform(y, [0, 1], [12, -12]), { stiffness: 150, damping: 20 }); const rotateY = useSpring(useTransform(x, [0, 1], [-12, 12]), { stiffness: 150, damping: 20 }); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); x.set((e.clientX - rect.left) / rect.width); y.set((e.clientY - rect.top) / rect.height); }; const handleMouseLeave = () => { x.set(0.5); y.set(0.5); }; return (

Core Analytics

Neural Processing Unit

92.7 %

Overall efficiency across 24 localized data shards in the cluster.

Transferred

4.2 TB

Endpoints

1.4k

System Dashboard

v2.1 Stable

); }