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-13 18:25:46 +02:00
parent 0f5d64cbbc
commit 298fefd0f4
25 changed files with 7434 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7196
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -11,6 +11,7 @@
"browserslist": "defaults, not ie <= 11",
"dependencies": {
"@headlessui/react": "^2.1.0",
"@lobehub/icons": "^1.97.2",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/postcss": "^4.1.7",
"@types/node": "^20.10.8",
@@ -23,6 +24,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-type-animation": "^3.2.0",
"tailwind-merge": "^3.3.1",
"tailwindcss": "^4.1.7",
"typescript": "^5.3.3",
"use-debounce": "^10.0.0"

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

@@ -11,11 +11,13 @@ import { HomeHero } from '@/components/HomeHero'
import { HomeAbout } from '@/components/HomeAbout'
import { ClickableGallery } from '@/components/ClickableGallery'
import { StackSectionPreview } from '@/components/StackSection'
import { Companies } from '@/components/Companies'
export default function Home() {
return (
<>
<HomeHero />
<Companies />
<HomeAbout />
<StackSectionPreview />
<ClickableGallery />

44
src/components/ClickableGallery.tsx
View File

@@ -4,7 +4,8 @@ import { useEffect, useMemo, useState } from 'react'
import Image from 'next/image'
import { motion, AnimatePresence } from 'framer-motion'
import { wrap } from 'popmotion'
import { Button } from '@/components/Button'
import { Button } from '@/components/Button';
import { H2, P, H4 } from '@/components/Texts';
import { TypeAnimation } from 'react-type-animation'
const galleryItems = [
@@ -52,22 +53,14 @@ export function ClickableGallery() {
return (
<>
<div className="relative isolate pt-24 pb-12 text-center">
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1 }}
className="mx-auto max-w-5xl text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
>
One Agent, Endless Possibilities.
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1.5 }}
className="mx-auto max-w-3xl mt-8 text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
>
The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
</motion.p>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1 }} className="mx-auto max-w-5xl">
<H2 className="text-center">One Agent, Endless Possibilities.</H2>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1.5 }} className="mx-auto max-w-3xl mt-8">
<P className="text-center">
The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
</P>
</motion.div>
<div
aria-hidden="true"
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
@@ -172,14 +165,15 @@ export function ClickableGallery() {
{/* Foreground pill */}
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60]">
<div className="flex items-center justify-between w-[1040px] gap-6 rounded-3xl bg-white/95 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 py-6 backdrop-blur">
<TypeAnimation
key={active}
sequence={[galleryItems[active].text]}
wrapper="h2"
speed={50}
className="text-2xl lg:text-3xl font-semibold leading-tight text-[#2F3178] max-w-[820px] h-[72px]"
repeat={0}
/>
<H4 as="div" className="max-w-[820px] h-[72px]">
<TypeAnimation
key={active}
sequence={[galleryItems[active].text]}
wrapper="span"
speed={50}
repeat={0}
/>
</H4>
<Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base">
Start
</Button>

92
src/components/Companies.tsx Normal file
View File

@@ -0,0 +1,92 @@
"use client";
import React from "react";
import { motion } from "framer-motion";
import { H2, P } from '@/components/Texts';
import Ai21 from '@/components/logos/Ai21';
import Claude from '@/components/logos/Claude';
import BaiduCloud from '@/components/logos/BaiduCloud';
import ByteDance from '@/components/logos/ByteDance';
import DeepSeek from '@/components/logos/DeepSeek';
import DeepMind from '@/components/logos/DeepMind';
import Minimax from '@/components/logos/Minimax';
import Mistral from '@/components/logos/Mistral';
import Moonshot from '@/components/logos/Moonshot';
import AlibabaCloud from '@/components/logos/AlibabaCloud';
import TencentCloud from '@/components/logos/TencentCloud';
import OpenAI from '@/components/logos/OpenAI';
import XAI from '@/components/logos/XAI';
const row1 = [Ai21, Claude, BaiduCloud, ByteDance];
const row2 = [DeepSeek, DeepMind, Minimax, Mistral];
const row3 = [Moonshot, AlibabaCloud];
const row4 = [TencentCloud, OpenAI, XAI];
export function Companies() {
return (
<div className="relative flex h-screen w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
<div className="relative z-10 mx-auto w-full max-w-6xl p-4 pt-16">
{/* Heading */}
<motion.div
className="flex flex-col justify-center max-w-4xl items-center mb-6 mx-auto"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1 }}
>
<H2 className="text-center">
Seamlessly Deploy the World’s Leading AI Models
</H2>
<P className="mt-6 text-center">
Deploy and scale AI from top global providers on a decentralized, privacy-first infrastructure. Mycelium Cloud lets you integrate state-of-the-art intelligence into your workflows with full control, sovereignty, and cost efficiency.
</P>
</motion.div>
{/* Animated Line */}
<motion.div
className="h-[2px] bg-neutral-400 rounded-full mx-auto mb-12"
initial={{ width: 0 }}
animate={{ width: "100%" }}
transition={{ duration: 2, delay: 1 }}
/>
{/* Logos grid */}
<div className="flex flex-col items-center gap-y-10">
{[row1, row2, row3, row4].map((row, rowIndex) => (
<motion.div
key={rowIndex}
className="flex flex-wrap justify-center items-center gap-x-8 sm:gap-x-10"
initial="hidden"
animate="visible"
variants={{
visible: {
transition: {
staggerChildren: 0.15,
delayChildren: 2.8 + rowIndex * 0.5, // Stagger rows
},
},
}}
>
{row.map((Logo, i) => (
<motion.div
key={i}
className="flex justify-center"
variants={{
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0 },
}}
transition={{ duration: 0.6, ease: "easeOut" }}
>
<div className="text-[#2F3178]"><Logo /></div>
</motion.div>
))}
</motion.div>
))}
</div>
</div>
</div>
);
}

35
src/components/HomeAbout.tsx
View File

@@ -7,7 +7,8 @@ import { Dialog, DialogPanel } from '@headlessui/react'
import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
import Image from 'next/image'
import diamondSvg from '@/images/diamond.svg'
import { Container } from '@/components/Container'
import { Container } from '@/components/Container';
import { H2, P, H3 } from '@/components/Texts';
import { Candy } from '@/components/Candy'
const navigation = [
@@ -57,32 +58,26 @@ export function HomeAbout() {
className="aspect-1108/632 w-277 bg-linear-to-r from-[#80caff] to-[#4f46e5] opacity-20"
/>
</motion.div>
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1 }}
className="absolute top-24 left-0 max-w-xl text-left text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
>
Enterprise AI Agents
That Never Sleep.
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1.5 }}
className="absolute top-64 left-0 max-w-xl text-left text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
>
With Mycelium, you could deploy AI agents that handle your most complex workflows while maintaining complete data sovereignty and control.
</motion.p>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1 }} className="absolute top-24 left-0 max-w-xl text-left">
<H2>
Enterprise AI Agents
That Never Sleep.
</H2>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1.5 }} className="absolute top-64 left-0 max-w-xl text-left">
<P>
With Mycelium, you could deploy AI agents that handle your most complex workflows while maintaining complete data sovereignty and control.
</P>
</motion.div>
<Candy />
<div className="absolute bottom-24 right-0 h-96 w-full md:w-2/3 overflow-hidden">
<div className="animate-marquee-vertical space-y-8 text-right text-2xl md:text-4xl font-medium text-[#2F3178]">
<div className="animate-marquee-vertical space-y-8 text-right">
{[...features, ...features].map((feature, index) => (
<div key={index} className="flex items-center justify-end gap-x-4" aria-hidden={index >= features.length}>
<Image src={diamondSvg} alt="" className="h-6 w-6" />
<p>{feature}</p>
<H3 as="p">{feature}</H3>
</div>
))}
</div>

26
src/components/HomeHero.tsx
View File

@@ -5,6 +5,7 @@ import { motion } from 'framer-motion'
import { TypeAnimation } from 'react-type-animation'
import { Dialog, DialogPanel } from '@headlessui/react'
import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
import { H1, PL } from '@/components/Texts'
const navigation = [
{ name: 'Product', href: '#' },
@@ -56,25 +57,26 @@ export function HomeHero() {
</div>
<div className="relative -top-10 mx-auto max-w-8xl h-screen flex items-center justify-center">
<div className="text-center max-w-5xl">
<TypeAnimation
sequence={[
'Decentralized Autonomous Agentic Cloud',
1000,
]}
wrapper="h1"
speed={50}
className="text-5xl font-medium tracking-tight text-balance text-[#2F3178] lg:text-8xl"
repeat={0}
/>
<H1>
<TypeAnimation
sequence={[
'Decentralized Autonomous Agentic Cloud',
1000,
]}
wrapper="span"
speed={50}
repeat={0}
/>
</H1>
</div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1 }}
>
<p className="absolute bottom-12 left-0 max-w-xl text-left text-2xl font-medium text-pretty leading-[1.2] text-[#2F3178] lg:text-3xl">
<PL className="absolute bottom-12 left-0 max-w-xl text-left">
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
</p>
</PL>
</motion.div>
<a href="#about" className="absolute bottom-24 right-0 flex items-center gap-x-2 text-2xl font-medium text-[#2F3178] lg:text-3xl animate-bounce-y">
<span>scroll</span>

32
src/components/StackSection.tsx
View File

@@ -2,7 +2,8 @@
import { StackedCubes } from "@/components/ui/StackedCubes";
import { Button } from "@/components/Button";
import { motion, useInView } from "framer-motion";
import { motion, useInView } from 'framer-motion';
import { H2, P } from '@/components/Texts';
import { useRef } from "react";
export function StackSectionPreview() {
@@ -17,23 +18,34 @@ export function StackSectionPreview() {
<div className="mx-auto max-w-7xl">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
{/* Left Column - Text (1/3 width) */}
<div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
<motion.h2
className="text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
<div className="text-left lg:text-left lg:col-span-1 order-1 lg:order-1">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
Next-Gen AI Infrastructure
</motion.h2>
<motion.p
className="mx-auto mt-8 max-w-3xl text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
<H2 className="">
The Mycelium Stack
</H2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
</motion.p>
<P className="mt-6 max-w-3xl ">
Mycelium is a fully integrated, vertical stack for sovereign and decentralized AI. It provides the foundation for a new generation of agentic applications, giving you full control over your data and intelligence.
</P>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.8, delay: 0.6 }}
>
<P className="mx-auto mt-8 max-w-3xl">
Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
</P>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}

38
src/components/Texts.tsx Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import { cn } from '@/lib/utils';
const textColors = 'text-[#2F3178]';
type TextOwnProps<E extends React.ElementType> = {
as?: E;
children: React.ReactNode;
className?: string;
};
type TextProps<E extends React.ElementType> = TextOwnProps<E> & Omit<React.ComponentProps<E>, keyof TextOwnProps<E>>;
const createTextComponent = <E extends React.ElementType>(
defaultElement: E,
defaultClassName: string
) => {
const Text = <C extends React.ElementType = E>({ as, children, className, ...rest }: TextProps<C>) => {
const Component = as || defaultElement;
return (
<Component className={cn(defaultClassName, textColors, className)} {...rest}>
{children}
</Component>
);
};
return Text;
};
export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl');
export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl');
export const H2 = createTextComponent('h2', 'text-4xl font-medium text-pretty lg:text-5xl');
export const P = createTextComponent('p', 'text-xl font-medium text-pretty lg:text-2xl');
export const H3 = createTextComponent('h3', 'text-3xl lg:text-4xl font-medium');
export const H4 = createTextComponent('h4', 'text-2xl lg:text-3xl font-semibold leading-tight');
export const CT = createTextComponent('span', 'text-sm lg:text-base font-semibold text-center');
export const CP = createTextComponent('p', 'text-sm leading-relaxed font-light');
export const NL = createTextComponent('span', 'text-lg font-semibold leading-6');

3
src/components/logos/Ai21.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { Ai21 } from '@lobehub/icons';
export default () => <Ai21.Brand size={45} />;

3
src/components/logos/AlibabaCloud.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { AlibabaCloud } from '@lobehub/icons';
export default () => <AlibabaCloud.Text size={45} />;

3
src/components/logos/BaiduCloud.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { BaiduCloud } from '@lobehub/icons';
export default () => <BaiduCloud.Combine size={45} />;

3
src/components/logos/ByteDance.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { ByteDance } from '@lobehub/icons';
export default () => <ByteDance.Text size={45} />;

3
src/components/logos/Claude.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { Claude } from '@lobehub/icons';
export default () => <Claude.Combine size={45} />;

3
src/components/logos/DeepMind.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { DeepMind } from '@lobehub/icons';
export default () => <DeepMind.Combine size={45} />;

3
src/components/logos/DeepSeek.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { DeepSeek } from '@lobehub/icons';
export default () => <DeepSeek.Combine size={45} />;

3
src/components/logos/Minimax.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { Minimax } from '@lobehub/icons';
export default () => <Minimax.Combine size={45} />;

3
src/components/logos/Mistral.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { Mistral } from '@lobehub/icons';
export default () => <Mistral.Combine size={45} />;

3
src/components/logos/Moonshot.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { Moonshot } from '@lobehub/icons';
export default () => <Moonshot.Combine size={45} />;

3
src/components/logos/NousResearch.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { NousResearch } from '@lobehub/icons';
export default () => <NousResearch.Combine size={45} />;

3
src/components/logos/OpenAI.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { OpenAI } from '@lobehub/icons';
export default () => <OpenAI.Combine size={45} />;

3
src/components/logos/TencentCloud.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { TencentCloud } from '@lobehub/icons';
export default () => <TencentCloud.Combine size={45} />;

3
src/components/logos/XAI.tsx Normal file
View File

@@ -0,0 +1,3 @@
import { XAI } from '@lobehub/icons';
export default () => <XAI.Text size={45} />;

23
src/components/ui/Cube.tsx
View File

@@ -3,6 +3,7 @@
import React from "react";
import Image from "next/image";
import { motion } from "framer-motion";
import { CT, CP } from '@/components/Texts';
interface CubeProps {
title: string;
@@ -19,7 +20,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
return (
<div className="relative flex flex-col items-center">
<motion.div
className="relative cursor-pointer"
className="relative cursor-pointer pointer-events-none"
onMouseEnter={onHover}
onMouseLeave={onLeave}
style={{
@@ -39,7 +40,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
alt="Cube"
width={507}
height={234}
className="w-60 sm:w-80 lg:w-96 h-auto drop-shadow-lg"
className="w-60 sm:w-80 lg:w-96 h-auto drop-shadow-lg pointer-events-auto"
style={{
filter: isActive
? 'brightness(1.1) drop-shadow(0 25px 25px rgba(144, 137, 252, 0.4))'
@@ -49,15 +50,9 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
{/* Title overlay */}
<div className="absolute inset-0 flex items-center justify-center">
<h3
className="text-[#2F3178] text-sm lg:text-base font-semibold text-center px-4 drop-shadow-lg"
style={{
transform: 'rotate(0deg) skewX(0deg)',
transformOrigin: 'center'
}}
>
<CT as="h3" className="px-4 drop-shadow-lg" style={{ transform: 'rotate(0deg) skewX(0deg)', transformOrigin: 'center' }}>
{title}
</h3>
</CT>
</div>
{/* Description with arrow line - Desktop */}
@@ -93,9 +88,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
<h4 className="text-base font-semibold mb-2">
{descriptionTitle}
</h4>
<p className="text-sm leading-relaxed font-light">
{description}
</p>
<CP>{description}</CP>
</div>
</motion.div>
)}
@@ -113,9 +106,7 @@ export function Cube({ title, descriptionTitle, description, isActive, index, on
<h4 className="text-base font-semibold mb-2 text-center">
{descriptionTitle}
</h4>
<p className="text-sm leading-relaxed font-light text-center">
{description}
</p>
<CP className="text-center">{description}</CP>
</div>
</motion.div>
)}

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

@@ -40,7 +40,7 @@ export function StackedCubes() {
onMouseLeave={() => setActive("agent")}
>
<motion.div
className="relative ml-0 sm:ml-4 lg:ml-8 h-[400px] w-96"
className="relative ml-0 sm:ml-4 lg:ml-8 h-[600px] w-96"
animate={{ y: ["-8px", "8px"] }}
transition={{
duration: 4,
@@ -54,7 +54,7 @@ export function StackedCubes() {
key={layer.id}
className="absolute"
style={{
top: `${index * 100}px`,
top: `${index * 140}px`,
zIndex: active === layer.id ? 20 : 10 - index,
}}
>