refactor: consolidate cloud and agents page components

- Removed duplicate hero component variations (AgentsHero/AgentsHeroAlt, CloudHero/CloudHeroAlt)
- Deleted unused CloudCTA, CloudGettingStarted, and CloudDesign components
- Cleaned up empty files and legacy page structure
This commit is contained in:
2025-11-06 15:00:37 +01:00
parent b1c59a9b5a
commit b3836062a3
43 changed files with 193 additions and 71 deletions

View File

@@ -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 (
<section id="gpu-architecture" className="bg-white py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow>
Technical Architecture
</Eyebrow>
<SectionHeader as="h2" className="mt-6 text-gray-900">
A peer-to-peer mesh purpose-built for acceleration.
</SectionHeader>
<P className="mt-6 text-gray-600">
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.
</P>
</div>
<div className="mt-16 grid gap-8 lg:grid-cols-2">
{architectureSections.map((section) => (
<div
key={section.title}
className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
>
<h3 className="text-xl font-semibold text-gray-900">
{section.title}
</h3>
<p className="mt-4 text-sm leading-relaxed text-gray-600">
{section.description}
</p>
<ul className="mt-6 space-y-3 text-sm text-gray-600">
{section.bullets.map((bullet) => (
<li
key={bullet}
className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
>
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
<span>{bullet}</span>
</li>
))}
</ul>
</div>
))}
</div>
</Container>
</section>
)
}

View File

@@ -0,0 +1,85 @@
import { Container } from '../../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
const differentiators = [
{
title: 'Unified Fabric',
description:
'Transforms fragmented GPU resources into a single, standard interface accessible anywhere.',
},
{
title: 'Sovereign Control',
description:
'Operate without vendor lock-in or geographic restrictions—govern policies entirely through code.',
},
{
title: 'Code-Driven Orchestration',
description:
'APIs and smart contracts automate allocation, attestation, and lifecycle management.',
},
{
title: 'Deterministic Performance',
description:
'Guaranteed GPU allocation delivers the compute you reserve with consistent performance characteristics.',
},
]
const costEfficiency = [
'Transparent pricing with no hidden fees.',
'Pay only for the GPU cycles you consume.',
'Global optimization locates the most cost-effective nodes.',
'Avoid premium lock-in from centralized providers.',
]
export function GpuDifferentiators() {
return (
<section className="bg-gray-950 py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
Key Differentiators
</Eyebrow>
<SectionHeader as="h2" color="light" className="mt-6">
GPU acceleration with sovereignty and clarity.
</SectionHeader>
<P color="lightSecondary" className="mt-6">
Mycelium GPU delivers verifiable access to power when you need it.
Control stays in your hands, from allocation policies to cost
structure.
</P>
</div>
<div className="mt-16 grid gap-8 md:grid-cols-2">
{differentiators.map((item) => (
<div
key={item.title}
className="rounded-3xl border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8"
>
<h3 className="text-lg font-semibold text-white">{item.title}</h3>
<p className="mt-4 text-sm leading-relaxed text-gray-300">
{item.description}
</p>
</div>
))}
</div>
<div className="mt-16 rounded-3xl border border-white/10 bg-white/3 p-8 text-left backdrop-blur-sm">
<h3 className="text-xl font-semibold text-white">Cost Efficiency</h3>
<p className="mt-4 text-sm leading-relaxed text-gray-300">
Transparent economics makes capacity planning simple while keeping
budgets predictable.
</p>
<ul className="mt-6 space-y-3 text-sm text-gray-300">
{costEfficiency.map((item) => (
<li
key={item}
className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
>
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
<span>{item}</span>
</li>
))}
</ul>
</div>
</Container>
</section>
)
}

View File

@@ -0,0 +1,103 @@
import { Container } from '../../../components/Container'
import { Eyebrow, SectionHeader, P, Small } from '../../../components/Texts'
const steps = [
{
number: '01',
title: 'Account Setup',
description:
'Create your Mycelium account and ensure GPU access is enabled.',
bullets: [
'Sign up and verify your account credentials.',
'Enable GPU access or request it from the Mycelium team.',
'Configure billing to align usage with your budget.',
],
},
{
number: '02',
title: 'Request GPU Resources',
description: 'Use the Mycelium GPU API to allocate the acceleration you need.',
bullets: [
'Describe the GPU profile (memory, cores, region) your workload requires.',
'Let smart contracts reserve and attest the selected hardware.',
'Receive deterministic allocation details for orchestration.',
],
},
{
number: '03',
title: 'Deploy & Monitor',
description:
'Launch your workload, integrate storage, and monitor performance from the dashboard.',
bullets: [
'Deploy via Kubernetes, containers, or custom runtimes.',
'Bind to Quantum-Safe Storage for datasets and checkpoints.',
'Track GPU utilization, cost, and health in real time.',
],
},
]
const workflow = 'Application → Mycelium GPU API → GPU Resource Allocation → Workload Execution'
export function GpuGettingStarted() {
return (
<section
id="gpu-getting-started"
className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
>
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(34,211,238,0.12),transparent_60%)]" />
<Container className="relative">
<div className="mx-auto max-w-3xl text-center">
<Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
Getting Started
</Eyebrow>
<SectionHeader as="h2" color="light" className="mt-6">
Allocate, run, and observe in three moves.
</SectionHeader>
<P color="lightSecondary" className="mt-6">
Mycelium GPU keeps onboarding simpledeclare what you need, deploy
your workload, and let the mesh guarantee performance with full
transparency.
</P>
</div>
<div className="mt-16 grid gap-10 lg:grid-cols-3">
{steps.map((step) => (
<div
key={step.title}
className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/6"
>
<div className="flex items-center justify-between">
<Small className="text-xs uppercase tracking-[0.4em] text-cyan-300">
{step.number}
</Small>
<span className="inline-flex size-10 items-center justify-center rounded-full border border-cyan-300/40 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">
Go
</span>
</div>
<h3 className="mt-6 text-xl font-semibold text-white">{step.title}</h3>
<p className="mt-4 text-sm leading-relaxed text-gray-300">
{step.description}
</p>
<ul className="mt-6 space-y-3 text-sm text-gray-300">
{step.bullets.map((bullet) => (
<li
key={bullet}
className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
>
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
<span>{bullet}</span>
</li>
))}
</ul>
</div>
))}
</div>
<div className="mt-16 rounded-3xl border border-white/10 bg-white/3 p-6 text-center backdrop-blur-sm">
<p className="text-sm font-medium uppercase tracking-[0.3em] text-cyan-200">
Basic Workflow
</p>
<p className="mt-4 text-base text-gray-100">{workflow}</p>
</div>
</Container>
</section>
)
}

View File

@@ -0,0 +1,81 @@
import { Container } from '../../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../../components/Texts'
const integrationPoints = [
'Unified Mycelium networking provides secure access to GPU nodes.',
'Zero-trust security model extends to GPU operations automatically.',
'Quantum-safe storage available directly to GPU workloads.',
'Native Kubernetes support exposes GPUs through familiar resources.',
]
const yamlExample = `apiVersion: apps/v1
kind: Deployment
metadata:
name: gpu-workload
spec:
replicas: 1
selector:
matchLabels:
app: gpu-compute
template:
metadata:
labels:
app: gpu-compute
spec:
containers:
- name: gpu-compute
image: tensorflow/tensorflow:latest-gpu
resources:
limits:
nvidia.com/gpu: 1
env:
- name: MYCELIUM_GPU_REGION
value: "auto"`
export function GpuIntegration() {
return (
<section className="bg-gray-950 py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
Cloud Integration
</Eyebrow>
<SectionHeader as="h2" color="light" className="mt-6">
Seamless with Mycelium Cloud infrastructure.
</SectionHeader>
<P color="lightSecondary" className="mt-6">
GPU workloads plug directly into the same mesh that powers Mycelium
Cloud. Networking, security, and storage policies flow with every
deployment.
</P>
</div>
<div className="mt-16 grid gap-10 lg:grid-cols-2">
<div className="space-y-4 rounded-3xl border border-white/10 bg-white/4 p-8 text-left backdrop-blur-sm">
<h3 className="text-lg font-semibold text-white">
Platform alignment
</h3>
<ul className="space-y-3 text-sm text-gray-300">
{integrationPoints.map((point) => (
<li
key={point}
className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
>
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
<span>{point}</span>
</li>
))}
</ul>
</div>
<div className="rounded-3xl border border-white/10 bg-white/4 p-8 backdrop-blur-sm">
<h3 className="text-lg font-semibold text-white">
Kubernetes deployment example
</h3>
<pre className="mt-6 overflow-x-auto rounded-2xl border border-white/10 bg-black/70 p-4 text-xs text-cyan-100">
<code>{yamlExample}</code>
</pre>
</div>
</div>
</Container>
</section>
)
}