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
91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
import { Container } from '../../components/Container'
|
|
import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
|
|
|
|
const useCases = [
|
|
{
|
|
title: 'AI / ML Training',
|
|
description:
|
|
'Run GPU-accelerated workloads for deep learning, data science, and inference on demand.',
|
|
bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
|
|
},
|
|
{
|
|
title: 'Enterprise Kubernetes',
|
|
description:
|
|
'Operate production-grade clusters with complete control and no vendor lock-in.',
|
|
bullets: ['High availability', 'Security', 'Compliance'],
|
|
},
|
|
{
|
|
title: 'Edge & IoT',
|
|
description:
|
|
'Leverage global nodes for low-latency workloads and connected device deployments.',
|
|
bullets: ['Low latency', 'Global distribution', 'Real-time processing'],
|
|
},
|
|
{
|
|
title: 'DigitalMe Blueprint',
|
|
description:
|
|
'Launch a full digital workspace on Mycelium Cloud with pre-integrated services.',
|
|
bullets: [
|
|
'Cryptpad • Encrypted collaboration',
|
|
'Elements • Matrix chat',
|
|
'Stallwart • Mail, calendar, contacts',
|
|
'Gitea • Git hosting',
|
|
'Nextcloud • File storage and sync',
|
|
'LiveKit / Jitsi • Real-time video',
|
|
'Single Sign-On backed by Gitea',
|
|
],
|
|
},
|
|
]
|
|
|
|
export function CloudUseCases() {
|
|
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">
|
|
Built for intelligent workloads across every edge.
|
|
</SectionHeader>
|
|
<P className="mt-6 text-gray-600">
|
|
Mycelium Cloud unifies compute, storage, and networking so teams can
|
|
launch anything from GPU inference farms to global collaboration
|
|
suites with deterministic outcomes.
|
|
</P>
|
|
</div>
|
|
<div className="mt-16 grid gap-8 lg:grid-cols-2">
|
|
{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"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-xl font-semibold text-gray-900">
|
|
{useCase.title}
|
|
</h3>
|
|
<Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
|
|
Scenario
|
|
</Small>
|
|
</div>
|
|
<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>
|
|
)
|
|
}
|