From 343b7ae22ebc6d9c76a9b238f5b7636ee5fc2b6a Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 17 Sep 2025 16:46:23 +0200
Subject: [PATCH] ok

---
 src/components/ClickableGallery.tsx | 16 +----------
 src/components/UseCases.tsx         | 42 ++++++++++++++++-------------
 2 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/src/components/ClickableGallery.tsx b/src/components/ClickableGallery.tsx
index 3141599..8eac564 100644
--- a/src/components/ClickableGallery.tsx
+++ b/src/components/ClickableGallery.tsx
@@ -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) => {
diff --git a/src/components/UseCases.tsx b/src/components/UseCases.tsx
index dd96e94..d497a27 100644
--- a/src/components/UseCases.tsx
+++ b/src/components/UseCases.tsx
@@ -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 }}