From 1ff9695f6930f5232b2ad80ddcbd32bbc182d4e7 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 30 Sep 2025 14:15:32 -0500
Subject: [PATCH] feat: create mode selection landing page for Complement Race
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Transform /games/complement-race into a beautiful mode selection page
with three interactive cards:
- Practice Mode (🏁) - Race to 20 correct answers
- Steam Sprint (🚂) - 60-second momentum challenge
- Survival Mode (🔄) - Endless circular race

Features gradient title, responsive grid layout, and smooth hover
effects (translateY + box-shadow).

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/app/games/complement-race/page.tsx    | 128 +++++++++++++++++-
 1 file changed, 123 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/games/complement-race/page.tsx b/apps/web/src/app/games/complement-race/page.tsx
index 26bb5055..3946e45d 100644
--- a/apps/web/src/app/games/complement-race/page.tsx
+++ b/apps/web/src/app/games/complement-race/page.tsx
@@ -1,15 +1,133 @@
 'use client'
 
+import Link from 'next/link'
 import { PageWithNav } from '@/components/PageWithNav'
-import { ComplementRaceProvider } from './context/ComplementRaceContext'
-import { ComplementRaceGame } from './components/ComplementRaceGame'
 
 export default function ComplementRacePage() {
   return (
     <PageWithNav navTitle="Speed Complement Race" navEmoji="🏁">
-      <ComplementRaceProvider>
-        <ComplementRaceGame />
-      </ComplementRaceProvider>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '80vh',
+        padding: '20px',
+        gap: '32px'
+      }}>
+        <div style={{
+          textAlign: 'center',
+          maxWidth: '600px'
+        }}>
+          <h1 style={{
+            fontSize: '48px',
+            fontWeight: 'bold',
+            marginBottom: '16px',
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            backgroundClip: 'text'
+          }}>
+            Speed Complement Race
+          </h1>
+          <p style={{
+            fontSize: '18px',
+            color: '#6b7280',
+            marginBottom: '8px'
+          }}>
+            Master complement pairs by racing against AI opponents!
+          </p>
+          <p style={{
+            fontSize: '14px',
+            color: '#9ca3af'
+          }}>
+            Choose your challenge below:
+          </p>
+        </div>
+
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+          gap: '24px',
+          width: '100%',
+          maxWidth: '1000px'
+        }}>
+          {/* Practice Mode */}
+          <Link href="/games/complement-race/practice" style={{
+            textDecoration: 'none',
+            background: 'linear-gradient(135deg, #8db978 0%, #6a9354 100%)',
+            borderRadius: '16px',
+            padding: '32px 24px',
+            color: 'white',
+            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+            cursor: 'pointer',
+            display: 'block'
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'translateY(-4px)'
+            e.currentTarget.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.15)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'translateY(0)'
+            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)'
+          }}>
+            <div style={{ fontSize: '48px', marginBottom: '12px' }}>🏁</div>
+            <h2 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '8px' }}>Practice Mode</h2>
+            <p style={{ fontSize: '14px', opacity: 0.9 }}>Race to 20 correct answers. Perfect for building speed and accuracy!</p>
+          </Link>
+
+          {/* Steam Sprint */}
+          <Link href="/games/complement-race/sprint" style={{
+            textDecoration: 'none',
+            background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
+            borderRadius: '16px',
+            padding: '32px 24px',
+            color: 'white',
+            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+            cursor: 'pointer',
+            display: 'block'
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'translateY(-4px)'
+            e.currentTarget.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.15)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'translateY(0)'
+            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)'
+          }}>
+            <div style={{ fontSize: '48px', marginBottom: '12px' }}>🚂</div>
+            <h2 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '8px' }}>Steam Sprint</h2>
+            <p style={{ fontSize: '14px', opacity: 0.9 }}>Keep your train moving for 60 seconds! Momentum-based challenge with passengers.</p>
+          </Link>
+
+          {/* Survival Mode */}
+          <Link href="/games/complement-race/survival" style={{
+            textDecoration: 'none',
+            background: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
+            borderRadius: '16px',
+            padding: '32px 24px',
+            color: 'white',
+            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+            cursor: 'pointer',
+            display: 'block'
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'translateY(-4px)'
+            e.currentTarget.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.15)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'translateY(0)'
+            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)'
+          }}>
+            <div style={{ fontSize: '48px', marginBottom: '12px' }}>🔄</div>
+            <h2 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '8px' }}>Survival Mode</h2>
+            <p style={{ fontSize: '14px', opacity: 0.9 }}>Endless circular race! See how many laps you can complete before the AI catches up.</p>
+          </Link>
+        </div>
+      </div>
     </PageWithNav>
   )
 }
\ No newline at end of file