ourworld_web/www_mycelium_cloud2
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-17 18:32:20 +02:00
parent 9277bc7105
commit 02557fcb82
10 changed files with 201 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
next-env.d.ts vendored
View File

@@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

27
package-lock.json generated
View File

@@ -11,6 +11,7 @@
"@headlessui/react": "^2.1.0",
"@heroicons/react": "^2.2.0",
"@lobehub/icons": "^1.97.2",
"@tabler/icons-react": "^3.35.0",
"@tailwindcss/forms": "^0.5.3",
"@types/node": "^20.10.8",
"@types/react": "^18.2.55",
@@ -2976,6 +2977,32 @@
"tslib": "^2.8.0"
}
},
"node_modules/@tabler/icons": {
"version": "3.35.0",
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.35.0.tgz",
"integrity": "sha512-yYXe+gJ56xlZFiXwV9zVoe3FWCGuZ/D7/G4ZIlDtGxSx5CGQK110wrnT29gUj52kEZoxqF7oURTk97GQxELOFQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
}
},
"node_modules/@tabler/icons-react": {
"version": "3.35.0",
"resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.35.0.tgz",
"integrity": "sha512-XG7t2DYf3DyHT5jxFNp5xyLVbL4hMJYJhiSdHADzAjLRYfL7AnjlRfiHDHeXxkb2N103rEIvTsBRazxXtAUz2g==",
"license": "MIT",
"dependencies": {
"@tabler/icons": "3.35.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
},
"peerDependencies": {
"react": ">= 16"
}
},
"node_modules/@tailwindcss/forms": {
"version": "0.5.10",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",

1
package.json
View File

@@ -13,6 +13,7 @@
"@headlessui/react": "^2.1.0",
"@heroicons/react": "^2.2.0",
"@lobehub/icons": "^1.97.2",
"@tabler/icons-react": "^3.35.0",
"@tailwindcss/forms": "^0.5.3",
"@types/node": "^20.10.8",
"@types/react": "^18.2.55",

7
src/app/(main)/page.tsx
View File

@@ -13,6 +13,7 @@ import { ScrollUp } from '@/components/ui/ScrollUp'
import { GridStats } from '@/components/GridStats'
import { WorldMap } from '@/components/WorldMap'
import { GetStarted } from '@/components/GetStarted'
import { BentoReviews } from '@/components/BentoReviews'
export default function Home() {
return (
@@ -23,6 +24,9 @@ export default function Home() {
<section id="about">
<StackSectionPreview />
</section>
<section id="bento-reviews" className="py-12">
<BentoReviews />
</section>
<section id="network">
<WorldMap />
</section>
@@ -38,9 +42,6 @@ export default function Home() {
<section id="clickable-gallery">
<ClickableGallery />
</section>
<section id="get-started">
<GetStarted />
</section>
<section id="call-to-action">
<CallToAction />
</section>

153
src/components/BentoReviews.tsx
View File

@@ -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" />,
},
];

2
src/components/ClickableGallery.tsx
View File

@@ -54,7 +54,7 @@ export function ClickableGallery() {
return (
<div ref={ref}>
<div className="relative isolate pt-0 pb-0 bg-black text-center w-full">
<div className="relative isolate pt-24 pb-0 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">One Agent, Endless Possibilities.</H2>
</motion.div>

2
src/components/WorldMap.tsx
View File

@@ -7,7 +7,7 @@ import { CountUpNumber } from './CountUpNumber'
export function WorldMap() {
return (
<div className="relative min-h-screen w-full overflow-hidden -top-20 flex flex-col">
<div className="relative min-h-screen w-full overflow-hidden top-0 flex py-12 flex-col">
{/* Background video */}
<video
autoPlay

4
src/components/ui/StackedCubes.tsx
View File

@@ -36,11 +36,11 @@ export function StackedCubes() {
return (
<div
className="relative w-full flex items-center justify-center lg:justify-start min-h-[600px] sm:min-h-[700px] lg:min-h-[600px]"
className="relative w-full flex items-center justify-center lg:justify-start min-h-[400px] sm:min-h-[500px] lg:min-h-[400px]"
onMouseLeave={() => setActive("agent")}
>
<motion.div
className="relative ml-0 sm:ml-4 lg:ml-8 h-[600px] w-96"
className="relative ml-0 sm:ml-4 lg:ml-8 h-[400px] w-96"
animate={{ y: ["-8px", "8px"] }}
transition={{
duration: 4,

51
src/components/ui/bento-grid.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { cn } from "@/lib/utils";
import { H1, H2, H3, H4, P, CT, CP } from "@/components/Texts";
export const BentoGrid = ({
className,
children,
}: {
className?: string;
children?: React.ReactNode;
}) => {
return (
<div
className={cn(
"mx-4 grid max-w-6xl grid-cols-1 gap-4 lg:grid-cols-3",
className,
)}
>
{children}
</div>
);
};
export const BentoGridItem = ({
className,
title,
description,
header,
icon,
}: {
className?: string;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
header?: React.ReactNode;
icon?: React.ReactNode;
}) => {
return (
<div
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",
className,
)}
>
{header}
<div className="transition duration-200 group-hover/bento:translate-x-2">
{icon}
<CT>{title}</CT>
<CP>{description}</CP>
</div>
</div>
);
};

13
src/pages/_document.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}