ok

src/components/Benefits.tsx

@@ -1,60 +0,0 @@
-'use client'
-
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import clsx from 'clsx'
-import { useInView } from 'framer-motion'
-import { Container } from '@/components/Container'
-
-
-
-
-
-const features = [
-  {
-    name: 'Decentralization',
-    description: 'Designed to operate in a decentralized manner, it connects nodes and enables efficient data transfer and communication without relying on a single central authority.',
-  },
-  {
-    name: 'Efficiency',
-    description:
-      'Mycelium provides an efficient digital communication network where data travels along the most efficient paths, reducing latency and optimizing resource utilization.',
-  },
-  {
-    name: 'Resilience',
-    description:
-      'Inspired by nature\'s resilience, it creates a network that can adapt and continue to function even in the presence of challenges, ensuring uninterrupted communication.',
-  },
-]
-
-export function Benefits() {
-  return (
-    <section id="benefits" className="bg-white py-24 sm:py-32 dark:bg-gray-900">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-5xl lg:mx-0">
-          <h2 className="text-3xl font-medium tracking-tight text-gray-900">
-            Nature's Blueprint for Digital Connectivity
-          </h2>
-          <p className="mt-6 text-lg text-gray-600">
-            Just as nature's mycelium network serves as a critical component in the ecosystems of forests, connecting trees and plants underground, the Mycelium technology offers reliable connectivity in an efficient and resilient way.
-          </p>
-        </div>
-        <ul className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-          {features.map((feature) => (
-            <li
-              key={feature.name}
-              className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
-            >
-              <img
-                src={`/images/${feature.name.toLowerCase()}.svg`}
-                alt={feature.name}
-                className="h-8 w-8 mb-4"
-              />
-              <h3 className="font-semibold text-gray-900 dark:text-white">{feature.name}</h3>
-              <p className="mt-2 text-gray-700 text-sm dark:text-gray-400">{feature.description}</p>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-  )
-}

src/components/ClickableGallery.tsx

@@ -24,10 +24,10 @@ const galleryItems = [
 
 // 🔧 Carousel Config
 const VISIBLE = 4
-const CARD_SIZE = 450 // square size on desktop
-const GAP = 380       // spacing for larger cards
+const CARD_SIZE = 360 // square size on desktop
+const GAP = 300       // spacing for larger cards
 const ROT_Y = 18
-const DEPTH = 260
+const DEPTH = 210
 const SCALE_DROP = 0.12
 const AUTOPLAY_MS = 3200
 

src/components/StackSection.tsx

@@ -28,15 +28,7 @@ export function StackSectionPreview() {
                 The Mycelium Stack
               </H2>
             </motion.div>
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-              transition={{ duration: 0.8, delay: 0.4 }}
-            >
-              <P className="mt-6 max-w-3xl ">
-                Mycelium is a fully integrated, vertical stack for sovereign and decentralized AI. It provides the foundation for a new generation of agentic applications, giving you full control over your data and intelligence.
-              </P>
-            </motion.div>
+            
             <motion.div
               initial={{ opacity: 0, y: 30 }}
               animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}

src/components/Steps.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import clsx from 'clsx'
+import { useInView } from 'framer-motion'
+import { Container } from '@/components/Container'
+import { H2, P, CT, CP } from '@/components/Texts'
+
+
+
+
+
+const features = [
+  {
+    name: '1. Choose Your Intelligence',
+    description: 'Explore a library of leading LLMs and agentic functions. Pick the ones that fit your use case, from general assistants to specialized reasoning models.',
+    icon: 'step1',
+  },
+  {
+    name: '2. Add Your Knowledge',
+    description:
+      'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
+    icon: 'step2',
+  },
+  {
+    name: '3. Define Your Network',
+    description:
+      'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
+    icon: 'step3',
+  },
+]
+
+export function Steps() {
+  return (
+    <section id="benefits" className="bg-white py-24 sm:py-32 dark:bg-gray-900">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-5xl lg:mx-0">
+          <H2 className="text-3xl font-medium tracking-tight">
+            Deploy Scalable, Decentralized LLMs and AI Agents in Seconds
+          </H2>
+          <P className="mt-6 text-lg">
+            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
+          </P>
+        </div>
+        <ul className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {features.map((feature) => (
+            <li
+              key={feature.name}
+              className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
+            >
+              <img
+                src={`/images/${feature.icon}.svg`}
+                alt={feature.name}
+                className="h-8 w-8 mb-4"
+              />
+              <CT as="h3" className="font-semibold">{feature.name}</CT>
+              <CP className="mt-2 text-sm">{feature.description}</CP>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}

src/components/UseCases.tsx

@@ -5,20 +5,13 @@ import clsx from 'clsx'
 import { useInView } from 'framer-motion'
 import {
   ArchiveBoxIcon,
-  ChatBubbleBottomCenterIcon,
-  CloudIcon,
   CodeBracketIcon,
-  ComputerDesktopIcon,
   CpuChipIcon,
-  DocumentIcon,
-  EnvelopeIcon,
   GlobeAltIcon,
-  GlobeAmericasIcon,
-  PlayCircleIcon,
+  MagnifyingGlassIcon,
   ShareIcon,
-  EyeSlashIcon,
   UserGroupIcon,
-  VideoCameraIcon,
+  CheckBadgeIcon,
 } from '@heroicons/react/24/solid'
 
 import { Container } from '@/components/Container'
@@ -26,189 +19,59 @@ import { Container } from '@/components/Container'
 interface Review {
   title: string
   body: string
-  author: string
-  rating: 1 | 2 | 3 | 4 | 5
 }
 
 const reviews: Array<Review> = [
   {
-    title: 'Secure remote work collaboration.',
-    body: 'Mycelium provides a secure, encrypted network for a wide range of use cases, from private communication to decentralized infrastructure.',
-    author: 'CrazyInvestor',
-    rating: 5,
+    title: 'FungiStor: Long-Term AI Memory',
+    body: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
   },
   {
-    title: 'Private file sharing between trusted nodes.',
-    body: 'Mycelium enables private file sharing between trusted nodes, ensuring that sensitive information remains confidential and secure.',
-    author: 'CluelessButRich',
-    rating: 5,
+    title: 'HeroDB: Active AI Memory',
+    body: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
   },
   {
-    title: 'Encrypted voice/video calls.',
-    body: 'Mycelium enables secure voice and video calls between users, ensuring that conversations remain private and protected from eavesdropping.',
-    author: 'LivingDaDream',
-    rating: 5,
+    title: 'MOS Sandboxes: Secure Agent Workspaces',
+    body: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
   },
   {
-    title: 'Self-hosted messaging systems.',
-    body: 'Mycelium allows users to create their own self-hosted messaging systems, ensuring complete control over their communications.',
-    author: 'JordanBelfort1962',
-    rating: 5,
+    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: 'Secure document collaboration.',
-    body: 'Mycelium enables secure document collaboration between users, ensuring that sensitive information remains confidential and protected.',
-    author: 'MrBurns',
-    rating: 5,
+    title: 'Deterministic Deployment: Verifiable Code Execution',
+    body: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
   },
   {
-    title: 'Private cloud computing resources.',
-    body: 'Mycelium provides private cloud computing resources, allowing users to run their applications in a secure and isolated environment.',
-    author: 'LazyRich99',
-    rating: 5,
+    title: 'Agent Coordination: Sovereign Workflow Management',
+    body: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
   },
   {
-    title: 'Secure IoT device networks.',
-    body: 'Mycelium provides secure IoT device networks, ensuring that all connected devices can communicate privately and securely.',
-    author: 'SarahLuvzCash',
-    rating: 5,
+    title: 'Universal Interface Layer: AI Service Gateway',
+    body: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
   },
   {
-    title: 'Remote system administration.',
-    body: 'Mycelium enables secure remote system administration, allowing users to manage their systems from anywhere without compromising security.',
-    author: 'ScroogeMcduck',
-    rating: 5,
-  },
-  {
-    title: 'Virtual private networks (VPNs).',
-    body: 'Mycelium enables the creation of virtual private networks (VPNs), allowing users to securely connect to remote networks and access resources without compromising their privacy.',
-    author: 'BruceWayne',
-    rating: 5,
-  },
-  {
-    title: 'Secure backup systems.',
-    body: 'Mycelium provides secure backup systems, ensuring that users can easily and safely back up their important data without the risk of unauthorized access.',
-    author: 'RichieRich',
-    rating: 5,
-  },
-  {
-    title: 'Self-hosted web services.',
-    body: 'Mycelium allows users to create their own self-hosted web services, ensuring complete control over their data and applications.',
-    author: 'TheCountOfMonteChristo',
-    rating: 5,
-  },
-  {
-    title: 'Private file sharing between trusted nodes.',
-    body: 'Mycelium enables private file sharing between trusted nodes, ensuring that sensitive information remains confidential and secure.',
-    author: 'ClarkKent',
-    rating: 5,
-  },
-  {
-    title: 'Private DNS systems.',
-    body: 'Mycelium enables the creation of private DNS systems, allowing users to maintain control over their domain name resolution and protect their privacy.',
-    author: 'GeorgeCostanza',
-    rating: 5,
-  },
-  {
-    title: 'Personal email servers.',
-    body: 'Mycelium allows users to create their own personal email servers, ensuring complete control over their communications and data.',
-    author: 'JeffBezos',
-    rating: 5,
-  },
-  {
-    title: 'Secure document collaboration.',
-    body: 'Mycelium enables secure document collaboration between users, ensuring that sensitive information remains confidential and protected.',
-    author: 'JeffBezos',
-    rating: 5,
-  },
-    {
-    title: 'Private media streaming.',
-    body: 'Mycelium enables private media streaming between users, ensuring that sensitive content remains confidential and protected.',
-    author: 'JeffBezos',
-    rating: 5,
-  },
-    {
-    title: 'Personal cloud storage.',
-    body: 'Mycelium allows users to create their own personal cloud storage solutions, ensuring complete control over their data and privacy.',
-    author: 'JeffBezos',
-    rating: 5,
-  },
-    {
-    title: 'Personal email servers.',
-    body: 'Mycelium allows users to create their own personal email servers, ensuring complete control over their communications and data.',
-    author: 'JeffBezos',
-    rating: 5,
-  },
-    {
-    title: 'Protected content distribution.',
-    body: 'Mycelium enables protected content distribution, allowing users to securely share and distribute sensitive information without compromising its confidentiality.',
-    author: 'JeffBezos',
-    rating: 5,
-  },
-    {
-    title: 'Secure game servers.',
-    body: 'Mycelium enables the creation of secure game servers, allowing users to host and manage their own gaming environments with complete control over their data and privacy.',
-    author: 'JeffBezos',
-    rating: 5,
-  },    {
-    title: 'Private git repositories.',
-    body: 'Mycelium enables the creation of private git repositories, allowing users to host and manage their own version control systems with complete control over their data and privacy.',
-    author: 'JeffBezos',
-    rating: 5,
+    title: 'Semantic Index & Search: Navigable Knowledge Fabric',
+    body: 'Transforms data chaos into unified knowledge graphs. Goes beyond keywords to understand meaning and context.',
   },
 ]
 
-function StarIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-    </svg>
-  )
-}
-
-function StarRating({ rating }: { rating: Review['rating'] }) {
-  return (
-    <div className="flex">
-      {[...Array(5).keys()].map((index) => (
-        <StarIcon
-          key={index}
-          className={clsx(
-            'h-5 w-5',
-            rating > index ? 'fill-cyan-500' : 'fill-gray-300',
-          )}
-        />
-      ))}
-    </div>
-  )
-}
 
 function getReviewIcon(title: string) {
-  if (title.toLowerCase().includes('collaboration')) return UserGroupIcon;
-  if (title.toLowerCase().includes('file sharing')) return ShareIcon;
-  if (title.toLowerCase().includes('voice') || title.toLowerCase().includes('video')) return VideoCameraIcon;
-  if (title.toLowerCase().includes('messaging')) return ChatBubbleBottomCenterIcon;
-  if (title.toLowerCase().includes('document')) return DocumentIcon;
-  if (title.toLowerCase().includes('cloud')) return CloudIcon;
-  if (title.toLowerCase().includes('iot')) return CpuChipIcon;
-  if (title.toLowerCase().includes('administration')) return ComputerDesktopIcon;
-  if (title.toLowerCase().includes('vpn')) return GlobeAmericasIcon;
-  if (title.toLowerCase().includes('backup')) return ArchiveBoxIcon;
-  if (title.toLowerCase().includes('web services')) return GlobeAltIcon;
-  if (title.toLowerCase().includes('dns')) return GlobeAmericasIcon;
-  if (title.toLowerCase().includes('email')) return EnvelopeIcon;
-  if (title.toLowerCase().includes('media streaming') || title.toLowerCase().includes('streaming')) return PlayCircleIcon;
-  if (title.toLowerCase().includes('storage')) return CloudIcon;
-  if (title.toLowerCase().includes('distribution')) return EyeSlashIcon;
-  if (title.toLowerCase().includes('game')) return ComputerDesktopIcon;
-  if (title.toLowerCase().includes('git')) return CodeBracketIcon;
-  return ComputerDesktopIcon; // default
+  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,
-  author,
-  rating,
   className,
   ...props
 }: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
@@ -342,8 +205,8 @@ function ReviewGrid() {
           />
         </>
       )}
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-gray-50" />
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-gray-50" />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-white" />
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-white" />
     </div>
   )
 }
@@ -361,10 +224,10 @@ export function UseCases() {
             id="usecases-title"
             className="text-3xl font-medium tracking-tight text-gray-900 sm:text-center"
           >
-            Powering Secure & Decentralized Connectivity
+            Coming Soon: The Future of Mycelium
           </h2>
           <p className="mt-6 text-lg text-gray-600 sm:text-center">
-            The ThreeFold Dashboard offers dozens of applications with built-in Mycelium support, making it easy to deploy and utilize. Once installed, Mycelium provides a secure, encrypted network for a wide range of use cases, from private communication to decentralized infrastructure.
+          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>
         </div>
         <ReviewGrid />

src/components/logos/NousResearch.tsx

@@ -1,3 +0,0 @@
-import { NousResearch } from '@lobehub/icons';
-
-export default () => <NousResearch.Combine size={45} />;