refactor: simplify infinite-moving-cards and redesign agents page layout

- Removed getDirection callback in favor of inline style calculation for cleaner animation control
- Replaced BentoSection and AgentComponents with unified AgentBento component featuring video backgrounds and updated card structure
- Standardized border styling across CallToAction components (gray-700 → gray-800) for consistent visual hierarchy

src/components/magicui/infinite-moving-cards.tsx

@@ -20,15 +20,6 @@ export const InfiniteMovingCards = ({
   const scrollerRef = React.useRef<HTMLUListElement>(null);
   const [start, setStart] = useState(false);
 
-  const getDirection = useCallback(() => {
-    if (containerRef.current) {
-      if (direction === "left") {
-        containerRef.current.style.setProperty("--animation-direction", "forwards");
-      } else {
-        containerRef.current.style.setProperty("--animation-direction", "reverse");
-      }
-    }
-  }, [direction]);
 
   const getSpeed = useCallback(() => {
     if (containerRef.current) {
@@ -53,11 +44,10 @@ export const InfiniteMovingCards = ({
         }
       });
 
-      getDirection();
       getSpeed();
       setStart(true);
     }
-  }, [getDirection, getSpeed]);
+  }, [getSpeed]);
 
   useEffect(() => {
     addAnimation();
@@ -75,6 +65,9 @@ export const InfiniteMovingCards = ({
           start && "animate-scroll",
           pauseOnHover && "hover:[animation-play-state:paused]",
         )}
+        style={{
+          "--animation-direction": direction === "left" ? "forwards" : "reverse",
+        } as React.CSSProperties}
       >
         {items.map((item, idx) => (
           <li className="relative flex-shrink-0" key={idx}>