forked from emre/www_projectmycelium_com
new dropdown content from Mik
This commit is contained in:
Emre
@@ -1,56 +1,108 @@
|
||||
import { CodeBracketSquareIcon, CubeTransparentIcon, LockClosedIcon, Squares2X2Icon } from '@heroicons/react/24/outline'
|
||||
import {
|
||||
CodeBracketSquareIcon,
|
||||
CubeTransparentIcon,
|
||||
LockClosedIcon,
|
||||
Squares2X2Icon,
|
||||
} from '@heroicons/react/24/outline'
|
||||
|
||||
const features = [
|
||||
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: 'All GPU resources accessible through a single interface.',
|
||||
description: 'Every GPU resource is accessible through a single interface.',
|
||||
icon: Squares2X2Icon,
|
||||
},
|
||||
{
|
||||
name: 'No Intermediaries',
|
||||
description: 'Direct access to GPU resources without centralized control.',
|
||||
description: 'Direct access to hardware without centralized brokers.',
|
||||
icon: CubeTransparentIcon,
|
||||
},
|
||||
{
|
||||
name: 'Verifiable Power',
|
||||
description: 'Every GPU cycle cryptographically verified.',
|
||||
description: 'Every GPU cycle is attested and cryptographically verified.',
|
||||
icon: LockClosedIcon,
|
||||
},
|
||||
{
|
||||
name: 'Code-Orchestrated',
|
||||
description: 'Managed entirely through APIs and smart contracts.',
|
||||
description: 'Smart contracts and APIs automate allocation and policy.',
|
||||
icon: CodeBracketSquareIcon,
|
||||
},
|
||||
]
|
||||
|
||||
export function GpuOverview() {
|
||||
return (
|
||||
<div className="bg-[#171717] py-24 sm:py-32">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
|
||||
<div className="lg:col-span-2">
|
||||
<h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">
|
||||
Unified GPU Acceleration Across the Grid
|
||||
</h2>
|
||||
<p className="mt-4 text-base/7 text-gray-300">
|
||||
Mycelium GPU provides unified access to distributed GPU acceleration across the ThreeFold Grid. It transforms fragmented GPU resources into a single adaptive intelligence layer — enabling you to run AI, ML, and rendering workloads anywhere, anytime, with verifiable performance and transparent costs.
|
||||
</p>
|
||||
</div>
|
||||
<dl className="col-span-3 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name}>
|
||||
<dt className="text-base/7 font-semibold text-white">
|
||||
<div className="mb-6 flex size-10 items-center justify-center rounded-lg">
|
||||
<feature.icon aria-hidden="true" className="size-8 text-cyan-500" />
|
||||
</div>
|
||||
{feature.name}
|
||||
</dt>
|
||||
<dd className="mt-1 text-base/7 text-gray-400">{feature.description}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
<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>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user