ok
This commit is contained in:
@@ -1,60 +1,107 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import React from 'react'
|
||||
import { CT, CP } from '@/components/Texts'
|
||||
|
||||
interface Review {
|
||||
title: string
|
||||
body: string
|
||||
}
|
||||
|
||||
const reviews: Review[] = [
|
||||
{ title: 'FungiStor: Long-Term AI Memory', body: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.' },
|
||||
{ title: 'HeroDB: Active AI Memory', body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.' },
|
||||
{ title: 'MOS Sandboxes: Secure Agent Workspaces', body: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.' },
|
||||
{ title: 'Mycelium Mesh: Secure Communication Network', body: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.' },
|
||||
{ title: 'Deterministic Deployment: Verifiable Code Execution', body: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.' },
|
||||
{ title: 'Agent Coordination: Sovereign Workflow Management', body: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.' },
|
||||
{ title: 'Universal Interface Layer: AI Service Gateway', body: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.' },
|
||||
{ title: 'Semantic Index & Search: Navigable Knowledge Fabric', body: 'Transforms data chaos into unified knowledge graphs. Goes beyond keywords to understand meaning and context.' },
|
||||
]
|
||||
import { cn } from "@/lib/utils";
|
||||
import { H1, H2, H3, H4, P, CT, CP } from "@/components/Texts";
|
||||
import React, { useRef } from "react";
|
||||
import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid";
|
||||
import { motion, AnimatePresence, useInView } from 'framer-motion'
|
||||
import {
|
||||
IconArrowWaveRightUp,
|
||||
IconBoxAlignRightFilled,
|
||||
IconBoxAlignTopLeft,
|
||||
IconClipboardCopy,
|
||||
IconFileBroken,
|
||||
IconSignature,
|
||||
IconTableColumn,
|
||||
} from "@tabler/icons-react";
|
||||
|
||||
export function BentoReviews() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true });
|
||||
|
||||
return (
|
||||
<div className="bg-black py-24 sm:py-32">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<CT className="text-indigo-400">AI Memory & Coordination</CT>
|
||||
<p className="mt-2 max-w-2xl text-4xl font-semibold tracking-tight text-white sm:text-5xl">
|
||||
The Mycelium Agentic Stack
|
||||
</p>
|
||||
|
||||
{/* Bento Grid */}
|
||||
<div className="mt-12 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-7 lg:grid-rows-2">
|
||||
{/* Left + middle cards */}
|
||||
{reviews.slice(0, 6).map((review, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="relative lg:col-span-2 rounded-2xl bg-gray-900 p-8 shadow-sm border border-white/10 flex flex-col"
|
||||
>
|
||||
<CT className="text-white text-lg">{review.title}</CT>
|
||||
<CP className="mt-2 text-gray-400">{review.body}</CP>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Right column (two stacked cards) */}
|
||||
<div className="flex flex-col gap-4 lg:col-span-1">
|
||||
{reviews.slice(6).map((review, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex flex-col justify-between rounded-2xl bg-gray-900 p-6 border border-white/10 h-full"
|
||||
>
|
||||
<CT className="text-white text-lg">{review.title}</CT>
|
||||
<CP className="mt-2 text-gray-400">{review.body}</CP>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div ref={ref}>
|
||||
<div className="relative isolate pt-0 pb-8 bg-black text-center w-full">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.8, delay: 0.1 }}
|
||||
className="mx-auto max-w-5xl"
|
||||
>
|
||||
<H2 className="text-center mt-12">Mycelium Technologies</H2>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="mx-auto max-w-4xl mt-6"
|
||||
>
|
||||
<P className="text-center" color="primary">
|
||||
A robust infrastructure layer for autonomous AI agents, our technology stack
|
||||
delivers a secure, efficient, and intuitive platform for deploying and managing AI agents at scale.
|
||||
</P>
|
||||
</motion.div>
|
||||
</div>
|
||||
<BentoGrid className="max-w-8xl px-12 pb-12 lg:grid-cols-3">
|
||||
{items.map((item, i) => (
|
||||
<BentoGridItem
|
||||
key={i}
|
||||
title={item.title}
|
||||
description={item.description}
|
||||
header={item.header}
|
||||
icon={item.icon}
|
||||
className={i === 3 || i === 6 ? "md:col-span-2" : ""}
|
||||
/>
|
||||
))}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
const Skeleton = () => (
|
||||
<div className="flex flex-1 w-full h-full min-h-[6rem] rounded-xl bg-gradient-to-br from-neutral-200 dark:from-neutral-900 dark:to-neutral-800 to-neutral-100"></div>
|
||||
);
|
||||
const items = [
|
||||
{
|
||||
title: 'FungiStor: Long-Term AI Memory',
|
||||
description: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
|
||||
header: <Skeleton />,
|
||||
icon: <IconClipboardCopy className="h-4 w-4 text-neutral-500" />,
|
||||
},
|
||||
{
|
||||
title: 'HeroDB: Active AI Memory',
|
||||
description: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
|
||||
header: <Skeleton />,
|
||||
icon: <IconFileBroken className="h-4 w-4 text-neutral-500" />,
|
||||
},
|
||||
{
|
||||
title: 'MOS Sandboxes: Secure Agent Workspaces',
|
||||
description: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
|
||||
header: <Skeleton />,
|
||||
icon: <IconSignature className="h-4 w-4 text-neutral-500" />,
|
||||
},
|
||||
{
|
||||
title: 'Mycelium Mesh: Secure Communication Network',
|
||||
description: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
|
||||
header: <Skeleton />,
|
||||
icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
|
||||
},
|
||||
{
|
||||
title: 'Deterministic Deployment: Verifiable Code Execution',
|
||||
description: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
|
||||
header: <Skeleton />,
|
||||
icon: <IconArrowWaveRightUp className="h-4 w-4 text-neutral-500" />,
|
||||
},
|
||||
{
|
||||
title: 'Agent Coordination: Sovereign Workflow Management',
|
||||
description: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
|
||||
header: <Skeleton />,
|
||||
icon: <IconBoxAlignTopLeft className="h-4 w-4 text-neutral-500" />,
|
||||
},
|
||||
{
|
||||
title: 'Universal Interface Layer: AI Service Gateway',
|
||||
description: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
|
||||
header: <Skeleton />,
|
||||
icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user