forked from emre/www_projectmycelium_com
51 lines
2.4 KiB
TypeScript
51 lines
2.4 KiB
TypeScript
import { Container } from '../../components/Container'
|
|
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
|
|
|
|
const zeroImageBenefits = [
|
|
'Metadata-only artifacts replace heavy images for ultra-fast delivery.',
|
|
'Instant startup times accelerate workload initialization anywhere.',
|
|
'Bandwidth consumption drops dramatically with minimal transfers.',
|
|
'Deploy workloads globally across the ThreeFold Grid without friction.',
|
|
]
|
|
|
|
export function ComputeZeroImage() {
|
|
return (
|
|
<section className="relative overflow-hidden bg-gradient-to-b from-cyan-950 via-gray-950 to-gray-950 py-24 sm:py-32">
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<div className="absolute -top-32 right-1/4 h-72 w-72 rounded-full bg-cyan-500/30 blur-[120px]" />
|
|
<div className="absolute bottom-0 left-1/3 h-96 w-96 rounded-full bg-cyan-400/10 blur-[140px]" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_left,_rgba(8,145,178,0.18),_transparent_55%)]" />
|
|
</div>
|
|
<Container className="relative">
|
|
<div className="grid items-center gap-12 lg:grid-cols-[0.85fr_1.15fr]">
|
|
<div>
|
|
<Eyebrow color="accent" className="tracking-[0.32em] uppercase">
|
|
Zero-Image Integration
|
|
</Eyebrow>
|
|
<SectionHeader as="h2" color="light" className="mt-6">
|
|
Ultra-efficient deployments that move at the speed of metadata.
|
|
</SectionHeader>
|
|
<P color="lightSecondary" className="mt-6">
|
|
Mycelium Compute integrates natively with Mycelium Storage's
|
|
Zero-Image system. Deployments ship as metadata descriptors rather
|
|
than bulky artifacts, enabling consistent, deterministic
|
|
environments delivered on demand.
|
|
</P>
|
|
</div>
|
|
<ul className="space-y-4 text-sm text-cyan-100">
|
|
{zeroImageBenefits.map((benefit) => (
|
|
<li
|
|
key={benefit}
|
|
className="flex items-start gap-3 rounded-3xl border border-cyan-400/20 bg-white/5 p-5 backdrop-blur-sm transition hover:border-cyan-200/40 hover:bg-white/10"
|
|
>
|
|
<span className="mt-1 inline-flex size-3 flex-none rounded-full bg-cyan-300 shadow-[0_0_12px_rgba(45,212,191,0.6)]" />
|
|
<span className="leading-relaxed">{benefit}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|