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>
+  )
+}

src/components/ClickableGallery.tsx

@@ -54,7 +54,7 @@ export function ClickableGallery() {
 
   return (
     <div ref={ref}>
-      <div className="py-24 relative isolate pt-24 pb-0  bg-black text-center w-full">
+      <div className="relative isolate pt-0 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>
@@ -68,7 +68,7 @@ export function ClickableGallery() {
         initial={{ opacity: 0 }}
         animate={isInView ? { opacity: 1 } : { opacity: 0 }}
         transition={{ duration: 1, delay: 0.4 }}
-        className="relative w-full flex items-center justify-center overflow-hidden bg-black pt-0 pb-32"
+        className="relative w-full flex items-center justify-center overflow-hidden bg-black pt-0 pb-24"
         onMouseEnter={() => setHovering(true)}
         onMouseLeave={() => setHovering(false)}
       >