ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

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

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-26 14:06:07 +01:00
parent 1834ec9391
commit d6a5f70bd6
20 changed files with 93 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/cloud/reserve3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 735 KiB

BIN
public/images/reserve2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 625 KiB

8
src/components/Footer.tsx
View File

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

11
src/pages/agents/AgentHeroAlt.tsx
View File

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

4
src/pages/agents/CallToAction.tsx
View File

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

2
src/pages/cloud/CalltoAction.tsx
View File

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

2
src/pages/cloud/CloudArchitecture.tsx
View File

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

2
src/pages/cloud/CloudHeroNew.tsx
View File

@@ -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"

20
src/pages/cloud/CloudIntro.tsx
View File

@@ -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",
secondary: "Learn More",
primary: "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",
vdc: "https://threefold.info/mycelium_vdc/docs/",
kubernetes: "https://docs.projectmycelium.com/cloud/kubernetes-basics/",
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,6 +185,7 @@ export function CloudIntro() {
{currentButtons.primary}
</Button>
{currentButtons.secondary && (
<Button
as={secondaryLinks[active] ? "a" : undefined}
to={secondaryLinks[active] ?? "#"}
@@ -198,6 +197,7 @@ export function CloudIntro() {
>
{currentButtons.secondary}
</Button>
)}
</div>
)}

13
src/pages/compute/ComputeCapabilities.tsx
View File

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

2
src/pages/gpu/GpuHero.tsx
View File

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

9
src/pages/home/HomeBlink.tsx
View File

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

9
src/pages/home/HomeSpotlight.tsx
View File

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

9
src/pages/home/archive/HomeCTA.tsx
View File

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

2
src/pages/network/Hero.tsx
View File

@@ -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"

8
src/pages/nodes/CallToAction.tsx
View File

@@ -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">
Join Mycelium
<Button to="https://docs.projectmycelium.com/hosters/buy-node/" variant="solid" color="cyan" className="mt-4" target="_blank">
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>

2
src/pages/nodes/NodeHero.tsx
View File

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

4
src/pages/pods/CallToAction.tsx
View File

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

2
src/pages/pods/Homepod.tsx
View File

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

3
src/pages/storage/StorageHero.tsx
View File

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