forked from emre/www_projectmycelium_com
sasha-astiadi
c7371ec21b
- Reorganized homepage sections by adding HomeHostingDark and HomeComparisonTable components - Changed background color of slider section from #0b0b0b to #111111 for better contrast - Updated card styling in CloudArchitecture to use semi-transparent gray background (bg-gray-50/25) - Modified paragraph text styling to use leading-tight instead of leading-relaxed for better readability - Reordered HomeBenefits section placement in the page flow
93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
import { Container } from '../../components/Container'
|
|
import { Eyebrow, H3, P } from '../../components/Texts'
|
|
|
|
const architectureSections = [
|
|
{
|
|
title: 'Decentralized Infrastructure',
|
|
description:
|
|
'Clusters launch across the ThreeFold Grid with direct node access and encrypted connectivity.',
|
|
bullets: [
|
|
'Unique Mycelium IP addresses assigned to every node.',
|
|
'Peer-to-peer mesh networking links services across nodes.',
|
|
'End-to-end encryption keeps traffic sealed inside the fabric.',
|
|
'No public IP exposure—everything is addressable via Mycelium IPs.',
|
|
],
|
|
},
|
|
{
|
|
title: 'Network Flow',
|
|
description:
|
|
'Traffic moves through the Mycelium mesh, maintaining sovereignty without sacrificing reach.',
|
|
bullets: [
|
|
'User requests enter through the encrypted Mycelium network.',
|
|
'Traffic routes directly to cluster nodes without intermediate hops.',
|
|
'Services answer over the same mesh—no ingress controller required.',
|
|
'Operational visibility without exposing public attack surface.',
|
|
],
|
|
},
|
|
{
|
|
title: 'Kubernetes Management',
|
|
description:
|
|
'Lightweight K3s orchestration delivers HA clusters with automated lifecycle management.',
|
|
bullets: [
|
|
'Full K3s deployment and lifecycle management built-in.',
|
|
'IPv6-native networking ensures deterministic service discovery.',
|
|
'Multi-master topologies with automatic failover for resilience.',
|
|
'Drift-free upgrades orchestrated through smart contracts.',
|
|
],
|
|
},
|
|
]
|
|
|
|
export function CloudArchitecture() {
|
|
return (
|
|
<section className="bg-white py-24 lg:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-5xl text-center">
|
|
<Eyebrow>
|
|
Technical Architecture
|
|
</Eyebrow>
|
|
<H3 className="mt-6 text-gray-900">
|
|
Built on a Sovereign, Encrypted Delivery Mesh.
|
|
</H3>
|
|
<P className="mt-6 text-gray-600">
|
|
Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
|
|
networking with deterministic K3s orchestration. Every layer is
|
|
designed to keep workloads sovereign, observable, and effortless to
|
|
operate.
|
|
</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-slate-200 bg-gray-50/25 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-base font-semibold uppercase tracking-[0.3em] 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-cyan-100 bg-cyan-50/60 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>
|
|
)
|
|
}
|