feat: restructure GPU page layout and simplify content presentation

- Reordered sections to improve information flow (Capabilities → Design → Architecture → Overview)
- Simplified use cases and overview sections by removing redundant bullet points
- Added new GpuCapabilities and GpuDesign components with cleaner, more focused messaging
This commit is contained in:
2025-11-04 16:50:15 +01:00
parent 8b892c9432
commit 865252274c
6 changed files with 253 additions and 115 deletions

View File

@@ -1,34 +1,18 @@
import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
const useCases = [
const gpuUseCases = [
{
title: 'AI / ML Training',
description:
'Scale training, fine-tuning, and inference workloads anywhere on the grid.',
bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
title: 'AI / ML Training & Inference',
description: 'Scale model execution across sovereign GPU nodes.',
},
{
title: 'Rendering & Visualization',
description:
'Drive high-performance graphics pipelines for media, science, and immersive experiences.',
bullets: [
'Distributed 3D rendering',
'Scientific visualization',
'Real-time VR / AR processing',
'Digital twin simulations',
],
description: 'Run 3D, scientific, simulation, or generative rendering pipelines.',
},
{
title: 'General GPU Computing',
description:
'Harness sovereign acceleration for simulations, finance, blockchain, and research.',
bullets: [
'Scientific simulations',
'Financial modeling',
'Blockchain processing',
'Protein folding and discovery',
],
title: 'Distributed & Edge Compute',
description: 'Place GPU power close to where data is generated.',
},
]
@@ -37,41 +21,28 @@ export function GpuUseCases() {
<section className="bg-white py-24 sm:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow>
Use Cases
</Eyebrow>
<Eyebrow>USE CASES</Eyebrow>
<SectionHeader as="h2" className="mt-6 text-gray-900">
Acceleration for every intelligent workload.
Built for Intelligent Workloads
</SectionHeader>
<P className="mt-6 text-gray-600">
From deep learning to immersive visualization, Mycelium GPU delivers
deterministic access to the power you need without the waitlists or
markups of centralized clouds.
From sovereign AI execution to real-time rendering and edge inference,
Mycelium GPU ensures predictable acceleration with full ownership and no centralized control.
</P>
</div>
<div className="mt-16 grid gap-8 lg:grid-cols-3">
{useCases.map((useCase) => (
<div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
{gpuUseCases.map((useCase) => (
<div
key={useCase.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"
className="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">
{useCase.title}
</h3>
<p className="mt-4 text-sm leading-relaxed text-gray-600">
<p className="mt-3 text-sm leading-relaxed text-gray-600">
{useCase.description}
</p>
<ul className="mt-6 space-y-3 text-sm text-gray-600">
{useCase.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>