forked from emre/www_projectmycelium_com
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:
75
src/pages/gpu/archive/GpuArchitectureArchive.tsx
Normal file
75
src/pages/gpu/archive/GpuArchitectureArchive.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
85
src/pages/gpu/archive/GpuDifferentiators.tsx
Normal file
85
src/pages/gpu/archive/GpuDifferentiators.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
103
src/pages/gpu/archive/GpuGettingStarted.tsx
Normal file
103
src/pages/gpu/archive/GpuGettingStarted.tsx
Normal 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 simple—declare 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>
|
||||
)
|
||||
}
|
||||
81
src/pages/gpu/archive/GpuIntegration.tsx
Normal file
81
src/pages/gpu/archive/GpuIntegration.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user