From 6ff539b3fc9ab7ba2f17dc58737dd5c9d6b75da5 Mon Sep 17 00:00:00 2001 From: sasha-astiadi Date: Mon, 17 Nov 2025 14:12:17 +0100 Subject: [PATCH] feat: add AgentPro section and refactor AgentUsecase layout - Created AgentPro component highlighting local execution, mesh connectivity, private data access, and portability advantages - Replaced horizontal scrolling carousel in AgentUsecase with responsive grid layout - Added "Blend local + remote intelligence" use case to AgentUsecase - Removed slider navigation buttons and replaced with static grid display - Replaced AgentDesign with AgentPro in AgentsPage component order - Increased hero section padding on --- src/pages/agents/AgentHeroAlt.tsx | 2 +- src/pages/agents/AgentPro.tsx | 90 +++++++++++++++++++++ src/pages/agents/AgentUseCase.tsx | 130 ++++++++++++------------------ src/pages/agents/AgentsPage.tsx | 5 +- src/pages/cloud/CloudPros.tsx | 54 +++++++++---- 5 files changed, 183 insertions(+), 98 deletions(-) create mode 100644 src/pages/agents/AgentPro.tsx diff --git a/src/pages/agents/AgentHeroAlt.tsx b/src/pages/agents/AgentHeroAlt.tsx index 0691203..4786fea 100644 --- a/src/pages/agents/AgentHeroAlt.tsx +++ b/src/pages/agents/AgentHeroAlt.tsx @@ -12,7 +12,7 @@ export function AgentHeroAlt() { style={{ backgroundImage: "url('/images/agents.webp')", backgroundSize: "contain" }} > {/* Inner padding */} -
+
MYCELIUM AGENTS - COMING IN 2026

diff --git a/src/pages/agents/AgentPro.tsx b/src/pages/agents/AgentPro.tsx new file mode 100644 index 0000000..4a6c605 --- /dev/null +++ b/src/pages/agents/AgentPro.tsx @@ -0,0 +1,90 @@ +import { Small } from "@/components/Texts"; +import { Eyebrow, H3, P } from "@/components/Texts"; + +const highlights = [ + { + label: "Local Execution", + title: "Agents run entirely inside your environment.", + description: + "Models, logic, and memory stay within your own trusted hardware—never behind third-party APIs.", + }, + { + label: "Mesh Connectivity", + title: "They communicate peer-to-peer across trusted nodes.", + description: + "Agents form direct encrypted paths between environments, without relays or central servers.", + }, + { + label: "Private Data Access", + title: "They use your data without sending it elsewhere.", + description: + "Your datasets, embeddings, and context never leave your boundaries—processing stays local.", + }, + { + label: "Portability", + title: "They move with you, not with a cloud provider.", + description: + "Agents follow your devices, networks, and workflows, remaining sovereign across every location.", + }, +]; + +export function AgentPro() { + return ( +
+ {/* Top spacing line */} +
+
+ + {/* Intro Block */} +
+
+ + Advantages + + +

+ Why It’s Different +

+ +

+ Most AI systems run on centralized clouds, where the models, data, and + logic operate behind third-party APIs. Mycelium Agents flip that + architecture, it runs entirely inside your environment so control, + privacy, and autonomy stay with you. +

+
+ + {/* Grid */} +
+ {highlights.map((item) => ( +
+ {/* Glow */} +
+ +
+ + {item.label} + + +

+ {item.title} +

+ +

+ {item.description} +

+
+
+ ))} +
+
+ + {/* Bottom spacing */} +
+
+
+ ); +} diff --git a/src/pages/agents/AgentUseCase.tsx b/src/pages/agents/AgentUseCase.tsx index 6db9cc6..75d2b92 100644 --- a/src/pages/agents/AgentUseCase.tsx +++ b/src/pages/agents/AgentUseCase.tsx @@ -1,9 +1,6 @@ "use client"; -import { useRef } from "react"; import { Eyebrow, SectionHeader, P } from "@/components/Texts"; -import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5"; - import { CpuChipIcon, GlobeAltIcon, @@ -50,98 +47,75 @@ const networkUseCases = [ "Run agents in sectors requiring strict data residency, verified identity, and controlled connectivity.", icon: ShieldCheckIcon, }, + { + title: "Blend local + remote intelligence", + description: + "Let lightweight agents run locally while offloading heavy tasks to trusted nodes, maintaining privacy and performance balance.", + icon: CpuChipIcon, + }, ]; export function AgentUsecase() { - const sliderRef = useRef(null); - - const scrollLeft = () => - sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" }); - - const scrollRight = () => - sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" }); - return (
- - {/* ✅ Top horizontal line with spacing */} -
+ {/* Top horizontal spacing line */} +
- -
+ + {/* Main framed section */} +
+
+ {/* Intro block (from isIntro item) */} + {networkUseCases[0].isIntro && ( + <> + {networkUseCases[0].eyebrow} + + {networkUseCases[0].title} + +

+ {networkUseCases[0].description} +

+ + )} +
+ + {/* Grid of features (excluding intro) */}
    - {networkUseCases.map((item, idx) => ( + {networkUseCases.slice(1).map((item, idx) => (
  • - {/* INTRO CARD */} - {item.isIntro ? ( -
    -
    - {item.eyebrow} - - {item.title} - -

    - {item.description} -

    -
    - - {/* slider buttons */} -
    - - - -
    -
    - ) : ( - /* REGULAR CARD */ -
    - {item.icon && ( -
    - -
    - )} - -

    - {item.title} -

    - -

    - {item.description} -

    + {/* Icon */} + {item.icon && ( +
    +
    )} + + {/* Title */} +

    + {item.title} +

    + + {/* Description */} +

    + {item.description} +

    • ))}
- {/* ✅ Bottom horizontal line with spacing */} -
-
+ + {/* Bottom horizontal line */} +
+
); } diff --git a/src/pages/agents/AgentsPage.tsx b/src/pages/agents/AgentsPage.tsx index 23bf87b..bf5adbb 100644 --- a/src/pages/agents/AgentsPage.tsx +++ b/src/pages/agents/AgentsPage.tsx @@ -5,7 +5,8 @@ import { AgentBento } from './AgentBento' import { AgentHeroAlt } from './AgentHeroAlt' import { CallToAction } from './CallToAction' import { AgentUsecase } from './AgentUseCase' -import { AgentDesign } from './AgentDesign' + +import { AgentPro } from './AgentPro' export default function AgentsPage() { return ( @@ -31,7 +32,7 @@ export default function AgentsPage() { - + diff --git a/src/pages/cloud/CloudPros.tsx b/src/pages/cloud/CloudPros.tsx index e0178d2..269975d 100644 --- a/src/pages/cloud/CloudPros.tsx +++ b/src/pages/cloud/CloudPros.tsx @@ -1,47 +1,66 @@ -import { Small } from '@/components/Texts' +import { Small } from "@/components/Texts"; const highlights = [ { - label: 'Platform Architecture', - title: 'Unified compute, storage & orchestration.', + label: "Local Execution", + title: "Agents run entirely inside your environment.", description: - 'One unified platform for compute, storage, and orchestration.', + "Models, logic, and memory stay within your own trusted hardware—never behind third-party APIs.", }, { - label: 'Reliability', - title: 'Consistent performance everywhere.', + label: "Mesh Connectivity", + title: "They communicate peer-to-peer across trusted nodes.", description: - 'Runs reliably across distributed environments.', + "Agents form direct encrypted paths between environments, without relays or central servers.", }, { - label: 'Compatibility', - title: 'Works with your existing stack.', + label: "Private Data Access", + title: "They use your data without sending it elsewhere.", description: - 'Works with your existing tools and workflows.', + "Your datasets, embeddings, and context never leave your boundaries—processing stays local.", }, { - label: 'Scalability', - title: 'Grows with your needs.', + label: "Portability", + title: "They move with you, not with a cloud provider.", description: - 'Scales from small projects to full environments.', + "Agents follow your devices, networks, and workflows, remaining sovereign across every location.", }, -] +]; -export function CloudPros() { +export function AgentPro() { return (
{/* Top spacing line */}
+ {/* Intro Block */}
+
+ + Agent Advantage + + +

+ Why It’s Different +

+ +

+ Most AI systems run on centralized clouds, where the models, data, and + logic operate behind third-party APIs. Mycelium Agents flip that + architecture—running entirely inside your environment so control, + privacy, and autonomy stay with you. +

+
+ + {/* Grid */}
{highlights.map((item) => (
- {/* Hover glow */} + {/* Glow */}
@@ -62,8 +81,9 @@ export function CloudPros() {
+ {/* Bottom spacing */}
- ) + ); }