chore(release): 4.24.0 [skip ci]

## [4.24.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.23.0...v4.24.0) (2025-10-20)

### Features

* **homepage:** add animated mini abacus to "Read and set numbers" card ([e028e34](e028e342ad))

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [4.24.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.23.0...v4.24.0) (2025-10-20)
+
+
+### Features
+
+* **homepage:** add animated mini abacus to "Read and set numbers" card ([e028e34](https://github.com/antialias/soroban-abacus-flashcards/commit/e028e342ad4bc01491e05a4ba074628155926fd8))
+
+## [4.23.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.22.0...v4.23.0) (2025-10-20)
+
+
+### Features
+
+* **homepage:** add more visual embellishments to learning cards ([4ec1b95](https://github.com/antialias/soroban-abacus-flashcards/commit/4ec1b952f202d50f6db287c41732ec65ca17c142))
+
 ## [4.22.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.21.1...v4.22.0) (2025-10-20)
 
 

apps/web/src/app/page.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
 import { PageWithNav } from '@/components/PageWithNav'
 import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
 import { getTutorialForEditor } from '@/utils/tutorialConverter'
@@ -8,6 +10,38 @@ 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(0)
+  const abacusConfig = useAbacusConfig({
+    abacusColumns: 3,
+    theme: 'dark',
+  })
+
+  useEffect(() => {
+    // Cycle through random 3-digit numbers every 2 seconds
+    const interval = setInterval(() => {
+      const randomNum = Math.floor(Math.random() * 1000) // 0-999
+      setCurrentValue(randomNum)
+    }, 2000)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div
+      className={css({
+        height: '75px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      })}
+    >
+      <AbacusReact value={currentValue} config={abacusConfig} />
+    </div>
+  )
+}
+
 export default function HomePage() {
   // Extract just the "Friends of 5" step (2+3=5) for homepage demo
   const fullTutorial = getTutorialForEditor()
@@ -246,83 +280,114 @@ export default function HomePage() {
                 <div
                   className={css({
                     flex: '0 0 auto',
-                    minW: '320px',
-                    maxW: { base: '100%', md: '400px' },
+                    minW: '340px',
+                    maxW: { base: '100%', md: '420px' },
                   })}
                 >
                   <h3
                     className={css({
-                      fontSize: 'xl',
+                      fontSize: '2xl',
                       fontWeight: 'bold',
                       color: 'white',
-                      mb: '5',
+                      mb: '6',
                     })}
                   >
                     What You'll Learn
                   </h3>
-                  <div className={stack({ gap: '4' })}>
+                  <div className={stack({ gap: '5' })}>
                     {[
                       {
                         icon: '🔢',
                         title: 'Read and set numbers',
-                        desc: 'Master abacus number representation',
+                        desc: 'Master abacus number representation from zero to thousands',
                         example: '0-9999',
+                        badge: 'Foundation',
                       },
                       {
                         icon: '🤝',
                         title: 'Friends techniques',
-                        desc: 'Add and subtract with complements',
+                        desc: 'Add and subtract using complement pairs and mental shortcuts',
                         example: '5 = 2+3',
+                        badge: 'Core',
                       },
                       {
                         icon: '✖️➗',
                         title: 'Multiply & divide',
-                        desc: 'Fluent multi-digit calculations',
+                        desc: 'Fluent multi-digit calculations with advanced techniques',
                         example: '12×34',
+                        badge: 'Advanced',
                       },
                       {
                         icon: '🧠',
                         title: 'Mental calculation',
-                        desc: 'Visualize and compute without the tool',
-                        example: 'Anzan',
+                        desc: 'Visualize and compute without the physical tool (Anzan)',
+                        example: 'Speed math',
+                        badge: 'Expert',
                       },
                     ].map((skill, i) => (
                       <div
                         key={i}
                         className={css({
-                          bg: 'rgba(255, 255, 255, 0.05)',
-                          borderRadius: 'lg',
-                          p: '3',
+                          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.1)',
+                          borderColor: 'rgba(255, 255, 255, 0.15)',
+                          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
                           transition: 'all 0.2s',
                           _hover: {
-                            bg: 'rgba(255, 255, 255, 0.08)',
-                            borderColor: 'rgba(255, 255, 255, 0.2)',
+                            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: '2xl',
-                              minW: '40px',
+                              fontSize: '3xl',
+                              minW: '50px',
                               textAlign: 'center',
+                              bg: 'rgba(255, 255, 255, 0.1)',
+                              borderRadius: 'lg',
+                              p: '2',
                             })}
                           >
-                            {skill.icon}
+                            {i === 0 ? <MiniAbacus /> : skill.icon}
                           </div>
-                          <div className={stack({ gap: '1', flex: '1' })}>
+                          <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: 'white',
-                                fontSize: 'sm',
-                                fontWeight: 'semibold',
+                                color: 'gray.300',
+                                fontSize: 'xs',
+                                lineHeight: '1.5',
                               })}
                             >
-                              {skill.title}
-                            </div>
-                            <div className={css({ color: 'gray.400', fontSize: 'xs' })}>
                               {skill.desc}
                             </div>
                             <div
@@ -330,7 +395,13 @@ export default function HomePage() {
                                 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}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "4.22.0",
+  "version": "4.24.0",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [