From c6dc210bf8e3a5b4d7d6e53f2a7427d335c65322 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 16:39:56 -0500
Subject: [PATCH] fix(homepage): display gradient backgrounds on all game cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed issue where only the Memory Lightning card showed its gradient
background while other cards appeared dark. The problem was that Panda
CSS's css() function doesn't properly handle raw CSS gradient strings.

Solution: Moved gradient from Panda css() to inline style prop, allowing
all four game cards to display their vibrant gradients:
- Memory Lightning: purple/violet
- Matching Pairs: pink/red
- Complement Race: blue/cyan
- Card Sorting: green/cyan

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 0562734a..e119fcaf 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -609,8 +609,8 @@ function GameCard({
   return (
     <Link href={href}>
       <div
+        style={{ background: gradient }}
         className={css({
-          background: gradient,
           rounded: 'xl',
           p: '6',
           shadow: 'lg',