feat: add scroll-to-top behavior and hash anchor navigation

- 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/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/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>