61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { Container } from '@/components/Container'
|
||
import { Eyebrow, H3, CT, CP } from '@/components/Texts'
|
||
import {
|
||
ServerStackIcon,
|
||
GlobeAltIcon,
|
||
FolderOpenIcon,
|
||
LockClosedIcon,
|
||
} from '@heroicons/react/24/solid'
|
||
|
||
const capabilities = [
|
||
{
|
||
name: 'S3-Compatible Object Storage',
|
||
description: 'Works with existing SDKs & tooling.',
|
||
icon: ServerStackIcon,
|
||
},
|
||
{
|
||
name: 'IPFS & Content-Addressed Access',
|
||
description: 'Ideal for distributed and decentralized workloads.',
|
||
icon: GlobeAltIcon,
|
||
},
|
||
{
|
||
name: 'Filesystem Mounts (WebDAV / POSIX)',
|
||
description: 'Mount storage directly into workflows and apps.',
|
||
icon: FolderOpenIcon,
|
||
},
|
||
{
|
||
name: 'Encrypted Replication & Placement Control',
|
||
description: 'Choose where data physically lives – and who controls it.',
|
||
icon: LockClosedIcon,
|
||
},
|
||
]
|
||
|
||
export function StorageCapabilities() {
|
||
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 Use Mycelium Storage For
|
||
</H3>
|
||
</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="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>
|
||
)
|
||
}
|