forked from emre/www_projectmycelium_com
sasha-astiadi
46272e939d
- 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
59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import {
|
|
CpuChipIcon,
|
|
CubeIcon,
|
|
ServerIcon,
|
|
} from '@heroicons/react/24/solid'
|
|
import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
|
|
import { Container } from '../../components/Container'
|
|
|
|
const capabilities = [
|
|
{
|
|
name: 'Containers',
|
|
description: 'Services, web apps, APIs. Fully compatible with Kubernetes.',
|
|
icon: CubeIcon,
|
|
},
|
|
{
|
|
name: 'Virtual Machines',
|
|
description:
|
|
'Legacy apps and specialized runtime stacks. Secure boot + attestation included.',
|
|
icon: ServerIcon,
|
|
},
|
|
{
|
|
name: 'Native Linux Workloads',
|
|
description:
|
|
'Agents, batch jobs, tooling. Runs statelessly anywhere.',
|
|
icon: CpuChipIcon,
|
|
},
|
|
]
|
|
|
|
export function ComputeCapabilities() {
|
|
return (
|
|
<section className="bg-white py-24 sm:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow>CAPABILITIES</Eyebrow>
|
|
<H3 className="mt-4 text-gray-900">What You Can Run</H3>
|
|
<P className="mt-6 text-gray-600">
|
|
Mycelium Compute supports multiple workload types on a single
|
|
execution fabric.
|
|
</P>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-16 max-w-5xl">
|
|
<dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
|
|
{capabilities.map((feature) => (
|
|
<div key={feature.name} className="flex flex-col text-center">
|
|
<div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
|
|
<feature.icon aria-hidden="true" className="size-6 text-cyan-600" />
|
|
</div>
|
|
<CT className="mt-6 text-gray-900">{feature.name}</CT>
|
|
<CP className="mt-2 text-gray-600">{feature.description}</CP>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|