feat: simplify cloud and compute architecture sections

- Condensed architecture explanations to focus on core capabilities rather than implementation details
- Replaced detailed bullet lists with concise descriptions for better readability
- Added new CallToAction component with dual-path user journey (host vs deploy)

src/pages/compute/ComputeArchitecture.tsx

@@ -1,92 +1,53 @@
+import {
+  LockClosedIcon,
+  CpuChipIcon,
+  AdjustmentsHorizontalIcon,
+} from '@heroicons/react/24/solid'
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, H3, CT, CP } from '../../components/Texts'
 
-const architectureSections = [
+const architecture = [
   {
-    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.',
-    ],
+    name: 'Mesh Networking',
+    description: 'Secure connectivity across all nodes.',
+    icon: LockClosedIcon,
   },
   {
-    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.',
-    ],
+    name: 'Sovereign Compute',
+    description: 'Execution only on hardware you control.',
+    icon: CpuChipIcon,
   },
   {
-    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.',
-    ],
+    name: 'Deterministic Orchestration',
+    description: 'Workloads deploy and update predictably.',
+    icon: AdjustmentsHorizontalIcon,
   },
 ]
 
 export function ComputeArchitecture() {
   return (
-    <section className="bg-gray-50 py-24 sm:py-32">
+    <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">
-            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>
+          <Eyebrow>ARCHITECTURE</Eyebrow>
+          <H3 className="mt-4 text-gray-900">HOW IT WORKS</H3>
         </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 className="mx-auto mt-16 max-w-5xl">
+          <dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
+            {architecture.map((item) => (
+              <div key={item.name} className="relative pl-12">
+                <item.icon
+                  aria-hidden="true"
+                  className="absolute left-0 top-1 size-6 text-cyan-600"
+                />
+                <CT className="font-semibold text-gray-900">{item.name}</CT>
+                <CP className="mt-1 text-gray-600">{item.description}</CP>
               </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>
-          ))}
+            ))}
+          </dl>
         </div>
       </Container>
     </section>
   )
 }
-