forked from emre/www_projectmycelium_com
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import {
|
|
ArrowPathIcon,
|
|
CloudArrowUpIcon,
|
|
ServerIcon,
|
|
ShieldCheckIcon,
|
|
} from '@heroicons/react/24/outline'
|
|
import { CP, CT, Eyebrow, H3 } from '@/components/Texts'
|
|
|
|
const features = [
|
|
{
|
|
Eyebrow: 'DevOps / Cloud teams',
|
|
name: 'Kubernetes Clusters',
|
|
description: 'Deterministic K3s workloads across sovereign hardware.',
|
|
icon: ServerIcon,
|
|
},
|
|
{
|
|
Eyebrow: 'Security & infrastructure',
|
|
name: 'Encrypted Mesh Networking',
|
|
description: 'No public ingress, no exposed attack surface, zero-trust routing.',
|
|
icon: ShieldCheckIcon,
|
|
},
|
|
{
|
|
Eyebrow: 'Data-driven teams',
|
|
name: 'S3-Compatible Storage',
|
|
description: 'Distributed storage with erasure coding and residency control.',
|
|
icon: CloudArrowUpIcon,
|
|
},
|
|
{
|
|
Eyebrow: 'AI / ML workloads',
|
|
name: 'GPU-Ready',
|
|
description: 'Scale inference & training on demand.',
|
|
icon: ArrowPathIcon,
|
|
},
|
|
]
|
|
|
|
export function CloudHosting() {
|
|
return (
|
|
<div className="relative bg-white py-24 lg:py-32">
|
|
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
|
|
<Eyebrow>CAPABILITIES</Eyebrow>
|
|
<H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
|
|
<div className="mt-16">
|
|
<div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
|
|
{features.map((feature) => (
|
|
<div key={feature.name} className="relative">
|
|
<div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg">
|
|
<span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-500 hover:bg-cyan-400 p-3 shadow-lg">
|
|
<feature.icon aria-hidden="true" className="size-8 text-white" />
|
|
</span>
|
|
<Eyebrow>{feature.Eyebrow}</Eyebrow>
|
|
<CT as="h3" className="mt-4">
|
|
{feature.name}
|
|
</CT>
|
|
<CP color="secondary" className="mt-4">
|
|
{feature.description}
|
|
</CP>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|