forked from emre/www_projectmycelium_com
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
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 (
|
|
<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 border-l border-r border-gray-100" />
|
|
|
|
{/* ✅ Main content */}
|
|
<div className="mx-auto max-w-7xl border-gray-100">
|
|
<dl className="grid grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-3 text-center ">
|
|
{benefits.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="flex flex-col items-center bg-white dark:bg-black/40 py-10 px-4 border border-gray-100 dark:border-gray-800 lg:border-t-0 lg:border-b-0"
|
|
>
|
|
<item.icon className="h-10 w-10 text-cyan-500 mb-4" />
|
|
<h3 className="text-base font-medium text-black dark:text-white max-w-xs">
|
|
{item.title}
|
|
</h3>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
|
|
{/* ✅ Bottom horizontal line with spacing */}
|
|
<div className="w-full border 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>
|
|
|
|
)
|
|
}
|