From eb2ad2be3fb219d06ba1398b73c3853b11f141f8 Mon Sep 17 00:00:00 2001 From: sasha-astiadi Date: Wed, 17 Sep 2025 14:21:34 +0200 Subject: [PATCH] ok --- src/app/(main)/page.tsx | 21 +- src/components/Archives/1UseCases.tsx | 263 ++++++++++++++++++++++++++ src/components/Archives/WorldMap.tsx | 111 +++++++++++ src/components/StackSection.tsx | 2 +- src/components/UseCases.tsx | 238 ++++++++--------------- src/components/WorldMap.tsx | 82 ++++++-- 6 files changed, 531 insertions(+), 186 deletions(-) create mode 100644 src/components/Archives/1UseCases.tsx create mode 100644 src/components/Archives/WorldMap.tsx diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index beaa808..97e2743 100644 --- a/src/app/(main)/page.tsx +++ b/src/app/(main)/page.tsx @@ -20,27 +20,24 @@ export default function Home() {
-
- -
-
- -
-
+
-
- -
-
- +
+ +
+
+
+
+ +
diff --git a/src/components/Archives/1UseCases.tsx b/src/components/Archives/1UseCases.tsx new file mode 100644 index 0000000..6d72e30 --- /dev/null +++ b/src/components/Archives/1UseCases.tsx @@ -0,0 +1,263 @@ +'use client' + +import React, { useEffect, useMemo, useRef, useState } from 'react' +import clsx from 'clsx' +import { + ArchiveBoxIcon, + CodeBracketIcon, + CpuChipIcon, + GlobeAltIcon, + MagnifyingGlassIcon, + ShareIcon, + UserGroupIcon, + CheckBadgeIcon, +} from '@heroicons/react/24/solid' + +import { Container } from '@/components/Container' +import { H2, P, CT, CP } from '@/components/Texts' +import { motion, useInView } from 'framer-motion' + +interface Review { + title: string + body: string +} + +const reviews: Array = [ + { + 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.', + }, +] + + +function getReviewIcon(title: string) { + if (title.startsWith('FungiStor')) return ArchiveBoxIcon; + if (title.startsWith('HeroDB')) return CpuChipIcon; + if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon; + if (title.startsWith('Mycelium Mesh')) return ShareIcon; + if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon; + if (title.startsWith('Agent Coordination')) return UserGroupIcon; + if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon; + if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon; + return GlobeAltIcon; // default +} + +function Review({ + title, + body, + className, + ...props +}: Omit, keyof Review> & Review) { + let animationDelay = useMemo(() => { + let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s'] + return possibleAnimationDelays[ + Math.floor(Math.random() * possibleAnimationDelays.length) + ] + }, []) + + return ( +
+
+ {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-white mb-2" })} + + {title} + + {body} +
+ +
+ ) +} + +function splitArray(array: Array, numParts: number) { + let result: Array> = [] + for (let i = 0; i < array.length; i++) { + let index = i % numParts + if (!result[index]) { + result[index] = [] + } + result[index].push(array[i]) + } + return result +} + +function ReviewColumn({ + reviews, + className, + reviewClassName, + msPerPixel = 0, +}: { + reviews: Array + className?: string + reviewClassName?: (reviewIndex: number) => string + msPerPixel?: number +}) { + let columnRef = useRef>(null) + let [columnHeight, setColumnHeight] = useState(0) + let duration = `${columnHeight * msPerPixel}ms` + + useEffect(() => { + if (!columnRef.current) { + return + } + + let resizeObserver = new window.ResizeObserver(() => { + setColumnHeight(columnRef.current?.offsetHeight ?? 0) + }) + + resizeObserver.observe(columnRef.current) + + return () => { + resizeObserver.disconnect() + } + }, []) + + return ( +
+ {reviews.concat(reviews).map((review, reviewIndex) => ( + = reviews.length} + className={reviewClassName?.(reviewIndex % reviews.length)} + {...review} + /> + ))} +
+ ) +} + +function ReviewGrid() { + let containerRef = useRef>(null) + let isInView = useInView(containerRef, { once: true, amount: 0.4 }) + let columns = splitArray(reviews, 3) + let column1 = columns[0] + let column2 = columns[1] + let column3 = splitArray(columns[2], 2) + + return ( +
+ {isInView && ( + <> + + clsx( + reviewIndex >= column1.length + column3[0].length && + 'md:hidden', + reviewIndex >= column1.length && 'lg:hidden', + ) + } + msPerPixel={10} + /> + + reviewIndex >= column2.length ? 'lg:hidden' : '' + } + msPerPixel={15} + /> + + + )} +
+
+
+ ) +} + +export function UseCases() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true }); + + return ( +
+ + +

+ Coming Soon: The Future of Mycelium +

+

+ Mycelium Cloud is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates. +

+ +
+ ) +} diff --git a/src/components/Archives/WorldMap.tsx b/src/components/Archives/WorldMap.tsx new file mode 100644 index 0000000..d279f43 --- /dev/null +++ b/src/components/Archives/WorldMap.tsx @@ -0,0 +1,111 @@ +import { Globe } from "@/components/ui/globe" +import { motion } from "framer-motion" +import { H2, H4, CP, CT } from "./Texts" + +export function WorldMap() { + return ( +
+ {/* Background video */} + + + {/* Dark overlay */} +
+ + {/* Top Left Intro Text */} +
+

Mycelium Network is Live.

+ + Mycelium Cloud's advancement technology enables anyone to deploy + their own Internet infrastructure, anywhere. + +
+ + {/* Globe Centered */} +
+ +
+ + {/* Right Side Stats Column */} +
+ + + CORES + +

+ 54,958 +

+ + Total Central Processing Unit Cores available on the grid. + + + + + + NODES + +

+ 54,958 +

+ + Total number of nodes on the grid. + + + + + + SSD CAPACITY + +

+ 54,958 +

+ + Total amount of storage (SSD, HDD, & RAM) on the grid. + + + + + + COUNTRIES + +

+ 51 +

+ + Total number of countries with active nodes. + + +
+ + {/* Radial fade overlay */} +
+
+ ) +} diff --git a/src/components/StackSection.tsx b/src/components/StackSection.tsx index ec688ed..999615d 100644 --- a/src/components/StackSection.tsx +++ b/src/components/StackSection.tsx @@ -11,7 +11,7 @@ export function StackSectionPreview() { const isInView = useInView(ref); return ( -
+
{/* Gradient Blob Component */} = [ - { - 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.', - }, + { 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.' }, ] - function getReviewIcon(title: string) { - if (title.startsWith('FungiStor')) return ArchiveBoxIcon; - if (title.startsWith('HeroDB')) return CpuChipIcon; - if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon; - if (title.startsWith('Mycelium Mesh')) return ShareIcon; - if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon; - if (title.startsWith('Agent Coordination')) return UserGroupIcon; - if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon; - if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon; - return GlobeAltIcon; // default + if (title.startsWith('FungiStor')) return ArchiveBoxIcon + if (title.startsWith('HeroDB')) return CpuChipIcon + if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon + if (title.startsWith('Mycelium Mesh')) return ShareIcon + if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon + if (title.startsWith('Agent Coordination')) return UserGroupIcon + if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon + if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon + return GlobeAltIcon } -function Review({ - title, - body, - className, - ...props -}: Omit, keyof Review> & Review) { - let animationDelay = useMemo(() => { - let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s'] - return possibleAnimationDelays[ - Math.floor(Math.random() * possibleAnimationDelays.length) - ] +function Review({ title, body, className, ...props }: Omit, keyof Review> & Review) { + const animationDelay = useMemo(() => { + const delays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s'] + return delays[Math.floor(Math.random() * delays.length)] }, []) return (
- {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-white mb-2" })} - - {title} - + {React.createElement(getReviewIcon(title), { className: 'h-6 w-6 text-white mb-2' })} + {title} {body}
-
) } function splitArray(array: Array, numParts: number) { - let result: Array> = [] + const result: Array> = [] for (let i = 0; i < array.length; i++) { - let index = i % numParts - if (!result[index]) { - result[index] = [] - } + const index = i % numParts + if (!result[index]) result[index] = [] result[index].push(array[i]) } return result } -function ReviewColumn({ - reviews, - className, - reviewClassName, - msPerPixel = 0, -}: { - reviews: Array - className?: string - reviewClassName?: (reviewIndex: number) => string - msPerPixel?: number -}) { - let columnRef = useRef>(null) - let [columnHeight, setColumnHeight] = useState(0) - let duration = `${columnHeight * msPerPixel}ms` +function ReviewColumn({ reviews, className, msPerPixel = 0 }: { reviews: Array, className?: string, msPerPixel?: number }) { + const columnRef = useRef>(null) + const [columnHeight, setColumnHeight] = useState(0) + const duration = `${columnHeight * msPerPixel}ms` useEffect(() => { - if (!columnRef.current) { - return - } - - let resizeObserver = new window.ResizeObserver(() => { - setColumnHeight(columnRef.current?.offsetHeight ?? 0) - }) - + if (!columnRef.current) return + const resizeObserver = new ResizeObserver(() => setColumnHeight(columnRef.current?.offsetHeight ?? 0)) resizeObserver.observe(columnRef.current) - - return () => { - resizeObserver.disconnect() - } + return () => resizeObserver.disconnect() }, []) return ( @@ -153,98 +94,80 @@ function ReviewColumn({ className={clsx('animate-marquee space-y-8 py-4', className)} style={{ '--marquee-duration': duration } as React.CSSProperties} > - {reviews.concat(reviews).map((review, reviewIndex) => ( - = reviews.length} - className={reviewClassName?.(reviewIndex % reviews.length)} - {...review} - /> + {reviews.concat(reviews).map((review, i) => ( + = reviews.length} {...review} /> ))}
) } function ReviewGrid() { - let containerRef = useRef>(null) - let isInView = useInView(containerRef, { once: true, amount: 0.4 }) - let columns = splitArray(reviews, 3) - let column1 = columns[0] - let column2 = columns[1] - let column3 = splitArray(columns[2], 2) + const containerRef = useRef>(null) + const isInView = useInView(containerRef, { once: true, amount: 0.4 }) + + const columns = splitArray(reviews, 2) return ( -
+
{isInView && ( <> - - clsx( - reviewIndex >= column1.length + column3[0].length && - 'md:hidden', - reviewIndex >= column1.length && 'lg:hidden', - ) - } - msPerPixel={10} - /> - - reviewIndex >= column2.length ? 'lg:hidden' : '' - } - msPerPixel={15} - /> - + + )} -
-
+
+
) } export function UseCases() { - const ref = useRef(null); - const isInView = useInView(ref, { once: true }); + const ref = useRef(null) + const isInView = useInView(ref, { once: true }) return (
- - -

+
+ {/* Left Column - Top Left Text */} + - Coming Soon: The Future of Mycelium -

-

- Mycelium Cloud is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates. -

- +

+ Coming Soon: The Future of Mycelium +

+

+ Mycelium Cloud is evolving to bring even more powerful decentralized + features, designed to enhance your experience and expand possibilities. + Be the first to explore what's coming next by staying connected with our + latest updates. +

+ + + {/* Right Two Columns - Full Height Scrolling Cards */} + + + +
+ + {/* Background Gradient */} -
) diff --git a/src/components/WorldMap.tsx b/src/components/WorldMap.tsx index b66a19a..051c44e 100644 --- a/src/components/WorldMap.tsx +++ b/src/components/WorldMap.tsx @@ -1,11 +1,13 @@ +'use client' + import { Globe } from "@/components/ui/globe" import { motion } from "framer-motion" -import { H2, H3, H4, P } from "./Texts" +import { H2, P, CT } from "./Texts" export function WorldMap() { - return ( -
+
+ {/* Background video */} + + {/* Dark overlay */}
-
-

- Mycelium Network is Live. -

-

- Mycelium Cloud's advancement technology enables anyone to deploy their own Internet infrastructure, anywhere. -

-
-
- + + {/* Content */} +
+ {/* Title + Subtitle */} +
+

Mycelium Network is Live.

+

+ Mycelium Cloud's advancement technology enables anyone to deploy + their own Internet infrastructure, anywhere. +

+
+ + {/* Bottom Layout: Globe + Cards */} +
+ {/* Globe Left Column */} +
+
+ +
+
+ + {/* Cards Right Column */} +
+ + CORES +

54,958

+

+ Total Central Processing Unit Cores available on the grid. +

+ + + + NODES +

54,958

+

+ Total number of nodes on the grid. +

+ + + + SSD CAPACITY +

54,958

+

+ Total amount of storage (SSD, HDD, & RAM) on the grid. +

+ + + + COUNTRIES +

51

+

+ Total number of countries with active nodes. +

+ +
+
+ + {/* Radial fade overlay */}
- ); -} \ No newline at end of file + ) +}