add

src/app/(main)/page.tsx

@@ -24,7 +24,7 @@ export default function Home() {
       <section id="about">
         <StackSectionPreview />
       </section>
-      <section id="bento-reviews" className="py-12">
+      <section id="bento-reviews">
         <BentoReviews />
       </section>
       <section id="network">
@@ -36,9 +36,6 @@ export default function Home() {
       <section id="llms">
         <Companies />
       </section>
-      <section id="features">
-        <UseCases />
-      </section>
       <section id="clickable-gallery">
         <ClickableGallery />
       </section>

src/components/BentoReviews.tsx

@@ -1,19 +1,56 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { H1, H2, H3, H4, P, CT, CP } from "@/components/Texts";
+import { H1, H2, H3, H4, P, CT, CP, NL } 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,
+const items = [
-  IconBoxAlignRightFilled,
+  {
-  IconBoxAlignTopLeft,
+    title: 'FungiStor',
-  IconClipboardCopy,
+    subtitle: 'Long-Term AI Memory',
-  IconFileBroken,
+    description: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
-  IconSignature,
+    video: "/videos/fungistor.mp4",
-  IconTableColumn,
+  },
-} from "@tabler/icons-react";
+  {
+    title: 'HeroDB',
+    subtitle: 'Active AI Memory',
+    description: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
+    video: "/videos/herodb.mp4",
+  },
+  {
+    title: 'MOS Sandboxes',
+    subtitle: 'Secure Agent Workspaces',
+    description: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
+    video: "/videos/sandbox.mp4",
+  },
+  {
+    title: 'Mycelium Mesh',
+    subtitle: 'Secure Communication Network',
+    description: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
+    video: "/videos/mesh.mp4",
+  },
+  {
+    title: 'Deterministic Deployment',
+    subtitle: 'Verifiable Code Execution',
+    description: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
+    video: "/videos/deterministic.mp4",
+  },
+  {
+    title: 'Agent Coordination',
+    subtitle: 'Sovereign Workflow Management',
+    description: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
+    video: "/videos/agent.mp4",
+  },
+  {
+    title: 'Universal Interface Layer',
+    subtitle: 'AI Service Gateway',
+    description: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
+    video: "/videos/universal.mp4",
+  },
+
+];
 
 export function BentoReviews() {
   const ref = useRef(null);
@@ -21,14 +58,14 @@ export function BentoReviews() {
 
   return (
     <div ref={ref}>
-      <div className="relative isolate pt-0 pb-8 bg-black text-center w-full">
+      <div className="relative isolate pt-24 pb-12 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>
+          <H2 className="text-center">Mycelium Technologies</H2>
         </motion.div>
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -47,9 +84,9 @@ export function BentoReviews() {
         <BentoGridItem
           key={i}
           title={item.title}
+          subtitle={item.subtitle}
           description={item.description}
-          header={item.header}
+          video={item.video}
-          icon={item.icon}
           className={i === 3 || i === 6 ? "md:col-span-2" : ""}
         />
       ))}
@@ -57,51 +94,4 @@ export function BentoReviews() {
     </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" />,
-  },
 
-];

src/components/ui/bento-grid.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
-import { H1, H2, H3, H4, P, CT, CP } from "@/components/Texts";
+import { H1, H2, H3, H4, P, CT, CP, NL } from "@/components/Texts";
+import Image from 'next/image';
 
 export const BentoGrid = ({
   className,
@@ -23,28 +24,43 @@ export const BentoGrid = ({
 export const BentoGridItem = ({
   className,
   title,
+  subtitle,
   description,
-  header,
+  img,
-  icon,
+  video,
 }: {
   className?: string;
   title?: string | React.ReactNode;
+  subtitle?: string | React.ReactNode;
   description?: string | React.ReactNode;
-  header?: React.ReactNode;
+  img?: string;
-  icon?: React.ReactNode;
+  video?: string;
 }) => {
   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",
+        "group/bento shadow-input row-span-1 flex flex-col justify-between  border border-black bg-black/20 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
         className,
       )}
     >
-      {header}
+      <div className="flex flex-1 w-full h-full min-h-[6rem] bg-black overflow-hidden">
-      <div className="transition duration-200 group-hover/bento:translate-x-2">
+        {video ? (
-        {icon}
+          <video
+            src={video}
+            autoPlay
+            loop
+            muted
+            playsInline
+            className="w-full h-full object-cover"
+          />
+        ) : img ? (
+          <Image src={img} alt={title as string} width={300} height={300} className="w-full h-full object-cover" />
+        ) : null}
+      </div>
+      <div className="p-4 transition duration-200 group-hover/bento:translate-x-2">
         <CT>{title}</CT>
-        <CP>{description}</CP>
+        <CP className="font-medium">{subtitle}</CP>
+        <CP className="mt-2">{description}</CP>
       </div>
     </div>
   );