feat: add agent components section and update agents page content

- Created AgentComponents table showcasing building blocks of sovereign agents
- Added CallToAction section with deployment and documentation links
- Updated hero and deployment sections to clarify agent layer timeline and current capabilities

src/pages/agents/AgentComponents.tsx

@@ -0,0 +1,75 @@
+
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader } from '../../components/Texts'
+
+const components = [
+  {
+    component: 'Long-Term Memory (FungiStor)',
+    purpose: 'Durable, distributed memory with erasure-coded resilience',
+    backedBy: 'Mycelium Storage',
+  },
+  {
+    component: 'Active Retrieval (HeroDB)',
+    purpose: 'Fast multimodal vector + keyword retrieval',
+    backedBy: 'Compute + Storage',
+  },
+  {
+    component: 'Secure Agent Workspaces (MOS Sandboxes)',
+    purpose: 'Ephemeral, isolated execution for agent actions',
+    backedBy: 'Mycelium Compute',
+  },
+  {
+    component: 'Private Communication (Mycelium Mesh)',
+    purpose: 'Peer-to-peer encrypted network',
+    backedBy: 'Mycelium Network',
+  },
+  {
+    component: 'Verifiable Execution (Deterministic Deploy)',
+    purpose: 'Ensure the code running is exactly what you signed',
+    backedBy: 'The Stack',
+  },
+  {
+    component: 'Agent Coordination Engine (coming online next)',
+    purpose: 'Orchestrate multi-step workflows and tool use',
+    backedBy: 'Hero Orchestrator',
+  },
+]
+
+export default function AgentComponents() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow>AGENT COMPONENTS</Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            The Building Blocks of Sovereign Agents
+          </SectionHeader>
+        </div>
+
+        <div className="mx-auto mt-16 max-w-6xl overflow-x-auto">
+          <table className="w-full table-auto border-collapse text-left text-sm text-gray-700">
+            <thead>
+              <tr className="bg-cyan-50 border-b border-gray-200">
+                <th className="py-3 px-4 font-semibold text-gray-900">Component</th>
+                <th className="py-3 px-4 font-semibold text-gray-900">Purpose</th>
+                <th className="py-3 px-4 font-semibold text-gray-900">Backed By</th>
+              </tr>
+            </thead>
+            <tbody>
+              {components.map((item) => (
+                <tr
+                  key={item.component}
+                  className="border-b border-gray-100 hover:bg-cyan-50/40 transition"
+                >
+                  <td className="py-4 px-4 font-medium text-gray-900">{item.component}</td>
+                  <td className="py-4 px-4">{item.purpose}</td>
+                  <td className="py-4 px-4 text-cyan-700 font-medium">{item.backedBy}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/agents/AgentHeroAlt.tsx

@@ -16,14 +16,21 @@ export function AgentHeroAlt() {
       </div>
       <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8">
         <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
-          <Eyebrow className="text-base/7 font-semibold text-cyan-500">AGENT</Eyebrow>
+          <Eyebrow className="text-base/7 font-semibold text-cyan-500">MYCELIUM AGENTS</Eyebrow>
           <H3 as="h1" className="mt-2 text-gray-900">Sovereign AI Agents, Coming Soon.</H3>
           <P className="mt-6  text-gray-600">
-            Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
+            The Agent layer will allow you to run autonomous, policy-governed AI that operates on infrastructure you control, with private memory, verifiable execution, and coordination across your personal or organizational environment.
+          </P>
+          <P className="mt-6  text-gray-600">
+            Works Alone. Works Together.
+            Use Agents on top of any Mycelium Cloud deployment or pair them with the Mycelium Network for private, encrypted collaboration across users and systems.
           </P>
           <div className="mt-8">
             <Button href="#" variant="solid" color="cyan">
-              Join the Waitlist
+              Follow Deployment
+            </Button>
+            <Button href="#" variant="outline" color="white">
+              Explore Docs
             </Button>
           </div>
         </div>

src/pages/agents/AgentsPage.tsx

@@ -4,6 +4,8 @@ import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'
 import { BentoSection } from './BentoSection'
 import { AgentHeroAlt } from './AgentHeroAlt'
+import { CallToAction } from './CallToAction'
+import { AgentComponents } from './AgentComponents'
 
 export default function AgentsPage() {
   return (
@@ -27,6 +29,14 @@ export default function AgentsPage() {
       <AnimatedSection>
         <BentoSection />
       </AnimatedSection>
+
+      <AnimatedSection>
+        <AgentComponents />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <CallToAction />
+      </AnimatedSection>
     </div>
   )
 }

src/pages/agents/CallToAction.tsx

@@ -0,0 +1,59 @@
+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-20 sm:py-28"
+    >
+      <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-2xl text-center">
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+            Start Building the Future of Sovereign AI
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Use today’s components — models, storage, compute, mesh — 
+            and step into agents as they arrive.
+          </p>
+
+          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
+            <Button
+              as="a"
+              to="/deploy"
+              variant="solid"
+              color="white"
+            >
+              Deploy a Model
+            </Button>
+
+            <Button
+              as="a"
+              to="/host"
+              variant="outline"
+              color="white"
+            >
+              Host a Node
+            </Button>
+
+            <Button
+              as="a"
+              to="https://threefold.info/mycelium_network/docs/"
+              target="_blank"
+              rel="noreferrer"
+              variant="outline"
+              color="white"
+            >
+              Follow Development
+            </Button>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/agents/DeploySection.tsx

@@ -55,12 +55,12 @@ export function DeploySection() {
           transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
           className="mx-auto max-w-5xl text-center"
         >
-          <Eyebrow color="accent">Get Started</Eyebrow>
+          <Eyebrow color="accent">Deployment</Eyebrow>
           <SectionHeader className="text-3xl font-medium tracking-tight" color="light">
-            Deploy Scalable LLMs and AI Agents
+            Run LLMs and Agent Workloads privately, today.
           </SectionHeader>
           <P className="mt-6" color="light">
-            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
+            Even before the full Agent layer launches, you can deploy models and retrieval pipelines using Mycelium Cloud. 
           </P>
         </motion.div>
         <motion.ul

src/pages/agents/GallerySection.tsx

@@ -53,14 +53,13 @@ export function GallerySection() {
         <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
           <div className="mx-auto max-w-5xl lg:mt-12">
             <Eyebrow color="accent">Use Cases</Eyebrow>
-            <SectionHeader className="text-center" color="dark">Agents with Endless Possibilities.</SectionHeader>
+            <SectionHeader className="text-center" color="dark">What Agents Will Enable</SectionHeader>
           </div>
         </FadeIn>
         <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
           <div className="mx-auto max-w-4xl mt-6 lg:px-0 px-4">
             <P className="text-center" color="dark">
-            Your private agent coordinates a team of specialists that spin up on demand, collaborate across your world, and deliver end-to-end results.
+            The Agent layer is the coordination layer that sits on top of the Mycelium Stack, combining memory, execution, and secure communication into a single intelligence plane.
-            Many agents, one intelligence—yours.
             </P>
           </div>
         </FadeIn>