fix logo animation

src/components/logos/NousResearch.tsx

@@ -0,0 +1 @@
+

src/components/logos/XAI.tsx

@@ -10,6 +10,7 @@ const XAILogo = () => (
         xmlSpace="preserve"
     width="30"
     height="30"
+    fill="white"
   >
     <g>
       <polygon points="557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18 	" />

src/pages/agents/AgentLogos.tsx

@@ -0,0 +1,65 @@
+import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
+import Ai21Logo from "@/components/logos/Ai21";
+import ClaudeLogo from "@/components/logos/Claude";
+import BaiduCloudLogo from "@/components/logos/BaiduCloud";
+import ByteDanceLogo from "@/components/logos/ByteDance";
+import DeepSeekLogo from "@/components/logos/DeepSeek";
+import DeepMindLogo from "@/components/logos/DeepMind";
+import MinimaxLogo from "@/components/logos/Minimax";
+import MistralLogo from "@/components/logos/Mistral";
+import MoonshotLogo from "@/components/logos/Moonshot";
+import TencentCloudLogo from "@/components/logos/TencentCloud";
+import OpenAILogo from "@/components/logos/OpenAI";
+import XAILogo from "@/components/logos/XAI";
+
+const logos = [
+  { id: "ai21", Component: Ai21Logo, label: "AI21" },
+  { id: "claude", Component: ClaudeLogo, label: "Claude" },
+  { id: "baidu", Component: BaiduCloudLogo, label: "Baidu Cloud" },
+  { id: "bytedance", Component: ByteDanceLogo, label: "ByteDance" },
+  { id: "deepseek", Component: DeepSeekLogo, label: "DeepSeek" },
+  { id: "deepmind", Component: DeepMindLogo, label: "DeepMind" },
+  { id: "minimax", Component: MinimaxLogo, label: "Minimax" },
+  { id: "mistral", Component: MistralLogo, label: "Mistral" },
+  { id: "moonshot", Component: MoonshotLogo, label: "Moonshot" },
+  { id: "tencent", Component: TencentCloudLogo, label: "Tencent Cloud" },
+  { id: "openai", Component: OpenAILogo, label: "OpenAI" },
+  { id: "xai", Component: XAILogo, label: "xAI" },
+];
+
+const splitLogoRows = () => {
+  const midpoint = Math.ceil(logos.length / 2);
+  return [logos.slice(0, midpoint), logos.slice(midpoint)];
+};
+
+export const AgentLogos = () => {
+  const rows = splitLogoRows();
+
+  return (
+    <section className="relative isolate overflow-hidden bg-black py-4">
+      <div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-black to-transparent" />
+      <div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-black to-transparent" />
+      <div className="flex w-full flex-col gap-1 px-0">
+        {rows.map((row, idx) => (
+          <InfiniteMovingCards
+            key={`logos-row-${idx}`}
+            items={row.map(({ id, Component, label }) => (
+              <div
+                key={id}
+                className="flex h-24 w-36 items-center justify-center bg-transparent px-4"
+                aria-label={label}
+              >
+                <Component />
+              </div>
+            ))}
+            direction={idx % 2 === 0 ? "left" : "right"}
+            speed={idx % 2 === 0 ? "fast" : "normal"}
+            pauseOnHover={true}
+            className="w-full"
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+

src/pages/agents/AgentsPage.tsx

@@ -1,6 +1,6 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { DeploySection } from './DeploySection'
-import { Companies } from './Companies'
+import { AgentLogos } from './AgentLogos'
 import { AgentBento } from './AgentBento'
 import { AgentHeroAlt } from './AgentHeroAlt'
 import { CallToAction } from './CallToAction'
@@ -19,7 +19,7 @@ export default function AgentsPage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <Companies />
+        <AgentLogos />
       </AnimatedSection>
 
       <AnimatedSection>