refactor: update "Explore Docs" buttons across all pages to link to docs.projectmycelium.com

- Changed all "Explore Docs" buttons from internal links to external docs.projectmycelium.com links with target="_blank"
- Updated CloudArchitecture, CloudHeroNew, CloudIntro, GpuHero, NodeHero, StorageHero, and CallToAction components
- Added "Explore Docs" buttons to AgentHeroAlt and ComputeCapabilities components
- Updated HomeBlink, HomeSpotlight, and HomeCTA to use external docs link instead of onClick

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/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/GpuHero.tsx

@@ -25,7 +25,7 @@ export function GpuHero() {
               <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/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/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

@@ -96,11 +96,11 @@ export function CallToAction() {
                 </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="/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/storage/StorageHero.tsx

@@ -26,8 +26,9 @@ export function StorageHero() {
                 How It Works
               </Button>
               <Button
-                to="/storage#storage-developer-experience"
+                to="https://docs.projectmycelium.com/"
                 variant="outline"
+                target="_blank"
               >
                 Explore Docs
               </Button>