new dropdown content from Mik

src/pages/compute/ComputeArchitecture.tsx

@@ -0,0 +1,92 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const architectureSections = [
+  {
+    title: 'Deterministic Computing',
+    description:
+      'Every computational step is predictable and provable before it ever executes.',
+    bullets: [
+      'Cryptographic verification precedes every operation.',
+      'State determinism ensures identical results from identical inputs.',
+      'Tamper resistance surfaces any modification instantly.',
+      'Comprehensive audit trails verify the full execution history.',
+    ],
+  },
+  {
+    title: 'Stateless Infrastructure',
+    description:
+      'A global substrate that scales and recovers without hardware-bound state.',
+    bullets: [
+      'No persistent state coupled to specific hardware or regions.',
+      'Global distribution makes compute available wherever it is needed.',
+      'Auto-scaling allocates the right resources at the right time.',
+      'Fault-tolerant orchestration provides automatic failover.',
+    ],
+  },
+  {
+    title: 'Zero-Image System',
+    description:
+      'Metadata-first delivery keeps deployments lightweight and instantly repeatable.',
+    bullets: [
+      'Images represented as metadata instead of heavyweight artifacts.',
+      'Instant deployment for rapid workload startup.',
+      'Efficient storage with minimal footprint for artifacts.',
+      'Bandwidth-optimized transfers shrink delivery times.',
+    ],
+  },
+]
+
+export function ComputeArchitecture() {
+  return (
+    <section className="bg-gray-50 py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.28em] uppercase text-cyan-500">
+            Technical Architecture
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Infrastructure engineered for provable outcomes.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Deterministic computing, stateless orchestration, and metadata-first
+            delivery combine to create a compute fabric you can trust with your
+            most sensitive workloads.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {architectureSections.map((section) => (
+            <div
+              key={section.title}
+              className="flex h-full flex-col rounded-3xl border border-cyan-100 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+            >
+              <div className="flex items-center gap-3">
+                <span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-600">
+                  •
+                </span>
+                <h3 className="text-xl font-semibold text-gray-900">
+                  {section.title}
+                </h3>
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {section.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {section.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}
+