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 16:46:23 +02:00
parent 5f6ad1c98d
commit 343b7ae22e
2 changed files with 24 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ClickableGallery.tsx
View File

@@ -72,23 +72,9 @@ export function ClickableGallery() {
onMouseEnter={() => setHovering(true)} onMouseEnter={() => setHovering(true)}
onMouseLeave={() => setHovering(false)} onMouseLeave={() => setHovering(false)}
> >
{/* Soft edge fades */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-black to-transparent" />
<div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-black to-transparent" />
<div className="relative w-full max-w-[1800px] h-[500px]" style={{ perspective: '1600px' }}> <div className="relative w-full max-w-[1800px] h-[500px]" style={{ perspective: '1600px' }}>
<div
aria-hidden="true"
className="absolute inset-x-0 -z-10 transform-gpu overflow-hidden blur-3xl"
>
<div
style={{
clipPath:
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
}}
className="relative left-[calc(50%+4rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%+60rem)] sm:w-[72.1875rem]"
/>
</div>
<div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}> <div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
<AnimatePresence initial={false}> <AnimatePresence initial={false}>
{indices.map((idx, i) => { {indices.map((idx, i) => {

42
src/components/UseCases.tsx
View File

@@ -22,7 +22,7 @@ interface Review {
body: string body: string
} }
const reviews: Array<Review> = [ 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: '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: '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: 'MOS Sandboxes: Secure Agent Workspaces', body: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.' },
@@ -53,21 +53,24 @@ function Review({ title, body, className, ...props }: Omit<React.ComponentPropsW
return ( return (
<figure <figure
className={clsx('animate-fade-in rounded-3xl bg-gray-900/50 p-6 opacity-0 shadow-md shadow-gray-900/5', className)} className={clsx(
'animate-fade-in rounded-3xl bg-gray-900/50 p-6 opacity-0 shadow-md shadow-gray-900/5',
className
)}
style={{ animationDelay }} style={{ animationDelay }}
{...props} {...props}
> >
<blockquote className="text-white"> <blockquote className="text-white">
{React.createElement(getReviewIcon(title), { className: 'h-6 w-6 text-white mb-2' })} {React.createElement(getReviewIcon(title), { className: 'h-6 w-6 text-white mb-2' })}
<CT color="light" className="mt-4 text-lg/6 font-semibold">{title}</CT> <CT color="light" className="mt-4 text-lg font-semibold">{title}</CT>
<CP color="light" className="mt-3 text-sm">{body}</CP> <CP color="light" className="mt-3 text-sm">{body}</CP>
</blockquote> </blockquote>
</figure> </figure>
) )
} }
function splitArray<T>(array: Array<T>, numParts: number) { function splitArray<T>(array: T[], numParts: number) {
const result: Array<Array<T>> = [] const result: T[][] = []
for (let i = 0; i < array.length; i++) { for (let i = 0; i < array.length; i++) {
const index = i % numParts const index = i % numParts
if (!result[index]) result[index] = [] if (!result[index]) result[index] = []
@@ -76,14 +79,16 @@ function splitArray<T>(array: Array<T>, numParts: number) {
return result return result
} }
function ReviewColumn({ reviews, className, msPerPixel = 0 }: { reviews: Array<Review>, className?: string, msPerPixel?: number }) { function ReviewColumn({ reviews, className, msPerPixel = 0 }: { reviews: Review[], className?: string, msPerPixel?: number }) {
const columnRef = useRef<React.ElementRef<'div'>>(null) const columnRef = useRef<HTMLDivElement>(null)
const [columnHeight, setColumnHeight] = useState(0) const [columnHeight, setColumnHeight] = useState(0)
const duration = `${columnHeight * msPerPixel}ms` const duration = `${columnHeight * msPerPixel}ms`
useEffect(() => { useEffect(() => {
if (!columnRef.current) return if (!columnRef.current) return
const resizeObserver = new ResizeObserver(() => setColumnHeight(columnRef.current?.offsetHeight ?? 0)) const resizeObserver = new ResizeObserver(() =>
setColumnHeight(columnRef.current?.offsetHeight ?? 0)
)
resizeObserver.observe(columnRef.current) resizeObserver.observe(columnRef.current)
return () => resizeObserver.disconnect() return () => resizeObserver.disconnect()
}, []) }, [])
@@ -102,9 +107,8 @@ function ReviewColumn({ reviews, className, msPerPixel = 0 }: { reviews: Array<R
} }
function ReviewGrid() { function ReviewGrid() {
const containerRef = useRef<React.ElementRef<'div'>>(null) const containerRef = useRef<HTMLDivElement>(null)
const isInView = useInView(containerRef, { once: true, amount: 0.4 }) const isInView = useInView(containerRef, { once: true, amount: 0.4 })
const columns = splitArray(reviews, 2) const columns = splitArray(reviews, 2)
return ( return (
@@ -115,8 +119,10 @@ function ReviewGrid() {
<ReviewColumn reviews={columns[1]} msPerPixel={15} /> <ReviewColumn reviews={columns[1]} msPerPixel={15} />
</> </>
)} )}
<div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-black" /> {/* Top Gradient */}
<div className="pointer-events-none absolute inset-x-0 bottom-12 h-32 bg-gradient-to-t from-black" /> <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-black/90 to-transparent z-10" />
{/* Bottom Gradient */}
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black/90 to-transparent z-10" />
</div> </div>
) )
} }
@@ -134,7 +140,7 @@ export function UseCases() {
> >
<Container className="h-full"> <Container className="h-full">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-10 h-full"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-10 h-full">
{/* Left Column - Top Left Text */} {/* Left Column */}
<motion.div <motion.div
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
@@ -142,17 +148,15 @@ export function UseCases() {
className="flex flex-col items-start justify-start pt-10 lg:pr-12" className="flex flex-col items-start justify-start pt-10 lg:pr-12"
> >
<H2 id="usecases-title" color="light" className="text-left"> <H2 id="usecases-title" color="light" className="text-left">
Coming Soon: The Future of Mycelium Mycelium Technologies
</H2> </H2>
<P className="mt-4 text-left" color="light"> <P className="mt-4 text-left" color="light">
Mycelium Cloud is evolving to bring even more powerful decentralized A robust infrastructure layer for autonomous AI agents, our technology stack
features, designed to enhance your experience and expand possibilities. delivers a secure, efficient, and intuitive platform for deploying and managing AI agents at scale.
Be the first to explore what's coming next by staying connected with our
latest updates.
</P> </P>
</motion.div> </motion.div>
{/* Right Two Columns - Full Height Scrolling Cards */} {/* Right Columns */}
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : { opacity: 0 }} animate={isInView ? { opacity: 1 } : { opacity: 0 }}