forked from emre/www_projectmycelium_com
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
import { Container } from '../../components/Container'
|
|
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
|
|
|
|
const differentiators = [
|
|
{
|
|
title: 'Unified Fabric',
|
|
description:
|
|
'Transforms fragmented GPU resources into a single, standard interface accessible anywhere.',
|
|
},
|
|
{
|
|
title: 'Sovereign Control',
|
|
description:
|
|
'Operate without vendor lock-in or geographic restrictions—govern policies entirely through code.',
|
|
},
|
|
{
|
|
title: 'Code-Driven Orchestration',
|
|
description:
|
|
'APIs and smart contracts automate allocation, attestation, and lifecycle management.',
|
|
},
|
|
{
|
|
title: 'Deterministic Performance',
|
|
description:
|
|
'Guaranteed GPU allocation delivers the compute you reserve with consistent performance characteristics.',
|
|
},
|
|
]
|
|
|
|
const costEfficiency = [
|
|
'Transparent pricing with no hidden fees.',
|
|
'Pay only for the GPU cycles you consume.',
|
|
'Global optimization locates the most cost-effective nodes.',
|
|
'Avoid premium lock-in from centralized providers.',
|
|
]
|
|
|
|
export function GpuDifferentiators() {
|
|
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">
|
|
Key Differentiators
|
|
</Eyebrow>
|
|
<SectionHeader as="h2" color="light" className="mt-6">
|
|
GPU acceleration with sovereignty and clarity.
|
|
</SectionHeader>
|
|
<P color="lightSecondary" className="mt-6">
|
|
Mycelium GPU delivers verifiable access to power when you need it.
|
|
Control stays in your hands, from allocation policies to cost
|
|
structure.
|
|
</P>
|
|
</div>
|
|
<div className="mt-16 grid gap-8 md:grid-cols-2">
|
|
{differentiators.map((item) => (
|
|
<div
|
|
key={item.title}
|
|
className="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]"
|
|
>
|
|
<h3 className="text-lg font-semibold text-white">{item.title}</h3>
|
|
<p className="mt-4 text-sm leading-relaxed text-gray-300">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-16 rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm">
|
|
<h3 className="text-xl font-semibold text-white">Cost Efficiency</h3>
|
|
<p className="mt-4 text-sm leading-relaxed text-gray-300">
|
|
Transparent economics makes capacity planning simple while keeping
|
|
budgets predictable.
|
|
</p>
|
|
<ul className="mt-6 space-y-3 text-sm text-gray-300">
|
|
{costEfficiency.map((item) => (
|
|
<li
|
|
key={item}
|
|
className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
|
|
>
|
|
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|