forked from emre/www_projectmycelium_com
109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
import {
|
|
CodeBracketSquareIcon,
|
|
CubeTransparentIcon,
|
|
LockClosedIcon,
|
|
Squares2X2Icon,
|
|
} from '@heroicons/react/24/outline'
|
|
|
|
import { Container } from '../../components/Container'
|
|
import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
|
|
|
|
const overviewCards = [
|
|
{
|
|
label: 'Overview',
|
|
title: 'Unified GPU acceleration across the ThreeFold Grid',
|
|
description:
|
|
'Mycelium GPU aggregates distributed hardware into a single fabric, delivering sovereign acceleration for AI, ML, and rendering workloads.',
|
|
},
|
|
{
|
|
label: 'Core Concept',
|
|
title: 'Sovereign intelligence layer',
|
|
description:
|
|
'No silos, no intermediaries—just raw, verifiable GPU power orchestrated through smart contracts and APIs you control.',
|
|
},
|
|
]
|
|
|
|
const principles = [
|
|
{
|
|
name: 'No Silos',
|
|
description: 'Every GPU resource is accessible through a single interface.',
|
|
icon: Squares2X2Icon,
|
|
},
|
|
{
|
|
name: 'No Intermediaries',
|
|
description: 'Direct access to hardware without centralized brokers.',
|
|
icon: CubeTransparentIcon,
|
|
},
|
|
{
|
|
name: 'Verifiable Power',
|
|
description: 'Every GPU cycle is attested and cryptographically verified.',
|
|
icon: LockClosedIcon,
|
|
},
|
|
{
|
|
name: 'Code-Orchestrated',
|
|
description: 'Smart contracts and APIs automate allocation and policy.',
|
|
icon: CodeBracketSquareIcon,
|
|
},
|
|
]
|
|
|
|
export function GpuOverview() {
|
|
return (
|
|
<section className="bg-gray-950 py-24 sm:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
|
|
Platform Overview
|
|
</Eyebrow>
|
|
<SectionHeader as="h2" color="light" className="mt-6 font-medium">
|
|
The sovereign acceleration layer for intelligent workloads.
|
|
</SectionHeader>
|
|
<P color="lightSecondary" className="mt-6">
|
|
Mycelium GPU makes distributed acceleration feel like one machine.
|
|
Harness global GPUs with deterministic performance, transparent
|
|
costs, and end-to-end verification.
|
|
</P>
|
|
</div>
|
|
<div className="mt-16 grid gap-8 lg:grid-cols-2">
|
|
{overviewCards.map((card) => (
|
|
<div
|
|
key={card.title}
|
|
className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.05] to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
|
|
<div className="relative">
|
|
<Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
|
|
{card.label}
|
|
</Small>
|
|
<h3 className="mt-4 text-lg font-semibold text-white">
|
|
{card.title}
|
|
</h3>
|
|
<p className="mt-4 text-sm leading-relaxed text-gray-300">
|
|
{card.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
|
{principles.map((principle) => (
|
|
<div
|
|
key={principle.name}
|
|
className="rounded-3xl border border-white/10 bg-white/[0.04] p-6 text-left transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
|
|
>
|
|
<div className="mb-6 flex size-12 items-center justify-center rounded-full bg-cyan-500/15">
|
|
<principle.icon aria-hidden="true" className="size-6 text-cyan-300" />
|
|
</div>
|
|
<h3 className="text-base font-semibold text-white">
|
|
{principle.name}
|
|
</h3>
|
|
<p className="mt-3 text-sm leading-relaxed text-gray-300">
|
|
{principle.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|