ok

src/app/(main)/page.tsx

@@ -20,27 +20,24 @@ export default function Home() {
       <section id="home-hero">
         <HomeHero />
       </section>
-      <section id="companies">
+      <section id="">
-        <Companies />
-      </section>
-      <section id="steps">
-        <Steps />
-      </section>
-      <section>
         <StackSectionPreview />
       </section>
-      <section id="grid-stats">
-        <GridStats />
-      </section>
       <section id="world-map">
         <WorldMap />
       </section>
-      <section id="get-started">
+      <section id="steps">
-        <GetStarted />
+        <Steps />
+      </section>
+      <section id="companies">
+        <Companies />
       </section>
       <section id="use-cases">
         <UseCases />
       </section>
+      <section id="get-started">
+        <GetStarted />
+      </section>
       <section id="call-to-action">
         <CallToAction />
       </section>

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<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.',
+  },
+  {
+    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<React.ComponentPropsWithoutRef<'figure'>, 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 (
+    <figure
+      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>
+        <CP color="light" className="mt-3 text-sm">{body}</CP>
+      </blockquote>
+
+    </figure>
+  )
+}
+
+function splitArray<T>(array: Array<T>, numParts: number) {
+  let result: Array<Array<T>> = []
+  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<Review>
+  className?: string
+  reviewClassName?: (reviewIndex: number) => string
+  msPerPixel?: number
+}) {
+  let columnRef = useRef<React.ElementRef<'div'>>(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 (
+    <div
+      ref={columnRef}
+      className={clsx('animate-marquee space-y-8 py-4', className)}
+      style={{ '--marquee-duration': duration } as React.CSSProperties}
+    >
+      {reviews.concat(reviews).map((review, reviewIndex) => (
+        <Review
+          key={reviewIndex}
+          aria-hidden={reviewIndex >= reviews.length}
+          className={reviewClassName?.(reviewIndex % reviews.length)}
+          {...review}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ReviewGrid() {
+  let containerRef = useRef<React.ElementRef<'div'>>(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 (
+    <div
+      ref={containerRef}
+      className="relative -mx-4 mt-0 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4  md:grid-cols-2 lg:grid-cols-3"
+    >
+      {isInView && (
+        <>
+          <ReviewColumn
+            reviews={[...column1, ...column3.flat(), ...column2]}
+            reviewClassName={(reviewIndex) =>
+              clsx(
+                reviewIndex >= column1.length + column3[0].length &&
+                  'md:hidden',
+                reviewIndex >= column1.length && 'lg:hidden',
+              )
+            }
+            msPerPixel={10}
+          />
+          <ReviewColumn
+            reviews={[...column2, ...column3[1]]}
+            className="hidden md:block"
+            reviewClassName={(reviewIndex) =>
+              reviewIndex >= column2.length ? 'lg:hidden' : ''
+            }
+            msPerPixel={15}
+          />
+          <ReviewColumn
+            reviews={column3.flat()}
+            className="hidden lg:block"
+            msPerPixel={10}
+          />
+        </>
+      )}
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-black" />
+    </div>
+  )
+}
+
+export function UseCases() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
+  return (
+    <section
+      id="usecases"
+      ref={ref}
+      aria-labelledby="usecases-title"
+      className="bg-black py-24"
+    >
+      <Container className=''>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mx-auto max-w-2xl  lg:max-w-5xl"
+        >
+          <H2
+            id="usecases-title" 
+            color="light"
+            className="text-center"
+          >
+            Coming Soon: The Future of Mycelium
+          </H2>
+          <P className="mt-6 text-center" 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.
+          </P>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ duration: 1, delay: 0.2 }}
+          aria-hidden="true"
+          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+          <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%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
+          />
+        </motion.div>
+        <ReviewGrid />
+      </Container>
+    </section>
+  )
+}

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 (
+    <div className="relative h-screen max-w-full overflow-hidden -top-20">
+      {/* Background video */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+      >
+        <source src="/videos/benefits.mp4" type="video/mp4" />
+      </video>
+
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-black/60" />
+
+      {/* Top Left Intro Text */}
+      <div className="absolute top-0 left-0 px-6 py-24 z-10 max-w-lg">
+        <H4 color="light">Mycelium Network is Live.</H4>
+        <CP className="mt-6 text-base leading-relaxed font-light" color="light">
+          Mycelium Cloud's advancement technology enables anyone to deploy
+          their own Internet infrastructure, anywhere.
+        </CP>
+      </div>
+
+      {/* Globe Centered */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <Globe className="top-28" />
+      </div>
+
+      {/* Right Side Stats Column */}
+      <div className="absolute right-0 top-0 bottom-0 flex flex-col justify-center gap-6 px-6 py-12 max-w-xs z-10">
+        <motion.div
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+          className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
+        >
+          <CT color="light" className="uppercase tracking-wide">
+            CORES
+          </CT>
+          <H2 color="light" className="mt-2 text-3xl font-bold">
+            54,958
+          </H2>
+          <CP color="light" className="mt-2 text-sm">
+            Total Central Processing Unit Cores available on the grid.
+          </CP>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
+        >
+          <CT color="light" className="uppercase tracking-wide">
+            NODES
+          </CT>
+          <H2 color="light" className="mt-2 text-3xl font-bold">
+            54,958
+          </H2>
+          <CP color="light" className="mt-2 text-sm">
+            Total number of nodes on the grid.
+          </CP>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+          className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
+        >
+          <CT color="light" className="uppercase tracking-wide">
+            SSD CAPACITY
+          </CT>
+          <H2 color="light" className="mt-2 text-3xl font-bold">
+            54,958
+          </H2>
+          <CP color="light" className="mt-2 text-sm">
+            Total amount of storage (SSD, HDD, & RAM) on the grid.
+          </CP>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, delay: 0.4 }}
+          className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md"
+        >
+          <CT color="light" className="uppercase tracking-wide">
+            COUNTRIES
+          </CT>
+          <H2 color="light" className="mt-2 text-3xl font-bold">
+            51
+          </H2>
+          <CP color="light" className="mt-2 text-sm">
+            Total number of countries with active nodes.
+          </CP>
+        </motion.div>
+      </div>
+
+      {/* Radial fade overlay */}
+      <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
+    </div>
+  )
+}

src/components/StackSection.tsx

@@ -11,7 +11,7 @@ export function StackSectionPreview() {
   const isInView = useInView(ref);
 
   return (
-    <section ref={ref} className="w-full h-screen bg-transparent lg:px-0 pt-24 pb-12 px-6 relative">
+    <section ref={ref} className="w-full h-screen bg-transparent lg:px-0 py-12 px-6 relative">
     {/* Gradient Blob Component */}
       <motion.div
         initial={{ opacity: 0 }}

src/components/UseCases.tsx

@@ -23,128 +23,69 @@ interface Review {
 }
 
 const reviews: Array<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',
+  { title: 'HeroDB: Active AI Memory', body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.' },
-    body: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
+  { 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: 'HeroDB: Active AI Memory',
+  { title: 'Agent Coordination: Sovereign Workflow Management', body: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.' },
-    body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
+  { 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: '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('FungiStor')) return ArchiveBoxIcon
-  if (title.startsWith('HeroDB')) return CpuChipIcon;
+  if (title.startsWith('HeroDB')) return CpuChipIcon
-  if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon;
+  if (title.startsWith('MOS Sandboxes')) return CodeBracketIcon
-  if (title.startsWith('Mycelium Mesh')) return ShareIcon;
+  if (title.startsWith('Mycelium Mesh')) return ShareIcon
-  if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon;
+  if (title.startsWith('Deterministic Deployment')) return CheckBadgeIcon
-  if (title.startsWith('Agent Coordination')) return UserGroupIcon;
+  if (title.startsWith('Agent Coordination')) return UserGroupIcon
-  if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon;
+  if (title.startsWith('Universal Interface Layer')) return GlobeAltIcon
-  if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon;
+  if (title.startsWith('Semantic Index & Search')) return MagnifyingGlassIcon
-  return GlobeAltIcon; // default
+  return GlobeAltIcon
 }
 
-function Review({
+function Review({ title, body, className, ...props }: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
-  title,
+  const animationDelay = useMemo(() => {
-  body,
+    const delays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
-  className,
+    return delays[Math.floor(Math.random() * delays.length)]
-  ...props
-}: Omit<React.ComponentPropsWithoutRef<'figure'>, 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 (
     <figure
-      className={clsx(
+      className={clsx('animate-fade-in rounded-3xl bg-gray-900/50 p-6 opacity-0 shadow-md shadow-gray-900/5', className)}
-        '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" })}
+        {React.createElement(getReviewIcon(title), { className: 'h-6 w-6 text-white mb-2' })}
-        <CT color="light" className="mt-4 text-lg/6 font-semibold">
+        <CT color="light" className="mt-4 text-lg/6 font-semibold">{title}</CT>
-          {title}
-        </CT>
         <CP color="light" className="mt-3 text-sm">{body}</CP>
       </blockquote>
-
     </figure>
   )
 }
 
 function splitArray<T>(array: Array<T>, numParts: number) {
-  let result: Array<Array<T>> = []
+  const result: Array<Array<T>> = []
   for (let i = 0; i < array.length; i++) {
-    let index = i % numParts
+    const index = i % numParts
-    if (!result[index]) {
+    if (!result[index]) result[index] = []
-      result[index] = []
-    }
     result[index].push(array[i])
   }
   return result
 }
 
-function ReviewColumn({
+function ReviewColumn({ reviews, className, msPerPixel = 0 }: { reviews: Array<Review>, className?: string, msPerPixel?: number }) {
-  reviews,
+  const columnRef = useRef<React.ElementRef<'div'>>(null)
-  className,
+  const [columnHeight, setColumnHeight] = useState(0)
-  reviewClassName,
+  const duration = `${columnHeight * msPerPixel}ms`
-  msPerPixel = 0,
-}: {
-  reviews: Array<Review>
-  className?: string
-  reviewClassName?: (reviewIndex: number) => string
-  msPerPixel?: number
-}) {
-  let columnRef = useRef<React.ElementRef<'div'>>(null)
-  let [columnHeight, setColumnHeight] = useState(0)
-  let duration = `${columnHeight * msPerPixel}ms`
 
   useEffect(() => {
-    if (!columnRef.current) {
+    if (!columnRef.current) return
-      return
+    const resizeObserver = new ResizeObserver(() => setColumnHeight(columnRef.current?.offsetHeight ?? 0))
-    }
-
-    let resizeObserver = new window.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.concat(reviews).map((review, i) => (
-        <Review
+        <Review key={i} aria-hidden={i >= reviews.length} {...review} />
-          key={reviewIndex}
-          aria-hidden={reviewIndex >= reviews.length}
-          className={reviewClassName?.(reviewIndex % reviews.length)}
-          {...review}
-        />
       ))}
     </div>
   )
 }
 
 function ReviewGrid() {
-  let containerRef = useRef<React.ElementRef<'div'>>(null)
+  const containerRef = useRef<React.ElementRef<'div'>>(null)
-  let isInView = useInView(containerRef, { once: true, amount: 0.4 })
+  const isInView = useInView(containerRef, { once: true, amount: 0.4 })
-  let columns = splitArray(reviews, 3)
+
-  let column1 = columns[0]
+  const columns = splitArray(reviews, 2)
-  let column2 = columns[1]
-  let column3 = splitArray(columns[2], 2)
 
   return (
-    <div
+    <div ref={containerRef} className="relative grid grid-cols-1 md:grid-cols-2 gap-8 overflow-hidden h-full">
-      ref={containerRef}
-      className="relative -mx-4 mt-0 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4  md:grid-cols-2 lg:grid-cols-3"
-    >
       {isInView && (
         <>
-          <ReviewColumn
+          <ReviewColumn reviews={columns[0]} msPerPixel={10} />
-            reviews={[...column1, ...column3.flat(), ...column2]}
+          <ReviewColumn reviews={columns[1]} msPerPixel={15} />
-            reviewClassName={(reviewIndex) =>
-              clsx(
-                reviewIndex >= column1.length + column3[0].length &&
-                  'md:hidden',
-                reviewIndex >= column1.length && 'lg:hidden',
-              )
-            }
-            msPerPixel={10}
-          />
-          <ReviewColumn
-            reviews={[...column2, ...column3[1]]}
-            className="hidden md:block"
-            reviewClassName={(reviewIndex) =>
-              reviewIndex >= column2.length ? 'lg:hidden' : ''
-            }
-            msPerPixel={15}
-          />
-          <ReviewColumn
-            reviews={column3.flat()}
-            className="hidden lg:block"
-            msPerPixel={10}
-          />
         </>
       )}
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black" />
+      <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-0 h-32 bg-linear-to-t from-black" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black" />
     </div>
   )
 }
 
 export function UseCases() {
-  const ref = useRef(null);
+  const ref = useRef(null)
-  const isInView = useInView(ref, { once: true });
+  const isInView = useInView(ref, { once: true })
 
   return (
     <section
       id="usecases"
       ref={ref}
       aria-labelledby="usecases-title"
-      className="bg-black py-24"
+      className="bg-black h-screen relative flex items-start py-12 -top-20"
     >
-      <Container className=''>
+      <Container className="h-full">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-10 h-full">
+          {/* Left Column - Top Left Text */}
           <motion.div
-          initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 10 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
             transition={{ duration: 0.8, delay: 0.1 }}
-          className="mx-auto max-w-2xl  lg:max-w-5xl"
+            className="flex flex-col items-start justify-start pt-10 lg:pr-12"
-        >
-          <H2
-            id="usecases-title" 
-            color="light"
-            className="text-center"
           >
+            <H2 id="usecases-title" color="light" className="text-left">
               Coming Soon: The Future of Mycelium
             </H2>
-          <P className="mt-6 text-center" color="light">
+            <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.
+              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.
             </P>
           </motion.div>
+
+          {/* Right Two Columns - Full Height Scrolling Cards */}
           <motion.div
             initial={{ opacity: 0 }}
             animate={isInView ? { opacity: 1 } : { opacity: 0 }}
             transition={{ duration: 1, delay: 0.2 }}
+            className="lg:col-span-2 h-full"
+          >
+            <ReviewGrid />
+          </motion.div>
+        </div>
+
+        {/* Background Gradient */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ duration: 1, delay: 0.3 }}
           aria-hidden="true"
           className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
         >
@@ -256,7 +179,6 @@ export function UseCases() {
             className="relative left-[calc(50%-30rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#93c5fd] to-[#9089fc] opacity-30 sm:left-[calc(50%-36rem)] sm:w-[72.1875rem]"
           />
         </motion.div>
-        <ReviewGrid />
       </Container>
     </section>
   )

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 (
-    <div className="relative h-screen max-w-full overflow-hidden -top-20">
+    <div className="relative h-screen w-full overflow-hidden -top-20 flex flex-col">
+      {/* Background video */}
       <video
         autoPlay
         loop
@@ -15,19 +17,69 @@ export function WorldMap() {
       >
         <source src="/videos/benefits.mp4" type="video/mp4" />
       </video>
+
+      {/* Dark overlay */}
       <div className="absolute inset-0 bg-black/60" />
-      <div className="absolute top-0 left-0 px-6 py-24 z-10 max-w-lg">
+
-        <H4 className="" color="light">
+      {/* Content */}
-          Mycelium Network is Live.
+      <div className="relative z-10 flex flex-col h-full px-6 md:px-16 py-12">
-        </H4>
+        {/* Title + Subtitle */}
-        <P className="mt-6 text-base text-pretty leading-relaxed font-light" color="light">
+        <div className="max-w-2xl">
-          Mycelium Cloud's advancement technology enables anyone to deploy their own Internet infrastructure, anywhere.
+          <H2 color="light">Mycelium Network is Live.</H2>
+          <P className="mt-4 text-base leading-relaxed font-light" color="light">
+            Mycelium Cloud's advancement technology enables anyone to deploy
+            their own Internet infrastructure, anywhere.
           </P>
         </div>
-      <div className="absolute inset-0 flex items-center justify-center">
+
-        <Globe className="top-28" />
+        {/* Bottom Layout: Globe + Cards */}
+        <div className="mt-8 flex flex-1 flex-col lg:flex-row items-center lg:items-stretch gap-12">
+          {/* Globe Left Column */}
+          <div className="flex-1 flex items-center justify-center top-32 -left-24">
+            <div className="relative w-[450px] h-[450px] md:w-[550px] md:h-[550px]">
+              <Globe className="absolute inset-0 w-full h-full" />
             </div>
+          </div>
+
+          {/* Cards Right Column */}
+          <div className="flex flex-col justify-center gap-6 max-w-xs w-full">
+            <motion.div className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md">
+              <CT color="light" className="uppercase tracking-wide">CORES</CT>
+              <H2 color="light" className="mt-2 text-3xl font-bold">54,958</H2>
+              <P color="light" className="mt-2 text-sm">
+                Total Central Processing Unit Cores available on the grid.
+              </P>
+            </motion.div>
+
+            <motion.div className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md">
+              <CT color="light" className="uppercase tracking-wide">NODES</CT>
+              <H2 color="light" className="mt-2 text-3xl font-bold">54,958</H2>
+              <P color="light" className="mt-2 text-sm">
+                Total number of nodes on the grid.
+              </P>
+            </motion.div>
+
+            <motion.div className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md">
+              <CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT>
+              <H2 color="light" className="mt-2 text-3xl font-bold">54,958</H2>
+              <P color="light" className="mt-2 text-sm">
+                Total amount of storage (SSD, HDD, & RAM) on the grid.
+              </P>
+            </motion.div>
+
+            <motion.div className="rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 p-4 shadow-md">
+              <CT color="light" className="uppercase tracking-wide">COUNTRIES</CT>
+              <H2 color="light" className="mt-2 text-3xl font-bold">51</H2>
+              <P color="light" className="mt-2 text-sm">
+                Total number of countries with active nodes.
+              </P>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+
+      {/* Radial fade overlay */}
       <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
     </div>
-  );
+  )
 }