forked from emre/www_projectmycelium_com
sasha-astiadi
3ab559aa84
- Fixed CloudPros export name from AgentPro to CloudPros - Removed unused H1, H4, and H3Icon imports from HomeAurora - Removed unused H3, P, and Eyebrow imports from NetworkDownload - Changed motion.H3 and motion.P to lowercase motion.h3 and motion.p in NetworkDownload - Removed unused Small import from PodsFeatures - Removed unused IconClockHour5 import from PodsHow
90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import { Small } 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 CloudPros() {
|
||
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"
|
||
>
|
||
{/* 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>
|
||
);
|
||
}
|