feat: add BentoReviews component with responsive grid layout for AI stack features

src/components/BentoReviews.tsx

@@ -0,0 +1,60 @@
+'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.' },
+]
+
+export function BentoReviews() {
+  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>
+    </div>
+  )
+}