66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import {
|
|
LockClosedIcon,
|
|
GlobeAltIcon,
|
|
ArrowPathRoundedSquareIcon,
|
|
NoSymbolIcon,
|
|
} from '@heroicons/react/24/solid'
|
|
import { Container } from '@/components/Container'
|
|
import { Eyebrow, H3, P, CT, CP } from '@/components/Texts'
|
|
|
|
const capabilities = [
|
|
{
|
|
name: 'End-to-End Encrypted Mesh',
|
|
description: 'Every packet is encrypted and routed peer-to-peer.',
|
|
icon: LockClosedIcon,
|
|
},
|
|
{
|
|
name: 'Global IPv6 Address Space',
|
|
description: 'Every node, app, and service gets its own private address.',
|
|
icon: GlobeAltIcon,
|
|
},
|
|
{
|
|
name: 'Self-Healing Routing',
|
|
description: 'Traffic automatically finds the fastest, most resilient path.',
|
|
icon: ArrowPathRoundedSquareIcon,
|
|
},
|
|
{
|
|
name: 'No Central Control',
|
|
description: 'No servers to trust, no middlemen, no corporate choke-points.',
|
|
icon: NoSymbolIcon,
|
|
},
|
|
]
|
|
|
|
export function NetworkCapabilities() {
|
|
return (
|
|
<section className="bg-white py-24 sm:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow>WHAT IT ENABLES</Eyebrow>
|
|
<H3 className="mt-4 text-gray-900">
|
|
A Private Networking Layer for Everything You Run
|
|
</H3>
|
|
<P className="mt-6 text-gray-600">
|
|
Mycelium Network is the backbone for secure, autonomous connectivity
|
|
across devices, data centers, clusters, and self-hosted environments,
|
|
anywhere in the world.
|
|
</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-4">
|
|
{capabilities.map((item) => (
|
|
<div key={item.name} className="flex flex-col text-center">
|
|
<div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
|
|
<item.icon className="size-6 text-cyan-600" aria-hidden="true" />
|
|
</div>
|
|
<CT className="mt-6 text-gray-900">{item.name}</CT>
|
|
<CP className="mt-2 text-gray-600">{item.description}</CP>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|