From 6410b21f829810af27e42d188295630bd67d6b6b Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 17:02:14 -0500
Subject: [PATCH] fix(homepage): add dark gradient overlay for better text
 contrast on game cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added layered approach for better text readability:
- Vibrant gradient background layer (bottom)
- Dark gradient overlay from transparent (top 10%) to semi-dark (bottom 50%)
- Content with relative z-index positioning

This keeps the colorful gradients visible while ensuring all text
(titles, descriptions, tags) is clearly readable on all four cards.

Gradient goes from barely visible at top to moderately dark at bottom,
creating a natural fade that doesn't overwhelm the vibrant colors.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/page.tsx | 134 ++++++++++++++++++++++----------------
 1 file changed, 78 insertions(+), 56 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index ea7d9eda..311df4c7 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -609,77 +609,99 @@ function GameCard({
   return (
     <Link href={href}>
       <div
-        style={{ background: gradient }}
         className={css({
           rounded: 'xl',
           p: '6',
           shadow: 'lg',
           transition: 'all 0.3s ease',
           cursor: 'pointer',
+          position: 'relative',
+          overflow: 'hidden',
           _hover: {
             transform: 'translateY(-6px) scale(1.02)',
             shadow: '0 25px 50px rgba(0, 0, 0, 0.3)',
           },
         })}
       >
+        {/* Vibrant gradient background */}
+        <div
+          style={{ background: gradient }}
+          className={css({
+            position: 'absolute',
+            inset: 0,
+            zIndex: 0,
+          })}
+        />
+        {/* Dark gradient overlay for text readability */}
         <div
           className={css({
-            fontSize: '3xl',
-            mb: '3',
-            textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)',
+            position: 'absolute',
+            inset: 0,
+            background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%)',
+            zIndex: 1,
           })}
-        >
-          {icon}
-        </div>
-        <h3
-          className={css({
-            fontSize: 'lg',
-            fontWeight: 'bold',
-            color: 'white',
-            mb: '2',
-            textShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
-          })}
-        >
-          {title}
-        </h3>
-        <p
-          className={css({
-            fontSize: 'sm',
-            color: 'rgba(255, 255, 255, 0.95)',
-            mb: '2',
-            textShadow: '0 1px 4px rgba(0, 0, 0, 0.4)',
-          })}
-        >
-          {description}
-        </p>
-        <p
-          className={css({
-            fontSize: 'xs',
-            color: 'rgba(255, 255, 255, 0.85)',
-            mb: '3',
-            textShadow: '0 1px 4px rgba(0, 0, 0, 0.4)',
-          })}
-        >
-          {players}
-        </p>
-        <div className={hstack({ gap: '2', flexWrap: 'wrap' })}>
-          {tags.map((tag) => (
-            <span
-              key={tag}
-              className={css({
-                fontSize: 'xs',
-                px: '2',
-                py: '1',
-                bg: 'rgba(255, 255, 255, 0.2)',
-                color: 'white',
-                rounded: 'full',
-                fontWeight: 'semibold',
-                textShadow: '0 1px 3px rgba(0, 0, 0, 0.4)',
-              })}
-            >
-              {tag}
-            </span>
-          ))}
+        />
+        {/* Content */}
+        <div className={css({ position: 'relative', zIndex: 2 })}>
+          <div
+            className={css({
+              fontSize: '3xl',
+              mb: '3',
+              textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)',
+            })}
+          >
+            {icon}
+          </div>
+          <h3
+            className={css({
+              fontSize: 'lg',
+              fontWeight: 'bold',
+              color: 'white',
+              mb: '2',
+              textShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
+            })}
+          >
+            {title}
+          </h3>
+          <p
+            className={css({
+              fontSize: 'sm',
+              color: 'rgba(255, 255, 255, 0.95)',
+              mb: '2',
+              textShadow: '0 1px 4px rgba(0, 0, 0, 0.4)',
+            })}
+          >
+            {description}
+          </p>
+          <p
+            className={css({
+              fontSize: 'xs',
+              color: 'rgba(255, 255, 255, 0.85)',
+              mb: '3',
+              textShadow: '0 1px 4px rgba(0, 0, 0, 0.4)',
+            })}
+          >
+            {players}
+          </p>
+          <div className={hstack({ gap: '2', flexWrap: 'wrap' })}>
+            {tags.map((tag) => (
+              <span
+                key={tag}
+                className={css({
+                  fontSize: 'xs',
+                  px: '2',
+                  py: '1',
+                  bg: 'rgba(255, 255, 255, 0.2)',
+                  color: 'white',
+                  rounded: 'full',
+                  fontWeight: 'semibold',
+                  textShadow: '0 1px 3px rgba(0, 0, 0, 0.4)',
+                })}
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
         </div>
       </div>
     </Link>