new dropdown content from Mik

src/pages/compute/ComputeOverview.tsx

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