forked from emre/www_projectmycelium_com
sasha-astiadi
26ae2f156a
- Added new app UI screenshots for cloud features (connector, billing, kubeconfig, reserve) - Added new hero image (cloudhero3.webp) for cloud section - Enhanced Texts component with new cyan color variant and default props support - Updated Eyebrow component to use consistent styling with accent color and tracking - Simplified CloudArchitecture component by removing redundant style props - Completely rebuilt CloudFeatures component with
76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
import { Container } from '../../components/Container'
|
|
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
|
|
|
|
const architectureSections = [
|
|
{
|
|
title: 'Distributed GPU Mesh',
|
|
description:
|
|
'A peer-to-peer fabric connects GPU nodes across the ThreeFold Grid, exposing them through the Mycelium network.',
|
|
bullets: [
|
|
'GPU nodes distributed globally for on-demand acceleration.',
|
|
'Mycelium network provides encrypted peer-to-peer connectivity.',
|
|
'Smart contract orchestration allocates and governs resources.',
|
|
'Real-time monitoring tracks utilization and health.',
|
|
],
|
|
},
|
|
{
|
|
title: 'Performance Characteristics',
|
|
description:
|
|
'Consistency and transparency are built into the fabric so workloads behave predictably anywhere on the planet.',
|
|
bullets: [
|
|
'Edge-to-core deployment flexibility for every workload profile.',
|
|
'Adaptive intelligence optimizes allocation automatically.',
|
|
'Deterministic performance guarantees availability when booked.',
|
|
'Transparent cost tracking for every GPU cycle consumed.',
|
|
],
|
|
},
|
|
]
|
|
|
|
export function GpuArchitecture() {
|
|
return (
|
|
<section id="gpu-architecture" className="bg-white py-24 sm:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow>
|
|
Technical Architecture
|
|
</Eyebrow>
|
|
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
|
A peer-to-peer mesh purpose-built for acceleration.
|
|
</SectionHeader>
|
|
<P className="mt-6 text-gray-600">
|
|
Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
|
|
networking, smart contract orchestration, and transparent monitoring
|
|
ensure your workloads receive precisely the power they request.
|
|
</P>
|
|
</div>
|
|
<div className="mt-16 grid gap-8 lg:grid-cols-2">
|
|
{architectureSections.map((section) => (
|
|
<div
|
|
key={section.title}
|
|
className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white 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">
|
|
{section.title}
|
|
</h3>
|
|
<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>
|
|
)
|
|
}
|