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/cloud/CalltoAction.tsx

@@ -0,0 +1,55 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+import { Button } from '../../components/Button'
+
+export function CallToAction() {
+  return (
+    <section
+      id="get-started"
+      className="relative overflow-hidden bg-gray-900 py-24 lg:py-32"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+      </div>
+
+      <Container className="relative">
+        <div className="mx-auto max-w-xl text-center">
+          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl lg:text-4xl">
+            Choose How You Want to Start
+          </h2>
+
+          <p className="mt-6 text-lg text-gray-300">
+            Host your own node to contribute capacity or deploy workloads using the Mycelium Cloud.
+          </p>
+
+          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
+            <div className="flex flex-col items-center text-center">
+              <h3 className="text-lg font-semibold text-white">Host a Node</h3>
+              <p className="mt-2 text-gray-300">
+                Add compute to the network and run your own environment.
+              </p>
+              <Button to="/host" variant="solid" color="cyan" className="mt-4">
+                Host a Node
+              </Button>
+            </div>
+
+            <div className="flex flex-col items-center text-center">
+              <h3 className="text-lg font-semibold text-white">Deploy Workloads</h3>
+              <p className="mt-2 text-gray-300">
+                Run Kubernetes clusters, agents, and services on the Mycelium Cloud.
+              </p>
+              <Button to="/cloud" variant="outline" color="white" className="mt-4">
+                Start Deploying
+              </Button>
+            </div>
+          </div>
+
+          <p className="mt-10 text-gray-300 text-lg max-w-md mx-auto">
+            You don’t need to host before deploying, and you don’t need to deploy before hosting.
+            Start wherever it makes sense for you.
+          </p>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/CloudArchitecture.tsx

@@ -1,39 +1,22 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, H3, P } from '../../components/Texts'
+import { Button } from '../../components/Button'
 
-const architectureSections = [
+const architecture = [
   {
-    title: 'Decentralized Infrastructure',
+    title: 'Mesh Networking Layer',
     description:
-      'Clusters launch across the ThreeFold Grid with direct node access and encrypted connectivity.',
+      'Every node receives a cryptographic network identity and secure routing path.',
-    bullets: [
-      'Unique Mycelium IP addresses assigned to every node.',
-      'Peer-to-peer mesh networking links services across nodes.',
-      'End-to-end encryption keeps traffic sealed inside the fabric.',
-      'No public IP exposure—everything is addressable via Mycelium IPs.',
-    ],
   },
   {
-    title: 'Network Flow',
+    title: 'Sovereign Compute Layer',
     description:
-      'Traffic moves through the Mycelium mesh, maintaining sovereignty without sacrificing reach.',
+      'Workloads run on hardware you authorize, no shared control, no exposed surfaces.',
-    bullets: [
-      'User requests enter through the encrypted Mycelium network.',
-      'Traffic routes directly to cluster nodes without intermediate hops.',
-      'Services answer over the same mesh—no ingress controller required.',
-      'Operational visibility without exposing public attack surface.',
-    ],
   },
   {
-    title: 'Kubernetes Management',
+    title: 'Deterministic Orchestration',
     description:
-      'Lightweight K3s orchestration delivers HA clusters with automated lifecycle management.',
+      'K3s clusters deploy predictably, verifiably, and remain drift-free.',
-    bullets: [
-      'Full K3s deployment and lifecycle management built-in.',
-      'IPv6-native networking ensures deterministic service discovery.',
-      'Multi-master topologies with automatic failover for resilience.',
-      'Drift-free upgrades orchestrated through smart contracts.',
-    ],
   },
 ]
 
@@ -41,51 +24,41 @@ export function CloudArchitecture() {
   return (
     <section className="bg-white py-24 lg:py-32">
       <Container>
-        <div className="mx-auto max-w-5xl text-center">
+        <div className="mx-auto max-w-4xl text-center">
-          <Eyebrow>
+          <Eyebrow>ARCHITECTURE</Eyebrow>
-            Technical Architecture
-          </Eyebrow>
           <H3 className="mt-6 text-gray-900">
-            Built on a Sovereign, Encrypted Delivery Mesh.
+            How Mycelium Cloud Works
           </H3>
           <P className="mt-6 text-gray-600">
-            Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
+            Mycelium Cloud runs Kubernetes on a global encrypted mesh, with
-            networking with deterministic K3s orchestration. Every layer is
+            identity, routing, and state verified at the protocol level.
-            designed to keep workloads sovereign, observable, and effortless to
-            operate.
           </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+
-          {architectureSections.map((section) => (
+        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
+          {architecture.map((layer) => (
             <div
-              key={section.title}
+              key={layer.title}
-              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg "
+              className="rounded-3xl border border-slate-200 bg-gray-50/40 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-base font-semibold uppercase tracking-[0.3em] text-cyan-600">
-                  •
-                </span>
               <h3 className="text-xl font-semibold text-gray-900">
-                  {section.title}
+                {layer.title}
               </h3>
-              </div>
+              <p className="mt-3 text-sm leading-relaxed text-gray-600">
-              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {layer.description}
-                {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-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
-                  >
-                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
-                    <span>{bullet}</span>
-                  </li>
-                ))}
-              </ul>
             </div>
           ))}
         </div>
+
+        <div className="mx-auto mt-16 flex justify-center gap-4">
+          <Button variant="solid" color="cyan" href="/start">
+            Get Started
+          </Button>
+          <Button variant="outline" color="gray" href="/docs">
+            Explore Docs
+          </Button>
+        </div>
       </Container>
     </section>
   )

src/pages/cloud/CloudBluePrint.tsx

@@ -5,7 +5,7 @@ export function CloudBluePrint() {
   return (
     <div className="bg-white py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <Eyebrow color="accent">Cloud Blueprint</Eyebrow>
+        <Eyebrow color="accent">Featured Blueprint</Eyebrow>
         <H3 color="primary">Your Personal Sovereign Cloud Workspace</H3>
         <P color="primary">Digital Me is an example environment built to demonstrate what’s possible on top of the Mycelium Stack, a full personal cloud you can deploy, customize, or extend.
             Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.</P>

src/pages/cloud/CloudHeroNew.tsx

@@ -17,9 +17,6 @@ export function CloudHeroNew() {
             <H3 className="mt-4">
               Run Kubernetes on the Sovereign Agentic Cloud
             </H3>
-            <H5 className="mt-8 text-lg text-gray-600">
-              Mycelium Cloud turns the ThreeFold Grid into a programmable substrate for K3s. 
-            </H5>
             <H5 className="mt-4 text-lg text-gray-600">
               Deploy K3s clusters on a global, self-healing mesh network.
               Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.

src/pages/cloud/CloudHosting.tsx

@@ -39,11 +39,6 @@ export function CloudHosting() {
       <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
         <Eyebrow>CAPABILITIES</Eyebrow>
         <H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
-        <P className="mx-auto mt-5 max-w-prose">
-          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
-          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
-          giving your data or control to anyone.
-        </P>
         <div className="mt-16">
           <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
             {features.map((feature) => (

src/pages/cloud/CloudPage.tsx

@@ -6,6 +6,7 @@ import { CloudCTA } from './CloudCTA'
 import { CloudHeroNew } from './CloudHeroNew'
 import { CloudHosting } from './CloudHosting'
 import { CloudBluePrint } from './CloudBluePrint'
+import { CalltoAction } from './CalltoAction'
 
 export default function CloudPage() {
   return (
@@ -36,7 +37,7 @@ export default function CloudPage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <CloudCTA />
+        <CalltoAction />
       </AnimatedSection>
     </>
   )

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',
+    name: 'Mesh Networking',
-    description:
+    description: 'Secure connectivity across all nodes.',
-      'Every computational step is predictable and provable before it ever executes.',
+    icon: LockClosedIcon,
-    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',
+    name: 'Sovereign Compute',
-    description:
+    description: 'Execution only on hardware you control.',
-      'A global substrate that scales and recovers without hardware-bound state.',
+    icon: CpuChipIcon,
-    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',
+    name: 'Deterministic Orchestration',
-    description:
+    description: 'Workloads deploy and update predictably.',
-      'Metadata-first delivery keeps deployments lightweight and instantly repeatable.',
+    icon: AdjustmentsHorizontalIcon,
-    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">
+    <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">
+          <Eyebrow>ARCHITECTURE</Eyebrow>
-            Technical Architecture
+          <H3 className="mt-4 text-gray-900">HOW IT WORKS</H3>
-          </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 className="mx-auto mt-16 max-w-5xl">
-            <div
+          <dl className="grid grid-cols-1 gap-12 text-gray-600 sm:grid-cols-2 lg:grid-cols-3">
-              key={section.title}
+            {architecture.map((item) => (
-              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 key={item.name} className="relative pl-12">
-            >
+                <item.icon
-              <div className="flex items-center gap-3">
+                  aria-hidden="true"
-                <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">
+                  className="absolute left-0 top-1 size-6 text-cyan-600"
-                  •
+                />
-                </span>
+                <CT className="font-semibold text-gray-900">{item.name}</CT>
-                <h3 className="text-xl font-semibold text-gray-900">
+                <CP className="mt-1 text-gray-600">{item.description}</CP>
-                  {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>
             ))}
+          </dl>
         </div>
       </Container>
     </section>
   )
 }
-