forked from emre/www_projectmycelium_com
refactor: convert agent bento cards from videos to React animation components
- Replaced video paths with imported animation components (Fungistor, Herodb, MOSSandboxes, etc.) - Added new AgentDesign and AgentUseCase sections to agents page - Updated hero copy to emphasize private, sovereign AI and 2026 timeline - Reorganized page layout with new sections between existing components
This commit is contained in:
147
src/pages/agents/AgentUseCase.tsx
Normal file
147
src/pages/agents/AgentUseCase.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import { Eyebrow, SectionHeader, P } from "@/components/Texts";
|
||||
import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
|
||||
|
||||
import {
|
||||
CpuChipIcon,
|
||||
GlobeAltIcon,
|
||||
LockClosedIcon,
|
||||
ArrowPathIcon,
|
||||
ShieldCheckIcon,
|
||||
} from "@heroicons/react/24/solid";
|
||||
|
||||
const networkUseCases = [
|
||||
{
|
||||
isIntro: true,
|
||||
eyebrow: "WHAT IT ENABLES",
|
||||
title: "What It Enables",
|
||||
description:
|
||||
"The framework gives you full control over where agents live, how they connect, and what data they use.",
|
||||
},
|
||||
{
|
||||
title: "Run agents on your own hardware",
|
||||
description:
|
||||
"Deploy AI processes on laptops, homelabs, edge nodes, or full clusters — no cloud dependency.",
|
||||
icon: CpuChipIcon,
|
||||
},
|
||||
{
|
||||
title: "Connect them over the secure Mycelium network",
|
||||
description:
|
||||
"Agents communicate privately across homes, clouds, countries, and environments in one address space.",
|
||||
icon: GlobeAltIcon,
|
||||
},
|
||||
{
|
||||
title: "Keep data and memory private by default",
|
||||
description:
|
||||
"Your datasets, tools, prompts, embeddings, and memory stay local unless you choose otherwise.",
|
||||
icon: LockClosedIcon,
|
||||
},
|
||||
{
|
||||
title: "Build workflows across cloud + edge",
|
||||
description:
|
||||
"Orchestrate multi-node jobs, pipelines, and real-time systems that live anywhere in your infrastructure.",
|
||||
icon: ArrowPathIcon,
|
||||
},
|
||||
{
|
||||
title: "Operate securely in regulated contexts",
|
||||
description:
|
||||
"Run agents in sectors requiring strict data residency, verified identity, and controlled connectivity.",
|
||||
icon: ShieldCheckIcon,
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
<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>
|
||||
<SectionHeader
|
||||
as="h3"
|
||||
className="mt-4 text-gray-900 text-xl lg:text-2xl"
|
||||
>
|
||||
{item.title}
|
||||
</SectionHeader>
|
||||
<P className="mt-4 text-gray-600 text-sm lg:text-base">
|
||||
{item.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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<IoArrowForwardOutline className="text-gray-600" size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* REGULAR CARD */
|
||||
<div className="flex flex-col h-full">
|
||||
{item.icon && (
|
||||
<div className="h-12 w-12 flex items-center justify-center rounded-xl bg-gray-100 mb-6">
|
||||
<item.icon className="h-6 w-6 text-cyan-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-lg font-semibold text-gray-900">
|
||||
{item.title}
|
||||
</p>
|
||||
|
||||
<p className="mt-2 text-gray-600 leading-snug">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<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>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user