ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Pull Requests Activity

feat: update cloud and product page content and visuals

Browse Source 
- Simplified cloud messaging to focus on sovereignty and self-healing capabilities
- Updated hero section copy across Cloud, Compute, GPU and Storage pages for clearer value proposition
- Added new CloudHosting component to Cloud page layout
- Changed hero images for GPU and Storage pages to improve visual consistency
- Adjusted layout spacing and typography in Compute hero section
- Streamlined cloud features description to be more concise an
This commit is contained in:
sasha-astiadi
2025-11-02 00:45:24 +01:00
parent 4e8e714f37
commit 6a882371f0
12 changed files with 90 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -415,7 +415,7 @@ export function CloudFeatures() {
A Decentralized Cloud that Operates Itself
</SectionHeader>
<P color="light" className="mt-6">
Mycelium Cloud orchestrates Kubernetes clusters on the ThreeFold Grid with cryptographic certainty. Networking, storage, and orchestration are all built-in so developers can deploy critical workloads without wrestling infrastructure.
Mycelium Cloud runs Kubernetes on a sovereign, self-healing network. Storage, networking, and compute are all integrated.
</P>
</div>
</Container>

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

@@ -15,14 +15,15 @@ export function CloudHeroNew() {
Mycelium Cloud
</Eyebrow>
<H3 className="mt-4">
Deploy sovereign Kubernetes clusters on decentralized infrastructure.
Run Kubernetes on the Sovereign Agentic Cloud
</H3>
<H5 className="mt-8 text-lg text-gray-600">
Mycelium Cloud turns the ThreeFold Grid into a programmable substrate for K3s.
</H5>
<H5 className="mt-4 text-lg text-gray-600">
Launch verifiable clusters with nature-inspired networking, quantum-safe storage, and zero-image delivery that keeps every workload deterministic.
</H5>
Deploy K3s clusters on a global, self-healing mesh network.
Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
</H5>
<div className="mt-10 flex items-center gap-x-6">
<Button
to="#"

65
src/pages/cloud/CloudHosting.tsx Normal file
View File

@@ -0,0 +1,65 @@
import {
ArrowPathIcon,
CloudArrowUpIcon,
ServerIcon,
ShieldCheckIcon,
} from '@heroicons/react/24/outline'
import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
const features = [
{
name: 'Kubernetes Clusters',
description: 'Deploy and scale containerized apps across your own hardware.',
icon: ServerIcon,
},
{
name: 'AI Agents & LLM Runtimes',
description: 'Run open-source models locally, securely, and offline.',
icon: ArrowPathIcon,
},
{
name: 'S3-Compatible Storage',
description: 'Your own personal over-the-network drive, encrypted end-to-end.',
icon: CloudArrowUpIcon,
},
{
name: 'Mesh VPN & Zero-Trust Networking',
description: 'Securely connect all your devices and remote locations.',
icon: ShieldCheckIcon,
},
]
export function CloudHosting() {
return (
<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">
<Eyebrow>DEPLOY</Eyebrow>
<H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
<P className="mx-auto mt-5 max-w-prose">
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.
</P>
<div className="mt-16">
<div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
{features.map((feature) => (
<div key={feature.name} className="relative">
<div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover: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" />
</span>
<CT as="h3" className="mt-4">
{feature.name}
</CT>
<CP color="secondary" className="mt-4">
{feature.description}
</CP>
</div>
</div>
))}
</div>
</div>
</div>
</div>
)
}

5
src/pages/cloud/CloudPage.tsx
View File

@@ -6,6 +6,7 @@ import { CloudUseCases } from './CloudUseCases'
import { SecurityPillars } from './SecurityPillars'
import { CloudCTA } from './CloudCTA'
import { CloudHeroNew } from './CloudHeroNew'
import { CloudHosting } from './CloudHosting'
export default function CloudPage() {
return (
@@ -15,6 +16,10 @@ export default function CloudPage() {
<CloudHeroNew />
</AnimatedSection>
<AnimatedSection>
<CloudHosting />
</AnimatedSection>
<AnimatedSection>
<CloudFeatures />
</AnimatedSection>

21
src/pages/compute/ComputeHero.tsx
View File

@@ -1,6 +1,7 @@
'use client'
import { Button } from '../../components/Button'
import { Eyebrow, SectionHeader, P, H3 } from '../../components/Texts'
export function ComputeHero() {
return (
@@ -8,22 +9,24 @@ export function ComputeHero() {
<div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
<img
alt=""
src="/images/cloudhero.webp"
className="size-full object-cover"
src="/images/computehero.webp"
className="size-full object-contain"
/>
</div>
<div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
<div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
<h2 className="text-base/7 font-semibold text-cyan-500">COMPUTE</h2>
<p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The pulse of intelligence runs here.</p>
<p className="mt-6 text-base/7 text-gray-600">
<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">
<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>
<P className="mt-6 text-gray-600">
Mycelium Compute brings predictable, sovereign performance — free from lock-in, free from drift.
Deploy any workload, anywhere, with cryptographic precision and zero compromise.
</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>
<div className="mt-8">
</P>
<div className="mt-12">
<Button href="#" variant="solid" color="cyan">
Experience Deterministic Compute
</Button>

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

@@ -9,8 +9,8 @@ export function GpuHero() {
<div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
<img
alt="Mycelium GPU nebula illustration"
src="/images/gpuhero.png"
className="size-full object-cover"
src="/images/gpuhero2.png"
className="size-full object-contain"
/>
</div>
<div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">

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

@@ -9,7 +9,7 @@ export function StorageHero() {
<div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
<img
alt="Mycelium Storage visual"
src="/images/storage4.png"
src="/images/computehero11.webp"
className="size-full object-cover"
/>
</div>