chore(release): 4.50.0 [skip ci]

## [4.50.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.49.1...v4.50.0) (2025-10-20) ### Features * **homepage:** add interactive learning panels with animated mini-tutorials ([76d6f19](76d6f19d51))
feat(homepage): add interactive learning panels with animated mini-tutorials
2025-10-20 22:23:24 +00:00 · 2025-10-20 17:22:11 -05:00 · 2025-10-20 22:19:50 +00:00 · 2025-10-20 17:18:22 -05:00 · 2025-10-20 22:14:22 +00:00 · 2025-10-20 17:13:09 -05:00
8 changed files with 263 additions and 249 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,29 @@
+## [4.50.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.49.1...v4.50.0) (2025-10-20)
+
+
+### Features
+
+* **homepage:** add interactive learning panels with animated mini-tutorials ([76d6f19](https://github.com/antialias/soroban-abacus-flashcards/commit/76d6f19d51fe4b9594998ae4e0a8823aff389854))
+
+## [4.49.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.49.0...v4.49.1) (2025-10-20)
+
+
+### Code Refactoring
+
+* **homepage:** streamline homepage sections ([d362a77](https://github.com/antialias/soroban-abacus-flashcards/commit/d362a770d63405efee5ef8a896d34e783dd11de2))
+
+## [4.49.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.5...v4.49.0) (2025-10-20)
+
+
+### Features
+
+* add vibrant gradients and equal heights to game cards ([a1a135a](https://github.com/antialias/soroban-abacus-flashcards/commit/a1a135a8586e314c9d695bec6c4e58ec24e5c9cb)), closes [#4](https://github.com/antialias/soroban-abacus-flashcards/issues/4) [#00f2](https://github.com/antialias/soroban-abacus-flashcards/issues/00f2) [#667](https://github.com/antialias/soroban-abacus-flashcards/issues/667) [#764ba2](https://github.com/antialias/soroban-abacus-flashcards/issues/764ba2) [#f093](https://github.com/antialias/soroban-abacus-flashcards/issues/f093) [#f5576](https://github.com/antialias/soroban-abacus-flashcards/issues/f5576) [#43e97](https://github.com/antialias/soroban-abacus-flashcards/issues/43e97) [#38f9d7](https://github.com/antialias/soroban-abacus-flashcards/issues/38f9d7)
+
+
+### Code Refactoring
+
+* make homepage game cards dynamic from game registry ([7f51652](https://github.com/antialias/soroban-abacus-flashcards/commit/7f516526fb5f5b60c1782db5c8c3e29f05caafa7))
+
 ## [4.48.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.4...v4.48.5) (2025-10-20)


--- a/apps/web/.claude/settings.local.json
+++ b/apps/web/.claude/settings.local.json
@@ -103,7 +103,8 @@
      "Bash(node -e:*)",
      "Bash(do gh run list --limit 1 --workflow=\"Build and Deploy\" --json conclusion,status,databaseId --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\") - Run \\(.databaseId)\"\"')",
      "Bash(do ssh nas.home.network '/usr/local/bin/docker inspect soroban-abacus-flashcards --format=\"\"{{index .Config.Labels \\\"\"org.opencontainers.image.revision\\\"\"}}\"\"')",
-      "Bash(git rev-parse HEAD)"
+      "Bash(git rev-parse HEAD)",
+      "Bash(gh run watch --exit-status 18662351595)"
    ],
    "deny": [],
    "ask": []
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -8,24 +8,33 @@ import { HomeHeroProvider } from '@/contexts/HomeHeroContext'
 import { PageWithNav } from '@/components/PageWithNav'
 import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
 import { getTutorialForEditor } from '@/utils/tutorialConverter'
+import { getAvailableGames } from '@/lib/arcade/game-registry'
 import { css } from '../../styled-system/css'
 import { container, grid, hstack, stack } from '../../styled-system/patterns'
 import { token } from '../../styled-system/tokens'

-// Mini abacus that cycles through random 3-digit numbers
-function MiniAbacus() {
-  const [currentValue, setCurrentValue] = useState(123)
+// Mini abacus that cycles through a sequence of values
+function MiniAbacus({
+  values,
+  columns = 3,
+  interval = 2500,
+}: {
+  values: number[]
+  columns?: number
+  interval?: number
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0)
  const appConfig = useAbacusConfig()

  useEffect(() => {
-    // Cycle through random 3-digit numbers every 2.5 seconds
-    const interval = setInterval(() => {
-      const randomNum = Math.floor(Math.random() * 1000) // 0-999
-      setCurrentValue(randomNum)
-    }, 2500)
+    if (values.length === 0) return

-    return () => clearInterval(interval)
-  }, [])
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % values.length)
+    }, interval)
+
+    return () => clearInterval(timer)
+  }, [values, interval])

  // Dark theme styles for the abacus
  const darkStyles = {
@@ -53,8 +62,8 @@ function MiniAbacus() {
    >
      <div className={css({ transform: 'scale(0.6)', transformOrigin: 'center center' })}>
        <AbacusReact
-          value={currentValue}
-          columns={3}
+          value={values[currentIndex] || 0}
+          columns={columns}
          beadShape={appConfig.beadShape}
          customStyles={darkStyles}
        />
@@ -64,15 +73,46 @@ function MiniAbacus() {
 }

 export default function HomePage() {
-  // Extract just the "Friends of 5" step (2+3=5) for homepage demo
+  const [selectedSkillIndex, setSelectedSkillIndex] = useState(1) // Default to "Friends techniques"
  const fullTutorial = getTutorialForEditor()
-  const friendsOf5Tutorial = {
-    ...fullTutorial,
-    id: 'friends-of-5-demo',
-    title: 'Friends of 5',
-    description: 'Learn the "Friends of 5" technique: adding 3 to make 5',
-    steps: fullTutorial.steps.filter((step) => step.id === 'complement-2'),
-  }
+
+  // Create different tutorials for each skill level
+  const skillTutorials = [
+    // Skill 0: Read and set numbers (0-9999)
+    {
+      ...fullTutorial,
+      id: 'read-numbers-demo',
+      title: 'Read and Set Numbers',
+      description: 'Master abacus number representation from zero to thousands',
+      steps: fullTutorial.steps.filter((step) => step.id.startsWith('basic-')),
+    },
+    // Skill 1: Friends techniques (5 = 2+3)
+    {
+      ...fullTutorial,
+      id: 'friends-of-5-demo',
+      title: 'Friends of 5',
+      description: 'Add and subtract using complement pairs: 5 = 2+3',
+      steps: fullTutorial.steps.filter((step) => step.id === 'complement-2'),
+    },
+    // Skill 2: Multiply & divide (12×34)
+    {
+      ...fullTutorial,
+      id: 'multiply-demo',
+      title: 'Multiplication',
+      description: 'Fluent multi-digit calculations with advanced techniques',
+      steps: fullTutorial.steps.filter((step) => step.id.includes('complement')).slice(0, 3),
+    },
+    // Skill 3: Mental calculation (Speed math)
+    {
+      ...fullTutorial,
+      id: 'mental-calc-demo',
+      title: 'Mental Calculation',
+      description: 'Visualize and compute without the physical tool (Anzan)',
+      steps: fullTutorial.steps.slice(-3),
+    },
+  ]
+
+  const selectedTutorial = skillTutorials[selectedSkillIndex]

  return (
    <HomeHeroProvider>
@@ -125,7 +165,8 @@ export default function HomePage() {
                  {/* Tutorial on the left */}
                  <div className={css({ flex: '1' })}>
                    <TutorialPlayer
-                      tutorial={friendsOf5Tutorial}
+                      key={selectedTutorial.id}
+                      tutorial={selectedTutorial}
                      isDebugMode={false}
                      showDebugPanel={false}
                      hideNavigation={true}
@@ -157,122 +198,145 @@ export default function HomePage() {
                    <div className={stack({ gap: '5' })}>
                      {[
                        {
-                          icon: '🔢',
                          title: 'Read and set numbers',
                          desc: 'Master abacus number representation from zero to thousands',
                          example: '0-9999',
                          badge: 'Foundation',
+                          values: [0, 1, 2, 3, 4, 5, 10, 50, 100, 500, 999],
+                          columns: 3,
                        },
                        {
-                          icon: '🤝',
                          title: 'Friends techniques',
                          desc: 'Add and subtract using complement pairs and mental shortcuts',
                          example: '5 = 2+3',
                          badge: 'Core',
+                          values: [2, 5, 3],
+                          columns: 1,
                        },
                        {
-                          icon: '✖️➗',
                          title: 'Multiply & divide',
                          desc: 'Fluent multi-digit calculations with advanced techniques',
                          example: '12×34',
                          badge: 'Advanced',
+                          values: [12, 24, 36, 48],
+                          columns: 2,
                        },
                        {
-                          icon: '🧠',
                          title: 'Mental calculation',
                          desc: 'Visualize and compute without the physical tool (Anzan)',
                          example: 'Speed math',
                          badge: 'Expert',
+                          values: [7, 14, 21, 28, 35],
+                          columns: 2,
                        },
-                      ].map((skill, i) => (
-                        <div
-                          key={i}
-                          className={css({
-                            bg: 'linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03))',
-                            borderRadius: 'xl',
-                            p: '4',
-                            border: '1px solid',
-                            borderColor: 'rgba(255, 255, 255, 0.15)',
-                            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
-                            transition: 'all 0.2s',
-                            _hover: {
-                              bg: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
-                              borderColor: 'rgba(255, 255, 255, 0.25)',
-                              transform: 'translateY(-2px)',
-                              boxShadow: '0 6px 16px rgba(0, 0, 0, 0.4)',
-                            },
-                          })}
-                        >
-                          <div className={hstack({ gap: '3', alignItems: 'flex-start' })}>
-                            <div
-                              className={css({
-                                fontSize: '3xl',
-                                width: '75px',
-                                height: '115px',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                textAlign: 'center',
-                                bg: 'rgba(255, 255, 255, 0.1)',
-                                borderRadius: 'lg',
-                              })}
-                            >
-                              {i === 0 ? <MiniAbacus /> : skill.icon}
-                            </div>
-                            <div className={stack({ gap: '2', flex: '1' })}>
-                              <div className={hstack({ gap: '2', alignItems: 'center' })}>
-                                <div
-                                  className={css({
-                                    color: 'white',
-                                    fontSize: 'md',
-                                    fontWeight: 'bold',
-                                  })}
-                                >
-                                  {skill.title}
+                      ].map((skill, i) => {
+                        const isSelected = i === selectedSkillIndex
+                        return (
+                          <div
+                            key={i}
+                            onClick={() => setSelectedSkillIndex(i)}
+                            className={css({
+                              bg: isSelected
+                                ? 'linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(250, 204, 21, 0.08))'
+                                : 'linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03))',
+                              borderRadius: 'xl',
+                              p: '4',
+                              border: '1px solid',
+                              borderColor: isSelected
+                                ? 'rgba(250, 204, 21, 0.4)'
+                                : 'rgba(255, 255, 255, 0.15)',
+                              boxShadow: isSelected
+                                ? '0 6px 16px rgba(250, 204, 21, 0.2)'
+                                : '0 4px 12px rgba(0, 0, 0, 0.3)',
+                              transition: 'all 0.2s',
+                              cursor: 'pointer',
+                              _hover: {
+                                bg: isSelected
+                                  ? 'linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(250, 204, 21, 0.12))'
+                                  : 'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
+                                borderColor: isSelected
+                                  ? 'rgba(250, 204, 21, 0.5)'
+                                  : 'rgba(255, 255, 255, 0.25)',
+                                transform: 'translateY(-2px)',
+                                boxShadow: isSelected
+                                  ? '0 8px 20px rgba(250, 204, 21, 0.3)'
+                                  : '0 6px 16px rgba(0, 0, 0, 0.4)',
+                              },
+                            })}
+                          >
+                            <div className={hstack({ gap: '3', alignItems: 'flex-start' })}>
+                              <div
+                                className={css({
+                                  fontSize: '3xl',
+                                  width: '75px',
+                                  height: '115px',
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  justifyContent: 'center',
+                                  textAlign: 'center',
+                                  bg: isSelected
+                                    ? 'rgba(250, 204, 21, 0.15)'
+                                    : 'rgba(255, 255, 255, 0.1)',
+                                  borderRadius: 'lg',
+                                })}
+                              >
+                                <MiniAbacus values={skill.values} columns={skill.columns} />
+                              </div>
+                              <div className={stack({ gap: '2', flex: '1' })}>
+                                <div className={hstack({ gap: '2', alignItems: 'center' })}>
+                                  <div
+                                    className={css({
+                                      color: 'white',
+                                      fontSize: 'md',
+                                      fontWeight: 'bold',
+                                    })}
+                                  >
+                                    {skill.title}
+                                  </div>
+                                  <div
+                                    className={css({
+                                      bg: 'rgba(250, 204, 21, 0.2)',
+                                      color: 'yellow.400',
+                                      fontSize: '2xs',
+                                      fontWeight: 'semibold',
+                                      px: '2',
+                                      py: '0.5',
+                                      borderRadius: 'md',
+                                    })}
+                                  >
+                                    {skill.badge}
+                                  </div>
+                                </div>
+                                <div
+                                  className={css({
+                                    color: 'gray.300',
+                                    fontSize: 'xs',
+                                    lineHeight: '1.5',
+                                  })}
+                                >
+                                  {skill.desc}
                                </div>
                                <div
                                  className={css({
-                                    bg: 'rgba(250, 204, 21, 0.2)',
                                    color: 'yellow.400',
-                                    fontSize: '2xs',
+                                    fontSize: 'xs',
+                                    fontFamily: 'mono',
                                    fontWeight: 'semibold',
+                                    mt: '1',
+                                    bg: 'rgba(250, 204, 21, 0.1)',
                                    px: '2',
-                                    py: '0.5',
+                                    py: '1',
                                    borderRadius: 'md',
+                                    w: 'fit-content',
                                  })}
                                >
-                                  {skill.badge}
+                                  {skill.example}
                                </div>
                              </div>
-                              <div
-                                className={css({
-                                  color: 'gray.300',
-                                  fontSize: 'xs',
-                                  lineHeight: '1.5',
-                                })}
-                              >
-                                {skill.desc}
-                              </div>
-                              <div
-                                className={css({
-                                  color: 'yellow.400',
-                                  fontSize: 'xs',
-                                  fontFamily: 'mono',
-                                  fontWeight: 'semibold',
-                                  mt: '1',
-                                  bg: 'rgba(250, 204, 21, 0.1)',
-                                  px: '2',
-                                  py: '1',
-                                  borderRadius: 'md',
-                                  w: 'fit-content',
-                                })}
-                              >
-                                {skill.example}
-                              </div>
                            </div>
                          </div>
-                        </div>
-                      ))}
+                        )
+                      })}
                    </div>
                  </div>
                </div>
@@ -298,85 +362,24 @@ export default function HomePage() {
              </div>

              <div className={grid({ columns: { base: 1, sm: 2, lg: 4 }, gap: '5' })}>
-                <GameCard
-                  icon="🧠"
-                  title="Memory Lightning"
-                  description="Memorize soroban numbers"
-                  players="1-8 players"
-                  tags={['Memory', 'Pattern Recognition']}
-                  gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
-                  href="/games"
-                />
-                <GameCard
-                  icon="⚔️"
-                  title="Matching Pairs"
-                  description="Match complement numbers"
-                  players="1-4 players"
-                  tags={['Friends of 5', 'Friends of 10']}
-                  gradient="linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
-                  href="/games"
-                />
-                <GameCard
-                  icon="🏁"
-                  title="Complement Race"
-                  description="Race against time"
-                  players="1-4 players"
-                  tags={['Speed', 'Practice', 'Survival']}
-                  gradient="linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
-                  href="/games"
-                />
-                <GameCard
-                  icon="🔢"
-                  title="Card Sorting"
-                  description="Arrange numbers visually"
-                  players="Solo challenge"
-                  tags={['Visual Literacy', 'Ordering']}
-                  gradient="linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
-                  href="/games"
-                />
-              </div>
-            </section>
-
-            {/* For Kids & Families Section */}
-            <section className={stack({ gap: '6', mb: '16' })}>
-              <div className={css({ textAlign: 'center' })}>
-                <h2
-                  className={css({
-                    fontSize: { base: '2xl', md: '3xl' },
-                    fontWeight: 'bold',
-                    color: 'white',
-                    mb: '2',
-                  })}
-                >
-                  For Kids & Families
-                </h2>
-                <p className={css({ color: 'gray.400', fontSize: 'md', maxW: '2xl', mx: 'auto' })}>
-                  Simple enough for kids to start on their own, structured enough for parents to
-                  trust
-                </p>
-              </div>
-
-              <div className={grid({ columns: { base: 1, lg: 2 }, gap: '8' })}>
-                <FeaturePanel
-                  icon="🧒"
-                  title="Self-Directed for Children"
-                  features={[
-                    'Big, obvious buttons and clear instructions',
-                    'Progress at your own pace',
-                    'Works with or without a physical abacus',
-                  ]}
-                  accentColor="purple"
-                />
-                <FeaturePanel
-                  icon="👨‍👩‍👧"
-                  title="Trusted by Parents"
-                  features={[
-                    'Structured curriculum following Japanese methods',
-                    'Traditional kyu/dan progression levels',
-                    'Track progress and celebrate achievements',
-                  ]}
-                  accentColor="blue"
-                />
+                {getAvailableGames().map((game) => {
+                  const playersText =
+                    game.manifest.maxPlayers === 1
+                      ? 'Solo challenge'
+                      : `1-${game.manifest.maxPlayers} players`
+                  return (
+                    <GameCard
+                      key={game.manifest.name}
+                      icon={game.manifest.icon}
+                      title={game.manifest.displayName}
+                      description={game.manifest.description}
+                      players={playersText}
+                      tags={game.manifest.chips}
+                      gradient={game.manifest.gradient}
+                      href="/games"
+                    />
+                  )
+                })}
              </div>
            </section>

@@ -540,47 +543,20 @@ export default function HomePage() {
              </Link>
            </section>

-            {/* Additional Tools Section */}
+            {/* Flashcard Generator Section */}
            <section className={stack({ gap: '6' })}>
-              <div className={css({ textAlign: 'center' })}>
-                <h2
-                  className={css({
-                    fontSize: { base: '2xl', md: '3xl' },
-                    fontWeight: 'bold',
-                    color: 'white',
-                    mb: '2',
-                  })}
-                >
-                  Additional Tools
-                </h2>
-              </div>
-
-              <div className={grid({ columns: { base: 1, lg: 2 }, gap: '8' })}>
-                <FeaturePanel
-                  icon="🎨"
-                  title="Flashcard Creator"
-                  features={[
-                    'Multiple formats: PDF, PNG, SVG, HTML',
-                    'Custom bead shapes, colors, and layouts',
-                    'All paper sizes: A3, A4, A5, US Letter',
-                  ]}
-                  accentColor="blue"
-                  ctaText="Create Flashcards →"
-                  ctaHref="/create"
-                />
-                <FeaturePanel
-                  icon="🧮"
-                  title="Interactive Abacus"
-                  features={[
-                    'Practice anytime in your browser',
-                    'Multiple color schemes and bead styles',
-                    'Sound effects and animations',
-                  ]}
-                  accentColor="purple"
-                  ctaText="Try the Abacus →"
-                  ctaHref="/guide"
-                />
-              </div>
+              <FeaturePanel
+                icon="🎨"
+                title="Flashcard Creator"
+                features={[
+                  'Multiple formats: PDF, PNG, SVG, HTML',
+                  'Custom bead shapes, colors, and layouts',
+                  'All paper sizes: A3, A4, A5, US Letter',
+                ]}
+                accentColor="blue"
+                ctaText="Create Flashcards →"
+                ctaHref="/create"
+              />
            </section>
          </div>
        </div>
@@ -607,7 +583,7 @@ function GameCard({
  href: string
 }) {
  return (
-    <Link href={href}>
+    <Link href={href} style={{ height: '100%', display: 'block' }}>
      <div
        className={css({
          rounded: 'xl',
@@ -617,6 +593,9 @@ function GameCard({
          cursor: 'pointer',
          position: 'relative',
          overflow: 'hidden',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
          _hover: {
            transform: 'translateY(-6px) scale(1.02)',
            shadow: '0 25px 50px rgba(0, 0, 0, 0.3)',
@@ -642,7 +621,15 @@ function GameCard({
          })}
        />
        {/* Content */}
-        <div className={css({ position: 'relative', zIndex: 2 })}>
+        <div
+          className={css({
+            position: 'relative',
+            zIndex: 2,
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+          })}
+        >
          <div
            className={css({
              fontSize: '3xl',
--- a/apps/web/src/arcade-games/card-sorting/index.ts
+++ b/apps/web/src/arcade-games/card-sorting/index.ts
@@ -24,7 +24,7 @@ const manifest: GameManifest = {
  maxPlayers: 1, // Single player only
  difficulty: 'Intermediate',
  chips: ['🧠 Pattern Recognition', '🎯 Solo Challenge', '📊 Smart Scoring'],
-  ...getGameTheme('teal'),
+  ...getGameTheme('green'),
  available: true,
 }

--- a/apps/web/src/arcade-games/matching/index.ts
+++ b/apps/web/src/arcade-games/matching/index.ts
@@ -23,7 +23,7 @@ const manifest: GameManifest = {
  maxPlayers: 4,
  difficulty: 'Intermediate',
  chips: ['👥 Multiplayer', '🎯 Strategic', '🏆 Competitive'],
-  ...getGameTheme('purple'),
+  ...getGameTheme('pink'),
  available: true,
 }

--- a/apps/web/src/arcade-games/memory-quiz/index.ts
+++ b/apps/web/src/arcade-games/memory-quiz/index.ts
@@ -23,7 +23,7 @@ const manifest: GameManifest = {
  maxPlayers: 8,
  difficulty: 'Intermediate',
  chips: ['👥 Multiplayer', '🧠 Memory', '🧮 Soroban'],
-  ...getGameTheme('blue'),
+  ...getGameTheme('purple'),
  available: true,
 }

--- a/apps/web/src/lib/arcade/game-themes.ts
+++ b/apps/web/src/lib/arcade/game-themes.ts
@@ -14,59 +14,59 @@ export interface GameTheme {
 }

 /**
- * Standard theme presets
- * These use Panda CSS's color system and provide consistent styling
+ * Standard theme presets with vibrant gradients
+ * Updated for eye-catching game cards on the homepage
 */
 export const GAME_THEMES = {
  blue: {
    color: 'blue',
-    gradient: 'linear-gradient(135deg, #dbeafe, #bfdbfe)', // blue.100 to blue.200
-    borderColor: '#bfdbfe', // blue.200
+    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', // Vibrant cyan
+    borderColor: '#00f2fe',
  },
  purple: {
    color: 'purple',
-    gradient: 'linear-gradient(135deg, #e9d5ff, #ddd6fe)', // purple.100 to purple.200
-    borderColor: '#ddd6fe', // purple.200
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', // Vibrant purple
+    borderColor: '#764ba2',
  },
  green: {
    color: 'green',
-    gradient: 'linear-gradient(135deg, #d1fae5, #a7f3d0)', // green.100 to green.200
-    borderColor: '#a7f3d0', // green.200
+    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', // Vibrant green/teal
+    borderColor: '#38f9d7',
  },
  teal: {
    color: 'teal',
-    gradient: 'linear-gradient(135deg, #ccfbf1, #99f6e4)', // teal.100 to teal.200
-    borderColor: '#99f6e4', // teal.200
+    gradient: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', // Vibrant teal
+    borderColor: '#38ef7d',
  },
  indigo: {
    color: 'indigo',
-    gradient: 'linear-gradient(135deg, #e0e7ff, #c7d2fe)', // indigo.100 to indigo.200
-    borderColor: '#c7d2fe', // indigo.200
+    gradient: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)', // Vibrant indigo
+    borderColor: '#9b23ea',
  },
  pink: {
    color: 'pink',
-    gradient: 'linear-gradient(135deg, #fce7f3, #fbcfe8)', // pink.100 to pink.200
-    borderColor: '#fbcfe8', // pink.200
+    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', // Vibrant pink
+    borderColor: '#f5576c',
  },
  orange: {
    color: 'orange',
-    gradient: 'linear-gradient(135deg, #ffedd5, #fed7aa)', // orange.100 to orange.200
-    borderColor: '#fed7aa', // orange.200
+    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', // Vibrant orange/coral
+    borderColor: '#fee140',
  },
  yellow: {
    color: 'yellow',
-    gradient: 'linear-gradient(135deg, #fef3c7, #fde68a)', // yellow.100 to yellow.200
-    borderColor: '#fde68a', // yellow.200
+    gradient: 'linear-gradient(135deg, #ffd89b 0%, #19547b 100%)', // Vibrant yellow/blue
+    borderColor: '#ffd89b',
  },
  red: {
    color: 'red',
-    gradient: 'linear-gradient(135deg, #fee2e2, #fecaca)', // red.100 to red.200
-    borderColor: '#fecaca', // red.200
+    gradient: 'linear-gradient(135deg, #f85032 0%, #e73827 100%)', // Vibrant red
+    borderColor: '#e73827',
  },
  gray: {
    color: 'gray',
-    gradient: 'linear-gradient(135deg, #f3f4f6, #e5e7eb)', // gray.100 to gray.200
-    borderColor: '#e5e7eb', // gray.200
+    gradient: 'linear-gradient(135deg, #868f96 0%, #596164 100%)', // Vibrant gray
+    borderColor: '#596164',
  },
 } as const satisfies Record<string, GameTheme>

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.48.5",
+  "version": "4.50.0",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	1babfde328	chore(release): 4.50.0 [skip ci] ## [4.50.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.49.1...v4.50.0) (2025-10-20) ### Features * homepage: add interactive learning panels with animated mini-tutorials ([`76d6f19`](`76d6f19d51`))	2025-10-20 22:23:24 +00:00
Thomas Hallock	76d6f19d51	feat(homepage): add interactive learning panels with animated mini-tutorials Transform "What You'll Learn" section into an interactive experience where users can click skill panels to see corresponding tutorials with animated abacus demonstrations. Changes: - Make skill panels clickable to switch between different tutorials - Replace static emojis with animated MiniAbacus components for each skill - Create skill-specific tutorials: basic numbers, friends of 5, multiplication, and mental calculation - Add visual indication for selected panel (yellow glow effect) - Update MiniAbacus component to cycle through custom value sequences - Default to "Friends techniques" panel (Friends of 5 tutorial) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 17:22:11 -05:00
semantic-release-bot	9ad35e65d3	chore(release): 4.49.1 [skip ci] ## [4.49.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.49.0...v4.49.1) (2025-10-20) ### Code Refactoring * homepage: streamline homepage sections ([`d362a77`](`d362a770d6`))	2025-10-20 22:19:50 +00:00
Thomas Hallock	d362a770d6	refactor(homepage): streamline homepage sections Simplified homepage by removing redundant sections and elevating the flashcard creator to a standalone section. Changes: - Remove 'For Kids & Families' section entirely - Remove 'Interactive Abacus' pane from Additional Tools - Promote 'Flashcard Creator' to standalone top-level section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 17:18:22 -05:00
semantic-release-bot	095cdda4ca	chore(release): 4.49.0 [skip ci] ## [4.49.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.5...v4.49.0) (2025-10-20) ### Features * add vibrant gradients and equal heights to game cards ([`a1a135a`](`a1a135a858`)), closes [#4](https://github.com/antialias/soroban-abacus-flashcards/issues/4) [#00f2](https://github.com/antialias/soroban-abacus-flashcards/issues/00f2) [#667](https://github.com/antialias/soroban-abacus-flashcards/issues/667) [#764ba2](https://github.com/antialias/soroban-abacus-flashcards/issues/764ba2) [#f093](https://github.com/antialias/soroban-abacus-flashcards/issues/f093) [#f5576](https://github.com/antialias/soroban-abacus-flashcards/issues/f5576) [#43e97](https://github.com/antialias/soroban-abacus-flashcards/issues/43e97) [#38f9d7](https://github.com/antialias/soroban-abacus-flashcards/issues/38f9d7) ### Code Refactoring * make homepage game cards dynamic from game registry ([`7f51652`](`7f516526fb`))	2025-10-20 22:14:22 +00:00
Thomas Hallock	a1a135a858	feat: add vibrant gradients and equal heights to game cards Updated the game theme system and game cards to have vibrant, eye-catching gradients and consistent heights: Theme System Changes: - Updated all game themes from pastel to vibrant gradients - Blue: Vibrant cyan (#4facfe to #00f2fe) - Purple: Vibrant purple (#667eea to #764ba2) - Pink: Vibrant pink (#f093fb to #f5576c) - Green: Vibrant green/teal (#43e97b to #38f9d7) - Plus updated indigo, teal, orange, yellow, red, gray themes Game Manifest Updates: - Memory Lightning: now uses purple theme - Matching Pairs: now uses pink theme - Complement Race: continues using blue (cyan) theme - Card Sorting: now uses green theme Homepage Game Cards: - Added height: '100%' and flexbox to make all cards equal height - Cards now stretch uniformly regardless of content length - Maintains responsive hover effects and text readability overlays 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 17:13:09 -05:00
Thomas Hallock	7f516526fb	refactor: make homepage game cards dynamic from game registry Previously game cards were hardcoded. Now they automatically populate from getAvailableGames() in the game registry. This means: - Adding a new game to the registry automatically shows it on homepage - Game metadata (icon, title, description, gradient, chips) comes from game manifests - No manual homepage updates needed when games are added Changes: - Import getAvailableGames from game registry - Replace hardcoded GameCard components with .map() over available games - Format maxPlayers into player count string (e.g., "1-4 players") 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 17:08:55 -05:00