Compare commits

...

15 Commits

15 changed files with 117 additions and 172 deletions

115
README.md
View File

@@ -1,83 +1,92 @@
# Mycelium Cloud Website
# Project Mycelium Website
- **Repository:** [https://git.ourworld.tf/ourworld_web/www_project_mycelium/](https://git.ourworld.tf/ourworld_web/www_project_mycelium/)
- **Main Branch (Production):** [https://project.mycelium.tf/](https://project.mycelium.tf/)
- **Dev Branch (Staging):** [https://www2.project.mycelium.tf/](https://www2.project.mycelium.tf/)
---
## About
This is the official website for Mycelium Cloud, built using Next.js and Tailwind CSS.
## Getting Started
---
Follow these instructions to get a local copy up and running for development and testing purposes.
## Technologies
### Prerequisites
- **Framework**: [Next.js](https://nextjs.org/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
Make sure you have Node.js and npm installed on your machine. You can download them from [nodejs.org](https://nodejs.org/).
---
### Installation
## File Structure
- **Pages**: To edit the content of a specific page, navigate to `src/app/(main)/`.
- **Components**: Reusable components are located in `src/components/`.
- **Images and Videos**: Add or modify images and videos in the `public/` directory. Images are in `public/images/` and videos are in `public/videos/`.
- **CSS**: Global styles can be found in `src/styles/tailwind.css`. Most styling is done using Tailwind CSS utility classes directly in the `.tsx` files.
---
## Branding
- **Font**: The primary font used is [Mulish](https://fonts.google.com/specimen/Mulish).
- **Logos**: Project logos are stored in `public/images/logos/`.
---
## Get Started
Follow these steps to get the project running locally:
1. **Install Dependencies**:
1. Clone the repository to your local machine.
2. Install the NPM packages:
```bash
npm install
```
### Running the Application
2. **Build the Project**:
To run the development server:
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
## Git Workflow
We follow a branching model to ensure code quality and a stable production environment. All new work should be done on a feature branch.
1. **Switch to the `development` branch** and make sure it's up to date:
```bash
git checkout development
git pull origin development
npm run build
```
2. **Create a new feature branch** for your changes:
3. **Start the Development Server**:
```bash
git checkout -b your-feature-name
npm run start
```
3. **Make your changes and commit them**.
---
4. **Push your feature branch** to the remote repository:
```bash
git push origin your-feature-name
```
## Contributing
5. **Create a Pull Request** on GitHub from your feature branch to the `development` branch.
- **Never update the `main` branch directly.** All changes must be reviewed and merged by the team through a pull request.
- **Always work on the `development` branch.** Create a feature branch from `development` and submit your pull request to `development`.
- **Request a review.** After submitting your pull request, ask the team to review and accept it into the `main` branch.
6. After the pull request is reviewed and merged, the changes will be on the `development` branch. To deploy to production, the `development` branch will be merged into `main`.
---
## Project Structure
## Report an Error
Here is an overview of the key directories in the project:
To report an issue, please use the following link and provide the requested information:
- `src/app/(main)/page.tsx`
This is the main entry point for the homepage.
- **Issue Tracker**: [git.ourworld.tf/ourworld_web/HOME/issues/new](https://git.ourworld.tf/ourworld_web/HOME/issues/new) and tag **OW Website & Wiki Project 2025**
- `src/components/`
This directory contains all the reusable React components used throughout the site. The main components rendered on the homepage (`src/app/(main)/page.tsx`) are:
- `HomeHero.tsx`
- `StackSection.tsx` (as `StackSectionPreview`)
- `BentoReviews.tsx`
- `WorldMap.tsx`
- `Steps.tsx`
- `Companies.tsx`
- `ClickableGallery.tsx`
- `CallToAction.tsx`
- See the current web rpoject on [OW Website & Wiki Project 2025](https://git.ourworld.tf/ourworld_web/-/projects/153)
- `public/images/`
All static images are stored here. You can find logos, gallery images, and other visual assets in this folder.
When reporting an issue, please include:
- `public/videos/`
This folder contains video assets used on the site.
- **URL**: The page where the error occurred.
- **Repo**: The repository you are working with.
- **Branch**: The specific branch you are on.
- **Problem**: A detailed description of the problem.
## License
---
This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
## Questions
If you have any questions, you can reach out to [sashaastiadi](https://git.ourworld.tf/sashaastiadi).

View File

@@ -21,15 +21,12 @@ export default function Home() {
<section id="home-hero">
<HomeHero />
</section>
<section id="technologies">
<StackSectionPreview />
</section>
<section id="bento-reviews">
<BentoReviews />
</section>
<section id="network">
<WorldMap />
</section>
<section id="technologies">
<StackSectionPreview />
</section>
<section id="deploy">
<Steps />
</section>
@@ -39,6 +36,9 @@ export default function Home() {
<section id="clickable-gallery">
<ClickableGallery />
</section>
<section id="bento-reviews">
<BentoReviews />
</section>
<section id="call-to-action">
<CallToAction />
</section>

View File

@@ -22,7 +22,7 @@ export function WorldMap() {
{/* Top Left Intro Text */}
<div className="absolute top-0 left-0 px-6 py-24 z-10 max-w-lg">
<H4 color="light">Mycelium Network is Live.</H4>
<CP className="mt-6 text-base leading-relaxed font-light" color="light">
<CP className="hidden mt-6 text-base leading-relaxed font-light" color="light">
Mycelium Cloud's advancement technology enables anyone to deploy
their own Internet infrastructure, anywhere.
</CP>

View File

@@ -12,46 +12,45 @@ const items = [
{
title: 'FungiStor',
subtitle: 'Long-Term AI Memory',
description: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
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",
},
{
title: 'HeroDB',
subtitle: 'Active AI Memory',
description: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
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",
},
{
title: 'MOS Sandboxes',
subtitle: 'Secure Agent Workspaces',
description: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
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/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.',
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",
},
{
title: 'Deterministic Deployment',
subtitle: 'Verifiable Code Execution',
description: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
description: 'Declare intent, get a hash; remote attestation proves thats what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.',
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.',
description: 'Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.',
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.',
description: 'One gateway to open-source LLMs, tools, APIs, and data—bring your own models & keys. Semantic retrieval, function calling, and metered micropayments built in.',
video: "/videos/universal.mp4",
},
];
export function BentoReviews() {
@@ -93,17 +92,16 @@ export function BentoReviews() {
return (
<div>
<div className="relative isolate pt-24 pb-12 bg-black text-center w-full lg:px-0 px-4">
<div className="relative isolate py-24 bg-black text-center w-full lg:px-0 px-4">
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
<div className="mx-auto max-w-5xl ">
<H2 className="text-center">Mycelium Technologies</H2>
<H2 className="text-center">Augmented Intelligence Fabric</H2>
</div>
</FadeIn>
<FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
<div className="mx-auto max-w-4xl mt-6 mb-8">
<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.
The sovereign substrate for autonomous AI. Stateless, geo-aware, end-to-end encryptedand verifiable from intent to execution.
</P>
</div>
</FadeIn>

View File

@@ -6,14 +6,14 @@ export function CallTo() {
<div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-200">
<div className="mx-auto max-w-4xl text-center">
<H2 color="primary">
Say hello to Decentralized AI Agents that are Truly Yours
Are you Ready?
</H2>
<P color="custom" className="mt-8 max-w-3xl">
Why hand out your intelligence to centralized giants when you can build your own?
</P>
<div className="mt-10 flex items-center justify-center gap-x-6">
<a
href="mailto:info@ourworld.tf"
href="https://calendly.com/sachao/30min"
target="_blank"
rel="noopener noreferrer"
className="rounded-md bg-[#2F3178] px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-[#2F3178]/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2F3178]"

View File

@@ -36,7 +36,7 @@ export function CallToAction() {
<Button
variant="solid"
color="cyan"
href="mailto:info@ourworld.tf"
href="https://calendly.com/sachao/30min"
target="_blank"
rel="noopener noreferrer"
>

View File

@@ -52,14 +52,15 @@ export function ClickableGallery() {
<div>
<div className="relative isolate pt-8 pb-0 bg-transparent text-center w-full">
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
<div className="mx-auto max-w-5xl">
<H2 className="text-center">One Agent, Endless Possibilities.</H2>
<div className="mx-auto max-w-5xl lg:mt-12">
<H2 className="text-center">Agents with Endless Possibilities.</H2>
</div>
</FadeIn>
<FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
<div className="mx-auto max-w-4xl mt-6 lg:px-0 px-4">
<P className="text-center" color="primary">
The future isnt about more tools. Its about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
Your private agent coordinates a team of specialists that spin up on demand, collaborate across your world, and deliver end-to-end results.
Many agents, one intelligenceyours.
</P>
</div>
</FadeIn>

View File

@@ -40,7 +40,7 @@ const row2 = logos.slice(6);
export function Companies() {
return (
<div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased lg:py-12 py-4 -top-20">
<div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased py-4 mb-12">
<div className="relative z-10 mx-auto w-full max-w-6xl p-4">
{/* Heading */}
@@ -50,7 +50,7 @@ export function Companies() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1 }}
>
<P className="text-gray-100 text-center mb-6">
<P className="hidden min-xl:text-gray-100 text-center mb-6">
Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
</P>
</motion.div>

View File

@@ -6,7 +6,6 @@ import { Container } from '@/components/Container'
import { TextField } from '@/components/Fields'
import { Logomark } from '@/components/Logo'
import { NavLinks } from '@/components/NavLinks'
import { FadeIn } from '@/components/FadeIn'
import qrCode from '@/images/qr-code.svg'
function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
@@ -24,61 +23,13 @@ function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
export function Footer() {
return (
<footer id="footer" className="border-t border-gray-800">
<FadeIn>
<Container>
<div className="flex flex-col items-start justify-between gap-y-12 pt-12 pb-6 lg:flex-row lg:items-center lg:py-12">
<div>
<div className="flex items-center text-white">
<Logomark className="h-10 w-10 flex-none fill-cyan-500" />
<div className="ml-4">
<p className="text-base font-semibold">Project Mycelium</p>
<p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
</div>
</div>
<nav className="mt-11 flex gap-8">
<NavLinks />
</nav>
</div>
<div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-800/50 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
<div className="relative flex h-24 w-24 flex-none items-center justify-center">
<QrCodeBorder className="absolute inset-0 h-full w-full stroke-gray-700 transition-colors group-hover:stroke-[#015eff]" />
<Image src={qrCode} alt="" unoptimized />
</div>
<div className="ml-8 lg:w-64">
<p className="text-base font-semibold text-white">
<Link href="https://threefoldfaq.crisp.help/en/">
<span className="absolute inset-0 sm:rounded-2xl" />
Talk to a human
</Link>
</p>
<p className="mt-1 text-sm text-gray-400">
Get in touch with us for any inquiries or questions.
</p>
</div>
</div>
</div>
<div className="flex flex-col items-center border-t border-gray-800 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
{/* <form className="flex w-full justify-center md:w-auto">
<TextField
type="email"
aria-label="Email address"
placeholder="Email address"
autoComplete="email"
required
variant="dark"
className="w-60 min-w-0 shrink"
/>
<Button type="submit" color="cyan" className="ml-4 flex-none">
<span className="hidden lg:inline">Join our newsletter</span>
<span className="lg:hidden">Join newsletter</span>
</Button>
</form> */}
<p className="mt-6 text-sm text-gray-400 md:mt-0 ">
<div className="flex justify-center py-8">
<p className="text-sm text-gray-400">
&copy; Copyright OurWorld Holdings, {new Date().getFullYear()}. All rights reserved.
</p>
</div>
</Container>
</FadeIn>
</footer>
)
}

View File

@@ -60,7 +60,7 @@ export function Header() {
<nav>
<Container className="relative z-50 flex justify-between py-4">
<div className="relative z-10 flex items-center gap-16">
<Link href="/" aria-label="Home">
<Link href="/" aria-label="Home" className="hidden">
<img src="/images/logo.png" alt="Mycelium" className="h-10 w-auto" />
</Link>
<div className="hidden lg:flex lg:gap-10">
@@ -110,10 +110,10 @@ export function Header() {
<NavLinks className="block text-base/7 tracking-tight" />
</div>
<div className="mt-8 flex flex-col gap-4">
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
Docs
<Button href="mailto:info@ourworld.tf" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
Join the Waitlist
</Button>
<Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>
<Button href="https://calendly.com/sachao/30min" color="cyan">Book a Meeting</Button>
</div>
</PopoverPanel>
</>
@@ -123,10 +123,10 @@ export function Header() {
)}
</Popover>
<div className="flex items-center gap-6 max-lg:hidden">
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
Docs
<Button href="mailto:info@ourworld.tf" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
Join the Waitlist
</Button>
<Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>
<Button href="https://calendly.com/sachao/30min" color="cyan">Book a Meeting</Button>
</div>
</div>
</Container>

View File

@@ -32,7 +32,7 @@ export function HomeHero() {
<div className="absolute inset-0 bg-black/60" />
</div>
<div className="relative px-6 lg:px-8">
<div className="relative mt-4 mx-auto flex h-screen max-w-8xl items-center justify-center">
<div className="relative mx-auto flex h-screen max-w-8xl items-center justify-center">
<div className="text-center">
<div className="max-w-6xl">
<H1 color="light">
@@ -48,26 +48,13 @@ export function HomeHero() {
</H1>
</div>
{/* Mobile-only PL */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1 }}
className="lg:hidden"
className="mt-12"
>
<PL className="mt-12 max-w-3xl text-center text-gray-100" color="light">
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
</PL>
</motion.div>
{/* Desktop-only PL */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1 }}
className="hidden lg:block"
>
<PL className="mt-12 max-w-4xl text-center text-gray-100 mx-auto" color="light">
<PL className="mx-auto max-w-4xl text-center text-gray-100" color="light">
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
</PL>
</motion.div>

View File

@@ -30,14 +30,13 @@ export function Steps() {
const isInView = useInView(ref, { once: true });
return (
<section id="benefits" ref={ref} className="relative bg-cover bg-center py-32 -top-20 text-white" style={{ backgroundImage: "url('/images/deployment.webp')" }}>
<div className="absolute inset-0 bg-black/60" />
<div className="relative px-6 lg:px-6">
<section id="benefits" ref={ref} className="relative pt-12 pb-4 px-4 lg:px-12 text-white">
<div className="relative px-6 lg:px-12">
<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 lg:mx-0"
className="mx-auto max-w-5xl text-center"
>
<H2 className="text-3xl font-medium tracking-tight" color="light">
Deploy Scalable LLMs and AI Agents in Seconds
@@ -50,7 +49,7 @@ export function Steps() {
initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-3"
className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-12 lg:max-w-7xl lg:grid-cols-3"
>
{features.map((feature, index) => (
<motion.li
@@ -58,7 +57,7 @@ export function Steps() {
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
className="rounded-2xl border border-white/20 bg-black/20 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40"
className="rounded-2xl border border-white/20 bg-black/30 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40"
>
<feature.icon className="h-8 w-8 mb-4 text-white" />
<CT as="span" className="font-semibold" color="light">{feature.name}</CT>

View File

@@ -148,11 +148,11 @@ export function UseCases() {
className="flex flex-col items-start justify-start pt-10 lg:pr-12"
>
<H2 id="usecases-title" color="light" className="text-left">
Mycelium Technologies
Augmented Intelligence Fabric
</H2>
<P className="mt-4 text-left" color="light">
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.
The sovereign substrate for autonomous AI.
Stateless, geo-aware, end-to-end encryptedand verifiable from intent to execution.
</P>
</motion.div>

View File

@@ -32,7 +32,7 @@ export function WorldMap() {
className="max-w-xl"
>
<H2 color="light">Mycelium Network is Live.</H2>
<P className="mt-4 text-base leading-relaxed font-light" color="light">
<P className="hidden mt-4 text-base leading-relaxed font-light" color="light">
Mycelium Cloud's advancement technology enables anyone to deploy
their own Internet infrastructure, anywhere.
</P>

View File

@@ -8,25 +8,25 @@ const stackData = [
{
id: "agent",
title: "Agent Layer",
descriptionTitle: "Personal Agents - Secure & Sovereign",
descriptionTitle: "Your sovereign agent with private memory and permissioned data access—always under your control.",
description:
"Personal AI agents operate as secure digital twins, providing tailored intelligent assistance. They interact with existing chat, MCP agents, and coding tools while maintaining sovereignty and ecosystem compatibility.",
"Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.\nIt coordinates across people, apps, and other agents to plan, create, and execute.\nIt operates inside a compliant legal & financial sandbox, ready for real-world transactions and operations.\nMore than just an assistant—an intelligent partner that learns and does your way.",
position: "top",
},
{
id: "ai",
title: "AI Layer",
descriptionTitle: "AI Agents & AI Brains + Mycelium Code & Compute Sandboxes",
id: "network",
title: "Network Layer",
descriptionTitle: "A global, end-to-end encrypted overlay that simply doesnt break.",
description:
"Intelligence core combining LLMs with specialized AI agents. Mycelium-powered sandboxes provide secure environments for development, testing, and compilation with active memory systems and unbreakable network architecture.",
"Shortest-path routing moves your traffic the fastest way, every time.\nInstant discovery with integrated DNS, semantic search, and indexing.\nA distributed CDN and edge delivery keep content available and tamper-resistant worldwide.\nBuilt-in tool services and secure coding sandboxes—seamless on phones, desktops, and edge.",
position: "middle",
},
{
id: "cloud",
title: "Cloud Layer",
descriptionTitle: "Mycelium Compute & Storage - Decentralized Infrastructure Layer",
descriptionTitle: "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
description:
"Foundation runs bare metal Zero OS enabling autonomous cloud. Decentralized infrastructure supports Web2, Web3, AI workloads with superior scalability. Built on twenty years cloud experience.",
"Workloads are cryptographically bound to your private key—location and access are yours.\nNo cloud vendor or middleman in the path: end-to-end ownership and isolation by default.\nGeo-aware placement delivers locality, compliance, and ultra-low latency where it matters.\nEncrypted, erasure-coded storage, decentralized compute and GPU on demand—including LLMs.",
position: "bottom",
},
];