forked from emre/www_projectmycelium_com
sasha-astiadi
29e2d942de
- Replaced em dashes with commas for better readability in descriptions - Standardized punctuation in aria-labels (changed "—" to ",") - Removed unnecessary em dashes in favor of commas or removed punctuation - Fixed inconsistent spacing around punctuation marks - Improved sentence flow in multiple component descriptions
80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
import { Eyebrow, H3, P } from '@/components/Texts'
|
|
import {
|
|
CpuChipIcon,
|
|
LockClosedIcon,
|
|
ShieldCheckIcon,
|
|
} from '@heroicons/react/24/solid'
|
|
|
|
export function GpuArchitecture() {
|
|
return (
|
|
<section id="gpu-architecture" className="w-full max-w-8xl mx-auto bg-transparent">
|
|
|
|
{/* ✅ Top horizontal line with spacing */}
|
|
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
|
<div className="w-full border-t border-l border-r border-gray-100" />
|
|
|
|
<div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-100">
|
|
|
|
{/* ✅ LEFT — Title + Intro text */}
|
|
<div className="max-w-xl">
|
|
<Eyebrow>ARCHITECTURE</Eyebrow>
|
|
|
|
<H3 className="mt-6">
|
|
How It Works
|
|
</H3>
|
|
|
|
<P className="mt-6 text-lg text-gray-600">
|
|
Mycelium GPU architecture ensures secure, sovereign computation using
|
|
hardware you trust. Nodes communicate through encrypted mesh networking,
|
|
and access is guaranteed through verifiable reservations.
|
|
</P>
|
|
</div>
|
|
|
|
{/* ✅ RIGHT — items stacked with cyan dividers */}
|
|
<div className="space-y-8">
|
|
|
|
{/* 1 — Sovereign Compute Nodes */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-950 flex items-center">
|
|
<CpuChipIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
|
Sovereign Compute Nodes
|
|
</h3>
|
|
<p className="mt-2 text-gray-600 max-w-2xl">
|
|
GPUs run only on hardware you control, eliminating reliance on centralized clouds.
|
|
</p>
|
|
<div className="mt-8 h-px w-full bg-cyan-500/50" />
|
|
</div>
|
|
|
|
{/* 2 — Encrypted Mesh Networking */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-950 flex items-center">
|
|
<LockClosedIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
|
Encrypted Mesh Networking
|
|
</h3>
|
|
<p className="mt-2 text-gray-600 max-w-2xl">
|
|
Nodes form private, encrypted tunnels to workloads, no public exposure required.
|
|
</p>
|
|
<div className="mt-8 h-px w-full bg-cyan-500/50" />
|
|
</div>
|
|
|
|
{/* 3 — Reservation & Verification Layer */}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-950 flex items-center">
|
|
<ShieldCheckIcon className="h-6 w-6 text-cyan-500 mr-3" />
|
|
Reservation & Verification Layer
|
|
</h3>
|
|
<p className="mt-2 text-gray-600 max-w-2xl">
|
|
Cryptographically enforced reservations guarantee GPU availability
|
|
with deterministic behavior across workloads.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ✅ Bottom horizontal line with spacing */}
|
|
<div className="w-full border-b border-gray-100" />
|
|
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
|
</section>
|
|
)
|
|
}
|