forked from emre/www_projectmycelium_com
93 lines
3.6 KiB
TypeScript
93 lines
3.6 KiB
TypeScript
import { Container } from '../../components/Container'
|
|
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
|
|
|
|
const architectureSections = [
|
|
{
|
|
title: 'Deterministic Computing',
|
|
description:
|
|
'Every computational step is predictable and provable before it ever executes.',
|
|
bullets: [
|
|
'Cryptographic verification precedes every operation.',
|
|
'State determinism ensures identical results from identical inputs.',
|
|
'Tamper resistance surfaces any modification instantly.',
|
|
'Comprehensive audit trails verify the full execution history.',
|
|
],
|
|
},
|
|
{
|
|
title: 'Stateless Infrastructure',
|
|
description:
|
|
'A global substrate that scales and recovers without hardware-bound state.',
|
|
bullets: [
|
|
'No persistent state coupled to specific hardware or regions.',
|
|
'Global distribution makes compute available wherever it is needed.',
|
|
'Auto-scaling allocates the right resources at the right time.',
|
|
'Fault-tolerant orchestration provides automatic failover.',
|
|
],
|
|
},
|
|
{
|
|
title: 'Zero-Image System',
|
|
description:
|
|
'Metadata-first delivery keeps deployments lightweight and instantly repeatable.',
|
|
bullets: [
|
|
'Images represented as metadata instead of heavyweight artifacts.',
|
|
'Instant deployment for rapid workload startup.',
|
|
'Efficient storage with minimal footprint for artifacts.',
|
|
'Bandwidth-optimized transfers shrink delivery times.',
|
|
],
|
|
},
|
|
]
|
|
|
|
export function ComputeArchitecture() {
|
|
return (
|
|
<section className="bg-gray-50 py-24 sm:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
|
|
Technical Architecture
|
|
</Eyebrow>
|
|
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
|
Infrastructure engineered for provable outcomes.
|
|
</SectionHeader>
|
|
<P className="mt-6 text-gray-600">
|
|
Deterministic computing, stateless orchestration, and metadata-first
|
|
delivery combine to create a compute fabric you can trust with your
|
|
most sensitive workloads.
|
|
</P>
|
|
</div>
|
|
<div className="mt-16 grid gap-8 lg:grid-cols-3">
|
|
{architectureSections.map((section) => (
|
|
<div
|
|
key={section.title}
|
|
className="flex h-full flex-col rounded-3xl border border-cyan-100 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-600">
|
|
•
|
|
</span>
|
|
<h3 className="text-xl font-semibold text-gray-900">
|
|
{section.title}
|
|
</h3>
|
|
</div>
|
|
<p className="mt-4 text-sm leading-relaxed text-gray-600">
|
|
{section.description}
|
|
</p>
|
|
<ul className="mt-6 space-y-3 text-sm text-gray-600">
|
|
{section.bullets.map((bullet) => (
|
|
<li
|
|
key={bullet}
|
|
className="flex items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 p-3 leading-relaxed"
|
|
>
|
|
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
|
|
<span>{bullet}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|
|
|