new dropdown content from Mik

src/pages/compute/ComputeFeatures.tsx

@@ -0,0 +1,106 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const featureGroups = [
+  {
+    title: 'Deterministic Deployments',
+    description:
+      'Cryptographic verification ensures every workload deploys exactly as specified—no tampering, no drift.',
+    listTitle: 'Benefits',
+    bullets: [
+      'Cryptographic verification of every workload component',
+      'Zero configuration drift across environments',
+      'Immediate detection of unauthorized changes',
+      'Complete reproducibility for every deployment',
+    ],
+  },
+  {
+    title: 'Self-Managing & Stateless Infrastructure',
+    description:
+      'Infrastructure that scales and heals autonomously across the ThreeFold Grid with no manual intervention.',
+    listTitle: 'Capabilities',
+    bullets: [
+      'Autonomous operations that self-orchestrate workloads',
+      'Global scaling sewn into the fabric of the platform',
+      'Stateless design removes hardware dependencies',
+      'Self-healing recovery from failures and anomalies',
+    ],
+  },
+  {
+    title: 'Smart Contract-Based Deployment',
+    description:
+      'Cryptographically signed contracts orchestrate every workload lifecycle with transparent, tamper-proof execution.',
+    listTitle: 'Benefits',
+    bullets: [
+      'Every deployment contract cryptographically signed',
+      'Fully auditable, transparent execution of operations',
+      'Tamper-proof orchestration that cannot be rewritten',
+      'Smart contracts automate the entire workload lifecycle',
+    ],
+  },
+  {
+    title: 'Multi-Workload Compatibility with Secure Boot',
+    description:
+      'Run containers, VMs, and native Linux workloads anywhere with stateless secure boot and continuous verification.',
+    listTitle: 'Capabilities',
+    bullets: [
+      'Full compatibility with Kubernetes and Docker workloads',
+      'Securely run virtual machines with attested boot paths',
+      'Native Linux applications verified end-to-end',
+      'Continuous verification maintains trusted execution',
+    ],
+  },
+]
+
+export function ComputeFeatures() {
+  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">
+            Core Features
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Precision infrastructure that verifies itself.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Every layer is designed for determinism, from how workloads are
+            declared to the way they scale, protect, and govern themselves on
+            the grid.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          {featureGroups.map((feature) => (
+            <div
+              key={feature.title}
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:shadow-xl"
+            >
+              <div>
+                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  {feature.listTitle}
+                </Small>
+                <h3 className="mt-4 text-2xl font-semibold text-gray-900">
+                  {feature.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                  {feature.description}
+                </p>
+              </div>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {feature.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100/40 bg-cyan-50/40 p-3 text-left leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}