forked from emre/www_projectmycelium_com
refactor: simplify infinite-moving-cards and redesign agents page layout
- Removed getDirection callback in favor of inline style calculation for cleaner animation control - Replaced BentoSection and AgentComponents with unified AgentBento component featuring video backgrounds and updated card structure - Standardized border styling across CallToAction components (gray-700 → gray-800) for consistent visual hierarchy
This commit is contained in:
157
src/pages/agents/AgentBento.tsx
Normal file
157
src/pages/agents/AgentBento.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import { Eyebrow, H3, P } from "@/components/Texts";
|
||||
|
||||
const bentos = [
|
||||
{
|
||||
id: "core",
|
||||
eyebrow: "ARCHITECTURE",
|
||||
title: "Deterministic by Design",
|
||||
description:
|
||||
"Every workload runs exactly as declared: no drift, no hidden state, no surprises.",
|
||||
video: null,
|
||||
colSpan: "lg:col-span-3",
|
||||
rowSpan: "lg:row-span-1",
|
||||
custom: true,
|
||||
noBorder: true,
|
||||
},
|
||||
|
||||
// ✅ Updated Bento Cards
|
||||
{
|
||||
id: "fungistor",
|
||||
title: "FungiStor",
|
||||
subtitle: "Long-Term AI Memory",
|
||||
description:
|
||||
"Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.",
|
||||
video: "/videos/fungistor.mp4",
|
||||
colSpan: "lg:col-span-3",
|
||||
rowSpan: "lg:row-span-1",
|
||||
},
|
||||
{
|
||||
id: "herodb",
|
||||
title: "HeroDB",
|
||||
subtitle: "Active AI Memory",
|
||||
description:
|
||||
"Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.",
|
||||
video: "/videos/herodb.mp4",
|
||||
colSpan: "lg:col-span-3",
|
||||
rowSpan: "lg:row-span-1",
|
||||
},
|
||||
{
|
||||
id: "mos",
|
||||
title: "MOS Sandboxes",
|
||||
subtitle: "Secure Agent Workspaces",
|
||||
description:
|
||||
"Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.",
|
||||
video: "/videos/herodb.mp4",
|
||||
colSpan: "lg:col-span-3",
|
||||
rowSpan: "lg:row-span-1",
|
||||
},
|
||||
{
|
||||
id: "mesh",
|
||||
title: "Mycelium Mesh",
|
||||
subtitle: "Secure Communication Network",
|
||||
description:
|
||||
"A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.",
|
||||
video: "/videos/mesh.mp4",
|
||||
colSpan: "lg:col-span-2",
|
||||
rowSpan: "lg:row-span-1",
|
||||
},
|
||||
{
|
||||
id: "deterministic",
|
||||
title: "Deterministic Deployment",
|
||||
subtitle: "Verifiable Code Execution",
|
||||
description:
|
||||
"Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.",
|
||||
video: "/videos/deterministic.mp4",
|
||||
colSpan: "lg:col-span-2",
|
||||
rowSpan: "lg:row-span-1",
|
||||
},
|
||||
{
|
||||
id: "agent-coordination",
|
||||
title: "Agent Coordination",
|
||||
subtitle: "Sovereign Workflow Management",
|
||||
description:
|
||||
"Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.",
|
||||
video: "/videos/agent.mp4",
|
||||
colSpan: "lg:col-span-2",
|
||||
rowSpan: "lg:row-span-1",
|
||||
},
|
||||
];
|
||||
|
||||
export function AgentBento() {
|
||||
return (
|
||||
<section className="relative w-full bg-[#121212] overflow-hidden">
|
||||
<div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||
|
||||
<div className="mx-auto bg-[#111111] max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-800">
|
||||
<div className="grid grid-cols-1 gap-6 pt-6 lg:grid-cols-6 lg:grid-rows-3 pb-6">
|
||||
{bentos.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
|
||||
>
|
||||
{!card.noBorder && (
|
||||
<div
|
||||
className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] ${card.rounded}`}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
|
||||
>
|
||||
{/* ✅ VIDEO instead of animation */}
|
||||
{card.video ? (
|
||||
<div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center">
|
||||
<video
|
||||
src={card.video}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-48 w-full flex items-center justify-center bg-transparent" />
|
||||
)}
|
||||
|
||||
<div className="px-8 pt-4 pb-6">
|
||||
{card.custom ? (
|
||||
<>
|
||||
{card.eyebrow && <Eyebrow>{card.eyebrow}</Eyebrow>}
|
||||
<H3 className="mt-2 text-white">{card.title}</H3>
|
||||
<P className="mt-4 max-w-lg text-gray-200">{card.description}</P>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* ✅ NEW SUBTITLE */}
|
||||
<p className="text-sm text-cyan-400">{card.subtitle}</p>
|
||||
|
||||
<p className="mt-1 text-lg font-medium lg:text-xl tracking-tight text-white">
|
||||
{card.title}
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-200">
|
||||
{card.description}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!card.noBorder && (
|
||||
<div
|
||||
className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user