forked from emre/www_projectmycelium_com
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import { Container } from '@/components/Container'
|
|
import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
|
|
|
|
const featureGroups = [
|
|
{
|
|
title: 'Self-Managing Infrastructure',
|
|
description:
|
|
'Scaling, healing, and failover happen automatically, no manual intervention.',
|
|
},
|
|
{
|
|
title: 'Secure, Stateless Execution',
|
|
description:
|
|
'Workloads remain isolated, reproducible, and portable, no environment drift or configuration decay.',
|
|
},
|
|
{
|
|
title: 'Zero-Image Delivery',
|
|
description:
|
|
'Deploy workloads using metadata instead of large container images for instant launches.',
|
|
},
|
|
{
|
|
title: 'Global Placement Control',
|
|
description:
|
|
'Choose where workloads run, on your hardware or across the decentralized grid.',
|
|
},
|
|
]
|
|
|
|
export function ComputeFeatures() {
|
|
return (
|
|
<section className="bg-white py-24 sm:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
|
|
Core Features
|
|
</Eyebrow>
|
|
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
|
Precision infrastructure that verifies itself.
|
|
</SectionHeader>
|
|
<P className="mt-6 text-gray-600">
|
|
Every layer is designed for determinism, from how workloads are
|
|
declared to the way they scale, protect, and govern themselves on
|
|
the grid.
|
|
</P>
|
|
</div>
|
|
|
|
<div className="mt-16 grid gap-8 md:grid-cols-2">
|
|
{featureGroups.map((feature) => (
|
|
<div
|
|
key={feature.title}
|
|
className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
|
|
>
|
|
<div>
|
|
<Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
|
|
Feature
|
|
</Small>
|
|
<h3 className="mt-4 text-2xl font-semibold text-gray-900">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="mt-4 text-sm leading-relaxed text-gray-600">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|