This commit is contained in:
2025-09-18 18:14:18 +02:00
parent 02557fcb82
commit 204625b9a8
11 changed files with 79 additions and 76 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
public/videos/agent.mp4 Normal file

Binary file not shown.

Binary file not shown.

BIN
public/videos/fungistor.mp4 Normal file

Binary file not shown.

BIN
public/videos/herodb.mp4 Normal file

Binary file not shown.

BIN
public/videos/mesh.mp4 Normal file

Binary file not shown.

BIN
public/videos/sandbox.mp4 Normal file

Binary file not shown.

BIN
public/videos/universal.mp4 Normal file

Binary file not shown.

View File

@@ -24,7 +24,7 @@ export default function Home() {
<section id="about"> <section id="about">
<StackSectionPreview /> <StackSectionPreview />
</section> </section>
<section id="bento-reviews" className="py-12"> <section id="bento-reviews">
<BentoReviews /> <BentoReviews />
</section> </section>
<section id="network"> <section id="network">
@@ -36,9 +36,6 @@ export default function Home() {
<section id="llms"> <section id="llms">
<Companies /> <Companies />
</section> </section>
<section id="features">
<UseCases />
</section>
<section id="clickable-gallery"> <section id="clickable-gallery">
<ClickableGallery /> <ClickableGallery />
</section> </section>

View File

@@ -1,19 +1,56 @@
"use client"; "use client";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { H1, H2, H3, H4, P, CT, CP } from "@/components/Texts"; import { H1, H2, H3, H4, P, CT, CP, NL } from "@/components/Texts";
import React, { useRef } from "react"; import React, { useRef } from "react";
import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid"; import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid";
import { motion, AnimatePresence, useInView } from 'framer-motion' import { motion, AnimatePresence, useInView } from 'framer-motion'
import {
IconArrowWaveRightUp, const items = [
IconBoxAlignRightFilled, {
IconBoxAlignTopLeft, title: 'FungiStor',
IconClipboardCopy, subtitle: 'Long-Term AI Memory',
IconFileBroken, description: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
IconSignature, video: "/videos/fungistor.mp4",
IconTableColumn, },
} from "@tabler/icons-react"; {
title: 'HeroDB',
subtitle: 'Active AI Memory',
description: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
video: "/videos/herodb.mp4",
},
{
title: 'MOS Sandboxes',
subtitle: 'Secure Agent Workspaces',
description: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
video: "/videos/sandbox.mp4",
},
{
title: 'Mycelium Mesh',
subtitle: 'Secure Communication Network',
description: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
video: "/videos/mesh.mp4",
},
{
title: 'Deterministic Deployment',
subtitle: 'Verifiable Code Execution',
description: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
video: "/videos/deterministic.mp4",
},
{
title: 'Agent Coordination',
subtitle: 'Sovereign Workflow Management',
description: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
video: "/videos/agent.mp4",
},
{
title: 'Universal Interface Layer',
subtitle: 'AI Service Gateway',
description: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
video: "/videos/universal.mp4",
},
];
export function BentoReviews() { export function BentoReviews() {
const ref = useRef(null); const ref = useRef(null);
@@ -21,20 +58,20 @@ export function BentoReviews() {
return ( return (
<div ref={ref}> <div ref={ref}>
<div className="relative isolate pt-0 pb-8 bg-black text-center w-full"> <div className="relative isolate pt-24 pb-12 bg-black text-center w-full">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.8, delay: 0.1 }} transition={{ duration: 0.8, delay: 0.1 }}
className="mx-auto max-w-5xl" className="mx-auto max-w-5xl"
> >
<H2 className="text-center mt-12">Mycelium Technologies</H2> <H2 className="text-center">Mycelium Technologies</H2>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.8, delay: 0.2 }}
className="mx-auto max-w-4xl mt-6" className="mx-auto max-w-4xl mt-6 "
> >
<P className="text-center" color="primary"> <P className="text-center" color="primary">
A robust infrastructure layer for autonomous AI agents, our technology stack A robust infrastructure layer for autonomous AI agents, our technology stack
@@ -47,9 +84,9 @@ export function BentoReviews() {
<BentoGridItem <BentoGridItem
key={i} key={i}
title={item.title} title={item.title}
subtitle={item.subtitle}
description={item.description} description={item.description}
header={item.header} video={item.video}
icon={item.icon}
className={i === 3 || i === 6 ? "md:col-span-2" : ""} className={i === 3 || i === 6 ? "md:col-span-2" : ""}
/> />
))} ))}
@@ -57,51 +94,4 @@ export function BentoReviews() {
</div> </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" />,
},
];

View File

@@ -1,5 +1,6 @@
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { H1, H2, H3, H4, P, CT, CP } from "@/components/Texts"; import { H1, H2, H3, H4, P, CT, CP, NL } from "@/components/Texts";
import Image from 'next/image';
export const BentoGrid = ({ export const BentoGrid = ({
className, className,
@@ -23,28 +24,43 @@ export const BentoGrid = ({
export const BentoGridItem = ({ export const BentoGridItem = ({
className, className,
title, title,
subtitle,
description, description,
header, img,
icon, video,
}: { }: {
className?: string; className?: string;
title?: string | React.ReactNode; title?: string | React.ReactNode;
subtitle?: string | React.ReactNode;
description?: string | React.ReactNode; description?: string | React.ReactNode;
header?: React.ReactNode; img?: string;
icon?: React.ReactNode; video?: string;
}) => { }) => {
return ( return (
<div <div
className={cn( className={cn(
"group/bento shadow-input row-span-1 flex flex-col justify-between space-y-4 rounded-2xl border border-white/20 bg-black/20 p-8 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40", "group/bento shadow-input row-span-1 flex flex-col justify-between border border-black bg-black/20 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
className, className,
)} )}
> >
{header} <div className="flex flex-1 w-full h-full min-h-[6rem] bg-black overflow-hidden">
<div className="transition duration-200 group-hover/bento:translate-x-2"> {video ? (
{icon} <video
src={video}
autoPlay
loop
muted
playsInline
className="w-full h-full object-cover"
/>
) : img ? (
<Image src={img} alt={title as string} width={300} height={300} className="w-full h-full object-cover" />
) : null}
</div>
<div className="p-4 transition duration-200 group-hover/bento:translate-x-2">
<CT>{title}</CT> <CT>{title}</CT>
<CP>{description}</CP> <CP className="font-medium">{subtitle}</CP>
<CP className="mt-2">{description}</CP>
</div> </div>
</div> </div>
); );