forked from emre/www_projectmycelium_com
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
This commit is contained in:
@@ -12,7 +12,7 @@ export function AgentHeroAlt() {
|
||||
style={{ backgroundImage: "url('/images/agents.webp')", backgroundSize: "contain" }}
|
||||
>
|
||||
{/* Inner padding */}
|
||||
<div className="px-6 py-16 lg:py-16">
|
||||
<div className="px-6 py-16 lg:py-24">
|
||||
<div className="max-w-2xl lg:pl-6">
|
||||
<Eyebrow>MYCELIUM AGENTS - COMING IN 2026</Eyebrow>
|
||||
<H3 as="h1" className="mt-4">
|
||||
|
||||
90
src/pages/agents/AgentPro.tsx
Normal file
90
src/pages/agents/AgentPro.tsx
Normal file
@@ -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 (
|
||||
<section className="relative w-full bg-[#FDFDFD] overflow-hidden">
|
||||
{/* Top spacing line */}
|
||||
<div className="max-w-7xl bg-[#FDFDFD] mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-100" />
|
||||
|
||||
{/* Intro Block */}
|
||||
<div className="bg-[#FDFDFD] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
|
||||
<div className="px-8 py-12 max-w-4xl mx-auto flex flex-col items-center justify-center min-h-[220px] text-center">
|
||||
<Eyebrow className="uppercase tracking-[0.16em] text-cyan-600">
|
||||
Advantages
|
||||
</Eyebrow>
|
||||
|
||||
<H3 className="mt-4 text-black">
|
||||
Why It’s Different
|
||||
</H3>
|
||||
|
||||
<P className="mt-4 text-gray-700 text-base leading-relaxed">
|
||||
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.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div className="grid lg:grid-cols-4">
|
||||
{highlights.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="group relative overflow-hidden border border-gray-100 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
|
||||
>
|
||||
{/* Glow */}
|
||||
<div className="absolute inset-0 bg-linear-to-br from-cyan-200/0 via-cyan-100/20 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
|
||||
|
||||
<div className="relative">
|
||||
<Small className="text-xs uppercase tracking-[0.16em] text-cyan-600">
|
||||
{item.label}
|
||||
</Small>
|
||||
|
||||
<h3 className="mt-4 text-lg font-semibold leading-tight text-black">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
<p className="mt-4 text-sm leading-relaxed text-gray-600">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom spacing */}
|
||||
<div className="w-full border-b border-gray-100 bg-[#FDFDFD]" />
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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<HTMLUListElement>(null);
|
||||
|
||||
const scrollLeft = () =>
|
||||
sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
|
||||
|
||||
const scrollRight = () =>
|
||||
sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
|
||||
|
||||
return (
|
||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
{/* Top horizontal spacing line */}
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-100" />
|
||||
|
||||
<div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-slate-200 bg-white overflow-hidden">
|
||||
<ul
|
||||
ref={sliderRef}
|
||||
className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar"
|
||||
>
|
||||
{networkUseCases.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%]
|
||||
border border-slate-200 px-10 py-12 relative
|
||||
${item.isIntro ? "bg-gray-50/80" : "bg-white"}`}
|
||||
>
|
||||
{/* INTRO CARD */}
|
||||
{item.isIntro ? (
|
||||
<div className="flex flex-col justify-between h-full">
|
||||
<div>
|
||||
<Eyebrow>{item.eyebrow}</Eyebrow>
|
||||
{/* Main framed section */}
|
||||
<div className="border border-t-0 border-b-0 border-gray-100 bg-white">
|
||||
<div className="mx-auto max-w-4xl sm:text-center py-12">
|
||||
{/* Intro block (from isIntro item) */}
|
||||
{networkUseCases[0].isIntro && (
|
||||
<>
|
||||
<Eyebrow className="text-cyan-600">{networkUseCases[0].eyebrow}</Eyebrow>
|
||||
<SectionHeader
|
||||
as="h3"
|
||||
className="mt-4 text-gray-900 text-xl lg:text-2xl"
|
||||
className="mt-4 text-gray-900 text-3xl lg:text-4xl"
|
||||
>
|
||||
{item.title}
|
||||
{networkUseCases[0].title}
|
||||
</SectionHeader>
|
||||
<P className="mt-4 text-gray-600 text-sm lg:text-base">
|
||||
{item.description}
|
||||
<P className="mt-6 text-lg text-gray-600">
|
||||
{networkUseCases[0].description}
|
||||
</P>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* slider buttons */}
|
||||
<div className="flex items-center gap-x-4 mt-6">
|
||||
<button
|
||||
onClick={scrollLeft}
|
||||
className="h-8 w-8 flex items-center justify-center
|
||||
border border-slate-300 rounded-md
|
||||
hover:border-cyan-500 transition-colors"
|
||||
{/* Grid of features (excluding intro) */}
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto mt-6 max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-y-10 px-6 pb-16"
|
||||
>
|
||||
<IoArrowBackOutline className="text-gray-600" size={16} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={scrollRight}
|
||||
className="h-8 w-8 flex items-center justify-center
|
||||
border border-slate-300 rounded-md
|
||||
hover:border-cyan-500 transition-colors"
|
||||
{networkUseCases.slice(1).map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
|
||||
>
|
||||
<IoArrowForwardOutline className="text-gray-600" size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* REGULAR CARD */
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Icon */}
|
||||
{item.icon && (
|
||||
<div className="h-12 w-12 flex items-center justify-center rounded-xl bg-gray-100 mb-6">
|
||||
<div className="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-100">
|
||||
<item.icon className="h-6 w-6 text-cyan-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-lg font-semibold text-gray-900">
|
||||
{/* Title */}
|
||||
<p className="mt-6 text-lg font-semibold text-gray-900">
|
||||
{item.title}
|
||||
</p>
|
||||
|
||||
<p className="mt-2 text-gray-600 leading-snug">
|
||||
{/* Description */}
|
||||
<p className="mt-2 text-gray-600 text-sm leading-snug">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
|
||||
{/* Bottom horizontal line */}
|
||||
<div className="w-full border-b border-gray-100" />
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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() {
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<AgentDesign />
|
||||
<AgentPro />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
|
||||
@@ -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 (
|
||||
<section className="relative w-full bg-[#FDFDFD] overflow-hidden">
|
||||
{/* Top spacing line */}
|
||||
<div className="max-w-7xl bg-[#FDFDFD] mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-100" />
|
||||
|
||||
{/* Intro Block */}
|
||||
<div className="bg-[#FDFDFD] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
|
||||
<div className="px-8 py-12 max-w-3xl">
|
||||
<Small className="uppercase tracking-[0.16em] text-cyan-600">
|
||||
Agent Advantage
|
||||
</Small>
|
||||
|
||||
<h3 className="mt-4 text-2xl lg:text-3xl font-semibold text-black">
|
||||
Why It’s Different
|
||||
</h3>
|
||||
|
||||
<p className="mt-4 text-gray-700 text-base leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div className="grid lg:grid-cols-4">
|
||||
{highlights.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="group relative overflow-hidden border border-gray-100 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
|
||||
>
|
||||
{/* Hover glow */}
|
||||
{/* Glow */}
|
||||
<div className="absolute inset-0 bg-linear-to-br from-cyan-200/0 via-cyan-100/20 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
|
||||
|
||||
<div className="relative">
|
||||
@@ -62,8 +81,9 @@ export function CloudPros() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom spacing */}
|
||||
<div className="w-full border-b border-gray-100 bg-[#FDFDFD]" />
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user