-
- Technical Architecture
-
-
- A peer-to-peer mesh purpose-built for acceleration.
-
-
- Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
- networking, smart contract orchestration, and transparent monitoring
- ensure your workloads receive precisely the power they request.
+
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+
+
+ {/* ✅ LEFT — Title + Intro text */}
+
+
ARCHITECTURE
+
+
+ How It Works
+
+
+
+ Mycelium GPU architecture ensures secure, sovereign computation using
+ hardware you trust. Nodes communicate through encrypted mesh networking,
+ and access is guaranteed through verifiable reservations.
-
- {architectureSections.map((section) => (
-
-
- {section.title}
-
-
- {section.description}
-
-
- {section.bullets.map((bullet) => (
- -
-
- {bullet}
-
- ))}
-
-
- ))}
+
+ {/* ✅ RIGHT — items stacked with cyan dividers */}
+
+
+ {/* 1 — Sovereign Compute Nodes */}
+
+
+
+ Sovereign Compute Nodes
+
+
+ GPUs run only on hardware you control — eliminating reliance on centralized clouds.
+
+
+
+
+ {/* 2 — Encrypted Mesh Networking */}
+
+
+
+ Encrypted Mesh Networking
+
+
+ Nodes form private, encrypted tunnels to workloads — no public exposure required.
+
+
+
+
+ {/* 3 — Reservation & Verification Layer */}
+
+
+
+ Reservation & Verification Layer
+
+
+ Cryptographically enforced reservations guarantee GPU availability
+ with deterministic behavior across workloads.
+
+
-
+
+
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
)
}
diff --git a/src/pages/gpu/GpuCapabilities.tsx b/src/pages/gpu/GpuCapabilities.tsx
new file mode 100644
index 0000000..54fd31b
--- /dev/null
+++ b/src/pages/gpu/GpuCapabilities.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { useRef } from "react";
+import { Eyebrow, CP, CT, H5 } from "@/components/Texts";
+import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
+
+// ✅ Import animations
+
+import KubernetesAcceleration from "./animations/KubernetesAcceleration";
+import RenderingSimulation from "./animations/RenderingSimulation";
+import RAGPipeline from "./animations/RAGPipeline";
+import InterferenceAnimation from "./animations/InterferenceAnimation";
+
+const gpuCapabilities = [
+ {
+ isIntro: true,
+ eyebrow: "CAPABILITIES",
+ title: "What You Can Run on Mycelium Cloud",
+ description:
+ "GPU acceleration for inference, training, rendering, and agent workloads — on sovereign hardware.",
+ },
+ {
+ name: "AI / ML Inference & Training",
+ description: "LLMs, embeddings, transformers, fine-tuning",
+ animation: InterferenceAnimation,
+ },
+ {
+ name: "Acceleration in Kubernetes Workloads",
+ description: "GPU-backed deployments on Mycelium Cloud",
+ animation: KubernetesAcceleration,
+ },
+ {
+ name: "Rendering & Simulation",
+ description: "Scientific visualization, VFX, real-time 3D",
+ animation: RenderingSimulation,
+ },
+ {
+ name: "Agent Compute & RAG Pipelines",
+ description:
+ "Vector memory + model execution on sovereign hardware",
+ animation: RAGPipeline,
+ },
+];
+
+export function GpuCapabilities() {
+ const sliderRef = useRef
(null);
+
+ const scrollLeft = () =>
+ sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
+ const scrollRight = () =>
+ sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
+
+ return (
+
+
+
+
+
+
+ {/* ✅ Horizontal Slider */}
+
+
+
+ {benefits.map((item) => (
+
+
+
+ {item.title}
+
+
+ ))}
+
+
-
-
-
-
-
-
- Mycelium GPU
-
-
- Unify distributed GPU power into a sovereign acceleration fabric.
-
-
- Mycelium GPU transforms fragmented hardware across the ThreeFold
- Grid into one adaptive intelligence layer. Run AI, ML, rendering,
- and high-performance workloads anywhere—from edge devices to
- planetary clusters—with deterministic performance and transparent
- cost.
-
-
- The energy behind intelligence, orchestrated entirely through code.
-
-
-
-
+
+ {/* Boxed container */}
+
+ {/* Inner padding */}
+
+
+
Mycelium GPU
+
+ Sovereign GPU Acceleration for AI and High-Performance Compute
+
+
+ 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.
+
+
+
+
+
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
)
}
diff --git a/src/pages/gpu/GpuOverview.tsx b/src/pages/gpu/GpuOverview.tsx
index 9d32b41..2449e86 100644
--- a/src/pages/gpu/GpuOverview.tsx
+++ b/src/pages/gpu/GpuOverview.tsx
@@ -1,108 +1,97 @@
+'use client'
+
import {
- CodeBracketSquareIcon,
- CubeTransparentIcon,
- LockClosedIcon,
- Squares2X2Icon,
+ AdjustmentsHorizontalIcon,
+ GlobeAltIcon,
+ BanknotesIcon,
} from '@heroicons/react/24/outline'
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
-const overviewCards = [
+const coreFeatures = [
{
- label: 'Overview',
- title: 'Unified GPU acceleration across the ThreeFold Grid',
+ name: 'Deterministic GPU Allocation',
description:
- 'Mycelium GPU aggregates distributed hardware into a single fabric, delivering sovereign acceleration for AI, ML, and rendering workloads.',
+ 'Reserve the GPU type you need and get exactly that, every time.',
+ icon: AdjustmentsHorizontalIcon,
},
{
- label: 'Core Concept',
- title: 'Sovereign intelligence layer',
+ name: 'Multi-Topology Deployment',
description:
- 'No silos, no intermediaries—just raw, verifiable GPU power orchestrated through smart contracts and APIs you control.',
- },
-]
-
-const principles = [
- {
- name: 'No Silos',
- description: 'Every GPU resource is accessible through a single interface.',
- icon: Squares2X2Icon,
+ 'Run workloads in data centers, at the edge, or on self-hosted nodes.',
+ icon: GlobeAltIcon,
},
{
- name: 'No Intermediaries',
- description: 'Direct access to hardware without centralized brokers.',
- icon: CubeTransparentIcon,
- },
- {
- name: 'Verifiable Power',
- description: 'Every GPU cycle is attested and cryptographically verified.',
- icon: LockClosedIcon,
- },
- {
- name: 'Code-Orchestrated',
- description: 'Smart contracts and APIs automate allocation and policy.',
- icon: CodeBracketSquareIcon,
+ name: 'Transparent Cost Structure',
+ description:
+ 'No inflated pricing, no hidden fees, no marketplace brokerage.',
+ icon: BanknotesIcon,
},
]
export function GpuOverview() {
return (
-
-
-
-
- Platform Overview
-
-
- The sovereign acceleration layer for intelligent workloads.
-
-
- Mycelium GPU makes distributed acceleration feel like one machine.
- Harness global GPUs with deterministic performance, transparent
- costs, and end-to-end verification.
-
-
- {overviewCards.map((card) => (
-
+
+ {/* ✅ Top spacer */}
+
+
+
+ {/* ✅ Boxed container */}
+
+
+
+
+ PLATFORM OVERVIEW
+
+
+
-
-
-
- {card.label}
-
-
- {card.title}
+ Core GPU Features
+
+
+
+ The Mycelium GPU fabric provides predictable, sovereign acceleration —
+ without arbitrary limits or hidden economics.
+
+
+ {coreFeatures.map((feature) => (
+ -
+
+
+
+
+
+ {feature.name}
-
- {card.description}
+
+
+ {feature.description}
-
- ))}
-
-
- {principles.map((principle) => (
-
-
-
- {principle.name}
-
-
- {principle.description}
-
-
- ))}
-
-
+
+ ))}
+
+
+
+
+
)
}
diff --git a/src/pages/gpu/GpuPage.tsx b/src/pages/gpu/GpuPage.tsx
index d0a11cb..3d08198 100644
--- a/src/pages/gpu/GpuPage.tsx
+++ b/src/pages/gpu/GpuPage.tsx
@@ -2,11 +2,10 @@ import { AnimatedSection } from '../../components/AnimatedSection'
import { GpuHero } from './GpuHero'
import { GpuOverview } from './GpuOverview'
import { GpuArchitecture } from './GpuArchitecture'
-import { GpuIntegration } from './GpuIntegration'
import { GpuUseCases } from './GpuUseCases'
-import { GpuGettingStarted } from './GpuGettingStarted'
-import { GpuDifferentiators } from './GpuDifferentiators'
import { CallToAction } from './CallToAction'
+import { GpuCapabilities } from './GpuCapabilities'
+import { GpuDesign } from './GpuDesign'
export default function GpuPage() {
return (
@@ -14,24 +13,27 @@ export default function GpuPage() {
+
-
+
+
+
+
+
+
+
-
+
-
+
+
-
-
-
-
-
-
+
diff --git a/src/pages/gpu/GpuUseCases.tsx b/src/pages/gpu/GpuUseCases.tsx
index a6f1572..b5764bc 100644
--- a/src/pages/gpu/GpuUseCases.tsx
+++ b/src/pages/gpu/GpuUseCases.tsx
@@ -1,81 +1,68 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
-const useCases = [
+const gpuUseCases = [
{
- title: 'AI / ML Training',
- description:
- 'Scale training, fine-tuning, and inference workloads anywhere on the grid.',
- bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
+ title: 'AI / ML Training & Inference',
+ description: 'Scale model execution across sovereign GPU nodes.',
},
{
title: 'Rendering & Visualization',
- description:
- 'Drive high-performance graphics pipelines for media, science, and immersive experiences.',
- bullets: [
- 'Distributed 3D rendering',
- 'Scientific visualization',
- 'Real-time VR / AR processing',
- 'Digital twin simulations',
- ],
+ description: 'Run 3D, scientific, simulation, or generative rendering pipelines.',
},
{
- title: 'General GPU Computing',
- description:
- 'Harness sovereign acceleration for simulations, finance, blockchain, and research.',
- bullets: [
- 'Scientific simulations',
- 'Financial modeling',
- 'Blockchain processing',
- 'Protein folding and discovery',
- ],
+ title: 'Distributed & Edge Compute',
+ description: 'Place GPU power close to where data is generated.',
},
]
export function GpuUseCases() {
return (
-
-
-
-
- Use Cases
-
+
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+ {/* ✅ Main boxed content */}
+
+
+ {/* ✅ LEFT SIDE — Title + Intro */}
+
+
USE CASES
+
- Acceleration for every intelligent workload.
+ Built for Intelligent Workloads
+
- From deep learning to immersive visualization, Mycelium GPU delivers
- deterministic access to the power you need without the waitlists or
- markups of centralized clouds.
+ From sovereign AI execution to real-time rendering and edge inference,
+ Mycelium GPU ensures predictable acceleration with full ownership —
+ no centralized control.
-
- {useCases.map((useCase) => (
-
-
+
+ {/* ✅ RIGHT SIDE — 3 stacked features */}
+
+ {gpuUseCases.map((useCase) => (
+
+
{useCase.title}
-
+
{useCase.description}
-
- {useCase.bullets.map((bullet) => (
- -
-
- {bullet}
-
- ))}
-
+ {/* ✅ divider except last item */}
+ {useCase.title !== 'Distributed & Edge Compute' && (
+
+ )}
))}
+
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
)
}
diff --git a/src/pages/gpu/animations/InterferenceAnimation.tsx b/src/pages/gpu/animations/InterferenceAnimation.tsx
new file mode 100644
index 0000000..09c977e
--- /dev/null
+++ b/src/pages/gpu/animations/InterferenceAnimation.tsx
@@ -0,0 +1,296 @@
+"use client";
+
+export default function InferenceAnimation() {
+ return (
+
+ );
+}
diff --git a/src/pages/gpu/animations/KubernetesAcceleration.tsx b/src/pages/gpu/animations/KubernetesAcceleration.tsx
new file mode 100644
index 0000000..0c7ed7f
--- /dev/null
+++ b/src/pages/gpu/animations/KubernetesAcceleration.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+export default function KubernetesAcceleration() {
+ return (
+
+ );
+}
diff --git a/src/pages/gpu/animations/RAGPipeline.tsx b/src/pages/gpu/animations/RAGPipeline.tsx
new file mode 100644
index 0000000..0ff9fc5
--- /dev/null
+++ b/src/pages/gpu/animations/RAGPipeline.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+export default function RAGPipeline() {
+ return (
+
+ );
+}
diff --git a/src/pages/gpu/animations/RenderingSimulation.tsx b/src/pages/gpu/animations/RenderingSimulation.tsx
new file mode 100644
index 0000000..82b7908
--- /dev/null
+++ b/src/pages/gpu/animations/RenderingSimulation.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+export default function RenderingSimulation() {
+ return (
+
+ );
+}
diff --git a/src/pages/gpu/archive/GpuArchitectureArchive.tsx b/src/pages/gpu/archive/GpuArchitectureArchive.tsx
new file mode 100644
index 0000000..35f47bf
--- /dev/null
+++ b/src/pages/gpu/archive/GpuArchitectureArchive.tsx
@@ -0,0 +1,75 @@
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
+
+const architectureSections = [
+ {
+ title: 'Distributed GPU Mesh',
+ description:
+ 'A peer-to-peer fabric connects GPU nodes across the ThreeFold Grid, exposing them through the Mycelium network.',
+ bullets: [
+ 'GPU nodes distributed globally for on-demand acceleration.',
+ 'Mycelium network provides encrypted peer-to-peer connectivity.',
+ 'Smart contract orchestration allocates and governs resources.',
+ 'Real-time monitoring tracks utilization and health.',
+ ],
+ },
+ {
+ title: 'Performance Characteristics',
+ description:
+ 'Consistency and transparency are built into the fabric so workloads behave predictably anywhere on the planet.',
+ bullets: [
+ 'Edge-to-core deployment flexibility for every workload profile.',
+ 'Adaptive intelligence optimizes allocation automatically.',
+ 'Deterministic performance guarantees availability when booked.',
+ 'Transparent cost tracking for every GPU cycle consumed.',
+ ],
+ },
+]
+
+export function GpuArchitectureArchive() {
+ return (
+
+
+
+
+ Technical Architecture
+
+
+ A peer-to-peer mesh purpose-built for acceleration.
+
+
+ Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
+ networking, smart contract orchestration, and transparent monitoring
+ ensure your workloads receive precisely the power they request.
+
+
+ {architectureSections.map((section) => (
+
+
+ {section.title}
+
+
+ {section.description}
+
+
+ {section.bullets.map((bullet) => (
+ -
+
+ {bullet}
+
+ ))}
+
+
+ ))}
+
+ )
+}
diff --git a/src/pages/gpu/GpuDifferentiators.tsx b/src/pages/gpu/archive/GpuDifferentiators.tsx
similarity index 91%
rename from src/pages/gpu/GpuDifferentiators.tsx
rename to src/pages/gpu/archive/GpuDifferentiators.tsx
index 3e7d4b1..3913490 100644
--- a/src/pages/gpu/GpuDifferentiators.tsx
+++ b/src/pages/gpu/archive/GpuDifferentiators.tsx
@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
const differentiators = [
{
@@ -52,7 +52,7 @@ export function GpuDifferentiators() {
{differentiators.map((item) => (
{item.title}
@@ -61,7 +61,7 @@ export function GpuDifferentiators() {
))}
-
+
Cost Efficiency
Transparent economics makes capacity planning simple while keeping
diff --git a/src/pages/gpu/GpuGettingStarted.tsx b/src/pages/gpu/archive/GpuGettingStarted.tsx
similarity index 89%
rename from src/pages/gpu/GpuGettingStarted.tsx
rename to src/pages/gpu/archive/GpuGettingStarted.tsx
index 8116ee9..a78fc69 100644
--- a/src/pages/gpu/GpuGettingStarted.tsx
+++ b/src/pages/gpu/archive/GpuGettingStarted.tsx
@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
const steps = [
{
@@ -42,9 +42,9 @@ export function GpuGettingStarted() {
return (
-
+
@@ -63,7 +63,7 @@ export function GpuGettingStarted() {
{steps.map((step) => (
@@ -91,7 +91,7 @@ export function GpuGettingStarted() {
))}
-
+
Basic Workflow
diff --git a/src/pages/gpu/GpuIntegration.tsx b/src/pages/gpu/archive/GpuIntegration.tsx
similarity index 92%
rename from src/pages/gpu/GpuIntegration.tsx
rename to src/pages/gpu/archive/GpuIntegration.tsx
index bc9103f..1c7a75b 100644
--- a/src/pages/gpu/GpuIntegration.tsx
+++ b/src/pages/gpu/archive/GpuIntegration.tsx
@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
const integrationPoints = [
'Unified Mycelium networking provides secure access to GPU nodes.',
@@ -50,7 +50,7 @@ export function GpuIntegration() {
-
+
Platform alignment
@@ -66,7 +66,7 @@ export function GpuIntegration() {
))}
-
+
Kubernetes deployment example
diff --git a/src/pages/home/CallToAction.tsx b/src/pages/home/CallToAction.tsx
index b2d51bd..9de4a67 100644
--- a/src/pages/home/CallToAction.tsx
+++ b/src/pages/home/CallToAction.tsx
@@ -1,43 +1,78 @@
-import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '../../components/Container'
-import { Button } from '../../components/Button'
+import { Container } from '@/components/Container'
+import { Button } from '@/components/Button'
+import { H3, P } from '@/components/Texts'
export function CallToAction() {
return (
-
-
-
-
-
-
-
- Use the Mycelium Stack Your Way
-
-
- Run workloads, connect environments, host nodes, and build agentic systems, all on one sovereign, self-healing network.
-
-
- Start wherever you are. Scale however you choose.
-
-
-
-
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+ {/* === Content === */}
+
+
+
+ {/* ✅ Cyan Radial Glow */}
+
+
+
+
+
+ A Living Network
+
+
+
+ Mycelium isn’t a platform.
+ It’s the soil where a new internet grows — open, resilient, and alive.
+
+
+
+ The self-sovereign network powering the next internet.
+
+
+
+
+
+
+
+
+ {/* ✅ Bottom horizontal line */}
+
+
)
}
diff --git a/src/pages/home/HomeArchitecture.tsx b/src/pages/home/HomeArchitecture.tsx
new file mode 100644
index 0000000..5fed25f
--- /dev/null
+++ b/src/pages/home/HomeArchitecture.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { Eyebrow, H3, P } from "@/components/Texts";
+import NoExtraction from "./animations/NoExtraction";
+import NoControl from "./animations/NoControl";
+import NoCentral from "./animations/NoCentral";
+
+const deterministicCards = [
+ {
+ id: "core",
+ eyebrow: "Why It Matters",
+ title: "Built for a Sovereign Digital World",
+ description:
+ "The current internet is a rent-seeking one. Mycelium builds one that belongs to everyone — where infrastructure, data, and intelligence stay with the people and organizations who create them.",
+ animation: null,
+ colSpan: "lg:col-span-3",
+ rowSpan: "lg:row-span-1",
+ custom: true,
+ noBorder: true,
+ },
+ {
+ id: "crypto",
+ title: "No central servers.",
+ description:
+ "Your devices form a distributed network, eliminating reliance on centralized data centers.",
+ animation:
, // ✅ NEW
+ colSpan: "lg:col-span-3",
+ rowSpan: "lg:row-span-1",
+ rounded: "lg:rounded-tr-4xl max-lg:rounded-t-4xl",
+ innerRounded: "lg:rounded-tr-[calc(2rem+1px)] max-lg:rounded-t-[calc(2rem+1px)]",
+ },
+ {
+ id: "stateless",
+ title: "No data extraction.",
+ description:
+ "You own your data. Run services and AI models on your own devices, ensuring privacy and control.",
+ animation:
, // ✅ NEW
+ colSpan: "lg:col-span-3",
+ rowSpan: "lg:row-span-1",
+ rounded: "lg:rounded-bl-4xl max-lg:rounded-b-4xl",
+ innerRounded: "lg:rounded-bl-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]",
+ },
+ {
+ id: "healing",
+ title: "No single point of control.",
+ description:
+ "No single entity can dictate or censor your online experience.",
+ animation:
, // ✅ NEW
+ colSpan: "lg:col-span-3",
+ rowSpan: "lg:row-span-1",
+ rounded: "lg:rounded-br-4xl max-lg:rounded-b-4xl",
+ innerRounded: "lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]",
+ },
+];
+
+export function HomeArchitecture() {
+ return (
+
+ {/* ✅ Top horizontal line */}
+
+
+
+
+
+ {deterministicCards.map((card) => (
+
+ {/* ✅ Disable wrapper on first card */}
+ {!card.noBorder && (
+
+ )}
+
+
+ {/* ✅ SVG Animation instead of images */}
+ {card.animation ? (
+
+ ) : (
+
+ )}
+
+
+ {card.custom ? (
+ <>
+ {card.eyebrow &&
{card.eyebrow}}
+
{card.title}
+
{card.description}
+
+ ) : (
+ <>
+
+ {card.title}
+
+
+ {card.description}
+
+
+ )}
+
+
+
+ {!card.noBorder && (
+
+ )}
+
+ ))}
+
+
+ );
+}
diff --git a/src/pages/home/HomeAudience.tsx b/src/pages/home/HomeAudience.tsx
new file mode 100644
index 0000000..9607120
--- /dev/null
+++ b/src/pages/home/HomeAudience.tsx
@@ -0,0 +1,106 @@
+"use client";
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { H3, P } from "@/components/Texts";
+
+
+const rotating = [
+ "Communities",
+ "Integrators",
+ "Builders",
+ "Enterprises",
+ "Institutions",
+ "Creators",
+ "Researchers",
+ "Individuals",
+];
+
+// ✅ Use local image files (1–8)
+const gallery = [
+ "/images/audiences/1.jpg",
+ "/images/audiences/2.jpg",
+ "/images/audiences/3.jpg",
+ "/images/audiences/4.jpg",
+ "/images/audiences/5.jpg",
+ "/images/audiences/6.jpg",
+ "/images/audiences/7.jpg",
+ "/images/audiences/8.jpg",
+];
+
+export function HomeAudience() {
+ const [index, setIndex] = useState(0);
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setIndex((prev) => (prev + 1) % rotating.length);
+ }, 3200);
+ return () => clearInterval(timer);
+ }, []);
+
+ return (
+
+ {/* ✅ Top horizontal line + container border */}
+
+
+
+ {/* ✅ Main content */}
+
+
+
+ {/* ✅ LEFT — Text & rotating headline */}
+
+
+ Sovereign Infrastructure for{" "}
+
+
+
+ {rotating[index]}
+
+
+
+ {/* Invisible placeholder to avoid layout jump */}
+ {rotating[index]}
+
+
+
+
+ The internet wasn’t built for sovereignty. Today, data, AI models, and identity
+ live on centralized clouds — owned by a few. Mycelium brings infrastructure back
+ to people, communities, and nations: private, resilient, and cryptographically yours.
+
+
+
+
+
+ {/* ✅ RIGHT — Landscape image gallery synced with title */}
+
+
+
+
+
+ {/* ✅ Bottom border */}
+
+
+
+ );
+}
diff --git a/src/pages/home/HomeAurora.tsx b/src/pages/home/HomeAurora.tsx
index 2f744be..d77af34 100644
--- a/src/pages/home/HomeAurora.tsx
+++ b/src/pages/home/HomeAurora.tsx
@@ -1,16 +1,17 @@
-import { H1, H5 } from "@/components/Texts"
+import { H1, H4, H5 } from "@/components/Texts"
import { Button } from "@/components/Button"
-
export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
return (
-
-
-
-
+
+ {/* Boxed container */}
+
+ {/* Inner padding */}
+
+
Deploying at scale?{' '}
@@ -20,24 +21,29 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
+
- The Sovereign Agentic Cloud
+ MYCELIUM
+
+
+ The Living Network of the Next Internet
+
+
- Host nodes, deploy workloads, or build private AI systems,
-all on infrastructure you own and control.
+ A new internet is emerging — private, distributed, and self-sovereign. Mycelium is the living network that makes it possible. A peer-to-peer foundation where people, data, and intelligence connect directly — without intermediaries, without compromise.
+
diff --git a/src/pages/home/HomeBenefits.tsx b/src/pages/home/HomeBenefits.tsx
index d5a5714..fc65d60 100644
--- a/src/pages/home/HomeBenefits.tsx
+++ b/src/pages/home/HomeBenefits.tsx
@@ -1,308 +1,69 @@
-import createGlobe from "cobe";
-import { useEffect, useRef } from "react";
-import { motion } from "motion/react";
-import { IconBrandYoutubeFilled } from "@tabler/icons-react";
-import { H2, P, CP, Eyebrow } from '@/components/Texts'
+import { CP } from '@/components/Texts'
+import {
+ ShieldCheckIcon,
+ GlobeAltIcon,
+ BoltIcon,
+ BanknotesIcon,
+} from '@heroicons/react/24/solid'
+const benefits = [
+ {
+ id: 1,
+ title: "Unbreakable by Design",
+ desc: "No central cloud to censor or fail. The network heals itself.",
+ icon: ShieldCheckIcon,
+ },
+ {
+ id: 2,
+ title: "Sovereign by Default",
+ desc: "Identity, compute, and data belong to you – cryptographically.",
+ icon: GlobeAltIcon,
+ },
+ {
+ id: 3,
+ title: "Hackable & Open",
+ desc: "Learn, build, and experiment without permission.",
+ icon: BoltIcon,
+ },
+ {
+ id: 4,
+ title: "Cost & Energy Efficient",
+ desc: "Distributed hardware eliminates hyperscale overhead.",
+ icon: BanknotesIcon,
+ },
+];
export function HomeBenefits() {
- const features = [
- {
- title: "Sovereign by Default",
- description:
- "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
- image: "/images/benefits/sovereign.webp",
- },
- {
- title: "Hackable & Open",
- description:
- "Open source and hackable by design. Learn, build, and experiment without permission.",
- image: "/images/benefits/autonomous.webp",
- },
- {
- title: "Unbreakable by Design",
- description:
- "Distributed nodes make it resilient to attacks and failures. The network heals itself.",
- image: "/images/benefits/energy.webp",
- },
- {
- title: "Cost & Energy Efficient",
- description:
- "Distributed hardware eliminates hyperscale overhead. Pure compute power at a fraction of traditional cloud costs.",
- image: "/images/benefits/cost.webp",
- },
- ];
return (
-
-
-
- Benefits
-
-
- Why It Changes Everything
-
+
-
- Project Mycelium is a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
-
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+ {/* ✅ Main content */}
+
+
+ {benefits.map((item) => (
+
+
+
+ {item.title}
+
+
+ {item.desc}
+
+
+ ))}
+
-
-
-
-
-
-
![{features[0].title}]({features[0].image})
-
-
-
{features[0].title}
-
- {features[0].description}
-
-
-
-
-
-
-
-
-
-
![{features[1].title}]({features[1].image})
-
-
-
{features[1].title}
-
- {features[1].description}
-
-
-
-
-
-
-
-
-
-
![{features[2].title}]({features[2].image})
-
-
-
{features[2].title}
-
- {features[2].description}
-
-
-
-
-
-
-
-
-
-
![{features[3].title}]({features[3].image})
-
-
-
{features[3].title}
-
- {features[3].description}
-
-
-
-
-
-
+ {/* ✅ Bottom line + spacing */}
+
+
);
}
-
-
-export const SkeletonOne = () => {
- return (
-
-
-
- {/* TODO */}
-
-
-
-
-
-
-
- );
-};
-
-export const SkeletonThree = () => {
- return (
-
-
-
- {/* TODO */}
-
-
-
-
- );
-};
-
-export const SkeletonTwo = () => {
- const images = [
- "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
- "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
- "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
- "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
- "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
- ];
-
- const imageVariants = {
- whileHover: {
- scale: 1.1,
- rotate: 0,
- zIndex: 100,
- },
- whileTap: {
- scale: 1.1,
- rotate: 0,
- zIndex: 100,
- },
- };
- return (
-
- {/* TODO */}
-
- {images.map((image, idx) => (
-
- 
-
- ))}
-
-
- {images.map((image, idx) => (
-
-
-
- ))}
-
-
-
-
-
- );
-};
-
-export const SkeletonFour = () => {
- return (
-
-
-
- );
-};
-
-export const Globe = ({ className }: { className?: string }) => {
- const canvasRef = useRef
(null);
-
- useEffect(() => {
- let phi = 0;
-
- if (!canvasRef.current) return;
-
- const globe = createGlobe(canvasRef.current, {
- devicePixelRatio: 2,
- width: 600 * 2,
- height: 600 * 2,
- phi: 0,
- theta: 0,
- dark: 1,
- diffuse: 1.2,
- mapSamples: 16000,
- mapBrightness: 6,
- baseColor: [0.3, 0.3, 0.3],
- markerColor: [0.1, 0.8, 1],
- glowColor: [1, 1, 1],
- markers: [
- // longitude latitude
- { location: [37.7595, -122.4367], size: 0.03 },
- { location: [40.7128, -74.006], size: 0.1 },
- ],
- onRender: (state) => {
- // Called on every animation frame.
- // `state` will be an empty object, return updated params.
- state.phi = phi;
- phi += 0.01;
- },
- });
-
- return () => {
- globe.destroy();
- };
- }, []);
-
- return (
-
- );
-};
diff --git a/src/pages/home/HomeBlink.tsx b/src/pages/home/HomeBlink.tsx
new file mode 100644
index 0000000..ee84bc0
--- /dev/null
+++ b/src/pages/home/HomeBlink.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { Spotlight } from "@/components/ui/spotlight";
+import { H4, H5 } from "@/components/Texts";
+import { HomeHeadline } from "@/components/HomeHeadline";
+
+export function HomeBlink({ onGetStartedClick }: { onGetStartedClick: () => void }) {
+ return (
+
+
+
+ {/* ✅ Cyan Radial Glow */}
+
+
+ {/* ✅ Cyan Spotlight */}
+
+
+
+
+
The Living Network of the Next Internet
+
+
+ A new internet is emerging — private, distributed, and self-sovereign.
+ Mycelium is the living network that makes it possible.
+ A peer-to-peer foundation where people, data, and intelligence connect
+ directly — without intermediaries, without compromise.
+
+
+
+
+
+
+
+
+
CORES
-
+ CORES
+
Total Central Processing Unit Cores available on the grid.
@@ -82,8 +82,8 @@ export function WorldMap() {
className="lg:absolute lg:-top-10 lg:right-0 w-80"
>
- NODES
-
+ NODES
+
Total number of nodes on the grid.
@@ -98,8 +98,8 @@ export function WorldMap() {
className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
>
- SSD CAPACITY
-
+ SSD CAPACITY
+
Total GB amount of storage (SSD, HDD, & RAM) on the grid.
@@ -114,8 +114,8 @@ export function WorldMap() {
className="lg:absolute lg:top-47 lg:right-0 w-80"
>
- COUNTRIES
-
+ COUNTRIES
+
Total number of countries with active nodes.
diff --git a/src/pages/home/HomeHosting.tsx b/src/pages/home/HomeHosting.tsx
index f275836..fd8ce71 100644
--- a/src/pages/home/HomeHosting.tsx
+++ b/src/pages/home/HomeHosting.tsx
@@ -1,65 +1,158 @@
-import {
- ArrowPathIcon,
- CloudArrowUpIcon,
- ServerIcon,
- ShieldCheckIcon,
-} from '@heroicons/react/24/outline'
-import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+"use client";
+
+import { Container } from '@/components/Container'
+import { CT, CP, Eyebrow, H3, P } from '@/components/Texts'
+
+/* ✅ Custom Icons (unchanged) */
+
+function KubernetesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+ return (
+
+ )
+}
+
+function AIAgentsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+ return (
+
+ )
+}
+
+function S3StorageIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+ return (
+
+ )
+}
+
+function VPNIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+ return (
+
+ )
+}
const features = [
{
name: 'Kubernetes Clusters',
description: 'Deploy and scale containerized apps across your own hardware.',
- icon: ServerIcon,
+ icon: KubernetesIcon,
},
{
name: 'AI Agents & LLM Runtimes',
description: 'Run open-source models locally, securely, and offline.',
- icon: ArrowPathIcon,
+ icon: AIAgentsIcon,
},
{
name: 'S3-Compatible Storage',
description: 'Your own personal over-the-network drive, encrypted end-to-end.',
- icon: CloudArrowUpIcon,
+ icon: S3StorageIcon,
},
{
name: 'Mesh VPN & Zero-Trust Networking',
description: 'Securely connect all your devices and remote locations.',
- icon: ShieldCheckIcon,
+ icon: VPNIcon,
},
]
export function HomeHosting() {
return (
-
-
-
DEPLOY
-
Run Real Infrastructure on Your Own Hardware
-
- Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
- orchestration, and security layers, so you can deploy services the same way you would on public cloud without
- giving your data or control to anyone.
-
-
-
- {features.map((feature) => (
-
-
-
-
-
-
- {feature.name}
-
-
- {feature.description}
-
-
-
- ))}
-
+
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+
+ {/* ✅ Inner content container */}
+
+
+
+
IN ACTIVE EVOLUTION
+
+ Expanding the Network Layer
+
+
+ The Mycelium Network is evolving to support richer data movement, identity,
+ and application connectivity across the mesh. These enhancements deepen autonomy
+ and improve real-world usability.
+
+
+ {features.map((feature) => (
+ -
+
+ {feature.name}
+ {feature.description}
+
+ ))}
+
+
+
-
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
+
)
}
diff --git a/src/pages/home/HomeHostingDark.tsx b/src/pages/home/HomeHostingDark.tsx
index b1e9481..c71d5f8 100644
--- a/src/pages/home/HomeHostingDark.tsx
+++ b/src/pages/home/HomeHostingDark.tsx
@@ -4,13 +4,14 @@ import {
CircleStackIcon,
LockClosedIcon,
} from '@heroicons/react/24/outline'
-import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
-import { DarkCard } from '../../components/ui/cards'
+import { CP, CT, Eyebrow, H3, P } from '@/components/Texts'
+import { DarkCard } from '@/components/ui/cards'
+import { HeaderDark } from '@/components/HeaderDark'
const features = [
{
name: 'Kubernetes Clusters',
- description: 'Deploy and scale containerized apps across your own hardware.',
+ description: 'Deploy and scale containerized apps across your own hardware. enabling a world of possibilities..',
icon: CubeIcon,
},
{
@@ -32,14 +33,14 @@ const features = [
export function HomeHostingDark() {
return (
-
+ <>
+
+
DEPLOY
Run Real Infrastructure on Your Own Hardware
- Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
- orchestration, and security layers, so you can deploy services the same way you would on public cloud without
- giving your data or control to anyone.
+ Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
@@ -62,5 +63,6 @@ export function HomeHostingDark() {
+
)
}
diff --git a/src/pages/home/HomeMap.tsx b/src/pages/home/HomeMap.tsx
index 5e0892a..fab26f3 100644
--- a/src/pages/home/HomeMap.tsx
+++ b/src/pages/home/HomeMap.tsx
@@ -1,69 +1,42 @@
"use client";
import WorldMap from "@/components/ui/world-map";
-import { motion } from "motion/react";
-import { H2, P } from "@/components/Texts";
+import { Eyebrow, H3, P } from "@/components/Texts";
-export function HomeMapSection() {
+export function HomeMap() {
return (
-
-
-
- Mycelium Network is{" "}
-
- {"Live.".split("").map((word, idx) => (
-
- {word}
-
- ))}
-
-
-
- Mycelium Network's advancement technology enables anyone to deploy
- their own Internet infrastructure, anywhere.
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+
+
Mycelium Nodes
+
Host a Node, Grow the Network
+
+ Mycelium runs on real nodes — hosted by people, communities, and enterprises across the world.
+ Each one adds capacity, resilience, and sovereignty to the network — and earns rewards in return.
+
+ Plug in once. It runs 24/7 — powering the network and earning autonomously.
+
-
+
+ {/* ✅ Match same side margins */}
+
+ dots={[
+ { start: { lat: 64.2008, lng: -149.4937 }, end: { lat: 34.0522, lng: -118.2437 } }, // Alaska → LA
+ { start: { lat: 64.2008, lng: -149.4937 }, end: { lat: -15.7975, lng: -47.8919 } }, // Alaska → Brasília
+ { start: { lat: -15.7975, lng: -47.8919 }, end: { lat: 38.7223, lng: -9.1393 } }, // Brasília → Lisbon
+ { start: { lat: 51.5074, lng: -0.1278 }, end: { lat: 28.6139, lng: 77.209 } }, // London → New Delhi
+ { start: { lat: 28.6139, lng: 77.209 }, end: { lat: 43.1332, lng: 131.9113 } }, // New Delhi → Vladivostok
+ { start: { lat: 28.6139, lng: 77.209 }, end: { lat: -1.2921, lng: 36.8219 } }, // New Delhi → Nairobi
+ ]}
+ />
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
);
}
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 385c817..4d38cd0 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,13 +1,13 @@
+
import { useRef } from 'react'
import { AnimatedSection } from '../../components/AnimatedSection'
-import { HomeAurora } from './HomeAurora'
-import { StackSectionLight } from './StackSection'
-import { WorldMap } from './HomeGlobe'
-import { HomeBenefits } from './HomeBenefits'
import { CallToAction } from './CallToAction'
-import { HomeSlider } from './HomeSlider'
-import { HomeHostingDark } from './HomeHostingDark'
-import { HomeComparisonTable } from './HomeComparisonTable'
+import { HomeTab } from './HomeTab'
+import { HomeMap } from './HomeMap'
+import { HomeAudience } from './HomeAudience'
+import { HomeBlink } from './HomeBlink'
+import { HomeArchitecture } from './HomeArchitecture';
+
export default function HomePage() {
@@ -19,30 +19,25 @@ export default function HomePage() {
return (
-
-
-
-
-
+
-
+
-
+
-
+
-
-
+
+
-
diff --git a/src/pages/home/HomeSlider.tsx b/src/pages/home/HomeSlider.tsx
index 83e212d..f6fa4e7 100644
--- a/src/pages/home/HomeSlider.tsx
+++ b/src/pages/home/HomeSlider.tsx
@@ -15,11 +15,11 @@ export function HomeSlider() {
Ecosystem
- Discover the Mycelium Products
+ Mycelium Components
- From compute and networking to intelligent automation, these components can be used on its own or combined into a fully sovereign cloud.
+ Each component can be used on its own or combined into a fully sovereign cloud.
diff --git a/src/pages/home/HomeSpotlight.tsx b/src/pages/home/HomeSpotlight.tsx
new file mode 100644
index 0000000..90eee64
--- /dev/null
+++ b/src/pages/home/HomeSpotlight.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { Spotlight } from "@/components/ui/spotlight";
+import { cn } from "@/lib/utils";
+import { H1, H4, H5 } from "@/components/Texts";
+
+export function HomeSpotlight({
+ onGetStartedClick,
+}: {
+ onGetStartedClick: () => void;
+}) {
+ return (
+
+ {/* Boxed container */}
+
+
+ {/* ✅ Grid background */}
+
+
+ {/* ✅ Cyan Spotlight */}
+
+
+ {/* ✅ Foreground content */}
+
+
+ MYCELIUM
+
+
The Living Network of the Next Internet
+
+
+ A new internet is emerging — private, distributed, and self-sovereign.
+ Mycelium is the living network that makes it possible.
+ A peer-to-peer foundation where people, data, and intelligence connect
+ directly — without intermediaries, without compromise.
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/home/HomeTab.tsx b/src/pages/home/HomeTab.tsx
new file mode 100644
index 0000000..d12625e
--- /dev/null
+++ b/src/pages/home/HomeTab.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { Link } from "react-router-dom";
+import { CP, CT, Eyebrow, H3, P } from "@/components/Texts";
+
+const bentoCards = [
+ {
+ id: 'network',
+ title: 'Mycelium Network',
+ eyebrow: 'Network',
+ description: 'Encrypted peer-to-peer mesh networking across the globe.',
+ image: '/images/bento-network.png',
+ link: '/network',
+ colSpan: 'lg:col-span-3',
+ rowSpan: 'lg:row-span-1',
+ rounded: 'lg:rounded-tl-4xl max-lg:rounded-t-4xl',
+ innerRounded: 'lg:rounded-tl-[calc(2rem+1px)] max-lg:rounded-t-[calc(2rem+1px)]'
+ },
+ {
+ id: 'agents',
+ title: 'Mycelium Agents',
+ eyebrow: 'Agents',
+ description: 'Private, programmable AI systems that run on your hardware.',
+ image: '/images/bento-agent.jpg',
+ link: '/agents',
+ colSpan: 'lg:col-span-3',
+ rowSpan: 'lg:row-span-1',
+ rounded: 'lg:rounded-tr-4xl',
+ innerRounded: 'lg:rounded-tr-[calc(2rem+1px)]'
+ },
+ {
+ id: 'cloud',
+ title: 'Mycelium Cloud',
+ eyebrow: 'Cloud',
+ description: 'Deploy Kubernetes clusters on sovereign infrastructure.',
+ image: '/images/bento-cloud.jpg',
+ link: '/cloud',
+ colSpan: 'lg:col-span-6',
+ rowSpan: 'lg:row-span-1',
+ rounded: 'rounded-lg',
+ innerRounded: 'rounded-[calc(var(--radius-lg)+1px)]'
+ },
+ {
+ id: 'compute',
+ title: 'Mycelium Compute',
+ eyebrow: 'Compute',
+ description: 'The Compute resource layers powering the stack.',
+ image: '/images/bento-compute.png',
+ link: '/compute',
+ colSpan: 'lg:col-span-2',
+ rowSpan: 'lg:row-span-1',
+ rounded: 'lg:rounded-bl-4xl',
+ innerRounded: 'lg:rounded-bl-[calc(2rem+1px)]'
+ },
+ {
+ id: 'storage',
+ title: 'Mycelium Storage',
+ eyebrow: 'Storage',
+ description: 'The Storage resource layers powering the stack.',
+ image: '/images/bento-storage.png',
+ link: '/storage',
+ colSpan: 'lg:col-span-2',
+ rowSpan: 'lg:row-span-1',
+ rounded: 'rounded-lg',
+ innerRounded: 'rounded-[calc(var(--radius-lg)+1px)]'
+ },
+ {
+ id: 'gpu',
+ title: 'Mycelium GPU',
+ eyebrow: 'GPU',
+ description: 'The GPU resource layers powering the stack.',
+ image: '/images/bento-gpu.jpg',
+ link: '/gpu',
+ colSpan: 'lg:col-span-2',
+ rowSpan: 'lg:row-span-1',
+ rounded: 'lg:rounded-br-4xl max-lg:rounded-b-4xl',
+ innerRounded: 'lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]'
+ },
+];
+
+export function HomeTab() {
+ return (
+
+
+ {/* ✅ Top spacer + full-width line */}
+
+
+
+
+ {/* ✅ Section with vertical borders */}
+
+
Components
+
Explore the Stack
+
+ Mycelium unifies everything the next generation internet needs — communication, cloud, and intelligence — into one seamless, privacy-first network anyone can join.
+From encrypted peer-to-peer communication to decentralized cloud and sovereign AI — everything runs on one seamless system.
+
+
+
+
+ {bentoCards.map((card) => (
+
+
+
+
+
+
{card.eyebrow}
+ {card.title}
+
+ {card.description}
+
+
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/pages/home/HomeWhy.tsx b/src/pages/home/HomeWhy.tsx
new file mode 100644
index 0000000..641c960
--- /dev/null
+++ b/src/pages/home/HomeWhy.tsx
@@ -0,0 +1,72 @@
+import {
+ GlobeAltIcon,
+ KeyIcon,
+ ServerStackIcon,
+ ShieldCheckIcon,
+} from '@heroicons/react/24/outline'
+import { CP, CT, Eyebrow, H3, P } from '@/components/Texts'
+import { DarkCard } from '@/components/ui/cards'
+
+const features = [
+ {
+ name: 'No central servers.',
+ description: 'Your devices form a distributed network, eliminating reliance on centralized data centers.',
+ icon: GlobeAltIcon,
+ },
+ {
+ name: 'No data extraction.',
+ description: 'You own your data. Run services and AI models on your own devices, ensuring privacy and control.',
+ icon: KeyIcon,
+ },
+ {
+ name: 'No single point of control.',
+ description: 'A decentralized architecture means no single entity can dictate or censor your online experience.',
+ icon: ServerStackIcon,
+ },
+ {
+ name: 'Mesh VPN & Zero-Trust Networking',
+ description: 'Create a secure, private network between your devices, accessible from anywhere.',
+ icon: ShieldCheckIcon,
+ },
+]
+
+export function HomeWhy() {
+ return (
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+
+
Why It Matters
+
Why Mycelium?
+
+ The current internet is a rent-seeking one. Mycelium builds one that belongs to everyone — where infrastructure, data, and intelligence stay with the people and organizations who create them.
+
+
+
+
+ {features.map((feature) => (
+
+
+
+
+
+
+ {feature.name}
+
+
+ {feature.description}
+
+
+
+ ))}
+
+
+
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
+
+ )
+}
diff --git a/src/pages/home/StackSection.tsx b/src/pages/home/StackSection.tsx
index da38eba..ecf5fce 100644
--- a/src/pages/home/StackSection.tsx
+++ b/src/pages/home/StackSection.tsx
@@ -63,9 +63,7 @@ export function StackSectionLight() {
- Project Mycelium unifies compute, storage, networking, and AI into a resilient
- ecosystem that preserves data sovereignty, powers seamless collaboration,
- and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.
+ Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
diff --git a/src/pages/home/StackSectionDark.tsx b/src/pages/home/StackSectionDark.tsx
new file mode 100644
index 0000000..0f8af0a
--- /dev/null
+++ b/src/pages/home/StackSectionDark.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { StackedCubes } from "@/components/ui/StackedCubes";
+import { P, Eyebrow, H3 } from "@/components/Texts";
+import { FadeIn } from "@/components/ui/FadeIn";
+
+export function StackSectionDark() {
+ return (
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+ {/* === Background Layer === */}
+
+ {/* Central main aura */}
+
+
+ {/* Faint cyan mist in the back for depth */}
+
+
+
+ {/* === Content === */}
+
+ {/* Left Column - Text */}
+
+
+ Technology Layers
+
+ Mycelium Stack
+
+
+
+
+
+ Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
+
+
+
+
+ {/* Right Column - Animated Stack */}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/home/animations/Deterministic.tsx b/src/pages/home/animations/Deterministic.tsx
new file mode 100644
index 0000000..6e55526
--- /dev/null
+++ b/src/pages/home/animations/Deterministic.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import clsx from "clsx";
+
+type Props = {
+ className?: string;
+ accent?: string;
+ gridStroke?: string;
+};
+
+const W = 760;
+const H = 420;
+
+export default function Deterministic({
+ className,
+ accent = "#00b8db",
+ gridStroke = "#2b2a2a",
+}: Props) {
+ const prefers = useReducedMotion();
+
+ const stages = [
+ { x: 180, y: 180, w: 120, h: 80, label: "Build" },
+ { x: 330, y: 180, w: 120, h: 80, label: "Package" },
+ { x: 480, y: 180, w: 120, h: 80, label: "Deploy" },
+ ];
+
+ // Packet path (deterministic flow)
+ const packetPath = `M ${stages[0].x + 120} ${stages[0].y + 40}
+ L ${stages[1].x + 0} ${stages[1].y + 40}
+ L ${stages[1].x + 120} ${stages[1].y + 40}
+ L ${stages[2].x + 0} ${stages[2].y + 40}`;
+
+ // tiny arrow for each transition
+ const arrows = [
+ `M ${stages[0].x + 120} ${stages[0].y + 40} L ${stages[1].x + 6} ${stages[1].y + 40}`,
+ `M ${stages[1].x + 120} ${stages[1].y + 40} L ${stages[2].x + 6} ${stages[2].y + 40}`
+ ];
+
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/home/animations/Meshnetworking.tsx b/src/pages/home/animations/Meshnetworking.tsx
new file mode 100644
index 0000000..c55a2d8
--- /dev/null
+++ b/src/pages/home/animations/Meshnetworking.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import clsx from "clsx";
+
+type Props = {
+ className?: string;
+ accent?: string;
+ stroke?: string;
+};
+
+const W = 760;
+const H = 420;
+
+export default function MeshNetworking({
+ className,
+ accent = "#00b8db",
+ stroke = "#4B5563",
+}: Props) {
+ const prefersReduced = useReducedMotion();
+
+ // Nodes in a real mesh (hex pattern)
+ const nodes = [
+ { x: 200, y: 120 },
+ { x: 380, y: 100 },
+ { x: 560, y: 120 },
+
+ { x: 130, y: 240 },
+ { x: 320, y: 240 },
+ { x: 540, y: 240 },
+ { x: 630, y: 240 },
+
+ { x: 260, y: 340 },
+ { x: 440, y: 340 },
+ ];
+
+ // All connected pairs (mesh links)
+ const links = [
+ [0,1],[1,2],
+ [0,3],[1,4],[2,5],
+ [3,4],[4,5],[5,6],
+ [3,7],[4,7],[4,8],[5,8],
+ [7,8]
+ ];
+
+ const drawLine = (i: number, j: number) => {
+ const a = nodes[i];
+ const b = nodes[j];
+ return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/home/animations/NoCentral.tsx b/src/pages/home/animations/NoCentral.tsx
new file mode 100644
index 0000000..d5220f6
--- /dev/null
+++ b/src/pages/home/animations/NoCentral.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import clsx from "clsx";
+
+type Props = {
+ className?: string;
+ accent?: string;
+ bg?: string;
+};
+
+const W = 760;
+const H = 420;
+
+const Node = ({
+ x,
+ y,
+ r = 10,
+ accent = "#00b8db",
+ pulse = false,
+ delay = 0,
+}: {
+ x: number;
+ y: number;
+ r?: number;
+ accent?: string;
+ pulse?: boolean;
+ delay?: number;
+}) => {
+ const prefers = useReducedMotion();
+ return (
+ <>
+
+
+
+ );
+};
+
+const Packet = ({
+ path,
+ delay = 0,
+ accent = "#00b8db",
+ duration = 2.4,
+}: {
+ path: string;
+ delay?: number;
+ accent?: string;
+ duration?: number;
+}) => {
+ const prefers = useReducedMotion();
+ return (
+
+ );
+};
+
+export default function NoCentral({
+ className,
+ accent = "#00b8db",
+ bg = "#0a0a0a",
+}: Props) {
+ const center = { x: 380, y: 210 };
+ const nodes = [
+ { x: 160, y: 100 },
+ { x: 270, y: 70 },
+ { x: 500, y: 90 },
+ { x: 620, y: 150 },
+ { x: 220, y: 300 },
+ { x: 360, y: 340 },
+ { x: 530, y: 290 },
+ ];
+
+ const links = [
+ [nodes[0], nodes[1]],
+ [nodes[1], nodes[2]],
+ [nodes[2], nodes[3]],
+ [nodes[0], nodes[4]],
+ [nodes[4], nodes[5]],
+ [nodes[5], nodes[6]],
+ [nodes[1], nodes[5]],
+ [nodes[3], nodes[6]],
+ ];
+
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/home/animations/NoControl.tsx b/src/pages/home/animations/NoControl.tsx
new file mode 100644
index 0000000..17d3be5
--- /dev/null
+++ b/src/pages/home/animations/NoControl.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import clsx from "clsx";
+
+type Props = {
+ className?: string;
+ accent?: string;
+ bg?: string;
+};
+
+const W = 760;
+const H = 420;
+
+/** Node component */
+const Node = ({
+ x,
+ y,
+ r = 14,
+ accent = "#00b8db",
+ pulse = false,
+ faded = false,
+}: {
+ x: number;
+ y: number;
+ r?: number;
+ accent?: string;
+ pulse?: boolean;
+ faded?: boolean;
+}) => {
+ const prefers = useReducedMotion();
+ return (
+ <>
+
+
+
+ );
+};
+
+/** Moving packet along a path */
+const Packet = ({
+ path,
+ delay = 0,
+ accent = "#00b8db",
+}: {
+ path: string;
+ delay?: number;
+ accent?: string;
+}) => {
+ const prefers = useReducedMotion();
+ return (
+
+ );
+};
+
+export default function NoControl({
+ className,
+ accent = "#00b8db",
+ bg = "#0a0a0a",
+}: Props) {
+ const center = { x: 380, y: 210 };
+ const outer = [
+ { x: 160, y: 120 },
+ { x: 600, y: 120 },
+ { x: 160, y: 300 },
+ { x: 600, y: 300 },
+ ];
+
+ const link = (a: any, b: any) => `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
+
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/home/animations/NoExtraction.tsx b/src/pages/home/animations/NoExtraction.tsx
new file mode 100644
index 0000000..52c044b
--- /dev/null
+++ b/src/pages/home/animations/NoExtraction.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import clsx from "clsx";
+
+type Props = {
+ className?: string;
+ accent?: string;
+ bg?: string;
+};
+
+const W = 760;
+const H = 420;
+
+/** Node = local data cluster */
+const Node = ({
+ x,
+ y,
+ r = 10,
+ accent = "#00b8db",
+ pulse = false,
+ delay = 0,
+}: {
+ x: number;
+ y: number;
+ r?: number;
+ accent?: string;
+ pulse?: boolean;
+ delay?: number;
+}) => {
+ const prefers = useReducedMotion();
+ return (
+ <>
+ {/* outer glow */}
+
+ {/* data core */}
+
+
+ );
+};
+
+/** A data particle traveling along a given path */
+const Particle = ({
+ path,
+ delay = 0,
+ accent = "#00b8db",
+ duration = 2,
+ reverse = false,
+}: {
+ path: string;
+ delay?: number;
+ accent?: string;
+ duration?: number;
+ reverse?: boolean;
+}) => {
+ const prefers = useReducedMotion();
+ return (
+
+ );
+};
+
+export default function NoExtraction({
+ className,
+ accent = "#00b8db",
+ bg = "#0a0a0a",
+}: Props) {
+ const center = { x: 380, y: 210 };
+ const WBOX = 360;
+ const HBOX = 220;
+ const boxX = center.x - WBOX / 2;
+ const boxY = center.y - HBOX / 2;
+
+ // local nodes within boundary
+ const nodes = [
+ { x: center.x - 80, y: center.y - 40 },
+ { x: center.x + 60, y: center.y - 50 },
+ { x: center.x, y: center.y + 50 },
+ { x: center.x - 50, y: center.y + 30 },
+ ];
+
+ // internal circulation paths
+ const internalPaths = [
+ `M ${center.x - 80} ${center.y - 40} Q ${center.x} ${center.y - 80} ${center.x + 60} ${center.y - 50}`,
+ `M ${center.x - 50} ${center.y + 30} Q ${center.x} ${center.y + 70} ${center.x} ${center.y + 50}`,
+ ];
+
+ // escape attempt path
+ const attemptPath = `M ${center.x} ${center.y} Q ${center.x + 200} ${center.y - 50} ${center.x + 130} ${center.y}`;
+
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/home/animations/SovereignCompute.tsx b/src/pages/home/animations/SovereignCompute.tsx
new file mode 100644
index 0000000..77f5438
--- /dev/null
+++ b/src/pages/home/animations/SovereignCompute.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import clsx from "clsx";
+
+type Props = {
+ className?: string;
+ accent?: string; // cyan highlight
+ gridStroke?: string; // grid color (default #2b2a2a as requested)
+};
+
+const W = 760;
+const H = 420;
+
+const Server = ({
+ x,
+ y,
+ w = 140,
+ h = 90,
+ rows = 3,
+}: {
+ x: number;
+ y: number;
+ w?: number;
+ h?: number;
+ rows?: number;
+}) => {
+ const rowH = (h - 24) / rows;
+
+ return (
+
+ {/* chassis */}
+
+ {/* bays */}
+ {Array.from({ length: rows }).map((_, i) => (
+
+
+ {/* bay indicators */}
+
+
+
+
+ ))}
+ {/* subtle top highlight */}
+
+
+ );
+};
+
+export default function SovereignCompute({
+ className,
+ accent = "#00b8db",
+ gridStroke = "#2b2a2a",
+}: Props) {
+ const prefers = useReducedMotion();
+
+ // Positions
+ const left = { x: 140, y: 120 };
+ const mid = { x: 310, y: 150 };
+ const right= { x: 500, y: 120 };
+
+ // Shield position (trust boundary)
+ const shield = { cx: 600, cy: 250, r: 38 };
+
+ // Attestation paths from racks to shield
+ const pathFromLeft = `M ${left.x + 140} ${left.y + 45} C 330 150, 470 200, ${shield.cx - 50} ${shield.cy}`;
+ const pathFromMid = `M ${mid.x + 140} ${mid.y + 45} C 420 190, 500 215, ${shield.cx - 50} ${shield.cy}`;
+ const pathFromRight = `M ${right.x + 140} ${right.y + 45} C 520 180, 560 220, ${shield.cx - 50} ${shield.cy}`;
+
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/home/HomeAgent.tsx b/src/pages/home/archive/HomeAgent.tsx
similarity index 100%
rename from src/pages/home/HomeAgent.tsx
rename to src/pages/home/archive/HomeAgent.tsx
diff --git a/src/pages/home/archive/HomeAuroraedt.tsx b/src/pages/home/archive/HomeAuroraedt.tsx
new file mode 100644
index 0000000..11049cb
--- /dev/null
+++ b/src/pages/home/archive/HomeAuroraedt.tsx
@@ -0,0 +1,43 @@
+export function HomeAurora() {
+ return (
+
+
+ {/* Top cyan soft blob */}
+
+
+ {/* Bottom cyan soft blob */}
+
+
+
+ )
+}
diff --git a/src/pages/home/archive/HomeCTA.tsx b/src/pages/home/archive/HomeCTA.tsx
new file mode 100644
index 0000000..1323db1
--- /dev/null
+++ b/src/pages/home/archive/HomeCTA.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ArrowRightIcon } from "@heroicons/react/24/solid";
+
+export function HomeCTA() {
+ return (
+
+
+
+ {/* LEFT: Big CTA Button */}
+
+
+ {/* RIGHT: Two small CTAs */}
+
+
+ {/* Button 1 */}
+
+
+ {/* Button 2 */}
+
+
+
+
+ );
+}
diff --git a/src/pages/home/HomeCloud.tsx b/src/pages/home/archive/HomeCloud.tsx
similarity index 100%
rename from src/pages/home/HomeCloud.tsx
rename to src/pages/home/archive/HomeCloud.tsx
diff --git a/src/pages/home/HomeComparisonTable.tsx b/src/pages/home/archive/HomeComparisonTable.tsx
similarity index 98%
rename from src/pages/home/HomeComparisonTable.tsx
rename to src/pages/home/archive/HomeComparisonTable.tsx
index adfd0a9..7d7b7d6 100644
--- a/src/pages/home/HomeComparisonTable.tsx
+++ b/src/pages/home/archive/HomeComparisonTable.tsx
@@ -1,5 +1,5 @@
import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
-import { Eyebrow, H3, P, CT } from '../../components/Texts'
+import { Eyebrow, H3, P, CT } from '@/components/Texts'
const features = [
{ name: 'Infrastructure Ownership', cloud:
, mycelium:
},
diff --git a/src/pages/home/HomeFeatures.tsx b/src/pages/home/archive/HomeFeatures.tsx
similarity index 100%
rename from src/pages/home/HomeFeatures.tsx
rename to src/pages/home/archive/HomeFeatures.tsx
diff --git a/src/pages/home/HomeFeaturesDark.tsx b/src/pages/home/archive/HomeFeaturesDark.tsx
similarity index 93%
rename from src/pages/home/HomeFeaturesDark.tsx
rename to src/pages/home/archive/HomeFeaturesDark.tsx
index 8e06500..c90e974 100644
--- a/src/pages/home/HomeFeaturesDark.tsx
+++ b/src/pages/home/archive/HomeFeaturesDark.tsx
@@ -42,7 +42,7 @@ export function HomeFeaturesDark() {
{features.map((feature) => (
-
+
diff --git a/src/pages/home/archive/HomeGlobeNew.tsx b/src/pages/home/archive/HomeGlobeNew.tsx
new file mode 100644
index 0000000..3dbddfb
--- /dev/null
+++ b/src/pages/home/archive/HomeGlobeNew.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { Globe } from "@/components/ui/Globe";
+
+export function HomeGlobeNew() {
+ return (
+
+
+
+ {/* Column 1 */}
+
+
+ Decentralized Network
+
+
+ Project Mycelium is Live.
+
+
+
+ Project Mycelium enables anyone to deploy their own Internet infrastructure, anywhere.
+
+
+
+
+
+ {/* Column 2 */}
+
+
+
+
+
+ );
+}
diff --git a/src/pages/home/archive/HomeHero.tsx b/src/pages/home/archive/HomeHero.tsx
new file mode 100644
index 0000000..af44ea3
--- /dev/null
+++ b/src/pages/home/archive/HomeHero.tsx
@@ -0,0 +1,30 @@
+import { Button } from '@/components/Button'
+
+export function HomeHero() {
+ return (
+
+
+
+
+ The Sovereign Agentic Cloud
+
+
+
+ Host nodes, deploy workloads, or build private AI systems —
+ all on infrastructure you own and control.
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/home/archive/HomeMap.tsx b/src/pages/home/archive/HomeMap.tsx
new file mode 100644
index 0000000..f46b363
--- /dev/null
+++ b/src/pages/home/archive/HomeMap.tsx
@@ -0,0 +1,69 @@
+"use client";
+import WorldMap from "@/components/ui/world-map";
+import { motion } from "motion/react";
+import { H2, P } from "@/components/Texts";
+
+export function HomeMapSection() {
+ return (
+
+
+
+ Mycelium Network is{" "}
+
+ {"Live.".split("").map((word, idx) => (
+
+ {word}
+
+ ))}
+
+
+
+ Mycelium Network's advancement technology enables anyone to deploy
+ their own Internet infrastructure, anywhere.
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/home/archive/HomeNew.tsx b/src/pages/home/archive/HomeNew.tsx
new file mode 100644
index 0000000..fce5a9f
--- /dev/null
+++ b/src/pages/home/archive/HomeNew.tsx
@@ -0,0 +1,51 @@
+import { H1, H5 } from "@/components/Texts"
+import { Button } from "@/components/Button"
+
+export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
+ return (
+
+ {/* Boxed container */}
+
+ {/* Inner padding */}
+
+
+
+
+
+ The Sovereign Agentic Cloud
+
+
+
+ Host nodes, deploy workloads, or build private AI systems,
+ all on infrastructure you own and control.
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/home/archive/HomeProductsA.tsx b/src/pages/home/archive/HomeProductsA.tsx
new file mode 100644
index 0000000..06c18a8
--- /dev/null
+++ b/src/pages/home/archive/HomeProductsA.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+export function HomeProductsA() {
+ return (
+
+
+
+ {/* Product 1 */}
+
+
+ Mycelium Cloud
+
+
+ Deploy K8s clusters on sovereign infrastructure.
+
+
+
+
+ {/* Product 2 */}
+
+
+ Mycelium Network
+
+
+ Encrypted peer-to-peer mesh networking across the globe.
+
+
+
+
+ {/* Product 3 */}
+
+
+ Mycelium Agents
+
+
+ Programmable AI systems that run on your hardware.
+
+
+
+
+ {/* Product 4 */}
+
+
+ Compute / Storage / GPU
+
+
+ The 3 powerful resource layers powering the stack.
+
+
+
+
+
+ );
+}
diff --git a/src/pages/home/archive/HomeStack.tsx b/src/pages/home/archive/HomeStack.tsx
new file mode 100644
index 0000000..c3a241a
--- /dev/null
+++ b/src/pages/home/archive/HomeStack.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { useState } from "react";
+
+const layers = [
+ {
+ id: "agent",
+ label: "Agent Layer",
+ description: `
+ Your sovereign agent with private memory and permissioned data access—always under your control. Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval. It coordinates across people, apps, and other agents to plan, create, and execute. It operates inside a compliant legal sandbox, ready for real-world transactions and operations.
+ `,
+ },
+ {
+ id: "network",
+ label: "Network Layer",
+ description: `
+ A global, end-to-end encrypted overlay that simply doesn’t break. Shortest-path routing moves your traffic the fastest way, every time. Instant discovery with integrated DNS, semantic search, and indexing. A distributed CDN and edge delivery keep content available and tamper-resistant worldwide. Built-in tools and secure coding sandboxes—seamless on phones, desktops, and edge.
+ `,
+ },
+ {
+ id: "cloud",
+ label: "Cloud Layer",
+ description: `
+ An autonomous, stateless OS that enforces pre-deterministic deployments you define. Workloads are cryptographically bound to your private key—location and access are yours. No cloud vendor or middleman in the path: end-to-end ownership and isolation by default. Geo-aware placement delivers locality, compliance, and ultra-low latency where it matters.
+ `,
+ },
+];
+
+export function HomeStack() {
+ const [active, setActive] = useState("agent");
+ const current = layers.find((l) => l.id === active)!;
+
+ return (
+
+
+
+ {/* LEFT COLUMN (2 COLS) */}
+
+
+ The Mycelium Stack
+
+
+
+ {/* MIDDLE COLUMN (1 COL) */}
+
+ {layers.map((layer) => (
+
+ ))}
+
+
+ {/* RIGHT COLUMN (2 COLS) */}
+
+
+ {current.label}
+
+
+ {current.description.trim()}
+
+
+
+
+ );
+}
diff --git a/src/pages/home/archive/HomeStat.tsx b/src/pages/home/archive/HomeStat.tsx
new file mode 100644
index 0000000..6658319
--- /dev/null
+++ b/src/pages/home/archive/HomeStat.tsx
@@ -0,0 +1,61 @@
+export function HomeStat() {
+ return (
+
+
+
+ {/* CORES */}
+
+
+ CORES
+
+
+ 54,958
+
+
+ Total Central Processing Unit cores available on the grid.
+
+
+
+ {/* NODES */}
+
+
+ NODES
+
+
+ 1,493
+
+
+ Total number of nodes on the grid.
+
+
+
+ {/* SSD CAPACITY */}
+
+
+ SSD CAPACITY
+
+
+ 5,388,956
+
+
+ Total GB amount of storage (SSD, HDD, and RAM) on the grid.
+
+
+
+ {/* COUNTRIES */}
+
+
+ COUNTRIES
+
+
+ 44
+
+
+ Total number of countries with active nodes.
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/home/archive/HomeTabs.tsx b/src/pages/home/archive/HomeTabs.tsx
new file mode 100644
index 0000000..c9d8966
--- /dev/null
+++ b/src/pages/home/archive/HomeTabs.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+
+// ✅ IMPORT HEROICONS
+import {
+ CubeIcon,
+ SparklesIcon,
+ ServerStackIcon,
+ ShieldCheckIcon,
+} from "@heroicons/react/20/solid";
+
+const tabs = [
+ {
+ id: "ai",
+ label: "K8s Clusters",
+ title: "K8s Clusters",
+ description:
+ "Deploy and scale containerized apps across your own hardware — enabling a world of possibilities.",
+ link: "#",
+ icon: CubeIcon,
+ },
+ {
+ id: "web",
+ label: "AI Agents",
+ title: "AI Agents",
+ description: "Run open-source models locally, securely, and offline.",
+ link: "#",
+ icon: SparklesIcon,
+ },
+ {
+ id: "ecommerce",
+ label: "S3-Compatible Storage",
+ title: "S3-Compatible Storage",
+ description:
+ "Your own personal over-the-network drive, encrypted end-to-end.",
+ link: "#",
+ icon: ServerStackIcon,
+ },
+ {
+ id: "platforms",
+ label: "Mesh VPN & 0-Trust Networking",
+ title: "Mesh VPN & 0-Trust Networking",
+ description:
+ "Securely connect all your devices and remote locations.",
+ link: "#",
+ icon: ShieldCheckIcon,
+ },
+];
+
+export function HomeApplication() {
+ const [active, setActive] = useState("ai");
+ const current = tabs.find((t) => t.id === active)!;
+ const Icon = current.icon; // ✅ dynamic icon
+
+ return (
+
+
+
+ {/* ✅ VERTICAL DIVIDER ON DESKTOP */}
+
+
+ {/* LEFT COLUMN */}
+
+
+ Run Real Infrastructure on Your Own Hardware
+
+
+
+ Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
+
+
+ {/* TABS */}
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+
+ {/* RIGHT COLUMN — ONLY 1 ROW CHANGES */}
+
+
+ {/* ✅ ICON WITH BLACK BG */}
+
+
+
+
+
+ {current.title}
+
+
+
+ {current.description}
+
+
+
+ Learn more →
+
+
+
+
+ );
+}
diff --git a/src/pages/home/archive/HomeUniverse.tsx b/src/pages/home/archive/HomeUniverse.tsx
new file mode 100644
index 0000000..092a7bb
--- /dev/null
+++ b/src/pages/home/archive/HomeUniverse.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { GlobeAltIcon } from "@heroicons/react/24/outline";
+
+export function HomeUniverse() {
+ return (
+
+
+
+ {/* left text */}
+ Explore the Mycelium
+
+ {/* optional end pill */}
+
+
+ Universe
+
+
+
+
+ );
+}
diff --git a/src/pages/home/archive/HomeWhy.tsx b/src/pages/home/archive/HomeWhy.tsx
new file mode 100644
index 0000000..abb8000
--- /dev/null
+++ b/src/pages/home/archive/HomeWhy.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import {
+ ShieldCheckIcon,
+ KeyIcon,
+ CodeBracketIcon,
+ BoltIcon,
+} from "@heroicons/react/24/outline";
+
+export function HomeWhy() {
+ const items = [
+ { label: "Unbreakable by Design", icon: ShieldCheckIcon },
+ { label: "Sovereign by Default", icon: KeyIcon },
+ { label: "Hackable & Open", icon: CodeBracketIcon },
+ { label: "Cost & Energy Efficient", icon: BoltIcon },
+ ];
+
+ return (
+
+
+ {items.map(({ label, icon: Icon }) => (
+
+
+ {label}
+
+ ))}
+
+
+ );
+}
diff --git a/src/pages/network/About.tsx b/src/pages/network/About.tsx
index 828c8d2..eec4aae 100644
--- a/src/pages/network/About.tsx
+++ b/src/pages/network/About.tsx
@@ -1,12 +1,12 @@
-import { Button } from '../../components/Button'
+import { Button } from '@/components/Button'
import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
export function About() {
return (
diff --git a/src/pages/network/CallToAction.tsx b/src/pages/network/CallToAction.tsx
index b102f09..478400d 100644
--- a/src/pages/network/CallToAction.tsx
+++ b/src/pages/network/CallToAction.tsx
@@ -1,40 +1,53 @@
-import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '../../components/Container'
-import { Button } from '../../components/Button'
+"use client";
+
+import { Container } from "@/components/Container";
+import { Button } from "@/components/Button";
export function CallToAction() {
return (
-
-
-
-
-
-
-
- Get Started Today
-
-
- Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
-
-
-
-
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+ {/* ✅ Main boxed area */}
+
+
+
+
+
+
+ Choose How You Want to Start
+
+
+
+ Use the network to connect workloads or host nodes to deepen mesh resilience and run your environments on your own hardware.
+
+
+ {/* ✅ Two cards, stacked center with spacing */}
+
+
+
+
+
+
+
+
+
+
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
- )
+ );
}
diff --git a/src/pages/network/Features.tsx b/src/pages/network/Features.tsx
index b749b0e..214c2a7 100644
--- a/src/pages/network/Features.tsx
+++ b/src/pages/network/Features.tsx
@@ -3,27 +3,32 @@ import MessageBus from './animations/MessageBus'
import ProxyDetection from './animations/ProxyDetection'
import ProxyForwarding from './animations/ProxyForwarding'
import ContentDistribution from './animations/ContentDistribution'
+import { P, H3, Eyebrow } from '@/components/Texts'
export function Features() {
return (
-
-
-
Core Components
-
- Network Capabilities
-
-
+
+
+
+ {/* ✅ Top spacer + full-width line */}
+
+
+
+
+
Core Components
+
Network Capabilities
+
Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.
-
-
+
+
Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.
-
-
+
+
-
+
Routing
Automatic pathfinding
@@ -40,7 +45,7 @@ export function Features() {
-
+
Communication
Distributed message bus
@@ -57,7 +62,7 @@ export function Features() {
-
+
Discovery
Automatic proxy detection
@@ -74,7 +79,7 @@ export function Features() {
-
+
Connectivity
Seamless proxy forwarding
@@ -91,7 +96,7 @@ export function Features() {
-
+
Delivery
Decentralized content distribution
@@ -106,6 +111,9 @@ export function Features() {
+ {/* ✅ Bottom full-width line + spacer */}
+
+
)
}
diff --git a/src/pages/network/Hero.tsx b/src/pages/network/Hero.tsx
index c47df50..8ceb0df 100644
--- a/src/pages/network/Hero.tsx
+++ b/src/pages/network/Hero.tsx
@@ -1,7 +1,8 @@
import { useId } from 'react'
-import { Container } from '../../components/Container'
-import { Button } from '../../components/Button'
+import { Container } from '@/components/Container'
+import { Button } from '@/components/Button'
import phoneFrame from '../../images/phoneframe.png'
+import { H3, P, CT } from "@/components/Texts";
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
let id = useId()
@@ -74,23 +75,31 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
export function Hero() {
return (
-
+
-
+
-
+
Mycelium Network
-
-
- Unleashing the Power of Decentralized Networks
-
-
- Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
-
+
+
+ Encrypted Peer-to-Peer Connectivity Across the Globe
+
+
+ Mycelium Network provides an unbreakable sovereign IPv6 mesh that connects people, nodes, and applications directly, with no central servers.
+
+
+ Works Alone. Works Together.
+ Mycelium Network can be used standalone, or together with Mycelium Cloud
+ for full-stack sovereignty.
+
+
@@ -99,7 +108,7 @@ export function Hero() {
diff --git a/src/pages/network/NetworkCapabilities.tsx b/src/pages/network/NetworkCapabilities.tsx
new file mode 100644
index 0000000..72ddf74
--- /dev/null
+++ b/src/pages/network/NetworkCapabilities.tsx
@@ -0,0 +1,97 @@
+import {
+ LockClosedIcon,
+ GlobeAltIcon,
+ ArrowPathRoundedSquareIcon,
+ NoSymbolIcon,
+} from '@heroicons/react/24/solid'
+
+import { Eyebrow, H4, P } from '@/components/Texts'
+
+export function NetworkCapabilities() {
+ return (
+
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+ {/* ✅ Main content */}
+
+
+ {/* ✅ LEFT SIDE — Title + Intro */}
+
+
WHAT IT ENABLES
+
+
+ A Private Networking Layer for Everything You Run
+
+
+
+ Mycelium Network is the backbone for secure, autonomous connectivity
+ across devices, data centers, clusters, and self-hosted environments — anywhere in the world.
+
+
+
+ Every node gets its own encrypted identity and address space, forming a
+ zero-trust mesh without any centralized controller.
+
+
+
+ {/* ✅ RIGHT SIDE — 4 stacked features */}
+
+
+ {/* 1 — Encrypted Mesh */}
+
+
+
+ End-to-End Encrypted Mesh
+
+
+ Every packet is encrypted and routed peer-to-peer — no intermediaries, no sniffing, no compromise.
+
+
+
+
+ {/* 2 — IPv6 Space */}
+
+
+
+ Global IPv6 Address Space
+
+
+ Every node, app, and microservice gets an address — solving discovery, routing, and NAT issues forever.
+
+
+
+
+ {/* 3 — Self-Healing Routing */}
+
+
+
+ Self-Healing Routing
+
+
+ Traffic automatically finds the fastest path, dynamically re-routing around failures or congestion.
+
+
+
+
+ {/* 4 — No Central Control */}
+
+
+
+ No Central Control
+
+
+ No servers to trust, no corporate choke points, and no authority that can turn you off.
+
+
+
+
+ )
+}
diff --git a/src/pages/network/NetworkPage.tsx b/src/pages/network/NetworkPage.tsx
index 4ecfd41..2684e23 100644
--- a/src/pages/network/NetworkPage.tsx
+++ b/src/pages/network/NetworkPage.tsx
@@ -1,10 +1,11 @@
import { AnimatedSection } from '../../components/AnimatedSection'
import { Hero } from './Hero'
-import { About } from './About'
import { Features } from './Features'
import { PrimaryFeatures } from './PrimaryFeatures'
import { SecondaryFeatures } from './SecondaryFeatures'
import { CallToAction } from './CallToAction'
+import { NetworkCapabilities } from './NetworkCapabilities'
+import { NetworkUsecases } from './NetworkUsecases'
export default function NetworkPage() {
return (
@@ -12,18 +13,27 @@ export default function NetworkPage() {
+
-
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/network/NetworkUsecases.tsx b/src/pages/network/NetworkUsecases.tsx
new file mode 100644
index 0000000..964499f
--- /dev/null
+++ b/src/pages/network/NetworkUsecases.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { useRef } from "react";
+import { Eyebrow, SectionHeader, P } from "@/components/Texts";
+import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
+import {
+ LockClosedIcon,
+ ArrowPathIcon,
+ GlobeAltIcon,
+} from "@heroicons/react/24/solid";
+
+const networkUseCases = [
+ {
+ isIntro: true,
+ eyebrow: "USE CASES",
+ title: "Private Connectivity for People, Services, and Infrastructures",
+ description:
+ "Mycelium Network provides a secure, autonomous communication layer that works across homes, clouds, edge workloads, and global deployments.",
+ },
+ {
+ title: "Secure Access to Self-Hosted Services",
+ description:
+ "Access your services, VMs, and clusters remotely without VPNs, public IPs, or port forwarding.",
+ ideal: "Ideal for: homelabs, personal clouds, long-running self-hosted stacks",
+ icon: LockClosedIcon,
+ },
+ {
+ title: "Service-to-Service Networking Across Environments",
+ description:
+ "Connect applications running across home labs, cloud regions, edge nodes, and data centers all on one address space.",
+ ideal: "Ideal for: dev teams, distributed apps, container + K3s workloads",
+ icon: GlobeAltIcon,
+ },
+ {
+ title: "Resilient Connectivity Across Regions & Outages",
+ description:
+ "Connect systems across countries, datacenters, edge locations, and remote deployments — with routing that automatically heals around ISP failures, censorship, and regional outages.",
+ ideal:
+ "Ideal for: research networks, cross-border orgs, distributed compute, off-grid / rural deployments",
+ icon: ArrowPathIcon,
+ },
+];
+
+export function NetworkUsecases() {
+ const sliderRef = useRef
(null);
+
+ const scrollLeft = () =>
+ sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
+
+ const scrollRight = () =>
+ sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
+
+ return (
+
+
+
+
+
+
+ {networkUseCases.map((item, idx) => (
+ -
+ {item.isIntro ? (
+
+
+
{item.eyebrow}
+
+ {item.title}
+
+
+ {item.description}
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ {item.title}
+
+
+
+ {item.description}
+
+
+ {item.ideal}
+
+
+ )}
+
+ ))}
+
+
+
)
}
@@ -193,7 +193,7 @@ function InviteScreen() {
function StocksScreen() {
return (
- 
+
)
}
@@ -201,7 +201,7 @@ function StocksScreen() {
function InvestScreen() {
return (
- 
+
)
}
@@ -348,7 +348,7 @@ function FeaturesMobile() {
>
-
-
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+
How It Works
How Mycelium Operates
@@ -425,9 +428,12 @@ export function PrimaryFeatures() {
-
+
+ {/* ✅ bottom border + bottom spacer to match */}
+
+
)
}
diff --git a/src/pages/network/SecondaryFeatures.tsx b/src/pages/network/SecondaryFeatures.tsx
index aeba697..816464d 100644
--- a/src/pages/network/SecondaryFeatures.tsx
+++ b/src/pages/network/SecondaryFeatures.tsx
@@ -1,5 +1,6 @@
import { useId } from 'react'
-import { Container } from '../../components/Container'
+import { Container } from '@/components/Container'
+import { CP } from '@/components/Texts'
const features = [
{
@@ -187,39 +188,44 @@ function DeviceChartIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
export function SecondaryFeatures() {
return (
-
-
+
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+
+
-
Roadmap
+
IN ACTIVE EVOLUTION
- Coming Soon: The Future of Mycelium
+ Expanding the Network Layer
- Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
+ The Mycelium Network is evolving to support richer data movement, identity, and application connectivity across the mesh. These enhancements deepen autonomy and improve real-world usability.
{features.map((feature) => (
-
-
+
{feature.name}
-
+
{feature.description}
))}
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
)
}
diff --git a/src/pages/pods/Homepod.tsx b/src/pages/pods/Homepod.tsx
new file mode 100644
index 0000000..066321e
--- /dev/null
+++ b/src/pages/pods/Homepod.tsx
@@ -0,0 +1,34 @@
+import { H3, Eyebrow } from "@/components/Texts"
+
+export default function Homepod() {
+ return (
+
+ {/* Boxed container */}
+
+ {/* Inner padding */}
+
+
+
+ MYCELIUM PODS
+
+
+ Your Private Space in the New Internet
+
+
+ Imagine having your own corner of the internet — private, secure, and always online.
+ A Pod is your personal digital space on the Mycelium Network.
+ It’s where your conversations, files, and digital tools live — owned by you, connected to others directly.
+
+
+
+
+
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
+
+
+ {/* ✅ LEFT SIDE — Title + Intro */}
+
+
What You Can Do
+
+
+ Pods Features
+
+
+
+ Access everything from any device — your data follows you, not the other way around.
+ 💡 It’s like having your own tiny cloud that belongs only to you.
+
+
+
+ {/* ✅ RIGHT SIDE — 4 stacked features */}
+
+
+ {/* 1 — Communicate */}
+
+
+
+ Communicate
+
+
+ Message, call, and share files privately — no tracking or ads.
+
+
+
+
+ {/* 2 — Organization */}
+
+
+
+ Organization
+
+
+ Organize your calendar and meetings inside your own space.
+
+
+
+
+ {/* 3 — Manage */}
+
+
+
+ Manage
+
+
+ Create small communities or teams that interact directly, Pod-to-Pod.
+
+
+
+
+ {/* 4 — Storage */}
+
+
+
+ Storage
+
+
+ Store data safely with Quantum Safe File System (QSFS) built in.
+
+
+
+
+
+ {/* ✅ Two-column layout */}
+
+
+ {/* ✅ Right side animation */}
+
+
+
+
+ {/* ✅ Left side content */}
+
+
+ How it works
+
+
+ What Living in a Pod Feels Like
+
+
+ When you use Mycelium, everything — your messages, calls, files — runs directly from your Pod.
+
+
+ It’s your personal digital hub:
+ When you message someone, it goes Pod to Pod, not through a central server.
+ When you host a call, it runs on your Pod — no third-party data centers.
+
+
+ When you save a file, it stays on your Pod, encrypted and always available.
+ No one else can read it, rent it, or switch it off.
+
+
+ You don’t log in to the internet — you are part of it.
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/storage/CallToAction.tsx b/src/pages/storage/CallToAction.tsx
index f477ba6..18f0039 100644
--- a/src/pages/storage/CallToAction.tsx
+++ b/src/pages/storage/CallToAction.tsx
@@ -1,48 +1,66 @@
-import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '../../components/Container'
-import { Button } from '../../components/Button'
+"use client";
+
+import { Container } from "@/components/Container";
+import { Button } from "@/components/Button";
export function CallToAction() {
return (
-
-
-
-
-
-
-
- Bring sovereign storage into your stack.
-
-
- Partner with the Mycelium team to design quantum-safe, compliant
- storage that meets your residency, redundancy, and performance
- requirements across the globe.
-
-
-
-
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+ {/* ✅ Main boxed area */}
+
+
+
+
+ Choose How You Want to Start
+
+
+
+ Store data in your Mycelium Cloud environment
+ or host your own node for full sovereignty.
+
+
+ {/* ✅ Two cards, stacked center with spacing */}
+
+
+
+
+
+
+
+
+
+
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
- )
+ );
}
diff --git a/src/pages/storage/StorageArchitecture.tsx b/src/pages/storage/StorageArchitecture.tsx
index fc65d43..43bffac 100644
--- a/src/pages/storage/StorageArchitecture.tsx
+++ b/src/pages/storage/StorageArchitecture.tsx
@@ -1,97 +1,81 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+"use client";
+
+import { useState } from "react";
+import { Container } from "@/components/Container";
+import { Eyebrow, P, H3, H5, CP } from "@/components/Texts";
const architecture = [
{
- title: 'Quantum-Safe Data Protection',
- description:
- 'Post-quantum encryption and cryptographic verification protect every storage operation end-to-end.',
- bullets: [
- 'Algorithms selected to resist quantum computing attacks.',
- 'Protection applied beneath the application layer.',
- 'All writes and reads verified cryptographically.',
- 'Future-proof design for long-lived data sets.',
- ],
+ title: "Encrypted Storage Substrate",
+ description: "Keeps data private and verifiable.",
},
{
- title: 'Autonomous Self-Healing',
- description:
- 'Storage monitors itself, heals corruption, and restores replicas without human intervention.',
- bullets: [
- 'Continuous detection of failures or anomalies.',
- 'Instant recovery without service interruption.',
- 'Integrity checks keep replicas in lockstep.',
- '24/7 autonomy removes the pager from the loop.',
- ],
+ title: "Mesh Routing Layer",
+ description: "Connects clients and workloads securely, anywhere.",
},
{
- title: 'Multi-Protocol Fabric',
+ title: "Protocol Gateway Layer",
description:
- 'A single data plane serves every protocol so workloads can mix and migrate freely.',
- bullets: [
- 'Protocol adapters sit in front of the same storage core.',
- 'Applications choose the protocol that fits their workflow.',
- 'No data duplication needed to support multiple interfaces.',
- 'Consistent governance across all access patterns.',
- ],
+ "Serve the same dataset over S3, IPFS, WebDAV, or HTTP.",
},
- {
- title: 'Geo-Aware Data Governance',
- description:
- 'Data placement policies enforce sovereignty, redundancy, and compliance requirements.',
- bullets: [
- 'Pin workloads to specific jurisdictions or providers.',
- 'Define redundancy at the dataset or workload level.',
- 'Automatic zone-to-zone replication hardens resilience.',
- 'Global distribution optimized across the ThreeFold Grid.',
- ],
- },
-]
+];
export function StorageArchitecture() {
+ const [active, setActive] = useState(0);
+
return (
-
-
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+ {/* ✅ Boxed container */}
+
-
- Technical Architecture
-
-
- Autonomous governance for planetary-scale storage.
-
-
- The Mycelium Storage data plane is designed to protect data at the
- cryptographic layer, operate without manual intervention, and meet
- jurisdictional requirements anywhere in the world.
+ ARCHITECTURE
+
+ How it Works
+
+
+ A layered design that encrypts, routes, and exposes storage through
+ multiple protocols — without duplicating data or compromising
+ sovereignty.
- {architecture.map((item) => (
+
+ {/* ✅ New 2-column layout */}
+
+ {/* LEFT — 1 column (3 rows) */}
+
+ {architecture.map((item, index) => (
+
+ ))}
+
+
+ {/* RIGHT — 2 columns */}
+
-
- {item.title}
-
-
- {item.description}
-
-
- {item.bullets.map((bullet) => (
- -
-
- {bullet}
-
- ))}
-
+
{architecture[active].title}
+
+ {architecture[active].description}
+
- ))}
+
+
+
- )
+ );
}
diff --git a/src/pages/storage/StorageCapabilities.tsx b/src/pages/storage/StorageCapabilities.tsx
new file mode 100644
index 0000000..0b2bc4c
--- /dev/null
+++ b/src/pages/storage/StorageCapabilities.tsx
@@ -0,0 +1,60 @@
+import { Container } from '@/components/Container'
+import { Eyebrow, H3, CT, CP } from '@/components/Texts'
+import {
+ ServerStackIcon,
+ GlobeAltIcon,
+ FolderOpenIcon,
+ LockClosedIcon,
+} from '@heroicons/react/24/solid'
+
+const capabilities = [
+ {
+ name: 'S3-Compatible Object Storage',
+ description: 'Works with existing SDKs & tooling.',
+ icon: ServerStackIcon,
+ },
+ {
+ name: 'IPFS & Content-Addressed Access',
+ description: 'Ideal for distributed and decentralized workloads.',
+ icon: GlobeAltIcon,
+ },
+ {
+ name: 'Filesystem Mounts (WebDAV / POSIX)',
+ description: 'Mount storage directly into workflows and apps.',
+ icon: FolderOpenIcon,
+ },
+ {
+ name: 'Encrypted Replication & Placement Control',
+ description: 'Choose where data physically lives – and who controls it.',
+ icon: LockClosedIcon,
+ },
+]
+
+export function StorageCapabilities() {
+ return (
+
+
+
+ CAPABILITIES
+
+ What You Can Use Mycelium Storage For
+
+
+
+
+
+ {capabilities.map((item) => (
+
+
+
+
+
{item.name}
+
{item.description}
+
+
+ )
+}
diff --git a/src/pages/storage/StorageCapabilitiesNew.tsx b/src/pages/storage/StorageCapabilitiesNew.tsx
new file mode 100644
index 0000000..d1b473c
--- /dev/null
+++ b/src/pages/storage/StorageCapabilitiesNew.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useRef } from "react";
+import { Eyebrow, H5 } from "@/components/Texts";
+import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
+
+const capabilities = [
+ {
+ isIntro: true,
+ eyebrow: "CAPABILITIES",
+ title: "Flexible, Resilient, and Controllable Storage",
+ description:
+ "Mycelium Storage is designed for modern data workloads, providing a range of access methods and control over data placement.",
+ },
+ {
+ title: "S3-Compatible Object Storage",
+ description: "Works with existing SDKs & tooling.",
+ imageUrl: "/images/s3.png",
+ },
+ {
+ title: "IPFS & Content-Addressed Access",
+ description: "Ideal for distributed and decentralized workloads.",
+ imageUrl: "/images/ipfs.png",
+ },
+ {
+ title: "Filesystem Mounts (WebDAV / POSIX)",
+ description: "Mount storage directly into workflows and apps.",
+ imageUrl: "/images/filesystem.png",
+ },
+ {
+ title: "Encrypted Replication & Placement Control",
+ description: "Choose data's ownership and locations.",
+ imageUrl: "/images/encrypted.png",
+ },
+];
+
+export function StorageCapabilitiesNew() {
+ const sliderRef = useRef
(null);
+
+ const scrollLeft = () => sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
+ const scrollRight = () => sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
+
+ return (
+
+
+
+
+
+
+ {/* Horizontal Slider — shows part of next card */}
+
+ {capabilities.map((item, idx) => (
+ -
+
+ {/* First card with arrows */}
+ {item.isIntro ? (
+
+
+
{item.eyebrow}
+
{item.title}
+
{item.description}
+
+
+ {/* Arrows inside first card */}
+
+
+ ) : (
+
+
{item.title}
+
{item.description}
+
+ )}
+
+ ))}
+
+
+
+
+
+
Featured Blueprint
+
+
+ Sovereign Storage That Heals Itself
+
+
+
+ Mycelium Storage continuously verifies integrity and restores replicas automatically, so data stays available without operational overhead.
+
+
+
+
CORE VALUE
+
+ Sovereign Storage That Heals Itself
+
+
+ Mycelium Storage continuously verifies integrity and restores
+ replicas automatically, so data stays available without operational
+ overhead.
+
+
+
+ {benefits.map((benefit) => (
+
+
+
+ {benefit.name}
+
+
+ ))}
+
+
-
-
-
-
-
-
- Mycelium Storage
-
-
- Quantum-safe, sovereign data plane for every workload.
-
-
- Mycelium Storage delivers quantum-resistant protection, autonomous
- recovery, and multi-protocol access across the ThreeFold Grid. Place
- data exactly where you need it while keeping ownership entirely in
- your hands.
-
-
- Quantum-safe. Self-healing. Universally accessible.
-
-
-
-
+
+ {/* Boxed container */}
+
+ {/* Inner padding */}
+
+
+
Mycelium Storage
+
+ Sovereign Storage With Self-Healing and Multi-Protocol Access
+
+
+ Store, replicate, and serve data across the global mesh with encrypted, quantum safe, verifiable storage you control at the infrastructure layer.
+
+
+
+
+
+ {/* ✅ Bottom horizontal line with spacing */}
+
+
)
}
diff --git a/src/pages/storage/StorageOverview.tsx b/src/pages/storage/StorageOverview.tsx
index 160538c..46205c8 100644
--- a/src/pages/storage/StorageOverview.tsx
+++ b/src/pages/storage/StorageOverview.tsx
@@ -1,49 +1,39 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Small } from '@/components/Texts'
const highlights = [
{
label: 'Overview',
- title: 'Quantum-safe, sovereign data management',
+ title: 'Encrypted & Verifiable Storage',
description:
- 'Mycelium Storage protects data beyond the application layer with autonomous recovery and geo-aware placement across the ThreeFold Grid.',
+ 'Data is secured with cryptographic identity, not cloud trust.',
},
{
label: 'Core Concept',
- title: 'Unified data plane across every protocol',
+ title: 'Self-Healing Replication',
description:
- 'Serve the same dataset via IPFS, S3, WebDAV, HTTP, or native file systems while maintaining complete control over residency and redundancy.',
+ 'The system repairs corruption and restores replicas automatically.',
},
{
label: 'Outcome',
- title: 'Ownership without compromise',
+ title: 'Multi-Protocol Access',
description:
- 'Quantum-resistant encryption, self-healing recovery, and programmable governance ensure data remains verifiable, available, and compliant.',
+ 'Serve the same dataset over S3, IPFS, or filesystem mounts, without duplicating data.',
},
]
export function StorageOverview() {
return (
-
-
-
-
- Platform Overview
-
-
- A quantum-safe data plane that heals itself.
-
-
- Built on sovereign infrastructure, Mycelium Storage keeps data
- resilient, verifiable, and instantly accessible. Encryption,
- replication, and governance are woven directly into the substrate.
-
-
+
+ {/* ✅ Top horizontal line with spacing */}
+
+
+
+
+
{highlights.map((item) => (
@@ -60,7 +50,9 @@ export function StorageOverview() {
))}
-
+
+
+
)
}
diff --git a/src/pages/storage/StoragePage.tsx b/src/pages/storage/StoragePage.tsx
index 855dec3..75113f1 100644
--- a/src/pages/storage/StoragePage.tsx
+++ b/src/pages/storage/StoragePage.tsx
@@ -1,12 +1,11 @@
import { AnimatedSection } from '../../components/AnimatedSection'
import { StorageHero } from './StorageHero'
import { StorageOverview } from './StorageOverview'
-import { StorageFeatures } from './StorageFeatures'
import { StorageArchitecture } from './StorageArchitecture'
-import { StorageDeveloperExperience } from './StorageDeveloperExperience'
-import { StorageUseCases } from './StorageUseCases'
-import { StorageDifferentiators } from './StorageDifferentiators'
import { CallToAction } from './CallToAction'
+import { StorageCapabilitiesNew } from './StorageCapabilitiesNew'
+import { StorageCoreValue } from './StorageCoreValue'
+import { StorageUseCasesNew } from './StorageUseCasesNew'
export default function StoragePage() {
return (
@@ -14,24 +13,28 @@ export default function StoragePage() {
+
-
+
+
-
+
+
+
-
+
+
-
-
-
-
+
+
+
diff --git a/src/pages/storage/StorageUseCases.tsx b/src/pages/storage/StorageUseCases.tsx
index 3db294a..d77d986 100644
--- a/src/pages/storage/StorageUseCases.tsx
+++ b/src/pages/storage/StorageUseCases.tsx
@@ -1,81 +1,19 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
-const primaryUseCases = [
+const storageUseCases = [
{
- title: 'Data Sovereignty Applications',
- bullets: [
- 'Privacy-first products with full control over data location.',
- 'Regulatory compliance for regional or industry mandates.',
- 'Enterprise workloads that demand audit-ready governance.',
- 'DigitalMe applications hosted with complete data ownership.',
- ],
+ title: 'Data Sovereignty & Compliance',
+ description: 'Keep data under your control, choose residency per dataset.',
},
{
- title: 'Multi-Protocol Applications',
- bullets: [
- 'Support legacy S3, WebDAV, and HTTP workloads simultaneously.',
- 'Enable hybrid architectures that mix centralized and decentralized access.',
- 'Give developers freedom to choose best-fit protocols per service.',
- 'Simplify migrations by keeping data accessible through multiple APIs.',
- ],
- },
- {
- title: 'Backup and Recovery',
- bullets: [
- 'Autonomous backups with continuous verification.',
- 'Cross-zone replication that survives regional outages.',
- 'Integrity monitoring that spots corruption immediately.',
- 'Instant recovery from failures without manual restore steps.',
- ],
+ title: 'Distributed Application Storage',
+ description: 'Serve data to services, agents, clusters, or edge workloads.',
},
{
title: 'Content Distribution',
- bullets: [
- 'Global CDN leveraging the breadth of the ThreeFold Grid.',
- 'IPFS integration for decentralized content addressing.',
- 'Serve the same assets over HTTP, S3, or WebDAV.',
- 'Geo-optimized placement keeps content close to users.',
- ],
- },
-]
-
-const storageSpecificUseCases = [
- {
- title: 'Data Sovereignty & Compliance',
- bullets: [
- 'Guarantee residency in specific jurisdictions.',
- 'Protect personal or regulated data with audit trails.',
- 'Empower enterprises with region-specific governance.',
- 'Handle cross-border rules without duplicating datasets.',
- ],
- },
- {
- title: 'Multi-Protocol Data Solutions',
- bullets: [
- 'Bridge legacy S3 tooling with decentralized IPFS access.',
- 'Offer WebDAV and HTTP endpoints for collaboration suites.',
- 'Blend centralized and decentralized patterns as needed.',
- 'Let developers change protocols without rewriting storage.',
- ],
- },
- {
- title: 'Autonomous Backup & Recovery',
- bullets: [
- 'Self-healing backups that maintain integrity automatically.',
- 'Zone-aware replication delivers geographic redundancy.',
- 'Instant recovery with continuous verification.',
- 'Keeps backups up-to-date without operator intervention.',
- ],
- },
- {
- title: 'Content Distribution & CDN',
- bullets: [
- 'Distribute media and assets across a planetary mesh.',
- 'Use IPFS for decentralized caching and retrieval.',
- 'Serve identical content across multiple access protocols.',
- 'Geo-optimize placement for latency-sensitive workloads.',
- ],
+ description:
+ 'Serve public or private assets globally, without centralized hosting.',
},
]
@@ -84,71 +22,32 @@ export function StorageUseCases() {
-
- Use Cases
-
+
USE CASES
- Sovereign storage for every data-intensive workload.
+ Built for Real Data Workloads
Mycelium Storage adapts to compliance-driven enterprise data,
- decentralized content distribution, and everything in between.
- Choose the pattern that fits your strategy without sacrificing
- ownership.
+ distributed application workloads, and global asset delivery
+ — without giving up sovereignty.
- {primaryUseCases.map((useCase) => (
+
+
+ {storageUseCases.map((useCase) => (
{useCase.title}
-
- {useCase.bullets.map((bullet) => (
- -
-
- {bullet}
-
- ))}
-
+
+ {useCase.description}
+
))}
-
-
- Storage-Specific Scenarios
-
-
- These patterns highlight how Mycelium Storage keeps sovereignty,
- protocol flexibility, and resilience at the center of data strategy.
-
-
- {storageSpecificUseCases.map((useCase) => (
-
-
- {useCase.title}
-
-
- {useCase.bullets.map((bullet) => (
- -
-
- {bullet}
-
- ))}
-
-
- ))}
-
-
)
diff --git a/src/pages/storage/StorageUseCasesNew.tsx b/src/pages/storage/StorageUseCasesNew.tsx
new file mode 100644
index 0000000..05d9527
--- /dev/null
+++ b/src/pages/storage/StorageUseCasesNew.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { Eyebrow, H3, P } from "@/components/Texts";
+
+const tabs = [
+ {
+ id: "distributed",
+ label: "Distributed Application Storage",
+ content: [
+ {
+ item: "Application-native storage",
+ desc: "Serve data to services, agents, clusters, or edge workloads.",
+ },
+ ],
+ },
+ {
+ id: "sovereignty",
+ label: "Data Sovereignty & Compliance",
+ content: [
+ {
+ item: "Residency-aware storage",
+ desc: "Keep data under your control, choose residency per dataset.",
+ },
+ ],
+ },
+ {
+ id: "distribution",
+ label: "Content Distribution",
+ content: [
+ {
+ item: "Decentralized delivery",
+ desc: "Serve public or private assets globally, without centralized hosting.",
+ },
+ ],
+ },
+];
+
+export function StorageUseCasesNew() {
+ const [active, setActive] = useState("distributed");
+ const current = tabs.find((t) => t.id === active)!;
+
+ return (
+
+
+ {/* Top lines */}
+
+
+
+
+
+ {/* ✅ Two columns: ALL TEXT LEFT, IMAGE RIGHT */}
+
+
+ {/* LEFT COLUMN: Full tab + content */}
+
+
Use Cases
+
Built for Real Data Workloads
+
+ Mycelium Storage adapts to compliance-driven enterprise data, distributed application workloads,
+ and global asset delivery — without giving up sovereignty.
+
+
+ {/* Tabs */}
+
+ {tabs.map((tab) => (
+
+ ))}
+
+
+ {/* Content always stacked in a single column */}
+
+ {current.content.map((c, i) => (
+
+ ))}
+
+
+
+ {/* RIGHT COLUMN: Image */}
+
+
+
+
+
+ );
+}
diff --git a/src/pages/storage/animation/Encrypted.tsx b/src/pages/storage/animation/Encrypted.tsx
new file mode 100644
index 0000000..0a32774
--- /dev/null
+++ b/src/pages/storage/animation/Encrypted.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import clsx from "clsx";
+
+type Props = {
+ className?: string;
+ accent?: string;
+ gridStroke?: string;
+ stroke?: string;
+};
+
+const W = 760;
+const H = 420;
+
+export default function Encrypted({
+ className,
+ accent = "#00b8db",
+ gridStroke = "#e5e7eb",
+ stroke = "#111111",
+}: Props) {
+ const prefers = useReducedMotion();
+
+ // positions of storage vaults (cylindrical stack illusion)
+ const vaults = [
+ { x: 200, y: 220 },
+ { x: 380, y: 180 },
+ { x: 560, y: 220 },
+ ];
+
+ // path representing encrypted data moving across storage nodes
+ const dataPath = `M ${vaults[0].x + 60} ${vaults[0].y}
+ C 280 160, 480 160, ${vaults[2].x} ${vaults[2].y}`;
+
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/storage/animation/Residency.tsx b/src/pages/storage/animation/Residency.tsx
new file mode 100644
index 0000000..998761c
--- /dev/null
+++ b/src/pages/storage/animation/Residency.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import clsx from "clsx";
+
+type Props = {
+ className?: string;
+ accent?: string;
+ gridStroke?: string;
+ stroke?: string;
+};
+
+const W = 760;
+const H = 420;
+
+export default function Residency({
+ className,
+ accent = "#00b8db",
+ gridStroke = "#e5e7eb",
+ stroke = "#111111",
+}: Props) {
+ const prefers = useReducedMotion();
+
+ // Layout: central governance node + 3 regional nodes
+ const center = { x: 380, y: 200 };
+ const regions = [
+ { x: 220, y: 120 },
+ { x: 540, y: 120 },
+ { x: 380, y: 300 },
+ ];
+
+ // Path for data transfer (circular motion between regions)
+ const flowPath = `M ${regions[0].x} ${regions[0].y}
+ C 300 80, 460 80, ${regions[1].x} ${regions[1].y}
+ C 480 160, 420 260, ${regions[2].x} ${regions[2].y}
+ C 340 260, 280 160, ${regions[0].x} ${regions[0].y} Z`;
+
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/storage/animation/SelfHealing.tsx b/src/pages/storage/animation/SelfHealing.tsx
new file mode 100644
index 0000000..cb0b0b4
--- /dev/null
+++ b/src/pages/storage/animation/SelfHealing.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import clsx from "clsx";
+
+type Props = {
+ className?: string;
+ accent?: string;
+ gridStroke?: string;
+ stroke?: string;
+};
+
+const W = 760;
+const H = 420;
+
+export default function SelfHealing({
+ className,
+ accent = "#00b8db",
+ gridStroke = "#e5e7eb",
+ stroke = "#111111",
+}: Props) {
+ const prefers = useReducedMotion();
+
+ // diamond node layout
+ const nodes = [
+ { x: 380, y: 130 }, // top
+ { x: 240, y: 240 }, // left
+ { x: 520, y: 240 }, // right
+ { x: 380, y: 320 }, // bottom
+ ];
+
+ // connection paths
+ const links = [
+ [0, 1],
+ [0, 2],
+ [1, 3],
+ [2, 3],
+ [1, 2],
+ ];
+
+ // helper for path drawing
+ const drawLine = (i: number, j: number) => {
+ const a = nodes[i];
+ const b = nodes[j];
+ return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/storage/StorageDeveloperExperience.tsx b/src/pages/storage/archive/StorageDeveloperExperience.tsx
similarity index 92%
rename from src/pages/storage/StorageDeveloperExperience.tsx
rename to src/pages/storage/archive/StorageDeveloperExperience.tsx
index eabaa7a..56f4f0e 100644
--- a/src/pages/storage/StorageDeveloperExperience.tsx
+++ b/src/pages/storage/archive/StorageDeveloperExperience.tsx
@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
type Experience = {
title: string
@@ -75,7 +75,7 @@ export function StorageDeveloperExperience() {
return (
@@ -95,7 +95,7 @@ export function StorageDeveloperExperience() {
{experiences.map((experience) => (
diff --git a/src/pages/storage/StorageDifferentiators.tsx b/src/pages/storage/archive/StorageDifferentiators.tsx
similarity index 90%
rename from src/pages/storage/StorageDifferentiators.tsx
rename to src/pages/storage/archive/StorageDifferentiators.tsx
index 0a5bd57..ea861f7 100644
--- a/src/pages/storage/StorageDifferentiators.tsx
+++ b/src/pages/storage/archive/StorageDifferentiators.tsx
@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P } from '@/components/Texts'
const differentiators = [
{
@@ -50,7 +50,7 @@ export function StorageDifferentiators() {
{differentiators.map((item) => (
{item.title}
diff --git a/src/pages/storage/StorageFeatures.tsx b/src/pages/storage/archive/StorageFeatures.tsx
similarity index 96%
rename from src/pages/storage/StorageFeatures.tsx
rename to src/pages/storage/archive/StorageFeatures.tsx
index e608705..01835eb 100644
--- a/src/pages/storage/StorageFeatures.tsx
+++ b/src/pages/storage/archive/StorageFeatures.tsx
@@ -1,5 +1,5 @@
-import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+import { Container } from '@/components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
const features = [
{
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 9dde88e..16c23d9 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -221,3 +221,10 @@
@apply bg-background text-foreground;
}
}
+
+.blink-square.active {
+ fill: #79f4ff;
+ opacity: 0.15;
+ filter: drop-shadow(0 0 6px #90f6ff);
+ transition: opacity 1s ease-out;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 799bf0c..7ea2ec9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
+ darkMode: 'class',
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
@@ -10,6 +11,15 @@ export default {
sans: ['Mulish', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
},
keyframes: {
+ scroll: {
+ to: {
+ transform: "translate(calc(-100% - var(--gap)))",
+ },
+ },
+ logoScroll: {
+ '0%': { transform: 'translateX(0)' },
+ '100%': { transform: 'translateX(-50%)' },
+ },
'glitch-1': {
'0%': { transform: 'none' },
'25%': { transform: 'skew(-0.5deg, -0.5deg)' },
@@ -26,6 +36,9 @@ export default {
},
},
animation: {
+ scroll:
+ "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
+ logoScroll: 'logoScroll 16s linear infinite',
'glitch-1': 'glitch-1 1s infinite',
'glitch-2': 'glitch-2 1s infinite',
},
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 9d1235a..6779d32 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -14,7 +14,7 @@
/* Bundler mode */
"moduleResolution": "bundler",
- "allowImportingTsExtensions": true,
+ "allowImportingTsExtensions": false,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,