forked from emre/www_projectmycelium_com
sasha-astiadi
3919b72b0c
- Added logo assets for featured applications (CryptPad, Gitea, Matrix, Nextcloud, Stalwart, LifeKit) - Restructured CallToAction, CloudBluePrint, and CloudUseCases components with consistent boxed layouts and border styling - Enhanced hover effects on architecture layers and use case cards with scale transforms - Updated button styling and improved responsive grid layouts for better visual hierarchy
91 lines
3.5 KiB
TypeScript
91 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { Container } from '@/components/Container'
|
|
import { Eyebrow, H3, P } from '@/components/Texts'
|
|
import { Button } from '@/components/Button'
|
|
import { MeshNetworkIcon } from './animations/MeshNetworkIcon'
|
|
import { SovereignComputer } from './animations/SovereignComputer'
|
|
import { DeterministicOrchestration } from './animations/DeterministicOrchestration'
|
|
|
|
const architecture = [
|
|
{
|
|
title: 'Mesh Networking Layer',
|
|
description:
|
|
'Every node receives a cryptographic network identity and secure routing path.',
|
|
icon: <MeshNetworkIcon className="mb-4" />, // ✅ stored as const JSX
|
|
},
|
|
{
|
|
title: 'Sovereign Compute Layer',
|
|
description:
|
|
'Workloads run on hardware you authorize, no shared control, no exposed surfaces.',
|
|
icon: <SovereignComputer className="mb-4" />,
|
|
},
|
|
{
|
|
title: 'Deterministic Orchestration',
|
|
description:
|
|
'K3s clusters deploy predictably, verifiably, and remain drift-free.',
|
|
icon: <DeterministicOrchestration className="mb-4" />,
|
|
},
|
|
]
|
|
|
|
export function CloudArchitecture() {
|
|
return (
|
|
<section className="bg-[#121212] w-full max-w-8xl mx-auto">
|
|
|
|
{/* ✅ Top horizontal spacer like HomeHosting */}
|
|
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
|
|
<div className="w-full border-t border-l border-r border-gray-800" />
|
|
|
|
{/* ✅ Boxed container with matching spacing */}
|
|
<div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] py-12">
|
|
<Container>
|
|
<div className="mx-auto max-w-4xl sm:text-center">
|
|
<Eyebrow className="text-cyan-400">ARCHITECTURE</Eyebrow>
|
|
|
|
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
|
|
How Mycelium Cloud Works
|
|
</H3>
|
|
|
|
<P className="mt-6 text-lg text-gray-300">
|
|
Mycelium Cloud runs Kubernetes on a global encrypted mesh, with
|
|
identity, routing, and state verified at the protocol level.
|
|
</P>
|
|
</div>
|
|
|
|
{/* ✅ Card layout spacing & grid match HomeHosting */}
|
|
<ul
|
|
role="list"
|
|
className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm
|
|
sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10 "
|
|
>
|
|
{architecture.map((layer) => (
|
|
<li
|
|
key={layer.title}
|
|
className="rounded-xl border border-gray-800 bg-[#111]/60 p-6 hover:transform-[scale(1.05)]"
|
|
>
|
|
{layer.icon} {/* ✅ this now works */}
|
|
<h3 className="text-lg font-semibold text-white">{layer.title}</h3>
|
|
<p className="mt-2 text-gray-400 leading-snug">{layer.description}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* ✅ Matching button spacing and layout */}
|
|
<div className="mx-auto mt-12 flex justify-center gap-6">
|
|
<Button variant="solid" color="cyan" href="/start">
|
|
Get Started
|
|
</Button>
|
|
<Button variant="outline" color="gray" href="/docs">
|
|
Explore Docs
|
|
</Button>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
|
|
{/* ✅ bottom border + bottom spacer to match */}
|
|
<div className="w-full border-b border-gray-800" />
|
|
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
|
|
</section>
|
|
)
|
|
}
|