13 Commits

Author SHA1 Message Date
46272e939d feat: simplify compute and cloud page content
- Streamlined ComputeFeatures and ComputeUseCases to focus on high-level benefits rather than detailed bullet points
- Updated ComputeHero messaging to emphasize deterministic control and self-verification
- Revised CallToAction to clarify deployment vs hosting options
- Added CloudDesign and ComputeCapabilities/ComputeDesign sections to page layouts
2025-11-04 16:06:13 +01:00
0daabe56f5 feat: replace SecurityPillars with CloudBluePrint component and reorder sections
- Removed CloudGettingStarted section from the page
- Replaced SecurityPillars with new CloudBluePrint component
- Adjusted section ordering to improve page flow
2025-11-04 15:16:50 +01:00
85afc05c35 feat: update cloud use cases with enterprise and edge focus
- Reframed use cases to emphasize sovereignty, workload ownership, and distributed deployment
- Replaced AI/ML training and DigitalMe Blueprint sections with enterprise Kubernetes and AI/agent workloads
- Updated descriptions and feature bullets to highlight compliance, mesh networking, and autonomous capabilities
2025-11-04 15:16:43 +01:00
866e1df042 feat: add Cloud Blueprint landing section with logo showcase 2025-11-04 15:16:32 +01:00
28ea2ab49d feat: clarify cloud infrastructure independence in features section 2025-11-04 14:06:29 +01:00
1f11ca5319 feat: update cloud hosting capabilities section with audience-focused messaging
- Reorganized features to target specific user personas (DevOps, Security, Data, AI/ML teams)
- Updated feature descriptions to emphasize technical benefits and security posture
- Changed section eyebrow from "DEPLOY" to "CAPABILITIES" for clearer positioning
2025-11-04 14:05:27 +01:00
3e99e85e48 feat: enhance CloudHero messaging and formatting
- Added tagline "Works Alone. Works Together." with explanation of Mycelium Cloud's flexibility
- Simplified "Explore Docs" button text to "Documentation"
- Fixed indentation for improved code readability
2025-11-04 14:01:17 +01:00
b39694ea24 feat: update CTA button text from "Start Deployment" to "Get Started" 2025-11-04 13:35:53 +01:00
363b822d8b feat: refine benefits section messaging and ordering
- Reordered features to lead with "Unbreakable by Design" for stronger impact
- Simplified benefit descriptions for clarity and conciseness
- Updated section heading from "Why It Changes Everything" to "Why It Matters"
2025-11-04 13:35:22 +01:00
00802c7064 feat: reorder slider items and update ecosystem messaging
- Moved Compute/Storage/GPU to first position in slider
- Updated heading from "Mycelium Products" to "Mycelium Components"
- Changed description to emphasize Agents instead of "intelligent automation"
2025-11-04 13:33:53 +01:00
e45ca7c86f feat: reorder HomeSlider section before HomeBenefits 2025-11-04 13:33:47 +01:00
664897ee19 refactor: simplify StackSection description text 2025-11-04 13:31:29 +01:00
91d249f097 feat: update homepage content and section ordering
- Revised hosting section description to emphasize decentralized grid and user control
- Swapped order of StackSectionLight and HomeHostingDark sections
- Enhanced Kubernetes feature description with additional context
2025-11-04 13:29:37 +01:00
20 changed files with 447 additions and 238 deletions

View File

@@ -0,0 +1,52 @@
import { H3, P, Eyebrow } from '../../components/Texts'
export function CloudBluePrint() {
return (
<div className="bg-white py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<Eyebrow color="accent">Cloud Blueprint</Eyebrow>
<H3 color="primary">Your Personal Sovereign Cloud Workspace</H3>
<P color="primary">Digital Me is an example environment built to demonstrate whats possible on top of the Mycelium Stack, a full personal cloud you can deploy, customize, or extend.
Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.</P>
<div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
<img
alt="Transistor"
src="https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-gray-900.svg"
width={158}
height={48}
className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
/>
<img
alt="Reform"
src="https://tailwindcss.com/plus-assets/img/logos/158x48/reform-logo-gray-900.svg"
width={158}
height={48}
className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
/>
<img
alt="Tuple"
src="https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-gray-900.svg"
width={158}
height={48}
className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
/>
<img
alt="SavvyCal"
src="https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-gray-900.svg"
width={158}
height={48}
className="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
/>
<img
alt="Statamic"
src="https://tailwindcss.com/plus-assets/img/logos/158x48/statamic-logo-gray-900.svg"
width={158}
height={48}
className="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1"
/>
</div>
</div>
</div>
)
}

View File

@@ -415,7 +415,7 @@ export function CloudFeatures() {
A Decentralized Cloud that Operates Itself A Decentralized Cloud that Operates Itself
</SectionHeader> </SectionHeader>
<P color="light" className="mt-6"> <P color="light" className="mt-6">
Mycelium Cloud runs Kubernetes on a sovereign, self-healing network. Storage, networking, and compute are all integrated. Mycelium Cloud runs Kubernetes on a sovereign, self-healing network with compute, storage, and networking built in, so you dont need external cloud dependencies.
</P> </P>
</div> </div>
</Container> </Container>

View File

@@ -22,8 +22,13 @@ export function CloudHeroNew() {
</H5> </H5>
<H5 className="mt-4 text-lg text-gray-600"> <H5 className="mt-4 text-lg text-gray-600">
Deploy K3s clusters on a global, self-healing mesh network. Deploy K3s clusters on a global, self-healing mesh network.
Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control. Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
</H5> </H5>
<H5 className="mt-4 text-sm text-gray-600">
Works Alone. Works Together.
Mycelium Cloud can run on any network fabric, or pair with Mycelium Network
for sovereign connectivity.
</H5>
<div className="mt-10 flex items-center gap-x-6"> <div className="mt-10 flex items-center gap-x-6">
<Button <Button
to="#" to="#"
@@ -34,7 +39,7 @@ Your workloads run on sovereign, encrypted infrastructure, without centralized c
Get started Get started
</Button> </Button>
<Button to="#" variant="outline"> <Button to="#" variant="outline">
Explore Docs <span aria-hidden="true"> </span> Documentation <span aria-hidden="true"> </span>
</Button> </Button>
</div> </div>
</div> </div>

View File

@@ -8,24 +8,28 @@ import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
const features = [ const features = [
{ {
Eyebrow: 'DevOps / Cloud teams',
name: 'Kubernetes Clusters', name: 'Kubernetes Clusters',
description: 'Deploy and scale containerized apps across your own hardware.', description: 'Deterministic K3s workloads across sovereign hardware.',
icon: ServerIcon, icon: ServerIcon,
}, },
{ {
name: 'AI Agents & LLM Runtimes', Eyebrow: 'Security & infrastructure',
description: 'Run open-source models locally, securely, and offline.', name: 'Encrypted Mesh Networking',
icon: ArrowPathIcon, description: 'No public ingress, no exposed attack surface, zero-trust routing.',
icon: ShieldCheckIcon,
}, },
{ {
Eyebrow: 'Data-driven teams',
name: 'S3-Compatible Storage', name: 'S3-Compatible Storage',
description: 'Your own personal over-the-network drive, encrypted end-to-end.', description: 'Distributed storage with erasure coding and residency control.',
icon: CloudArrowUpIcon, icon: CloudArrowUpIcon,
}, },
{ {
name: 'Mesh VPN & Zero-Trust Networking', Eyebrow: 'AI / ML workloads',
description: 'Securely connect all your devices and remote locations.', name: 'GPU-Ready',
icon: ShieldCheckIcon, description: 'Scale inference & training on demand.',
icon: ArrowPathIcon,
}, },
] ]
@@ -33,7 +37,7 @@ export function CloudHosting() {
return ( return (
<div className="relative bg-white py-24 lg:py-32"> <div className="relative bg-white py-24 lg:py-32">
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8"> <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
<Eyebrow>DEPLOY</Eyebrow> <Eyebrow>CAPABILITIES</Eyebrow>
<H3 className="mt-2">What You Can Run on Mycelium Cloud</H3> <H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
<P className="mx-auto mt-5 max-w-prose"> <P className="mx-auto mt-5 max-w-prose">
Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking, Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
@@ -48,6 +52,7 @@ export function CloudHosting() {
<span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-500 hover:bg-cyan-400 p-3 shadow-lg"> <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-500 hover:bg-cyan-400 p-3 shadow-lg">
<feature.icon aria-hidden="true" className="size-8 text-white" /> <feature.icon aria-hidden="true" className="size-8 text-white" />
</span> </span>
<Eyebrow>{feature.Eyebrow}</Eyebrow>
<CT as="h3" className="mt-4"> <CT as="h3" className="mt-4">
{feature.name} {feature.name}
</CT> </CT>

View File

@@ -7,6 +7,8 @@ import { SecurityPillars } from './SecurityPillars'
import { CloudCTA } from './CloudCTA' import { CloudCTA } from './CloudCTA'
import { CloudHeroNew } from './CloudHeroNew' import { CloudHeroNew } from './CloudHeroNew'
import { CloudHosting } from './CloudHosting' import { CloudHosting } from './CloudHosting'
import { CloudBluePrint } from './CloudBluePrint'
import { CloudDesign } from './CloudDesign'
export default function CloudPage() { export default function CloudPage() {
return ( return (
@@ -20,6 +22,10 @@ export default function CloudPage() {
<CloudHosting /> <CloudHosting />
</AnimatedSection> </AnimatedSection>
<AnimatedSection>
<CloudDesign />
</AnimatedSection>
<AnimatedSection> <AnimatedSection>
<CloudFeatures /> <CloudFeatures />
</AnimatedSection> </AnimatedSection>
@@ -28,15 +34,14 @@ export default function CloudPage() {
<CloudArchitecture /> <CloudArchitecture />
</AnimatedSection> </AnimatedSection>
<AnimatedSection>
<CloudGettingStarted />
</AnimatedSection>
<AnimatedSection> <AnimatedSection>
<CloudUseCases /> <CloudUseCases />
</AnimatedSection> </AnimatedSection>
<AnimatedSection> <AnimatedSection>
<SecurityPillars /> <CloudBluePrint />
</AnimatedSection> </AnimatedSection>
<AnimatedSection> <AnimatedSection>
<CloudCTA /> <CloudCTA />
</AnimatedSection> </AnimatedSection>

View File

@@ -3,35 +3,33 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
const useCases = [ const useCases = [
{ {
title: 'AI / ML Training', title: 'Enterprise & Private Kubernetes',
description: description:
'Run GPU-accelerated workloads for deep learning, data science, and inference on demand.', 'Production-grade K3s clusters with full workload ownership and residency control. Deploy apps and internal services without vendor lock-in or exposed surfaces.',
bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
},
{
title: 'Enterprise Kubernetes',
description:
'Operate production-grade clusters with complete control and no vendor lock-in.',
bullets: ['High availability', 'Security', 'Compliance'],
},
{
title: 'Edge & IoT',
description:
'Leverage global nodes for low-latency workloads and connected device deployments.',
bullets: ['Low latency', 'Global distribution', 'Real-time processing'],
},
{
title: 'DigitalMe Blueprint',
description:
'Launch a full digital workspace on Mycelium Cloud with pre-integrated services.',
bullets: [ bullets: [
'Cryptpad • Encrypted collaboration', 'High availability + failover',
'Elements • Matrix chat', 'Encrypted, mesh-native networking',
'Stallwart • Mail, calendar, contacts', 'Compliance-ready governance & policy control',
'Gitea • Git hosting', ],
'Nextcloud • File storage and sync', },
'LiveKit / Jitsi • Real-time video', {
'Single Sign-On backed by Gitea', title: 'Edge & Distributed Deployments',
description:
'Place compute close to where data is created. Run clusters globally across home labs, offices, data centers, or edge locations.',
bullets: [
'Low-latency execution',
'Mesh-routed connectivity',
'Autonomous healing across region',
],
},
{
title: 'AI / ML & Agent Workloads',
description:
'Run inference, training, and autonomous AI systems on sovereign compute. GPU orchestration, private vector storage, and model execution without handing data to hyperscalers.',
bullets: [
'Scales across nodes',
'Supports open-source & fine-tuned models',
'Built for agentic automation + RAG',
], ],
}, },
] ]

View File

@@ -14,14 +14,16 @@ export function CallToAction() {
<Container className="relative"> <Container className="relative">
<div className="mx-auto max-w-2xl text-center"> <div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl"> <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
Get Started Today Choose How You Want to Start
</h2> </h2>
<p className="mt-6 text-lg text-gray-300"> <p className="mt-6 text-lg text-gray-300">
Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized. Run workloads using Mycelium Cloud, or host your own compute node.
Both use the same deterministic execution fabric.
</p> </p>
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4"> <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
<Button to="/download" variant="solid" color="white"> <Button to="/download" variant="solid" color="white">
Get Mycelium Connector Deploy Workloads
</Button> </Button>
<Button <Button
to="https://threefold.info/mycelium_network/docs/" to="https://threefold.info/mycelium_network/docs/"
@@ -30,7 +32,7 @@ export function CallToAction() {
variant="outline" variant="outline"
color="white" color="white"
> >
Read Docs Host Compute Node
</Button> </Button>
</div> </div>
</div> </div>

View File

@@ -0,0 +1,58 @@
import {
CpuChipIcon,
CubeIcon,
ServerIcon,
} from '@heroicons/react/24/solid'
import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
import { Container } from '../../components/Container'
const capabilities = [
{
name: 'Containers',
description: 'Services, web apps, APIs. Fully compatible with Kubernetes.',
icon: CubeIcon,
},
{
name: 'Virtual Machines',
description:
'Legacy apps and specialized runtime stacks. Secure boot + attestation included.',
icon: ServerIcon,
},
{
name: 'Native Linux Workloads',
description:
'Agents, batch jobs, tooling. Runs statelessly anywhere.',
icon: CpuChipIcon,
},
]
export function ComputeCapabilities() {
return (
<section className="bg-white py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow>CAPABILITIES</Eyebrow>
<H3 className="mt-4 text-gray-900">What You Can Run</H3>
<P className="mt-6 text-gray-600">
Mycelium Compute supports multiple workload types on a single
execution fabric.
</P>
</div>
<div className="mx-auto mt-16 max-w-5xl">
<dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
{capabilities.map((feature) => (
<div key={feature.name} className="flex flex-col text-center">
<div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
<feature.icon aria-hidden="true" className="size-6 text-cyan-600" />
</div>
<CT className="mt-6 text-gray-900">{feature.name}</CT>
<CP className="mt-2 text-gray-600">{feature.description}</CP>
</div>
))}
</dl>
</div>
</Container>
</section>
)
}

View File

@@ -0,0 +1,56 @@
import {
ShieldCheckIcon,
ArrowPathIcon,
RocketLaunchIcon,
} from '@heroicons/react/24/solid'
import { Container } from '../../components/Container'
import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
const features = [
{
name: 'Cryptographically verified deployments',
description: 'Every cluster state is signed and checksummed to guarantee truth.',
icon: ShieldCheckIcon,
},
{
name: 'Stateless execution that scales anywhere',
description: 'Run workloads on any node, region, or edge without manual orchestration.',
icon: RocketLaunchIcon,
},
{
name: 'Automatic healing and recovery',
description: 'Self-repairing processes ensure workloads stay available and consistent.',
icon: ArrowPathIcon,
},
]
export default function ComputeDesign() {
return (
<section className="bg-white py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl sm:text-center">
<Eyebrow>CORE VALUE</Eyebrow>
<H3 className="mt-4 text-gray-900">Deterministic by Design</H3>
<P className="mt-6 text-gray-600">
Every workload runs exactly as declared: no drift, no hidden state, no surprises.
</P>
</div>
<div className="mx-auto mt-16 max-w-5xl">
<dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
{features.map((feature) => (
<div key={feature.name} className="relative pl-12">
<feature.icon
aria-hidden="true"
className="absolute left-0 top-1 size-6 text-cyan-600"
/>
<CT className="font-semibold text-gray-900">{feature.name}</CT>
<CP className="mt-1 text-gray-600">{feature.description}</CP>
</div>
))}
</dl>
</div>
</Container>
</section>
)
}

View File

@@ -3,52 +3,24 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
const featureGroups = [ const featureGroups = [
{ {
title: 'Deterministic Deployments', title: 'Self-Managing Infrastructure',
description: description:
'Cryptographic verification ensures every workload deploys exactly as specified—no tampering, no drift.', 'Scaling, healing, and failover happen automatically, no manual intervention.',
listTitle: 'Benefits',
bullets: [
'Cryptographic verification of every workload component',
'Zero configuration drift across environments',
'Immediate detection of unauthorized changes',
'Complete reproducibility for every deployment',
],
}, },
{ {
title: 'Self-Managing & Stateless Infrastructure', title: 'Secure, Stateless Execution',
description: description:
'Infrastructure that scales and heals autonomously across the ThreeFold Grid with no manual intervention.', 'Workloads remain isolated, reproducible, and portable, no environment drift or configuration decay.',
listTitle: 'Capabilities',
bullets: [
'Autonomous operations that self-orchestrate workloads',
'Global scaling sewn into the fabric of the platform',
'Stateless design removes hardware dependencies',
'Self-healing recovery from failures and anomalies',
],
}, },
{ {
title: 'Smart Contract-Based Deployment', title: 'Zero-Image Delivery',
description: description:
'Cryptographically signed contracts orchestrate every workload lifecycle with transparent, tamper-proof execution.', 'Deploy workloads using metadata instead of large container images for instant launches.',
listTitle: 'Benefits',
bullets: [
'Every deployment contract cryptographically signed',
'Fully auditable, transparent execution of operations',
'Tamper-proof orchestration that cannot be rewritten',
'Smart contracts automate the entire workload lifecycle',
],
}, },
{ {
title: 'Multi-Workload Compatibility with Secure Boot', title: 'Global Placement Control',
description: description:
'Run containers, VMs, and native Linux workloads anywhere with stateless secure boot and continuous verification.', 'Choose where workloads run, on your hardware or across the decentralized grid.',
listTitle: 'Capabilities',
bullets: [
'Full compatibility with Kubernetes and Docker workloads',
'Securely run virtual machines with attested boot paths',
'Native Linux applications verified end-to-end',
'Continuous verification maintains trusted execution',
],
}, },
] ]
@@ -69,6 +41,7 @@ export function ComputeFeatures() {
the grid. the grid.
</P> </P>
</div> </div>
<div className="mt-16 grid gap-8 md:grid-cols-2"> <div className="mt-16 grid gap-8 md:grid-cols-2">
{featureGroups.map((feature) => ( {featureGroups.map((feature) => (
<div <div
@@ -77,7 +50,7 @@ export function ComputeFeatures() {
> >
<div> <div>
<Small className="text-xs uppercase tracking-[0.3em] text-cyan-500"> <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
{feature.listTitle} Feature
</Small> </Small>
<h3 className="mt-4 text-2xl font-semibold text-gray-900"> <h3 className="mt-4 text-2xl font-semibold text-gray-900">
{feature.title} {feature.title}
@@ -86,17 +59,6 @@ export function ComputeFeatures() {
{feature.description} {feature.description}
</p> </p>
</div> </div>
<ul className="mt-6 space-y-3 text-sm text-gray-600">
{feature.bullets.map((bullet) => (
<li
key={bullet}
className="flex items-start gap-3 rounded-2xl border border-cyan-100/40 bg-cyan-50/40 p-3 text-left leading-relaxed"
>
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
<span>{bullet}</span>
</li>
))}
</ul>
</div> </div>
))} ))}
</div> </div>

View File

@@ -17,19 +17,16 @@ export function ComputeHero() {
<div className="relative mx-auto max-w-7xl py-12 lg:py-24 lg:px-8"> <div className="relative mx-auto max-w-7xl py-12 lg:py-24 lg:px-8">
<div className="max-w-2xl pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24"> <div className="max-w-2xl pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24">
<Eyebrow className="text-base/7 font-semibold text-cyan-500">COMPUTE</Eyebrow> <Eyebrow className="text-base/7 font-semibold text-cyan-500">COMPUTE</Eyebrow>
<H3 className="mt-2 text-gray-900">The pulse of Intelligence Runs Here.</H3> <H3 className="mt-2 text-gray-900">Deterministic Compute You Control</H3>
<P className="mt-6 text-gray-600"> <P className="mt-6 text-gray-600">
Mycelium Compute brings predictable, sovereign performance free from lock-in, free from drift. Run workloads on sovereign, self-verifying infrastructure.
Deploy any workload, anywhere, with cryptographic precision and zero compromise. Mycelium Compute delivers predictable execution, zero drift, and automatic healing, whether youre running containers, VMs, agents, or full Kubernetes clusters.
</P>
<P className="mt-6 text-gray-600">
From micro-VMs to full clusters, every operation is deterministic, self-managing, and stateless by design.
Compute that verifies itself. Expands itself. Heals itself.
</P> </P>
<div className="mt-12"> <div className="mt-12">
<Button href="#" variant="solid" color="cyan"> <Button href="#" variant="solid" color="cyan">
Experience Deterministic Compute How it works
</Button> </Button>
<Button href="#" variant="outline" color="cyan">Explore Docs</Button>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -8,6 +8,8 @@ import { ComputeDeveloperExperience } from './ComputeDeveloperExperience'
import { ComputeUseCases } from './ComputeUseCases' import { ComputeUseCases } from './ComputeUseCases'
import { ComputeDifferentiators } from './ComputeDifferentiators' import { ComputeDifferentiators } from './ComputeDifferentiators'
import { CallToAction } from './CallToAction' import { CallToAction } from './CallToAction'
import { ComputeCapabilities } from './ComputeCapabilities'
import { ComputeDesign } from './ComputeDesign'
export default function ComputePage() { export default function ComputePage() {
return ( return (
@@ -15,12 +17,24 @@ export default function ComputePage() {
<AnimatedSection> <AnimatedSection>
<ComputeHero /> <ComputeHero />
</AnimatedSection> </AnimatedSection>
<AnimatedSection> <AnimatedSection>
<ComputeOverview /> <ComputeCapabilities />
</AnimatedSection> </AnimatedSection>
<AnimatedSection>
<ComputeDesign />
</AnimatedSection>
<AnimatedSection> <AnimatedSection>
<ComputeFeatures /> <ComputeFeatures />
</AnimatedSection> </AnimatedSection>
<AnimatedSection>
<ComputeOverview />
</AnimatedSection>
<AnimatedSection> <AnimatedSection>
<ComputeZeroImage /> <ComputeZeroImage />
</AnimatedSection> </AnimatedSection>

View File

@@ -1,72 +1,21 @@
import { Container } from '../../components/Container' import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../components/Texts' import { Eyebrow, SectionHeader, P } from '../../components/Texts'
const primaryUseCases = [ const useCases = [
{ {
title: 'AI / ML Training', title: 'AI / ML Training',
bullets: [ description:
'Deterministic training pipelines for reproducible experiments.', 'Reproducible pipelines, private model execution, scalable GPU orchestration.',
'Cryptographically verified model artifacts end-to-end.',
'Autonomous scaling for distributed training runs.',
'Zero-drift environments that remain consistent over time.',
],
}, },
{ {
title: 'Application Hosting', title: 'Application Hosting',
bullets: [ description:
'Transparent deployments with verifiable execution.', 'Private, reliable, self-healing services without cloud vendor lock-in.',
'Auto-scaling that allocates resources on demand.',
'Instant global distribution across the ThreeFold Grid.',
'Cryptographically secured runtime environments.',
],
}, },
{ {
title: 'Data Processing', title: 'Distributed & Edge Compute',
bullets: [ description:
'Deterministic pipelines that document every transformation.', 'Run workloads where data lives, in homes, offices, datacenters, or remote regions.',
'Secure computation with cryptographic verification.',
'Auto-scaling resources for fluctuating workloads.',
'Global processing placement to minimize latency.',
],
},
{
title: 'Scientific Computing',
bullets: [
'Reproducible research environments for shared experiments.',
'Secure workloads with verifiable execution paths.',
'Dynamic scaling for compute-intensive tasks.',
'Global collaboration with sovereign resource control.',
],
},
]
const computeSpecific = [
{
title: 'Deterministic Training Environments',
bullets: [
'Reproducible ML experiments with identical conditions every run.',
'Verifiable computational research for scientific collaboration.',
'Auditable financial modelling workflows with traceable outputs.',
'Consistent IoT edge processing with predictable performance.',
],
},
{
title: 'Multi-Platform Application Hosting',
bullets: [
'Kubernetes orchestration with deterministic deployment pipelines.',
'Virtual machines launched with hardware-attested secure boot.',
'Native Linux workloads with cryptographic assurance.',
'Hybrid topologies mixing containers, VMs, and bare metal.',
],
},
{
title: 'Auto-Scaling Workloads',
bullets: [
'Demand-based scaling that reacts instantly to load.',
'Global distribution across the ThreeFold Grid.',
'Automated failover that restores services without intervention.',
'Cost optimization through intelligent resource allocation.',
],
}, },
] ]
@@ -87,47 +36,21 @@ export function ComputeUseCases() {
self-orchestrating so teams can focus on building. self-orchestrating so teams can focus on building.
</P> </P>
</div> </div>
<div className="mt-16 grid gap-8 lg:grid-cols-2">
<div className="space-y-6"> <div className="mx-auto mt-16 max-w-4xl space-y-6">
{primaryUseCases.map((useCase) => ( {useCases.map((useCase) => (
<div <div
key={useCase.title} key={useCase.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10" className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
> >
<h3 className="text-xl font-semibold text-white"> <h3 className="text-xl font-semibold text-white">
{useCase.title} {useCase.title}
</h3> </h3>
<ul className="mt-4 space-y-3 text-sm text-gray-200"> <p className="mt-3 text-sm leading-relaxed text-gray-200">
{useCase.bullets.map((bullet) => ( {useCase.description}
<li key={bullet} className="flex items-start gap-3 leading-relaxed"> </p>
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" /> </div>
<span>{bullet}</span> ))}
</li>
))}
</ul>
</div>
))}
</div>
<div className="space-y-6">
{computeSpecific.map((useCase) => (
<div
key={useCase.title}
className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
>
<h3 className="text-xl font-semibold text-white">
{useCase.title}
</h3>
<ul className="mt-4 space-y-3 text-sm text-cyan-100">
{useCase.bullets.map((bullet) => (
<li key={bullet} className="flex items-start gap-3 leading-relaxed">
<span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
<span>{bullet}</span>
</li>
))}
</ul>
</div>
))}
</div>
</div> </div>
</Container> </Container>
</section> </section>

View File

@@ -0,0 +1,135 @@
import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
const primaryUseCases = [
{
title: 'AI / ML Training',
bullets: [
'Deterministic training pipelines for reproducible experiments.',
'Cryptographically verified model artifacts end-to-end.',
'Autonomous scaling for distributed training runs.',
'Zero-drift environments that remain consistent over time.',
],
},
{
title: 'Application Hosting',
bullets: [
'Transparent deployments with verifiable execution.',
'Auto-scaling that allocates resources on demand.',
'Instant global distribution across the ThreeFold Grid.',
'Cryptographically secured runtime environments.',
],
},
{
title: 'Data Processing',
bullets: [
'Deterministic pipelines that document every transformation.',
'Secure computation with cryptographic verification.',
'Auto-scaling resources for fluctuating workloads.',
'Global processing placement to minimize latency.',
],
},
{
title: 'Scientific Computing',
bullets: [
'Reproducible research environments for shared experiments.',
'Secure workloads with verifiable execution paths.',
'Dynamic scaling for compute-intensive tasks.',
'Global collaboration with sovereign resource control.',
],
},
]
const computeSpecific = [
{
title: 'Deterministic Training Environments',
bullets: [
'Reproducible ML experiments with identical conditions every run.',
'Verifiable computational research for scientific collaboration.',
'Auditable financial modelling workflows with traceable outputs.',
'Consistent IoT edge processing with predictable performance.',
],
},
{
title: 'Multi-Platform Application Hosting',
bullets: [
'Kubernetes orchestration with deterministic deployment pipelines.',
'Virtual machines launched with hardware-attested secure boot.',
'Native Linux workloads with cryptographic assurance.',
'Hybrid topologies mixing containers, VMs, and bare metal.',
],
},
{
title: 'Auto-Scaling Workloads',
bullets: [
'Demand-based scaling that reacts instantly to load.',
'Global distribution across the ThreeFold Grid.',
'Automated failover that restores services without intervention.',
'Cost optimization through intelligent resource allocation.',
],
},
]
export function ComputeUseCases() {
return (
<section className="bg-gray-950 py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow color="accent" className="tracking-[0.32em] uppercase">
Use Cases
</Eyebrow>
<SectionHeader as="h2" color="light" className="mt-6">
Purpose-built for reproducibility, security, and scale.
</SectionHeader>
<P color="lightSecondary" className="mt-6">
From sovereign AI training loops to globally distributed
applications, Mycelium Compute keeps environments verifiable and
self-orchestrating so teams can focus on building.
</P>
</div>
<div className="mt-16 grid gap-8 lg:grid-cols-2">
<div className="space-y-6">
{primaryUseCases.map((useCase) => (
<div
key={useCase.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:bg-white/10"
>
<h3 className="text-xl font-semibold text-white">
{useCase.title}
</h3>
<ul className="mt-4 space-y-3 text-sm text-gray-200">
{useCase.bullets.map((bullet) => (
<li key={bullet} className="flex items-start gap-3 leading-relaxed">
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-400" />
<span>{bullet}</span>
</li>
))}
</ul>
</div>
))}
</div>
<div className="space-y-6">
{computeSpecific.map((useCase) => (
<div
key={useCase.title}
className="rounded-3xl border border-cyan-400/20 bg-gradient-to-br from-cyan-500/10 via-cyan-500/5 to-transparent p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-200/40 hover:from-cyan-400/20 hover:via-cyan-400/10"
>
<h3 className="text-xl font-semibold text-white">
{useCase.title}
</h3>
<ul className="mt-4 space-y-3 text-sm text-cyan-100">
{useCase.bullets.map((bullet) => (
<li key={bullet} className="flex items-start gap-3 leading-relaxed">
<span className="mt-1 inline-block size-2 rounded-full bg-white/80" />
<span>{bullet}</span>
</li>
))}
</ul>
</div>
))}
</div>
</div>
</Container>
</section>
)
}

View File

@@ -24,7 +24,7 @@ export function CallToAction() {
</p> </p>
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4"> <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
<Button to="/cloud" variant="solid" color="cyan"> <Button to="/cloud" variant="solid" color="cyan">
Start Deployment Get Started
</Button> </Button>
<Button <Button
to="https://threefold.info/mycelium_network/docs/" to="https://threefold.info/mycelium_network/docs/"

View File

@@ -7,28 +7,29 @@ import { H2, P, CP, Eyebrow } from '@/components/Texts'
export function HomeBenefits() { export function HomeBenefits() {
const features = [ const features = [
{
title: "Unbreakable by Design",
description:
"No central cloud to censor or fail. The network heals itself.",
image: "/images/benefits/energy.webp",
},
{ {
title: "Sovereign by Default", title: "Sovereign by Default",
description: description:
"Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.", "Identity, compute, and data belong to you cryptographically.",
image: "/images/benefits/sovereign.webp", image: "/images/benefits/sovereign.webp",
}, },
{ {
title: "Hackable & Open", title: "Hackable & Open",
description: description:
"Open source and hackable by design. Learn, build, and experiment without permission.", "Learn, build, and experiment without permission.",
image: "/images/benefits/autonomous.webp", 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", title: "Cost & Energy Efficient",
description: description:
"Distributed hardware eliminates hyperscale overhead. Pure compute power at a fraction of traditional cloud costs.", "Distributed hardware eliminates hyperscale overhead.",
image: "/images/benefits/cost.webp", image: "/images/benefits/cost.webp",
}, },
]; ];
@@ -39,7 +40,7 @@ export function HomeBenefits() {
Benefits Benefits
</Eyebrow> </Eyebrow>
<H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white"> <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
Why It Changes Everything Why It Matters
</H2> </H2>
<P className=" max-w-3xl my-4 mx-auto text-center text-gray-600"> <P className=" max-w-3xl my-4 mx-auto text-center text-gray-600">

View File

@@ -10,7 +10,7 @@ import { DarkCard } from '../../components/ui/cards'
const features = [ const features = [
{ {
name: 'Kubernetes Clusters', 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, icon: CubeIcon,
}, },
{ {
@@ -37,9 +37,7 @@ export function HomeHostingDark() {
<Eyebrow>DEPLOY</Eyebrow> <Eyebrow>DEPLOY</Eyebrow>
<H3 className="mt-2 text-gray-200">Run Real Infrastructure on Your Own Hardware</H3> <H3 className="mt-2 text-gray-200">Run Real Infrastructure on Your Own Hardware</H3>
<P className="mx-auto mt-5 max-w-prose text-gray-400"> <P className="mx-auto mt-5 max-w-prose text-gray-400">
Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking, Build and run production-grade workloads on hardware you control, whether its 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.
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.
</P> </P>
<div className="mt-16"> <div className="mt-16">
<div className="grid grid-cols-1 gap-12 lg:grid-cols-4"> <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">

View File

@@ -26,22 +26,22 @@ export default function HomePage() {
<WorldMap /> <WorldMap />
</AnimatedSection> </AnimatedSection>
<AnimatedSection>
<StackSectionLight />
</AnimatedSection>
<AnimatedSection> <AnimatedSection>
<HomeHostingDark /> <HomeHostingDark />
</AnimatedSection> </AnimatedSection>
<AnimatedSection> <AnimatedSection>
<HomeBenefits /> <StackSectionLight />
</AnimatedSection> </AnimatedSection>
<AnimatedSection ref={sliderRef}> <AnimatedSection ref={sliderRef}>
<HomeSlider /> <HomeSlider />
</AnimatedSection> </AnimatedSection>
<AnimatedSection>
<HomeBenefits />
</AnimatedSection>
<AnimatedSection> <AnimatedSection>
<HomeComparisonTable /> <HomeComparisonTable />
</AnimatedSection> </AnimatedSection>

View File

@@ -15,11 +15,11 @@ export function HomeSlider() {
Ecosystem Ecosystem
</Eyebrow> </Eyebrow>
<H3 className="text-left text-white"> <H3 className="text-left text-white">
Discover the Mycelium Products Discover Mycelium Components
</H3> </H3>
<div className="mt-4 max-w-3xl"> <div className="mt-4 max-w-3xl">
<P className="text-left text-neutral-400"> <P className="text-left text-neutral-400">
From compute and networking to intelligent automation, these components can be used on its own or combined into a fully sovereign cloud. From compute and networking to Agents, these components can be used on its own or combined into a fully sovereign cloud.
</P> </P>
</div> </div>
</div> </div>
@@ -35,6 +35,14 @@ import cloudImage from "/images/pages/cloud.webp";
import computeImage from "/images/pages/compute.webp"; import computeImage from "/images/pages/compute.webp";
const data = [ const data = [
{
category: "Resources",
title: "Compute / Storage / GPU",
description: "The resource layers powering the stack.",
src: "/images/pages/compute.png",
bg: computeImage,
link: "/compute",
},
{ {
category: "Cloud", category: "Cloud",
title: "Mycelium Cloud", title: "Mycelium Cloud",
@@ -59,12 +67,4 @@ const data = [
bg: agentImage, bg: agentImage,
link: "/agent", link: "/agent",
}, },
{
category: "Resources",
title: "Compute / Storage / GPU",
description: "The resource layers powering the stack.",
src: "/images/pages/compute.png",
bg: computeImage,
link: "/compute",
},
]; ];

View File

@@ -63,9 +63,7 @@ export function StackSectionLight() {
<FadeIn> <FadeIn>
<P color="dark" className="mt-6 text-gray-600"> <P color="dark" className="mt-6 text-gray-600">
Project Mycelium unifies compute, storage, networking, and AI into a resilient Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
ecosystem that preserves data sovereignty, powers seamless collaboration,
and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.
</P> </P>
</FadeIn> </FadeIn>
</div> </div>