forked from emre/www_projectmycelium_com
sasha-astiadi
26ae2f156a
- Added new app UI screenshots for cloud features (connector, billing, kubeconfig, reserve) - Added new hero image (cloudhero3.webp) for cloud section - Enhanced Texts component with new cyan color variant and default props support - Updated Eyebrow component to use consistent styling with accent color and tracking - Simplified CloudArchitecture component by removing redundant style props - Completely rebuilt CloudFeatures component with
82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import { Container } from '../../components/Container'
|
|
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
|
|
|
|
const useCases = [
|
|
{
|
|
title: 'AI / ML Training',
|
|
description:
|
|
'Scale training, fine-tuning, and inference workloads anywhere on the grid.',
|
|
bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
|
|
},
|
|
{
|
|
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',
|
|
],
|
|
},
|
|
{
|
|
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',
|
|
],
|
|
},
|
|
]
|
|
|
|
export function GpuUseCases() {
|
|
return (
|
|
<section className="bg-white py-24 sm:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow>
|
|
Use Cases
|
|
</Eyebrow>
|
|
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
|
Acceleration for every intelligent workload.
|
|
</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.
|
|
</P>
|
|
</div>
|
|
<div className="mt-16 grid gap-8 lg:grid-cols-3">
|
|
{useCases.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"
|
|
>
|
|
<h3 className="text-xl font-semibold text-gray-900">
|
|
{useCase.title}
|
|
</h3>
|
|
<p className="mt-4 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>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|