From eff0173135cbdb18c723b12959cc6ffc6918dff5 Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Mon, 23 Mar 2026 17:38:42 -0400
Subject: [PATCH] fix bento grid

---
 apps/web/content/blog/neroswap-aggregator.mdx |  4 +--
 .../src/components/portfolio/bento-grid.tsx   | 25 ++++++++++++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/apps/web/content/blog/neroswap-aggregator.mdx b/apps/web/content/blog/neroswap-aggregator.mdx
index d89137d..216555c 100644
--- a/apps/web/content/blog/neroswap-aggregator.mdx
+++ b/apps/web/content/blog/neroswap-aggregator.mdx
@@ -6,7 +6,7 @@ excerpt: "How we built a real-time orderbook aggregator across 6 decentralized a
 
 ## The Problem
 
-If you want to trade Monero or Wownero today, your options are scattered across half a dozen exchanges — each with a different UI, different pair formats, and wildly different prices. Some are decentralized atomic swaps; others are no-KYC centralized platforms. Comparing prices means opening six browser tabs and doing mental math.
+If you want to trade Monero by DEX or Wownero at all today, your options are scattered across half a dozen exchanges — each with a different UI, different pair formats, and wildly different prices. Some are decentralized atomic swaps; others are no-KYC centralized platforms. Comparing prices means opening six browser tabs and doing mental math.
 
 [Neroswap](https://neroswap.com) fixes that.
 
@@ -43,7 +43,7 @@ Neroswap runs a fleet of Python scrapers on a dedicated server. Each scraper tar
 
 Neroswap has no user accounts, no cookies, no tracking pixels, and no analytics. There is nothing to log and nothing to sell. The entire site is a read-only dashboard — it never touches your funds or your identity.
 
-All the DEX sources (BasicSwap, Eigenwallet) are fully decentralized with on-chain or cross-chain atomic settlement. The CEX sources (Nonlogs, CexSwap, AltQuick) are all no-KYC platforms. Retoswap trades happen entirely over Tor.
+All the DEX sources (BasicSwap, RetoSwap, Eigenwallet) are fully decentralized with on-chain or cross-chain atomic settlement. The CEX sources (Nonlogs, CexSwap, AltQuick) are all no-KYC platforms. Retoswap trades happen entirely over Tor.
 
 ## The Stack
 
diff --git a/apps/web/src/components/portfolio/bento-grid.tsx b/apps/web/src/components/portfolio/bento-grid.tsx
index c96ca3a..bb1d0e9 100644
--- a/apps/web/src/components/portfolio/bento-grid.tsx
+++ b/apps/web/src/components/portfolio/bento-grid.tsx
@@ -74,7 +74,7 @@ export const PortfolioGrid = () => {
         </Card>
       </Link>
 
-      {/* Row 2-3: Privacy Labs (1x1) */}
+      {/* Row 2: Privacy Labs (1x1) */}
       <Link href="https://play.wowne.ro" target="_blank" rel="noopener noreferrer" className="md:col-span-1">
         <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-orange-50/95 dark:!bg-orange-950/95 !border-orange-500/20 cursor-pointer">
           <div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
@@ -96,8 +96,27 @@ export const PortfolioGrid = () => {
         </Card>
       </Link>
 
-      {/* Row 2: Occupy Wallets (2x1, center) */}
-      <Link href="https://occupywallets.art" target="_blank" rel="noopener noreferrer" className="md:col-span-2">
+      {/* Row 2: Bauhaus Echo (1x1) */}
+      <Link href="/products/bauhaus-echo" className="md:col-span-1">
+        <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] !bg-blue-50/95 dark:!bg-blue-950/95 !border-blue-500/20 cursor-pointer">
+          <div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
+            <h3 className="text-xl font-bold text-blue-700 dark:text-blue-400">Bauhaus Echo</h3>
+            <p className="text-sm mt-1 text-foreground font-semibold">Visual memory puzzle game.</p>
+          </div>
+          <div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-blue-500/10 shadow-inner">
+            <Image
+              src="/images/products/bauhaus-echo.png"
+              alt="Screenshot of Bauhaus Echo visual memory puzzle game with geometric tiles"
+              fill
+              className="object-contain p-2 opacity-50 transition-transform duration-1000 group-hover:scale-110"
+              sizes="(max-width: 768px) 100vw, 25vw"
+            />
+          </div>
+        </Card>
+      </Link>
+
+      {/* Row 3: Occupy Wallets (4x1, full width) */}
+      <Link href="https://occupywallets.art" target="_blank" rel="noopener noreferrer" className="md:col-span-4">
         <Card className="h-full glass-card group min-h-[300px] rounded-[2.5rem] cursor-pointer">
           <div className="absolute inset-0 z-20 p-8 flex flex-col justify-center items-center text-center pointer-events-none">
             <h3 className="text-2xl font-bold text-zinc-900 dark:text-white drop-shadow-sm bg-white/60 dark:bg-black/60 backdrop-blur-3xl rounded-xl px-6 py-2">Occupy Wallets</h3>