diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9adc238..6e6ef92 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -26,7 +26,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ) } diff --git a/src/components/Archives/GridStats copy.tsx b/src/components/Archives/GridStats copy.tsx index 41abc18..ef41372 100644 --- a/src/components/Archives/GridStats copy.tsx +++ b/src/components/Archives/GridStats copy.tsx @@ -2,7 +2,7 @@ import CountUp from "react-countup"; import React from "react"; -import { Button } from "./Button"; +import { Button } from "@/components/Button"; export function GridStats() { return ( diff --git a/src/components/Archives/UseCases copy.tsx b/src/components/Archives/UseCases copy.tsx new file mode 100644 index 0000000..4db920f --- /dev/null +++ b/src/components/Archives/UseCases copy.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-[#2F3178] 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/Fields.tsx b/src/components/Fields.tsx index c8b3659..8620ee7 100644 --- a/src/components/Fields.tsx +++ b/src/components/Fields.tsx @@ -1,14 +1,21 @@ import { useId } from 'react' import clsx from 'clsx' -const formClasses = - 'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-hidden focus:ring-cyan-500 sm:text-sm' +const formClasses = { + light: + 'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm', + dark: + 'block w-full appearance-none rounded-lg border border-gray-600 bg-transparent py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-white placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm', +} -function Label({ id, children }: { id: string; children: React.ReactNode }) { +function Label({ id, children, variant = 'light' }: { id: string; children: React.ReactNode, variant?: 'light' | 'dark' }) { return ( @@ -19,14 +26,15 @@ export function TextField({ label, type = 'text', className, + variant = 'light', ...props -}: Omit, 'id'> & { label?: string }) { +}: Omit, 'id'> & { label?: string; variant?: 'light' | 'dark' }) { let id = useId() return (
- {label && } - + {label && } +
) } diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index d2a2d16..890d739 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -22,11 +22,11 @@ function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) { export function Footer() { return ( -