From 02557fcb82c3264a28d383539574e57ebd406e41 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 17 Sep 2025 18:32:20 +0200
Subject: [PATCH] ok

---
 next-env.d.ts                       |   1 +
 package-lock.json                   |  27 +++++
 package.json                        |   1 +
 src/app/(main)/page.tsx             |   7 +-
 src/components/BentoReviews.tsx     | 153 ++++++++++++++++++----------
 src/components/ClickableGallery.tsx |   2 +-
 src/components/WorldMap.tsx         |   2 +-
 src/components/ui/StackedCubes.tsx  |   4 +-
 src/components/ui/bento-grid.tsx    |  51 ++++++++++
 src/pages/_document.tsx             |  13 +++
 10 files changed, 201 insertions(+), 60 deletions(-)
 create mode 100644 src/components/ui/bento-grid.tsx
 create mode 100644 src/pages/_document.tsx

diff --git a/next-env.d.ts b/next-env.d.ts
index 40c3d68..725dd6f 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
index 3beaaff..0cf1f78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@headlessui/react": "^2.1.0",
         "@heroicons/react": "^2.2.0",
         "@lobehub/icons": "^1.97.2",
+        "@tabler/icons-react": "^3.35.0",
         "@tailwindcss/forms": "^0.5.3",
         "@types/node": "^20.10.8",
         "@types/react": "^18.2.55",
@@ -2976,6 +2977,32 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.35.0.tgz",
+      "integrity": "sha512-yYXe+gJ56xlZFiXwV9zVoe3FWCGuZ/D7/G4ZIlDtGxSx5CGQK110wrnT29gUj52kEZoxqF7oURTk97GQxELOFQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.35.0.tgz",
+      "integrity": "sha512-XG7t2DYf3DyHT5jxFNp5xyLVbL4hMJYJhiSdHADzAjLRYfL7AnjlRfiHDHeXxkb2N103rEIvTsBRazxXtAUz2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.35.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tailwindcss/forms": {
       "version": "0.5.10",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
diff --git a/package.json b/package.json
index 64e8482..6b0716c 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@headlessui/react": "^2.1.0",
     "@heroicons/react": "^2.2.0",
     "@lobehub/icons": "^1.97.2",
+    "@tabler/icons-react": "^3.35.0",
     "@tailwindcss/forms": "^0.5.3",
     "@types/node": "^20.10.8",
     "@types/react": "^18.2.55",
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index d227a96..83154eb 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -13,6 +13,7 @@ import { ScrollUp } from '@/components/ui/ScrollUp'
 import { GridStats } from '@/components/GridStats'
 import { WorldMap } from '@/components/WorldMap'
 import { GetStarted } from '@/components/GetStarted'
+import { BentoReviews } from '@/components/BentoReviews'
 
 export default function Home() {
   return (
@@ -23,6 +24,9 @@ export default function Home() {
       <section id="about">
         <StackSectionPreview />
       </section>
+      <section id="bento-reviews" className="py-12">
+        <BentoReviews />
+      </section>
       <section id="network">
         <WorldMap />
       </section>
@@ -38,9 +42,6 @@ export default function Home() {
       <section id="clickable-gallery">
         <ClickableGallery />
       </section>
-      <section id="get-started">
-        <GetStarted />
-      </section>
       <section id="call-to-action">
         <CallToAction />
       </section>
diff --git a/src/components/BentoReviews.tsx b/src/components/BentoReviews.tsx
index 7451646..056f17c 100644
--- a/src/components/BentoReviews.tsx
+++ b/src/components/BentoReviews.tsx
@@ -1,60 +1,107 @@
-'use client'
+"use client";
 
-import React from 'react'
-import { CT, CP } from '@/components/Texts'
-
-interface Review {
-  title: string
-  body: string
-}
-
-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.' },
-  { 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.' },
-]
+import { cn } from "@/lib/utils";
+import { H1, H2, H3, H4, P, CT, CP } from "@/components/Texts";
+import React, { useRef } from "react";
+import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid";
+import { motion, AnimatePresence, useInView } from 'framer-motion'
+import {
+  IconArrowWaveRightUp,
+  IconBoxAlignRightFilled,
+  IconBoxAlignTopLeft,
+  IconClipboardCopy,
+  IconFileBroken,
+  IconSignature,
+  IconTableColumn,
+} from "@tabler/icons-react";
 
 export function BentoReviews() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
   return (
-    <div className="bg-black py-24 sm:py-32">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <CT className="text-indigo-400">AI Memory & Coordination</CT>
-        <p className="mt-2 max-w-2xl text-4xl font-semibold tracking-tight text-white sm:text-5xl">
-          The Mycelium Agentic Stack
-        </p>
-
-        {/* Bento Grid */}
-        <div className="mt-12 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-7 lg:grid-rows-2">
-          {/* Left + middle cards */}
-          {reviews.slice(0, 6).map((review, i) => (
-            <div
-              key={i}
-              className="relative lg:col-span-2 rounded-2xl bg-gray-900 p-8 shadow-sm border border-white/10 flex flex-col"
-            >
-              <CT className="text-white text-lg">{review.title}</CT>
-              <CP className="mt-2 text-gray-400">{review.body}</CP>
-            </div>
-          ))}
-
-          {/* Right column (two stacked cards) */}
-          <div className="flex flex-col gap-4 lg:col-span-1">
-            {reviews.slice(6).map((review, i) => (
-              <div
-                key={i}
-                className="flex flex-col justify-between rounded-2xl bg-gray-900 p-6 border border-white/10 h-full"
-              >
-                <CT className="text-white text-lg">{review.title}</CT>
-                <CP className="mt-2 text-gray-400">{review.body}</CP>
-              </div>
-            ))}
-          </div>
-        </div>
+    <div ref={ref}>
+      <div className="relative isolate pt-0 pb-8 bg-black text-center w-full">
+        <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-5xl"
+        >
+          <H2 className="text-center mt-12">Mycelium Technologies</H2>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          className="mx-auto max-w-4xl mt-6"
+        >
+          <P className="text-center" color="primary">
+          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>
       </div>
+      <BentoGrid className="max-w-8xl px-12 pb-12 lg:grid-cols-3">
+      {items.map((item, i) => (
+        <BentoGridItem
+          key={i}
+          title={item.title}
+          description={item.description}
+          header={item.header}
+          icon={item.icon}
+          className={i === 3 || i === 6 ? "md:col-span-2" : ""}
+        />
+      ))}
+    </BentoGrid>
     </div>
-  )
+  );
 }
+const Skeleton = () => (
+  <div className="flex flex-1 w-full h-full min-h-[6rem] rounded-xl bg-gradient-to-br from-neutral-200 dark:from-neutral-900 dark:to-neutral-800 to-neutral-100"></div>
+);
+const items = [
+  {
+    title: 'FungiStor: Long-Term AI Memory',
+    description: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
+    header: <Skeleton />,
+    icon: <IconClipboardCopy className="h-4 w-4 text-neutral-500" />,
+  },
+  {
+    title: 'HeroDB: Active AI Memory',
+    description: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
+    header: <Skeleton />,
+    icon: <IconFileBroken className="h-4 w-4 text-neutral-500" />,
+  },
+  {
+    title: 'MOS Sandboxes: Secure Agent Workspaces',
+    description: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
+    header: <Skeleton />,
+    icon: <IconSignature className="h-4 w-4 text-neutral-500" />,
+  },
+  {
+    title: 'Mycelium Mesh: Secure Communication Network',
+    description: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
+    header: <Skeleton />,
+    icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
+  },
+  {
+    title: 'Deterministic Deployment: Verifiable Code Execution',
+    description: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
+    header: <Skeleton />,
+    icon: <IconArrowWaveRightUp className="h-4 w-4 text-neutral-500" />,
+  },
+  {
+    title: 'Agent Coordination: Sovereign Workflow Management',
+    description: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
+    header: <Skeleton />,
+    icon: <IconBoxAlignTopLeft className="h-4 w-4 text-neutral-500" />,
+  },
+  {
+    title: 'Universal Interface Layer: AI Service Gateway',
+    description: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
+    header: <Skeleton />,
+    icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
+  },
+
+];
diff --git a/src/components/ClickableGallery.tsx b/src/components/ClickableGallery.tsx
index c19f160..5e16c8d 100644
--- a/src/components/ClickableGallery.tsx
+++ b/src/components/ClickableGallery.tsx
@@ -54,7 +54,7 @@ export function ClickableGallery() {
 
   return (
     <div ref={ref}>
-      <div className="relative isolate pt-0 pb-0  bg-black text-center w-full">
+      <div className="relative isolate pt-24 pb-0  bg-black text-center w-full">
         <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-5xl">
           <H2 className="text-center mt-12">One Agent, Endless Possibilities.</H2>
         </motion.div>
diff --git a/src/components/WorldMap.tsx b/src/components/WorldMap.tsx
index ad201dd..8b7cdba 100644
--- a/src/components/WorldMap.tsx
+++ b/src/components/WorldMap.tsx
@@ -7,7 +7,7 @@ import { CountUpNumber } from './CountUpNumber'
 
 export function WorldMap() {
   return (
-    <div className="relative min-h-screen w-full overflow-hidden -top-20 flex flex-col">
+    <div className="relative min-h-screen w-full overflow-hidden top-0 flex py-12 flex-col">
       {/* Background video */}
       <video
         autoPlay
diff --git a/src/components/ui/StackedCubes.tsx b/src/components/ui/StackedCubes.tsx
index 4d5cf64..f0f6f95 100644
--- a/src/components/ui/StackedCubes.tsx
+++ b/src/components/ui/StackedCubes.tsx
@@ -36,11 +36,11 @@ export function StackedCubes() {
 
   return (
     <div 
-      className="relative w-full flex items-center justify-center lg:justify-start min-h-[600px] sm:min-h-[700px] lg:min-h-[600px]"
+      className="relative w-full flex items-center justify-center lg:justify-start min-h-[400px] sm:min-h-[500px] lg:min-h-[400px]"
       onMouseLeave={() => setActive("agent")}
     >
       <motion.div
-        className="relative ml-0 sm:ml-4 lg:ml-8 h-[600px] w-96"
+        className="relative ml-0 sm:ml-4 lg:ml-8 h-[400px] w-96"
         animate={{ y: ["-8px", "8px"] }}
         transition={{
           duration: 4,
diff --git a/src/components/ui/bento-grid.tsx b/src/components/ui/bento-grid.tsx
new file mode 100644
index 0000000..357e63e
--- /dev/null
+++ b/src/components/ui/bento-grid.tsx
@@ -0,0 +1,51 @@
+import { cn } from "@/lib/utils";
+import { H1, H2, H3, H4, P, CT, CP } from "@/components/Texts";
+
+export const BentoGrid = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <div
+      className={cn(
+        "mx-4 grid max-w-6xl grid-cols-1 gap-4 lg:grid-cols-3",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const BentoGridItem = ({
+  className,
+  title,
+  description,
+  header,
+  icon,
+}: {
+  className?: string;
+  title?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  header?: React.ReactNode;
+  icon?: React.ReactNode;
+}) => {
+  return (
+    <div
+      className={cn(
+        "group/bento shadow-input row-span-1 flex flex-col justify-between space-y-4 rounded-2xl border border-white/20 bg-black/20 p-8 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40",
+        className,
+      )}
+    >
+      {header}
+      <div className="transition duration-200 group-hover/bento:translate-x-2">
+        {icon}
+        <CT>{title}</CT>
+        <CP>{description}</CP>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
new file mode 100644
index 0000000..54e8bf3
--- /dev/null
+++ b/src/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}