75 lines
3.4 KiB
TypeScript
75 lines
3.4 KiB
TypeScript
import { CircleBackground } from '../../components/CircleBackground'
|
|
import { Container } from '../../components/Container'
|
|
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
|
|
|
|
const overviewCards = [
|
|
{
|
|
label: 'Overview',
|
|
title: 'Built for sovereign, verifiable operations',
|
|
copy: `Mycelium Compute provides a sovereign, deterministic compute fabric that enables developers to launch workloads with cryptographic certainty and autonomous operations. Built on decentralized infrastructure, it keeps environments transparent, verifiable, and free from manual intervention.`,
|
|
},
|
|
{
|
|
label: 'Core Concept',
|
|
title: 'Deterministic compute fabric',
|
|
copy: `Every workload deploys exactly as intended through cryptographic verification—eliminating tampering and configuration drift while maintaining complete operational autonomy.`,
|
|
},
|
|
]
|
|
|
|
export function ComputeOverview() {
|
|
return (
|
|
<section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<CircleBackground
|
|
color="#06b6d4"
|
|
className="absolute -top-40 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30 blur-3xl sm:opacity-40"
|
|
/>
|
|
<CircleBackground
|
|
color="#22d3ee"
|
|
className="absolute bottom-[-18rem] left-[15%] h-[420px] w-[420px] opacity-25 blur-3xl sm:opacity-40"
|
|
/>
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(15,118,110,0.1),_transparent_55%)]" />
|
|
</div>
|
|
<Container className="relative">
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow color="accent" className="tracking-[0.35em] uppercase">
|
|
Mycelium Compute
|
|
</Eyebrow>
|
|
<SectionHeader as="h2" color="light" className="mt-6 font-medium">
|
|
Deterministic compute fabric for autonomous workloads.
|
|
</SectionHeader>
|
|
<P color="lightSecondary" className="mt-6">
|
|
Mycelium Compute delivers predictable, sovereign performance—free
|
|
from lock-in and drift. Deploy any workload with cryptographic
|
|
precision, knowing the platform verifies, scales, and heals itself
|
|
on your behalf.
|
|
</P>
|
|
<P color="lightSecondary" className="mt-4 italic">
|
|
Deterministic. Self-managing. Stateless by design.
|
|
</P>
|
|
</div>
|
|
<div className="mt-16 grid gap-6 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.03] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/40 hover:bg-white/[0.06]"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.04] to-cyan-300/10 opacity-0 transition group-hover:opacity-100" />
|
|
<div className="relative">
|
|
<p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-300">
|
|
{card.label}
|
|
</p>
|
|
<h3 className="mt-4 text-xl font-semibold text-white">
|
|
{card.title}
|
|
</h3>
|
|
<p className="mt-4 text-sm leading-relaxed text-gray-300">
|
|
{card.copy}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|