forked from emre/www_projectmycelium_com
sasha-astiadi
2bd3026bac
- Condensed architecture explanations to focus on core capabilities rather than implementation details - Replaced detailed bullet lists with concise descriptions for better readability - Added new CallToAction component with dual-path user journey (host vs deploy)
66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { Container } from '../../components/Container'
|
|
import { Eyebrow, H3, P } from '../../components/Texts'
|
|
import { Button } from '../../components/Button'
|
|
|
|
const architecture = [
|
|
{
|
|
title: 'Mesh Networking Layer',
|
|
description:
|
|
'Every node receives a cryptographic network identity and secure routing path.',
|
|
},
|
|
{
|
|
title: 'Sovereign Compute Layer',
|
|
description:
|
|
'Workloads run on hardware you authorize, no shared control, no exposed surfaces.',
|
|
},
|
|
{
|
|
title: 'Deterministic Orchestration',
|
|
description:
|
|
'K3s clusters deploy predictably, verifiably, and remain drift-free.',
|
|
},
|
|
]
|
|
|
|
export function CloudArchitecture() {
|
|
return (
|
|
<section className="bg-white py-24 lg:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-4xl text-center">
|
|
<Eyebrow>ARCHITECTURE</Eyebrow>
|
|
<H3 className="mt-6 text-gray-900">
|
|
How Mycelium Cloud Works
|
|
</H3>
|
|
<P className="mt-6 text-gray-600">
|
|
Mycelium Cloud runs Kubernetes on a global encrypted mesh, with
|
|
identity, routing, and state verified at the protocol level.
|
|
</P>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
|
|
{architecture.map((layer) => (
|
|
<div
|
|
key={layer.title}
|
|
className="rounded-3xl border border-slate-200 bg-gray-50/40 p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
|
|
>
|
|
<h3 className="text-xl font-semibold text-gray-900">
|
|
{layer.title}
|
|
</h3>
|
|
<p className="mt-3 text-sm leading-relaxed text-gray-600">
|
|
{layer.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mx-auto mt-16 flex justify-center gap-4">
|
|
<Button variant="solid" color="cyan" href="/start">
|
|
Get Started
|
|
</Button>
|
|
<Button variant="outline" color="gray" href="/docs">
|
|
Explore Docs
|
|
</Button>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|