feat: add home.png cloud image asset

- Added new home.png image to public/images/cloud/ directory for use in HomeTab component

src/App.tsx

@@ -1,4 +1,4 @@
-import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
 import { Layout } from './components/Layout';
 import { lazy, Suspense, useEffect } from 'react';
 
@@ -35,7 +35,7 @@ function ScrollToTop() {
 
 function App() {
   return (
-    <HashRouter>
+    <BrowserRouter>
       <ScrollToTop />
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
@@ -54,7 +54,7 @@ function App() {
           </Route>
         </Routes>
       </Suspense>
-    </HashRouter>
+    </BrowserRouter>
   )
 }
 

src/components/Footer.tsx

@@ -30,6 +30,14 @@ export function Footer() {
               <Link to="/nodes" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
                 Nodes
               </Link>
+              <a
+                href="https://docs.projectmycelium.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Docs
+              </a>
               <Link to="/mediakit" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
                 Media Kit
               </Link>

src/components/Header.tsx

@@ -94,7 +94,7 @@ export function Header() {
         <div className="fixed inset-0 z-10" />
         <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto lg:bg-transparent lg:bg-transparent bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
           <div className="flex items-center justify-between">
-            <Link to="#" className="-m-1.5 p-1.5">
+            <Link to="/" className="-m-1.5 p-1.5" onClick={() => setMobileMenuOpen(false)}>
               <span className="sr-only">Mycelium</span>
               <img
                 className="h-8 w-auto"

src/components/HeaderDark.tsx

@@ -94,7 +94,7 @@ export function HeaderDark() {
         <div className="fixed inset-0 z-10" />
         <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-[#111111] px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-200/10">
           <div className="flex items-center justify-between">
-            <Link to="#" className="-m-1.5 p-1.5">
+            <Link to="/" className="-m-1.5 p-1.5" onClick={() => setMobileMenuOpen(false)}>
               <span className="sr-only">Mycelium</span>
               <img
                 className="h-8 w-auto"

src/pages/agents/AgentHeroAlt.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Eyebrow, H3, P } from '@/components/Texts'
+import { Button } from '@/components/Button'
 
 export function AgentHeroAlt() {
   return (
@@ -33,6 +34,16 @@ Private, local, and autonomous by design, they give you everything you need to b
             <div className="mt-10 flex items-center gap-x-6">
               {/* TODO: Hero CTAs (Follow Development / Explore Docs) to be added when links are ready.
                   Previously two Buttons here with href="#". */}
+              <Button
+                variant="solid"
+                color="cyan"
+                as="a"
+                to="https://docs.projectmycelium.com/ai-agent-framework/"
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                Explore docs
+              </Button>
             </div>
           </div>
         </div>

src/pages/agents/CallToAction.tsx

@@ -67,14 +67,14 @@ export function CallToAction() {
 
               <Button
                 as="a"
-                to="https://threefold.info/mycelium_network/docs/"
+                to="https://docs.projectmycelium.com/ai-agent-framework/"
                 variant="link"
                 color="white"
                 className="inline-flex items-center gap-1.5"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Follow Development
+                Explore Docs
                 <span aria-hidden="true">→</span>
               </Button>
             </div>

src/pages/cloud/CalltoAction.tsx

@@ -50,7 +50,7 @@ export function CallToAction() {
             </p>
 
             {/* ✅ Two cards, stacked center with spacing */}
-            <div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
+            <div className="mt-6 flex flex-wrap justify-center gap-x-6 gap-y-6">
               <div className="flex flex-col items-center text-center max-w-xs">
                 <Button to="/nodes" variant="solid" color="cyan" className="mt-4">
                   Host a Node

src/pages/cloud/CloudArchitecture.tsx

@@ -75,7 +75,7 @@ export function CloudArchitecture() {
             <Button variant="solid" color="cyan" href="/start">
               Get Started
             </Button>
-            <Button variant="outline" color="white" href="/docs">
+            <Button variant="outline" color="white" href="https://docs.projectmycelium.com/" target="_blank">
              Explore Docs
             </Button>
           </div>

src/pages/cloud/CloudHeroNew.tsx

@@ -42,7 +42,7 @@ export function CloudHeroNew() {
               </Button>
               <Button
                 as="a"
-                to="https://myceliumcloud.tf/docs"
+                to="https://docs.projectmycelium.com/cloud/"
                 variant="outline"
                 target="_blank"
                 rel="noopener noreferrer"

src/pages/cloud/CloudIntro.tsx

@@ -59,20 +59,19 @@ const tabs = [
   },
 ];
 
-const tabButtons = {
+const tabButtons: Record<string, { primary: string; secondary?: string }> = {
   kubernetes: {
     primary: "Deploy a Cluster",
     secondary: "Learn More",
   },
   vdc: {
-    primary: "Follow Development",
+    primary: "Learn More",
-    secondary: "Learn More",
   },
   qsfs: {
     primary: "View Docs",
     secondary: "Explore Integration",
   },
-} as const;
+};
 
 export function CloudIntro() {
   const [active, setActive] = useState("kubernetes");
@@ -81,13 +80,12 @@ export function CloudIntro() {
 
   const primaryLinks: Record<string, string | undefined> = {
     kubernetes: "https://myceliumcloud.tf",
-    vdc: undefined,
+    vdc: "https://docs.projectmycelium.com/vdc/",
     qsfs: undefined,
   };
 
   const secondaryLinks: Record<string, string | undefined> = {
-    kubernetes: "https://myceliumcloud.tf/docs",
+    kubernetes: "https://docs.projectmycelium.com/cloud/kubernetes-basics/",
-    vdc: "https://threefold.info/mycelium_vdc/docs/",
     qsfs: undefined,
   };
 
@@ -123,9 +121,9 @@ export function CloudIntro() {
           {/* Left: Code UI */}
           <div className="w-full lg:w-1/2">
             <img
-              src="/images/cloud/reserve.png"
+              src="/images/cloud/reserve3.png"
               alt="Mycelium Cloud reserve"
-              className="w-full h-auto rounded-xl border border-white/10 object-cover"
+              className="w-full h-full  object-contain"
             />
           </div>
 
@@ -173,7 +171,7 @@ export function CloudIntro() {
                 </ul>
               </div>
 
-              {currentButtons && (
+              {currentButtons && active !== "qsfs" && (
                 <div className="mt-8 flex flex-wrap gap-4">
                   <Button
                     as={primaryLinks[active] ? "a" : undefined}
@@ -187,17 +185,19 @@ export function CloudIntro() {
                     {currentButtons.primary}
                   </Button>
 
-                  <Button
+                  {currentButtons.secondary && (
-                    as={secondaryLinks[active] ? "a" : undefined}
+                    <Button
-                    to={secondaryLinks[active] ?? "#"}
+                      as={secondaryLinks[active] ? "a" : undefined}
-                    variant="outline"
+                      to={secondaryLinks[active] ?? "#"}
-                    color="white"
+                      variant="outline"
-                    {...(secondaryLinks[active]
+                      color="white"
-                      ? { target: "_blank", rel: "noopener noreferrer" }
+                      {...(secondaryLinks[active]
-                      : {})}
+                        ? { target: "_blank", rel: "noopener noreferrer" }
-                  >
+                        : {})}
-                    {currentButtons.secondary}
+                    >
-                  </Button>
+                      {currentButtons.secondary}
+                    </Button>
+                  )}
                 </div>
               )}
 

src/pages/compute/ComputeCapabilities.tsx

@@ -2,6 +2,7 @@
 
 import { Container } from '@/components/Container'
 import { Eyebrow, H3, P } from '@/components/Texts'
+import { Button } from '@/components/Button'
 
 const capabilities = [
   {
@@ -77,6 +78,18 @@ export function ComputeCapabilities() {
           {/* Button section */}
           {/* TODO: CTA buttons (Get Started / Explore Docs) to be re-enabled when real links are available.
               Previously rendered here as two Buttons with href="#". */}
+          <div className="mt-10 flex justify-center gap-x-6">
+            <Button
+              variant="outline"
+              color="white"
+              as="a"
+              to="https://docs.projectmycelium.com/"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              Explore docs
+            </Button>
+          </div>
         </Container>
       </div>
 

src/pages/gpu/CallToAction.tsx

@@ -65,8 +65,7 @@ export function CallToAction() {
 
               <div className="flex flex-col items-center text-center max-w-xs">
                 <Button
-                  to="#gpu-architecture"
+                  to="/gpu#gpu-architecture"
-                  as="a"
                   variant="outline"
                   color="white"
                   className="mt-4"

src/pages/gpu/GpuCapabilities.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRef } from "react";
+import { Link } from "react-router-dom";
 import { Eyebrow, CP, CT, H5 } from "@/components/Texts";
 import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
 
@@ -82,12 +83,12 @@ export function GpuCapabilities() {
                   </div>
 
                   <div className="flex items-center gap-x-4 mt-3">
-                    <a
+                    <Link
-                      href="#"
+                      to="/gpu#gpu-architecture"
                       className="inline-flex items-center gap-1 text-cyan-500 hover:text-cyan-400 text-sm font-medium mr-auto"
                     >
                       Learn more →
-                    </a>
+                    </Link>
 
                     <button
                       onClick={scrollLeft}

src/pages/gpu/GpuHero.tsx

@@ -22,10 +22,10 @@ export function GpuHero() {
               Access GPUs across the Mycelium mesh without waitlists, inflated pricing, or centralized control. Run inference, training, and compute workloads where they make sense: cloud, edge, or on your own hardware.
             </p>
             <div className="mt-10 flex items-center gap-x-6">
-              <Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
+              <Button to="/gpu#gpu-getting-started" variant="solid" color="cyan">
                 How it works
               </Button>
-              <Button to="#gpu-architecture" as="a" variant="outline">
+              <Button to="https://docs.projectmycelium.com/" as="a" variant="outline" target="_blank">
                 Explore Docs
               </Button>
             </div>

src/pages/gpu/GpuOverview.tsx

@@ -32,7 +32,7 @@ const coreFeatures = [
 
 export function GpuOverview() {
   return (
-    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+    <section id="gpu-getting-started" className="bg-[#121212] w-full max-w-8xl mx-auto">
 
       {/* ✅ Top spacer */}
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />

src/pages/home/HomeBlink.tsx

@@ -49,7 +49,14 @@ export function HomeBlink({ onGetStartedClick }: { onGetStartedClick: () => void
             <Button variant="solid" color="cyan" onClick={onGetStartedClick}>
               Enter the Network
             </Button>
-            <Button variant="outline" color="gray" onClick={onGetStartedClick}>
+            <Button
+              variant="outline"
+              color="gray"
+              as="a"
+              to="https://docs.projectmycelium.com/"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
               Explore Docs
             </Button>
           </div>

src/pages/home/HomeSpotlight.tsx

@@ -44,7 +44,14 @@ export function HomeSpotlight({
             <Button variant="solid" color="cyan" onClick={onGetStartedClick}>
               Enter the Network
             </Button>
-            <Button variant="outline" color="gray" onClick={onGetStartedClick}>
+            <Button
+              variant="outline"
+              color="gray"
+              as="a"
+              to="https://docs.projectmycelium.com/"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
               Explore Docs
             </Button>
           </div>

src/pages/home/HomeTab.tsx

@@ -119,8 +119,8 @@ export function HomeTab() {
                 <div className="absolute top-10 right-0 bottom-0 left-10 overflow-hidden 
                                 rounded-tl-xl bg-gray-900 shadow-2xl outline outline-white/10">
                   <img
-                    src="/images/cloud/reserve.png"
+                    src="/images/cloud/home.png"
-                    className="size-full object-cover"
+                    className="size-full object-cover object-top"
                   />
                 </div>
               </div>

src/pages/home/archive/HomeCTA.tsx

@@ -28,9 +28,14 @@ export function HomeCTA() {
           </button>
 
           {/* Button 2 */}
-          <button className="inline-flex items-center justify-between bg-white border border-gray-300 rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:border-cyan-500 transition">
+          <a
+            href="https://docs.projectmycelium.com/"
+            target="_blank"
+            rel="noreferrer noopener"
+            className="inline-flex items-center justify-between bg-white border border-gray-300 rounded-full px-6 py-3 text-sm font-semibold shadow-sm hover:border-cyan-500 transition"
+          >
             Explore Docs
-          </button>
+          </a>
 
         </div>
       </div>

src/pages/network/Hero.tsx

@@ -103,7 +103,7 @@ export function Hero() {
               </Button>
               <Button
                 as="a"
-                to="https://threefold.info/mycelium_network/docs/"
+                to="https://docs.projectmycelium.com/network/"
                 variant="outline"
                 color="gray"
                 target="_blank"

src/pages/nodes/CallToAction.tsx

@@ -45,15 +45,15 @@ export function CallToAction() {
               while expanding the sovereign digital grid.
             </p>
 
-            <div className="mt-6 flex flex-wrap justify-center gap-x-10 gap-y-8">
+            <div className="mt-6 flex flex-wrap justify-center gap-x-6 gap-y-8">
               <div className="flex flex-col items-center text-center max-w-xs">
-                <Button to="/host" variant="solid" color="cyan" className="mt-4">
+                <Button to="https://docs.projectmycelium.com/hosters/buy-node/" variant="solid" color="cyan" className="mt-4" target="_blank">
-                  Join Mycelium
+                  Join Mycelium Grid
                 </Button>
               </div>
 
               <div className="flex flex-col items-center text-center max-w-xs">
-                <Button to="/docs" variant="outline" color="white" className="mt-4">
+                <Button to="https://docs.projectmycelium.com/hosters/" variant="outline" color="white" className="mt-4" target="_blank">
                   Explore Docs
                 </Button>
               </div>

src/pages/nodes/NodeHero.tsx

@@ -36,7 +36,7 @@ export function NodeHero() {
               >
                 How it works
               </Button>
-              <Button to="https://threefold.info/mycelium_economics/docs/faq/hosting_faq" as="a" variant="outline" target="_blank">
+              <Button to="https://docs.projectmycelium.com/hosters/" as="a" variant="outline" target="_blank">
                 Explore Docs
               </Button>
             </div>

src/pages/pods/CallToAction.tsx

@@ -14,6 +14,14 @@ const benefits = [
 
 
 export function CallToAction() {
+  const handleJoinWaitlist = () => {
+    if (typeof window !== 'undefined' && typeof (window as any).ml_account === 'function') {
+      ;(window as any).ml_account('webforms', '6108375', 'l9m8g1', 'show')
+    } else {
+      console.log('MailerLite script (ml_account) not fully loaded or not in browser.')
+    }
+  }
+
   return (
     <section className="relative overflow-hidden bg-[#121212] ">
       {/* ✅ Top horizontal line with spacing */}
@@ -83,16 +91,16 @@ export function CallToAction() {
             {/* ✅ Two cards, stacked center with spacing */}
             <div className="mt-6 flex flex-wrap justify-center gap-x-8 gap-y-8">
               <div className="flex flex-col items-center text-center max-w-xs">
-                <Button to="#" variant="solid" color="cyan" className="mt-4">
+                <Button variant="solid" color="cyan" className="mt-4" onClick={handleJoinWaitlist}>
                   Join the Waitlist
                 </Button>
               </div>
 
-              <div className="flex flex-col items-center text-center max-w-xs">
+             {/* <div className="flex flex-col items-center text-center max-w-xs">
-                <Button to="#" variant="outline" color="white" className="mt-4">
+                <Button to="/pods#pods-learn-more" variant="outline" color="white" className="mt-4">
                   Learn More
                 </Button>
-              </div>
+              </div> */}
             </div>
           </div>
         </Container>

src/pages/pods/Homepod.tsx

@@ -31,7 +31,7 @@ export default function Homepod() {
               Mycelium Pods - Coming Soon
             </Eyebrow>
             <H3 className="mt-4">
-              Your Private Space in the New Internet
+              Your Private Space on the Network
             </H3>
             <P className="mt-6 text-gray-600">
               Pods are personal digital spaces on the Mycelium Network. They are private, persistent, and fully under your control. Run conversations, files, and tools directly on the network instead of through central servers

src/pages/pods/PodsFeatures.tsx

@@ -222,7 +222,7 @@ const icons = [
 
 export function PodsFeatures() {
   return (
-    <section className="w-full max-w-8xl mx-auto bg-transparent">
+    <section id="pods-learn-more" className="w-full max-w-8xl mx-auto bg-transparent">
       {/* Top horizontal spacing */}
       <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
       <div className="w-full border-t border-l border-r border-gray-100" />

src/pages/storage/CallToAction.tsx

@@ -64,8 +64,7 @@ export function CallToAction() {
 
               <div className="flex flex-col items-center text-center max-w-xs">
                 <Button 
-                  to="#storage-developer-experience"
+                  to="/storage#storage-developer-experience"
-                  as="a"
                   variant="outline" 
                   color="white" 
                   className="mt-4"

src/pages/storage/StorageArchitecture.tsx

@@ -24,7 +24,7 @@ export function StorageArchitecture() {
   const [active, setActive] = useState(0);
 
   return (
-    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+    <section id="storage-developer-experience" className="bg-[#121212] w-full max-w-8xl mx-auto">
       {/* ✅ Top horizontal line with spacing */}
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
       <div className="w-full border-t border-l border-r border-gray-800" />

src/pages/storage/StorageCapabilitiesNew.tsx

@@ -41,7 +41,7 @@ export function StorageCapabilitiesNew() {
   const scrollRight = () => sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
 
   return (
-    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+    <section id="storage-features" className="bg-[#121212] w-full max-w-8xl mx-auto">
       <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
       <div className="w-full border-t border-l border-r border-gray-800" />
 

src/pages/storage/StorageHero.tsx

@@ -22,13 +22,13 @@ export function StorageHero() {
               Store, replicate, and serve data across the global mesh with encrypted, quantum safe, verifiable storage you control at the infrastructure layer.
             </p>
             <div className="mt-10 flex items-center gap-x-6">
-              <Button to="#storage-features" as="a" variant="solid" color="cyan">
+              <Button to="/storage#storage-features" variant="solid" color="cyan">
                 How It Works
               </Button>
               <Button
-                to="#storage-developer-experience"
+                to="https://docs.projectmycelium.com/"
-                as="a"
                 variant="outline"
+                target="_blank"
               >
                 Explore Docs
               </Button>