Replace dynamic data with static json and update model ranking

package.json

@@ -26,10 +26,10 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@radix-ui/react-visually-hidden": "^1.1.2",
     "@remixicon/react": "^4.6.0",
-    "@supabase/supabase-js": "^2.50.4",
     "@tremor/react": "^3.18.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
+    "framer-motion": "^12.23.24",
     "lucide-react": "^0.525.0",
     "next": "15.3.2",
     "next-themes": "^0.4.6",

src/components/LLMTable/ModelRanking.tsx

@@ -15,7 +15,7 @@ interface ModelRankingProps {
   category: string
 }
 
-export function ModelRanking({ models, category }: ModelRankingProps) {
+export function ModelRanking({ models }: ModelRankingProps) {
   const [hoveredModel, setHoveredModel] = useState<ModelScore | null>(null)
 
   // Sort all models by score
@@ -61,10 +61,10 @@ export function ModelRanking({ models, category }: ModelRankingProps) {
             <div className="absolute -left-2 top-8 z-10 rounded-lg bg-white p-1.5 shadow-lg dark:bg-gray-800">
               <div className="space-y-0.5">
                 <div className="flex items-center justify-between gap-2 text-xs">
-                  <span className="font-medium">
+                  <span className="font-medium text-gray-900 dark:text-white">
                     {getReadableModelName(model.name)}
                   </span>
-                  <span className="ml-1 text-gray-500">
+                  <span className="ml-1 text-gray-600 dark:text-gray-400">
                     {model.score.toFixed(1)}
                   </span>
                 </div>

src/components/LLMTable/index.tsx

@@ -12,6 +12,8 @@ import Image from "next/image"
 import { ProjectModal } from "../ProjectModal"
 import { capitalizeFirstLetter } from "@/lib/utils"
 import { useProjects } from "@/contexts/ProjectContext"
+import { ScrollReveal } from "../ScrollReveal"
+import { motion } from "framer-motion"
 
 
 const CRITERIA_CATEGORIES: CriteriaCategoryBase[] = [
@@ -149,7 +151,7 @@ export function LLMTable() {
   })
 
   return (
-    <div className="space-y-6">
+    <ScrollReveal className="space-y-6">
       <div className="w-full overflow-hidden rounded-2xl border-0 bg-gradient-to-br from-gray-900 via-gray-800 to-black shadow-lg">
         <div className="border-b border-purple-900 px-4 py-4 sm:px-6 bg-transparent">
           <div className="flex flex-col gap-4">
@@ -256,11 +258,18 @@ export function LLMTable() {
               </tr>
             </thead>
             <tbody className="divide-y divide-purple-900/60">
-              {sortedProjects.map((project) => (
-                <tr
+              {sortedProjects.map((project, index) => (
+                <motion.tr
                   key={project.id}
                   onClick={() => setSelectedProjectId(project.id)}
                   className="cursor-pointer hover:bg-purple-900/30 transition-colors"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{
+                    duration: 0.3,
+                    delay: index * 0.05,
+                    ease: [0.25, 0.1, 0.25, 1],
+                  }}
                 >
                   <td className="whitespace-nowrap px-4 py-4 text-sm font-medium text-purple-100">
                     {project.name}
@@ -293,7 +302,7 @@ export function LLMTable() {
                       </Badge>
                     </td>
                   ))}
-                </tr>
+                </motion.tr>
               ))}
             </tbody>
           </table>
@@ -304,6 +313,6 @@ export function LLMTable() {
         isOpen={selectedProjectId !== null}
         onClose={() => setSelectedProjectId(null)}
       />
-    </div>
+    </ScrollReveal>
   )
 }