new dropdown content from Mik

src/pages/compute/ComputeDeveloperExperience.tsx

@@ -0,0 +1,114 @@
+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>
+  )
+}
+