ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

feat: add agent components section and update agents page content

Browse Source 
- 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
This commit is contained in:
sasha-astiadi
2025-11-05 13:02:43 +01:00
parent aaf02d0a7c
commit 560ec7dcd0
6 changed files with 159 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/pages/agents/AgentComponents.tsx Normal file
View File

@@ -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>
)
}

13
src/pages/agents/AgentHeroAlt.tsx
View File

@@ -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>

10
src/pages/agents/AgentsPage.tsx
View File

@@ -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>
)
}

59
src/pages/agents/CallToAction.tsx Normal file
View File

@@ -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>
)
}

6
src/pages/agents/DeploySection.tsx
View File

@@ -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

5
src/pages/agents/GallerySection.tsx
View File

@@ -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.
Many agents, one intelligence—yours.
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.
</P>
</div>
</FadeIn>