new dropdown content from Mik

src/pages/compute/ComputeZeroImage.tsx

@@ -0,0 +1,50 @@
+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&apos;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>
+  )
+}