make 2 directions

- Added ScrollToTop component to handle navigation scroll behavior
- Implemented smooth scrolling to hash anchors when present in URL
- Added automatic scroll to top on route changes
- Imported useLocation and useEffect hooks for scroll management

src/App.tsx

@@ -1,6 +1,6 @@
-import { HashRouter, Routes, Route } from 'react-router-dom';
+import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
 import { Layout } from './components/Layout';
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense, useEffect } from 'react';
 
 const HomePage = lazy(() => import('./pages/home/HomePage'));
 const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
@@ -13,9 +13,29 @@ const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
 const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
 const NodesPage = lazy(() => import('./pages/nodes/NodesPage'));
 
+function ScrollToTop() {
+  const { pathname, hash } = useLocation();
+
+  useEffect(() => {
+    if (hash) {
+      const id = hash.replace('#', '');
+      const element = document.getElementById(id);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        return;
+      }
+    }
+
+    window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+  }, [pathname, hash]);
+
+  return null;
+}
+
 function App() {
   return (
     <HashRouter>
+      <ScrollToTop />
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
           <Route path="/" element={<Layout />}>

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/components/magicui/infinite-moving-cards.tsx

@@ -62,12 +62,9 @@ export const InfiniteMovingCards = ({
         ref={scrollerRef}
         className={cn(
           "flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap",
-          start && "animate-scroll",
+          start && (direction === "left" ? "animate-scroll-left" : "animate-scroll-right"),
-          pauseOnHover && "hover:[animation-play-state:paused]",
+          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}>

src/pages/agents/AgentBento.tsx

@@ -119,8 +119,8 @@ export function AgentBento() {
                 className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] `}
               >
                 {card.animation ? (
-                  <div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center">
+                  <div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center justify-center">
-                    <card.animation />
+                    <div className="w-full h-full object-cover"><card.animation /></div>
                   </div>
                 ) : (
                   <div className="h-48 w-full flex items-center justify-center bg-transparent" />

src/pages/agents/AgentDesign.tsx

@@ -36,10 +36,10 @@ export function AgentDesign() {
           {benefits.map((item) => (
             <div
               key={item.id}
-              className="flex flex-col items-center bg-white dark:bg-black/40 py-10 px-4 border border-gray-100 dark:border-gray-800 lg:border-t-0 lg:border-b-0"
+              className="flex flex-col items-center bg-white py-10 px-4 border border-gray-100 lg:border-t-0 lg:border-b-0"
             >
               <item.icon className="h-10 w-10 text-cyan-500 mb-4" />
-              <h3 className="text-base font-medium text-black dark:text-white max-w-xs">
+              <h3 className="text-base font-medium text-black max-w-xs">
                 {item.title}
               </h3>
             </div>

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-[#121212] 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="slow"
+            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>

src/pages/cloud/CloudHeroNew.tsx

@@ -18,7 +18,7 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
             <H3 className="mt-4">
               Sovereign Edge Cloud Infrastructure
             </H3>
-            <p className="mt-6 text-lg">
+            <p className="mt-6 text-lg text-gray-600">
               Run compute, storage, and AI resources on infrastructure you control.
             </p>
             <p className="mt-4 text-lg text-gray-600">

src/pages/home/HomeAurora.tsx

@@ -1,5 +1,6 @@
-import { H1, H4, H5 } from "@/components/Texts"
+import { H1, H4, H3, H5, Eyebrow } from "@/components/Texts"
 import { Button } from "@/components/Button"
+import { H3Icon } from "@heroicons/react/20/solid"
 
 export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
   return (
@@ -12,33 +13,17 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
         {/* Inner padding */}
         <div className="px-6 py-16 lg:py-32 ">
           <div className="max-w-2xl lg:pl-6">
-            <div className="hidden sm:flex">
+            <Eyebrow> Project MYCELIUM</Eyebrow> 
-              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+            <H3 className="mt-4">
-                Deploying at scale?{' '}
+              Private, Distributed Infrastructure Built 
-                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
+              for Digital Sovereignty
-                  <span aria-hidden="true" className="absolute inset-0" />
+            </H3>
-                  Book a call  <span>&rarr;</span>
-                </a>
-              </div>
-            </div>
 
-            <H1 className="mt-8">
+            <H5 className="mt-4 text-lg text-gray-600 max-w-xl">
-              MYCELIUM
+              Run your apps, data, and intelligence on infrastructure that belongs to you
-            </H1>
-
-            <H4 className="mt-8">
-              Private, distributed infrastructure built 
-for digital sovereignty
-
-
-            </H4>
-
-            <H5 className="mt-8 text-lg text-gray-600">
-              
-Run your apps, data, and intelligence on infrastructure that belongs to you
             </H5>
 
-            <div className="mt-10 flex items-center gap-x-6">
+            <div className="mt-8 flex items-center gap-x-6">
               <Button
                 variant="solid"
                 color="cyan"

src/pages/home/HomeDesign.tsx

@@ -26,19 +26,19 @@ const benefits = [
 
 export function HomeDesign() {
   return (
-    <section className="w-full max-w-8xl mx-auto bg-white dark:bg-transparent">
+    <section className="w-full max-w-8xl mx-auto bg-white">
 
       {/* Top spacing line */}
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200 dark:border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
-      <div className="w-full border border-l border-r border-gray-200 dark:border-gray-800" />
+      <div className="w-full border border-l border-r border-gray-200" />
 
       {/* Content */}
-      <div className="mx-auto max-w-7xl border-gray-200 dark:border-gray-800">
+      <div className="mx-auto max-w-7xl border-gray-200">
         <dl className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-0">
           {benefits.map((item) => (
             <div
               key={item.id}
-              className="group flex items-start gap-2 bg-white/40 dark:bg-black/40 px-8 py-12 border border-gray-200 dark:border-gray-800 lg:border-t-0 lg:border-b-0"
+              className="group flex items-start gap-2 bg-white px-8 py-12 border border-gray-200 0 lg:border-t-0 lg:border-b-0"
             >
               {/* Image on the LEFT */}
               <img
@@ -49,10 +49,10 @@ export function HomeDesign() {
 
               {/* Text on the RIGHT */}
               <div className="text-left">
-                <h3 className="text-base  font-semibold tracking-wide text-gray-900 dark:text-white mb-2">
+                <h3 className="text-base  font-semibold tracking-wide text-gray-900 mb-2">
                   {item.title}
                 </h3>
-                <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed max-w-xs">
+                <p className="text-sm text-gray-600 leading-relaxed max-w-xs">
                   {item.description}
                 </p>
               </div>

src/pages/nodes/NodeHero.tsx

@@ -18,7 +18,7 @@ export function NodeHero() {
             <H3 as="h1" className="mt-4">
               Host a Node. Power the Network.
             </H3>
-            <p className="mt-6 text-lg">
+            <p className="mt-6 text-lg text-gray-800">
               The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
             </p>
             <div className="mt-10 flex items-center gap-x-6">

src/pages/nodes/NodeProducts.tsx

@@ -5,7 +5,6 @@ import { motion } from "framer-motion";
 import { Eyebrow, SectionHeader, P } from "@/components/Texts";
 import {
   QuestionMarkCircleIcon,
-  ShieldCheckIcon,
   CheckIcon,
 } from "@heroicons/react/20/solid";
 

src/pages/nodes/NodeSpecs.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Container } from "@/components/Container";
-import { Small } from "@/components/Texts";
 
 // Heroicons
 import {

src/pages/pods/PodsWhat.tsx

@@ -82,7 +82,7 @@ export function PodsWhat() {
                   <>
                     {/* TITLE WITH ICON (matching the TL example) */}
                     <dt className="flex items-center gap-x-3 text-base font-semibold text-white">
-                      <Icon className="h-6 w-6 text-cyan-500" aria-hidden="true" />
+                      {Icon && <Icon className="h-6 w-6 text-cyan-500" aria-hidden="true" />}
                       {card.title}
                     </dt>
 

src/styles/tailwind.css

@@ -4,11 +4,24 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
+  --animate-scroll-left: scroll-left var(--animation-duration, 40s) linear infinite;
+  --animate-scroll-right: scroll-right var(--animation-duration, 40s) linear infinite;
 
-  @keyframes scroll {
+  @keyframes scroll-left {
+    from {
+      transform: translateX(0);
+    }
     to {
-      transform: translate(calc(-50% - 0.5rem));
+      transform: translateX(calc(-50% - 0.5rem));
+    }
+  }
+
+  @keyframes scroll-right {
+    from {
+      transform: translateX(calc(-50% - 0.5rem));
+    }
+    to {
+      transform: translateX(0);
     }
   }