forked from emre/www_projectmycelium_com
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import {
|
|
AdjustmentsHorizontalIcon,
|
|
GlobeAltIcon,
|
|
BanknotesIcon,
|
|
} from '@heroicons/react/24/outline'
|
|
|
|
import { Container } from '@/components/Container'
|
|
import { Eyebrow, SectionHeader, P } from '@/components/Texts'
|
|
|
|
const coreFeatures = [
|
|
{
|
|
name: 'Deterministic GPU Allocation',
|
|
description:
|
|
'Reserve the GPU type you need and get exactly that, every time.',
|
|
icon: AdjustmentsHorizontalIcon,
|
|
},
|
|
{
|
|
name: 'Multi-Topology Deployment',
|
|
description:
|
|
'Run workloads in data centers, at the edge, or on self-hosted nodes.',
|
|
icon: GlobeAltIcon,
|
|
},
|
|
{
|
|
name: 'Transparent Cost Structure',
|
|
description:
|
|
'No inflated pricing, no hidden fees, no marketplace brokerage.',
|
|
icon: BanknotesIcon,
|
|
},
|
|
]
|
|
|
|
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">
|
|
Core Features
|
|
</SectionHeader>
|
|
<P color="lightSecondary" className="mt-6">
|
|
The Mycelium GPU layer provides predictable, sovereign acceleration
|
|
— without arbitrary limits or hidden economics.
|
|
</P>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-16 max-w-5xl grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
{coreFeatures.map((feature) => (
|
|
<div
|
|
key={feature.name}
|
|
className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm 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">
|
|
<feature.icon className="size-6 text-cyan-300" aria-hidden="true" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-white">
|
|
{feature.name}
|
|
</h3>
|
|
<p className="mt-3 text-sm leading-relaxed text-gray-300">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|