forked from emre/www_projectmycelium_com
115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
import { Container } from '@/components/Container'
|
|
import { Eyebrow, SectionHeader, P } from '@/components/Texts'
|
|
|
|
const codeSamples = [
|
|
{
|
|
title: 'Simple Deployment',
|
|
description:
|
|
'Define deterministic workloads with familiar manifests that execute exactly as declared anywhere on the fabric.',
|
|
language: 'yaml',
|
|
code: `# Basic compute workload
|
|
apiVersion: v1
|
|
kind: Deployment
|
|
metadata:
|
|
name: deterministic-app
|
|
spec:
|
|
replicas: 3
|
|
selector:
|
|
matchLabels:
|
|
app: deterministic-app
|
|
template:
|
|
metadata:
|
|
labels:
|
|
app: deterministic-app
|
|
spec:
|
|
containers:
|
|
- name: app
|
|
image: ubuntu:latest
|
|
command: ["echo", "Deterministic deployment"]`,
|
|
},
|
|
{
|
|
title: 'Zero-Image Deployment',
|
|
description:
|
|
'Use metadata-only images to launch workloads instantly with zero heavy artifacts to distribute.',
|
|
language: 'yaml',
|
|
code: `# Using zero-image technology
|
|
apiVersion: v1
|
|
kind: Pod
|
|
metadata:
|
|
name: zero-image-pod
|
|
spec:
|
|
containers:
|
|
- name: app
|
|
image: "zero-image://ubuntu-latest" # Metadata-only image
|
|
command: ["echo", "Running on zero-image"]`,
|
|
},
|
|
{
|
|
title: 'Smart Contract Orchestration',
|
|
description:
|
|
'Automate workload lifecycles through cryptographically signed contracts that govern execution.',
|
|
language: 'yaml',
|
|
code: `# Smart contract orchestrated deployment
|
|
apiVersion: v1
|
|
kind: ConfigMap
|
|
metadata:
|
|
name: deployment-contract
|
|
data:
|
|
contract: |
|
|
smart_contract:
|
|
signature: "cryptographically_signed_deployment"
|
|
workload_spec:
|
|
image: "ubuntu-latest"
|
|
replicas: 3
|
|
verification_hash: "sha256_hash_of_workload"`,
|
|
},
|
|
]
|
|
|
|
export function ComputeDeveloperExperience() {
|
|
return (
|
|
<section className="bg-white py-24 sm:py-32">
|
|
<Container>
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
|
|
Developer Experience
|
|
</Eyebrow>
|
|
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
|
Declarative workflows, deterministic results.
|
|
</SectionHeader>
|
|
<P className="mt-6 text-gray-600">
|
|
Ship workloads using the same declarative patterns you already
|
|
trust. Mycelium Compute verifies and enforces every detail, from
|
|
classic deployments to zero-image launches and smart contract
|
|
upgrades.
|
|
</P>
|
|
</div>
|
|
<div className="mt-16 grid gap-8 lg:grid-cols-3">
|
|
{codeSamples.map((sample) => (
|
|
<div
|
|
key={sample.title}
|
|
className="flex h-full flex-col overflow-hidden rounded-3xl border border-slate-200 bg-slate-50"
|
|
>
|
|
<div className="p-8">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.24em] text-cyan-500">
|
|
{sample.language}
|
|
</p>
|
|
<h3 className="mt-4 text-xl font-semibold text-gray-900">
|
|
{sample.title}
|
|
</h3>
|
|
<p className="mt-3 text-sm leading-relaxed text-gray-600">
|
|
{sample.description}
|
|
</p>
|
|
</div>
|
|
<div className="mt-auto bg-gray-900 p-6">
|
|
<pre className="overflow-auto text-left text-xs leading-relaxed text-cyan-100">
|
|
<code>{sample.code}</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|
|
|