From 770c6a0dfe6dc186f5d2eee2cc104ef461fdafae Mon Sep 17 00:00:00 2001
From: Apple <apple@MacBook-Pro.local>
Date: Tue, 2 Dec 2025 09:38:58 -0800
Subject: [PATCH] feat: Add banner display to MicroDAO list cards

- Add banner background to MicroDAO cards in list view
- Use normalizeAssetUrl for banner URLs
- Add fallback green gradient when banner_url is null
- Banner displays as background with overlay for readability
---
 apps/web/src/app/microdao/page.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/microdao/page.tsx b/apps/web/src/app/microdao/page.tsx
index dccb4e0e..500317c1 100644
--- a/apps/web/src/app/microdao/page.tsx
+++ b/apps/web/src/app/microdao/page.tsx
@@ -80,16 +80,32 @@ export default function MicrodaoListPage() {
           </div>
         ) : (
           <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-            {items.map((m) => (
+            {items.map((m) => {
+              const bannerSrc = normalizeAssetUrl(m.banner_url);
+              return (
               <Link
                 key={m.id}
                 href={`/microdao/${m.slug}`}
-                className="group relative bg-slate-800/30 border border-slate-700/50 rounded-xl p-5 hover:border-cyan-500/30 hover:bg-slate-800/50 transition-all duration-300"
+                className="group relative bg-slate-800/30 border border-slate-700/50 rounded-xl overflow-hidden hover:border-cyan-500/30 hover:bg-slate-800/50 transition-all duration-300"
               >
+                {/* Banner background */}
+                {bannerSrc ? (
+                  <div 
+                    className="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-green-600/20"
+                    style={{
+                      backgroundImage: `linear-gradient(to bottom, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)), url(${bannerSrc})`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                    }}
+                  />
+                ) : (
+                  <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-green-600/20" />
+                )}
+                
                 {/* Glow effect on hover */}
                 <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-cyan-500/5 to-violet-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
                 
-                <div className="relative space-y-3">
+                <div className="relative space-y-3 p-5">
                   {/* Title + Badges */}
                   <div className="flex items-start justify-between gap-3">
                     {/* Logo */}
@@ -187,7 +203,8 @@ export default function MicrodaoListPage() {
                   </div>
                 </div>
               </Link>
-            ))}
+            );
+            })}
           </div>
         )}
       </div>