new dropdown content from Mik

src/pages/compute/ComputeDifferentiators.tsx

@@ -0,0 +1,68 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const differentiators = [
+  {
+    title: 'Deterministic Guarantee',
+    description:
+      'Every computation is cryptographically verified to ensure consistent, repeatable outcomes across environments.',
+  },
+  {
+    title: 'Autonomous Operations',
+    description:
+      'Infrastructure monitors, scales, and heals itself with zero human intervention required.',
+  },
+  {
+    title: 'Smart Contract Security',
+    description:
+      'Workload orchestration flows through cryptographically signed, tamper-proof contracts.',
+  },
+  {
+    title: 'Multi-Platform Support',
+    description:
+      'Run containers, VMs, or native Linux workloads with the same deterministic guarantees.',
+  },
+  {
+    title: 'Secure Boot Verification',
+    description:
+      'Hardware-level attestation validates every deployment path before workloads execute.',
+  },
+]
+
+export function ComputeDifferentiators() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.3em] uppercase text-cyan-500">
+            Key Differentiators
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Why teams choose Mycelium Compute.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Deterministic execution, contract-grade governance, and hardware
+            attestation make Mycelium Compute the most trusted substrate for
+            sensitive workloads.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {differentiators.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-3xl border border-slate-200 bg-slate-50 p-8 transition hover:-translate-y-1 hover:border-cyan-300 hover:bg-white hover:shadow-lg"
+            >
+              <h3 className="text-lg font-semibold text-gray-900">
+                {item.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
+