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)}
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
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' }}>
<AnimatePresence initial={false}>
{indices.map((idx, i) => {

42
src/components/UseCases.tsx
View File

@@ -22,7 +22,7 @@ interface Review {
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: '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.' },
@@ -53,21 +53,24 @@ function Review({ title, body, className, ...props }: Omit<React.ComponentPropsW
return (
<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 }}
{...props}
>
<blockquote className="text-white">
{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>
</blockquote>
</figure>
)
}
function splitArray<T>(array: Array<T>, numParts: number) {
const result: Array<Array<T>> = []
function splitArray<T>(array: T[], numParts: number) {
const result: T[][] = []
for (let i = 0; i < array.length; i++) {
const index = i % numParts
if (!result[index]) result[index] = []
@@ -76,14 +79,16 @@ function splitArray<T>(array: Array<T>, numParts: number) {
return result
}
function ReviewColumn({ reviews, className, msPerPixel = 0 }: { reviews: Array<Review>, className?: string, msPerPixel?: number }) {
const columnRef = useRef<React.ElementRef<'div'>>(null)
function ReviewColumn({ reviews, className, msPerPixel = 0 }: { reviews: Review[], className?: string, msPerPixel?: number }) {
const columnRef = useRef<HTMLDivElement>(null)
const [columnHeight, setColumnHeight] = useState(0)
const duration = `${columnHeight * msPerPixel}ms`
useEffect(() => {
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)
return () => resizeObserver.disconnect()
}, [])
@@ -102,9 +107,8 @@ function ReviewColumn({ reviews, className, msPerPixel = 0 }: { reviews: Array<R
}
function ReviewGrid() {
const containerRef = useRef<React.ElementRef<'div'>>(null)
const containerRef = useRef<HTMLDivElement>(null)
const isInView = useInView(containerRef, { once: true, amount: 0.4 })
const columns = splitArray(reviews, 2)
return (
@@ -115,8 +119,10 @@ function ReviewGrid() {
<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" />
<div className="pointer-events-none absolute inset-x-0 bottom-12 h-32 bg-gradient-to-t from-black" />
{/* Top Gradient */}
<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>
)
}
@@ -134,7 +140,7 @@ export function UseCases() {
>
<Container className="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
initial={{ 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"
>
<H2 id="usecases-title" color="light" className="text-left">
Coming Soon: The Future of Mycelium
Mycelium Technologies
</H2>
<P className="mt-4 text-left" color="light">
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.
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.
</P>
</motion.div>
{/* Right Two Columns - Full Height Scrolling Cards */}
{/* Right Columns */}
<motion.div
initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : { opacity: 0 }}