feat: simplify compute and cloud page content

- Streamlined ComputeFeatures and ComputeUseCases to focus on high-level benefits rather than detailed bullet points
- Updated ComputeHero messaging to emphasize deterministic control and self-verification
- Revised CallToAction to clarify deployment vs hosting options
- Added CloudDesign and ComputeCapabilities/ComputeDesign sections to page layouts

src/pages/compute/ComputeCapabilities.tsx

@@ -0,0 +1,58 @@
+import {
+  CpuChipIcon,
+  CubeIcon,
+  ServerIcon,
+} from '@heroicons/react/24/solid'
+import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
+import { Container } from '../../components/Container'
+
+const capabilities = [
+  {
+    name: 'Containers',
+    description: 'Services, web apps, APIs. Fully compatible with Kubernetes.',
+    icon: CubeIcon,
+  },
+  {
+    name: 'Virtual Machines',
+    description:
+      'Legacy apps and specialized runtime stacks. Secure boot + attestation included.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'Native Linux Workloads',
+    description:
+      'Agents, batch jobs, tooling. Runs statelessly anywhere.',
+    icon: CpuChipIcon,
+  },
+]
+
+export function ComputeCapabilities() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow>CAPABILITIES</Eyebrow>
+          <H3 className="mt-4 text-gray-900">What You Can Run</H3>
+          <P className="mt-6 text-gray-600">
+            Mycelium Compute supports multiple workload types on a single
+            execution fabric.
+          </P>
+        </div>
+
+        <div className="mx-auto mt-16 max-w-5xl">
+          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
+            {capabilities.map((feature) => (
+              <div key={feature.name} className="flex flex-col text-center">
+                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
+                  <feature.icon aria-hidden="true" className="size-6 text-cyan-600" />
+                </div>
+                <CT className="mt-6 text-gray-900">{feature.name}</CT>
+                <CP className="mt-2 text-gray-600">{feature.description}</CP>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}