forked from emre/www_projectmycelium_com
sasha-astiadi
618e1b0f5b
- Replaced em dashes with commas in AgentPro descriptions for "Local Execution" and "Private Data Access" - Changed em dash to comma in CloudPros description for better readability - Removed em dash in NetworkUsecases "Service-to-Service Networking" description - Added bottom spacing elements to NodeBenefits with border styling and padding
91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
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>
|
||
);
|
||
}
|