ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

feat: simplify compute and cloud page content

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-04 16:06:13 +01:00
parent 0daabe56f5
commit 46272e939d
9 changed files with 313 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/pages/compute/ComputeUseCases.tsx
View File

@@ -1,72 +1,21 @@
import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
const primaryUseCases = [
const useCases = [
{
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.',
],
description:
'Reproducible pipelines, private model execution, scalable GPU orchestration.',
},
{
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.',
],
description:
'Private, reliable, self-healing services – without cloud vendor lock-in.',
},
{
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.',
],
title: 'Distributed & Edge Compute',
description:
'Run workloads where data lives, in homes, offices, datacenters, or remote regions.',
},
]
@@ -87,47 +36,21 @@ export function ComputeUseCases() {
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 className="mx-auto mt-16 max-w-4xl space-y-6">
{useCases.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>
<p className="mt-3 text-sm leading-relaxed text-gray-200">
{useCase.description}
</p>
</div>
))}
</div>
</Container>
</section>