ok

src/components/Companies.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { H2, P } from '@/components/Texts';
+import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
 
 
 
@@ -15,76 +16,58 @@ import DeepMind from '@/components/logos/DeepMind';
 import Minimax from '@/components/logos/Minimax';
 import Mistral from '@/components/logos/Mistral';
 import Moonshot from '@/components/logos/Moonshot';
-import AlibabaCloud from '@/components/logos/AlibabaCloud';
 import TencentCloud from '@/components/logos/TencentCloud';
 import OpenAI from '@/components/logos/OpenAI';
 import XAI from '@/components/logos/XAI';
 
-const row1 = [Ai21, Claude, BaiduCloud, ByteDance];
-const row2 = [DeepSeek, DeepMind, Minimax, Mistral];
-const row3 = [Moonshot, AlibabaCloud];
-const row4 = [TencentCloud, OpenAI, XAI];
+const logos = [
+  <Ai21 key="ai21" />,
+  <Claude key="claude" />,
+  <BaiduCloud key="baidu" />,
+  <ByteDance key="bytedance" />,
+  <DeepSeek key="deepseek" />,
+  <DeepMind key="deepmind" />,
+  <Minimax key="minimax" />,
+  <Mistral key="mistral" />,
+  <Moonshot key="moonshot" />,
+  <TencentCloud key="tencent" />,
+  <OpenAI key="openai" />,
+  <XAI key="xai" />,
+];
+
+const row1 = logos.slice(0, 6);
+const row2 = logos.slice(6);
 
 export function Companies() {
   return (
-    <div id="companies" className="relative flex h-screen w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
-      <div className="relative z-10 mx-auto w-full max-w-6xl p-4 py-12">
+    <div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased py-12 -top-20">
+      <div className="relative z-10 mx-auto w-full max-w-6xl p-4">
 
         {/* Heading */}
         <motion.div
-          className="flex flex-col justify-center max-w-4xl items-center mb-6 mx-auto"
+          className="flex flex-col justify-center max-w-4xl items-center mb-8 mx-auto"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 1 }}
         >
-          <H2 className="text-center pb-6">
-            Deploy the World’s Leading AI Models 
-          </H2>
-          <P className="pb-8 text-center" color="custom">
-            Deploy and scale AI from top global providers on a decentralized, privacy-first infrastructure. Mycelium Cloud lets you integrate state-of-the-art intelligence into your workflows with full control, sovereignty, and cost efficiency.
+          <P className="text-gray-100 text-center">
+            Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
           </P>
         </motion.div>
 
-        {/* Animated Line */}
-        <motion.div
-          className="h-[2px] bg-neutral-400 rounded-full mx-auto mb-12"
-          initial={{ width: 0 }}
-          animate={{ width: "100%" }}
-          transition={{ duration: 2, delay: 1 }}
-        />
-
         {/* Logos grid */}
-        <div className="flex flex-col items-center gap-y-10">
-          {[row1, row2, row3, row4].map((row, rowIndex) => (
-            <motion.div
-              key={rowIndex}
-              className="flex flex-wrap justify-center items-center gap-x-8 sm:gap-x-10"
-              initial="hidden"
-              animate="visible"
-              variants={{
-                visible: {
-                  transition: {
-                    staggerChildren: 0.15,
-                    delayChildren: 2.8 + rowIndex * 0.5, // Stagger rows
-                  },
-                },
-              }}
-            >
-              {row.map((Logo, i) => (
-                <motion.div
-                  key={i}
-                  className="flex justify-center"
-                  variants={{
-                    hidden: { opacity: 0, y: 30 },
-                    visible: { opacity: 1, y: 0 },
-                  }}
-                  transition={{ duration: 0.6, ease: "easeOut" }}
-                >
-                  <div className="text-[#2F3178]"><Logo /></div>
-                </motion.div>
-              ))}
-            </motion.div>
-          ))}
+        <div className="flex flex-col items-center gap-y-4 text-white">
+          <InfiniteMovingCards
+            items={row1}
+            direction="right"
+            speed="slow"
+          />
+          <InfiniteMovingCards
+            className=""
+            items={row2}
+            direction="left"
+            speed="slow"
+          />
         </div>
       </div>
     </div>