diff --git a/src/pages/agents/AgentBento.tsx b/src/pages/agents/AgentBento.tsx index 323ebd6..e254b3f 100644 --- a/src/pages/agents/AgentBento.tsx +++ b/src/pages/agents/AgentBento.tsx @@ -1,15 +1,32 @@ "use client"; import { Eyebrow, H3, P } from "@/components/Texts"; +import AgentCoordination from "./animations/AgentCoordination"; +import DeterministicExecution from "./animations/DeterministicExecution"; +import Fungistor from "./animations/Fungistor"; +import Herodb from "./animations/Herodb"; +import MOSSandboxes from "./animations/MOSSandboxes"; +import MyceliumMesh from "./animations/MyceliumMesh"; -const bentos = [ +const bentos: { + id: string; + eyebrow?: string; + title: string; + subtitle?: string; + description: string; + animation: React.ComponentType | null; + colSpan: string; + rowSpan: string; + custom?: boolean; + noBorder?: boolean; +}[] = [ { id: "core", eyebrow: "ARCHITECTURE", - title: "Deterministic by Design", + title: "Augmented Intelligence Fabric", description: - "Every workload runs exactly as declared: no drift, no hidden state, no surprises.", - video: null, + "The sovereign substrate for autonomous AI. Stateless, geo-aware, end-to-end encrypted—and verifiable from intent to execution.", + animation: null, colSpan: "lg:col-span-3", rowSpan: "lg:row-span-1", custom: true, @@ -23,7 +40,7 @@ const bentos = [ subtitle: "Long-Term AI Memory", description: "Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.", - video: "/videos/fungistor.mp4", + animation: Fungistor, colSpan: "lg:col-span-3", rowSpan: "lg:row-span-1", }, @@ -33,7 +50,7 @@ const bentos = [ subtitle: "Active AI Memory", description: "Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.", - video: "/videos/herodb.mp4", + animation: Herodb, colSpan: "lg:col-span-3", rowSpan: "lg:row-span-1", }, @@ -43,7 +60,7 @@ const bentos = [ subtitle: "Secure Agent Workspaces", description: "Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.", - video: "/videos/herodb.mp4", + animation: MOSSandboxes, colSpan: "lg:col-span-3", rowSpan: "lg:row-span-1", }, @@ -53,7 +70,7 @@ const bentos = [ subtitle: "Secure Communication Network", description: "A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.", - video: "/videos/mesh.mp4", + animation: MyceliumMesh, colSpan: "lg:col-span-2", rowSpan: "lg:row-span-1", }, @@ -63,7 +80,7 @@ const bentos = [ subtitle: "Verifiable Code Execution", description: "Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.", - video: "/videos/deterministic.mp4", + animation: DeterministicExecution, colSpan: "lg:col-span-2", rowSpan: "lg:row-span-1", }, @@ -73,7 +90,7 @@ const bentos = [ subtitle: "Sovereign Workflow Management", description: "Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.", - video: "/videos/agent.mp4", + animation: AgentCoordination, colSpan: "lg:col-span-2", rowSpan: "lg:row-span-1", }, @@ -101,17 +118,9 @@ export function AgentBento() {
- {/* ✅ VIDEO instead of animation */} - {card.video ? ( + {card.animation ? (
-
) : (
diff --git a/src/pages/agents/AgentDesign.tsx b/src/pages/agents/AgentDesign.tsx new file mode 100644 index 0000000..ab5170c --- /dev/null +++ b/src/pages/agents/AgentDesign.tsx @@ -0,0 +1,56 @@ +import { + ComputerDesktopIcon, + ArrowsRightLeftIcon, + CircleStackIcon, +} from '@heroicons/react/24/solid' + +const benefits = [ + { + id: 1, + title: 'Each agent operates entirely inside your environment', + icon: ComputerDesktopIcon, + }, + { + id: 2, + title: 'They communicate peer-to-peer across trusted nodes', + icon: ArrowsRightLeftIcon, + }, + { + id: 3, + title: 'They access data locally without exposing it to external providers', + icon: CircleStackIcon, + }, +] + +export function AgentDesign() { + return ( +
+ + {/* ✅ Top horizontal line with spacing */} +
+
+ + {/* ✅ Main content */} +
+
+ {benefits.map((item) => ( +
+ +

+ {item.title} +

+
+ ))} +
+
+ + {/* ✅ Bottom horizontal line with spacing */} +
+
+
+ + ) +} diff --git a/src/pages/agents/AgentHeroAlt.tsx b/src/pages/agents/AgentHeroAlt.tsx index cde60ee..7abe8ca 100644 --- a/src/pages/agents/AgentHeroAlt.tsx +++ b/src/pages/agents/AgentHeroAlt.tsx @@ -14,19 +14,18 @@ export function AgentHeroAlt() { {/* Inner padding */}
- MYCELIUM AGENTS + MYCELIUM AGENTS - COMING IN 2026

- Sovereign AI Agents, Coming Soon. + Private, Sovereign and Distributed AI You Control

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

-

- 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. + Mycelium Agents let you deploy and run intelligent systems on your own infrastructure. +Private, local, and autonomous by design, they give you everything you need to build, host, and connect AI agents without relying on centralized clouds.

+
+ + +
+
+ ) : ( + /* REGULAR CARD */ +
+ {item.icon && ( +
+ +
+ )} + +

+ {item.title} +

+ +

+ {item.description} +

+
+ )} + + ))} + +
+ {/* ✅ Bottom horizontal line with spacing */} +
+
+ + ); +} diff --git a/src/pages/agents/AgentsPage.tsx b/src/pages/agents/AgentsPage.tsx index d025d38..23bf87b 100644 --- a/src/pages/agents/AgentsPage.tsx +++ b/src/pages/agents/AgentsPage.tsx @@ -1,10 +1,11 @@ import { AnimatedSection } from '../../components/AnimatedSection' import { DeploySection } from './DeploySection' -import { GallerySection } from './GallerySection' import { Companies } from './Companies' import { AgentBento } from './AgentBento' import { AgentHeroAlt } from './AgentHeroAlt' import { CallToAction } from './CallToAction' +import { AgentUsecase } from './AgentUseCase' +import { AgentDesign } from './AgentDesign' export default function AgentsPage() { return ( @@ -22,13 +23,17 @@ export default function AgentsPage() { - + + + + + diff --git a/src/pages/agents/CallToAction.tsx b/src/pages/agents/CallToAction.tsx index 5c9d894..113387f 100644 --- a/src/pages/agents/CallToAction.tsx +++ b/src/pages/agents/CallToAction.tsx @@ -18,11 +18,14 @@ export function CallToAction() {

- Start Building the Future of Sovereign AI + Start with Mycelium Today

- Use today’s components — models, storage, compute, mesh — and step into agents as they arrive. + The Agent Framework launches in H1 2026, but the foundation is ready now. +

+

+ Use today’s components —models, storage, compute, and network— to deploy workloads, connect nodes, and prepare for the next generation of distributed AI.

{/* ✅ Two cards, stacked center with spacing */} diff --git a/src/pages/agents/Companies.tsx b/src/pages/agents/Companies.tsx index 7858a6f..d4ce70d 100644 --- a/src/pages/agents/Companies.tsx +++ b/src/pages/agents/Companies.tsx @@ -37,7 +37,7 @@ const row2 = logos.slice(6); export function Companies() { return ( -
+
{/* Logos grid */}
diff --git a/src/pages/agents/animations/AgentCoordination.tsx b/src/pages/agents/animations/AgentCoordination.tsx new file mode 100644 index 0000000..b1df614 --- /dev/null +++ b/src/pages/agents/animations/AgentCoordination.tsx @@ -0,0 +1,264 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; + bg?: string; +}; + +const W = 760; +const H = 420; + +const AgentNode = ({ + x, + y, + r = 12, + accent = "#00b8db", + pulse = false, + delay = 0, +}: { + x: number; + y: number; + r?: number; + accent?: string; + pulse?: boolean; + delay?: number; +}) => { + const prefers = useReducedMotion(); + return ( + <> + + + + + ); +}; + + +const Packet = ({ + path, + delay = 0, + accent = "#00b8db", + duration = 2.2, + reverse = false, +}: { + path: string; + delay?: number; + accent?: string; + duration?: number; + reverse?: boolean; +}) => { + const prefers = useReducedMotion(); + return ( + + ); +}; + + +export default function AgentCoordination({ + className, + accent = "#00b8db", + bg = "#0a0a0a", +}: Props) { + const center = { x: 380, y: 210 }; + + // Specialist agents placed in a controlled orbit + const agents = [ + { x: 200, y: 120 }, + { x: 560, y: 120 }, + { x: 620, y: 260 }, + { x: 500, y: 330 }, + { x: 260, y: 330 }, + { x: 140, y: 260 }, + ]; + + const paths = agents.map( + (a) => `M ${center.x} ${center.y} Q ${(center.x + a.x) / 2} ${(center.y + a.y) / 2 - 40} ${a.x} ${a.y}` + ); + + return ( + + ); +} diff --git a/src/pages/agents/animations/DeterministicExecution.tsx b/src/pages/agents/animations/DeterministicExecution.tsx new file mode 100644 index 0000000..a8b9da7 --- /dev/null +++ b/src/pages/agents/animations/DeterministicExecution.tsx @@ -0,0 +1,263 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; + bg?: string; +}; + +const W = 760; +const H = 420; + +const PulseCircle = ({ + x, + y, + r, + accent, + delay = 0, +}: { + x: number; + y: number; + r: number; + accent: string; + delay?: number; +}) => { + const prefers = useReducedMotion(); + return ( + + ); +}; + +const Packet = ({ + path, + delay = 0, + duration = 2, + accent = "#00b8db", +}: { + path: string; + delay?: number; + duration?: number; + accent?: string; +}) => { + const prefers = useReducedMotion(); + return ( + + ); +}; + +export default function DeterministicExecution({ + className, + accent = "#00b8db", + bg = "#0a0a0a", +}: Props) { + const left = { x: 200, y: 210 }; + const center = { x: 380, y: 210 }; + const right = { x: 560, y: 210 }; + + const leftToCenter = `M ${left.x} ${left.y} L ${center.x} ${center.y}`; + const centerToRight = `M ${center.x} ${center.y} L ${right.x} ${right.y}`; + + return ( + + ); +} diff --git a/src/pages/agents/animations/Fungistor.tsx b/src/pages/agents/animations/Fungistor.tsx new file mode 100644 index 0000000..8abacbf --- /dev/null +++ b/src/pages/agents/animations/Fungistor.tsx @@ -0,0 +1,238 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; + bg?: string; +}; + +const W = 760; +const H = 420; + +const Node = ({ + x, + y, + r = 10, + accent = "#00b8db", + pulse = false, + delay = 0, +}: { + x: number; + y: number; + r?: number; + accent?: string; + pulse?: boolean; + delay?: number; +}) => { + const prefers = useReducedMotion(); + return ( + <> + {/* outer faint ring */} + + {/* glowing shard node */} + + + ); +}; + +const Shard = ({ + path, + delay = 0, + accent = "#00b8db", + duration = 2, +}: { + path: string; + delay?: number; + accent?: string; + duration?: number; +}) => { + const prefers = useReducedMotion(); + return ( + + ); +}; + +export default function FungiStor({ + className, + accent = "#00b8db", + bg = "#0a0a0a", +}: Props) { + const center = { x: 380, y: 210 }; + const shardNodes = [ + { x: 160, y: 100 }, + { x: 260, y: 70 }, + { x: 580, y: 100 }, + { x: 620, y: 250 }, + { x: 500, y: 330 }, + { x: 240, y: 320 }, + ]; + + // outgoing shard paths + const paths = shardNodes.map( + (n) => `M ${center.x} ${center.y} Q ${(n.x + center.x) / 2} ${(n.y + center.y) / 2 - 40} ${n.x} ${n.y}` + ); + + return ( + + ); +} diff --git a/src/pages/agents/animations/Herodb.tsx b/src/pages/agents/animations/Herodb.tsx new file mode 100644 index 0000000..0da674c --- /dev/null +++ b/src/pages/agents/animations/Herodb.tsx @@ -0,0 +1,286 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; + bg?: string; +}; + +const W = 760; +const H = 420; + +const Node = ({ + x, + y, + r = 12, + accent = "#00b8db", + pulse = false, + delay = 0, + type = "dot", +}: { + x: number; + y: number; + r?: number; + accent?: string; + pulse?: boolean; + delay?: number; + type?: "dot" | "text" | "image" | "audio"; +}) => { + const prefers = useReducedMotion(); + + return ( + <> + {/* faint ring */} + + + {/* inner icon shape to represent modality */} + {type === "text" && ( + + )} + {type === "image" && ( + + )} + {type === "audio" && ( + + )} + + {/* standard pulsing circle fallback */} + {type === "dot" && ( + + )} + + ); +}; + +// inward pulse particle +const Packet = ({ + path, + delay = 0, + accent = "#00b8db", + duration = 1.8, +}: { + path: string; + delay?: number; + accent?: string; + duration?: number; +}) => { + const prefers = useReducedMotion(); + return ( + + ); +}; + +export default function Herodb({ + className, + accent = "#00b8db", + bg = "#0a0a0a", +}: Props) { + const center = { x: 380, y: 210 }; + + const shardNodes = [ + { x: 160, y: 100, type: "text" }, + { x: 580, y: 120, type: "image" }, + { x: 620, y: 280, type: "audio" }, + { x: 420, y: 330, type: "text" }, + { x: 240, y: 320, type: "image" }, + { x: 150, y: 220, type: "dot" }, + ]; + + const paths = shardNodes.map( + (n) => + `M ${n.x} ${n.y} Q ${(n.x + center.x) / 2} ${(n.y + center.y) / 2 - 40} ${center.x} ${center.y}` + ); + + return ( + + ); +} diff --git a/src/pages/agents/animations/MOSSandboxes.tsx b/src/pages/agents/animations/MOSSandboxes.tsx new file mode 100644 index 0000000..1fe0bc2 --- /dev/null +++ b/src/pages/agents/animations/MOSSandboxes.tsx @@ -0,0 +1,231 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; + bg?: string; +}; + +const W = 760; +const H = 420; + +const PulseRing = ({ + x, + y, + accent, + delay = 0, +}: { + x: number; + y: number; + accent: string; + delay?: number; +}) => { + const prefers = useReducedMotion(); + return ( + + ); +}; + +const Egress = ({ + from, + to, + delay = 0, + accent = "#00b8db", +}: { + from: { x: number; y: number }; + to: { x: number; y: number }; + delay?: number; + accent?: string; +}) => { + const path = `M ${from.x} ${from.y} L ${to.x} ${to.y}`; + const prefers = useReducedMotion(); + + return ( + <> + + + + + ); +}; + +export default function MOSSandboxes({ + className, + accent = "#00b8db", + bg = "#0a0a0a", +}: Props) { + const center = { x: 380, y: 210 }; + + // scoped egress ports + const egress = [ + { from: center, to: { x: 520, y: 140 } }, + { from: center, to: { x: 520, y: 280 } }, + { from: center, to: { x: 260, y: 320 } }, + ]; + + return ( + + ); +} diff --git a/src/pages/agents/animations/MyceliumMesh.tsx b/src/pages/agents/animations/MyceliumMesh.tsx new file mode 100644 index 0000000..4feba51 --- /dev/null +++ b/src/pages/agents/animations/MyceliumMesh.tsx @@ -0,0 +1,231 @@ +"use client"; + +import { motion, useReducedMotion } from "framer-motion"; +import clsx from "clsx"; + +type Props = { + className?: string; + accent?: string; + bg?: string; +}; + +const W = 760; +const H = 420; + +const Node = ({ + x, + y, + r = 12, + accent = "#00b8db", + pulse = false, + delay = 0, +}: { + x: number; + y: number; + r?: number; + accent?: string; + pulse?: boolean; + delay?: number; +}) => { + const prefers = useReducedMotion(); + + return ( + <> + {/* Outer ring */} + + + {/* Core node */} + + + ); +}; + +/* Animated encrypted packet */ +const Packet = ({ + path, + delay = 0, + accent = "#00b8db", + duration = 2.4, +}: { + path: string; + delay?: number; + accent?: string; + duration?: number; +}) => { + const prefers = useReducedMotion(); + + return ( + + ); +}; + +export default function MyceliumMesh({ + className, + accent = "#00b8db", + bg = "#0a0a0a", +}: Props) { + const center = { x: 380, y: 210 }; + + // Peer nodes forming a mesh + const nodes = [ + { x: 180, y: 120 }, + { x: 580, y: 100 }, + { x: 620, y: 260 }, + { x: 460, y: 330 }, + { x: 240, y: 320 }, + { x: 140, y: 240 }, + ]; + + // Multi-path routing (3 routes to illustrate "self-healing") + const routes = [ + [nodes[0], nodes[1], nodes[2]], // path A→B→C + [nodes[0], nodes[5], nodes[4], nodes[3]], // path A→F→E→D + [nodes[1], nodes[4], nodes[3]], // path B→E→D + ]; + + // Convert list of nodes → SVG path + const toPath = (list: any[]) => + list + .map((p: any, i: number) => + i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}` + ) + .join(" "); + + return ( + + ); +} diff --git a/src/pages/home/CallToAction.tsx b/src/pages/home/CallToAction.tsx index 9de4a67..a529ba2 100644 --- a/src/pages/home/CallToAction.tsx +++ b/src/pages/home/CallToAction.tsx @@ -65,6 +65,10 @@ export function CallToAction() { > Join Early Cloud Access + +
diff --git a/src/pages/pods/PodsComing.tsx b/src/pages/pods/PodsComing.tsx index 1316527..0107f13 100644 --- a/src/pages/pods/PodsComing.tsx +++ b/src/pages/pods/PodsComing.tsx @@ -4,7 +4,6 @@ import { UsersIcon, CpuChipIcon, } from '@heroicons/react/24/solid' -import { Button } from '@/components/Button' import { Eyebrow, H4, P } from '@/components/Texts' export function PodsComing() { diff --git a/src/pages/pods/PodsFeatures.tsx b/src/pages/pods/PodsFeatures.tsx index 35e61fe..a5d99d6 100644 --- a/src/pages/pods/PodsFeatures.tsx +++ b/src/pages/pods/PodsFeatures.tsx @@ -1,7 +1,7 @@ "use client"; import { Container } from "@/components/Container"; -import { CP, Small } from "@/components/Texts"; +import { Small } from "@/components/Texts"; const useCases = [ { diff --git a/src/pages/pods/PodsPage.tsx b/src/pages/pods/PodsPage.tsx index a1489ce..53de015 100644 --- a/src/pages/pods/PodsPage.tsx +++ b/src/pages/pods/PodsPage.tsx @@ -5,7 +5,6 @@ import { PodsFeatures } from './PodsFeatures'; import { PodsDesign } from './PodsDesign'; import { PodsBenefits } from './PodsBenefits'; import { PodsComing } from './PodsComing'; -import { PodsPricing } from './PodsPricing'; import { CallToAction } from './CallToAction'; const PodsPage = () => { diff --git a/src/pages/pods/PodsPricing.tsx b/src/pages/pods/PodsPricing.tsx index 0b6893f..2f6cf3d 100644 --- a/src/pages/pods/PodsPricing.tsx +++ b/src/pages/pods/PodsPricing.tsx @@ -1,5 +1,5 @@ import { CheckIcon } from "@heroicons/react/20/solid"; -import { Eyebrow, H3, H4 } from "@/components/Texts"; +import { Eyebrow, H3 } from "@/components/Texts"; const tiers = [ {