forked from emre/www_projectmycelium_com
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import {
|
|
LockClosedIcon,
|
|
CpuChipIcon,
|
|
AdjustmentsHorizontalIcon,
|
|
} from '@heroicons/react/24/solid'
|
|
import { Container } from '@/components/Container'
|
|
import { Eyebrow, H3, CT, CP } from '@/components/Texts'
|
|
|
|
const architecture = [
|
|
{
|
|
name: 'Mesh Networking',
|
|
description: 'Secure connectivity across all nodes.',
|
|
icon: LockClosedIcon,
|
|
},
|
|
{
|
|
name: 'Sovereign Compute',
|
|
description: 'Execution only on hardware you control.',
|
|
icon: CpuChipIcon,
|
|
},
|
|
{
|
|
name: 'Deterministic Orchestration',
|
|
description: 'Workloads deploy and update predictably.',
|
|
icon: AdjustmentsHorizontalIcon,
|
|
},
|
|
]
|
|
|
|
export function ComputeArchitecture() {
|
|
return (
|
|
<section className="bg-white py-24 sm:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow>ARCHITECTURE</Eyebrow>
|
|
<H3 className="mt-4 text-gray-900">HOW IT WORKS</H3>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-16 max-w-5xl">
|
|
<dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
|
|
{architecture.map((item) => (
|
|
<div key={item.name} className="relative pl-12">
|
|
<item.icon
|
|
aria-hidden="true"
|
|
className="absolute left-0 top-1 size-6 text-cyan-600"
|
|
/>
|
|
<CT className="font-semibold text-gray-900">{item.name}</CT>
|
|
<CP className="mt-1 text-gray-600">{item.description}</CP>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|