chore(release): 4.22.0 [skip ci]

## [4.22.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.21.1...v4.22.0) (2025-10-20) ### Features * **homepage:** enhance "What You'll Learn" with visual cards ([d142342](d1423420e6)) ### Bug Fixes * **tutorial:** reduce tooltip z-index to scroll under nav bar ([47640f3](47640f3486))
feat(homepage): enhance "What You'll Learn" with visual cards
2025-10-20 10:55:50 +00:00 · 2025-10-20 05:54:44 -05:00 · 2025-10-20 05:54:44 -05:00
4 changed files with 92 additions and 13 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+## [4.22.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.21.1...v4.22.0) (2025-10-20)
+
+
+### Features
+
+* **homepage:** enhance "What You'll Learn" with visual cards ([d142342](https://github.com/antialias/soroban-abacus-flashcards/commit/d1423420e653b26b2f89d9d17ae5d597807d6979))
+
+
+### Bug Fixes
+
+* **tutorial:** reduce tooltip z-index to scroll under nav bar ([47640f3](https://github.com/antialias/soroban-abacus-flashcards/commit/47640f3486c6d4a7107d59bdcce043f76fabbb1d))
+
 ## [4.21.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.21.0...v4.21.1) (2025-10-20)


--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -246,8 +246,8 @@ export default function HomePage() {
                <div
                  className={css({
                    flex: '0 0 auto',
-                    minW: '300px',
-                    maxW: { base: '100%', md: '350px' },
+                    minW: '320px',
+                    maxW: { base: '100%', md: '400px' },
                  })}
                >
                  <h3
@@ -255,21 +255,88 @@ export default function HomePage() {
                      fontSize: 'xl',
                      fontWeight: 'bold',
                      color: 'white',
-                      mb: '4',
+                      mb: '5',
                    })}
                  >
                    What You'll Learn
                  </h3>
-                  <div className={stack({ gap: '3' })}>
+                  <div className={stack({ gap: '4' })}>
                    {[
-                      'Read and set numbers on an abacus',
-                      'Add and subtract with "friends" techniques',
-                      'Multiply and divide fluently',
-                      'Calculate mentally without the abacus',
+                      {
+                        icon: '🔢',
+                        title: 'Read and set numbers',
+                        desc: 'Master abacus number representation',
+                        example: '0-9999',
+                      },
+                      {
+                        icon: '🤝',
+                        title: 'Friends techniques',
+                        desc: 'Add and subtract with complements',
+                        example: '5 = 2+3',
+                      },
+                      {
+                        icon: '✖️➗',
+                        title: 'Multiply & divide',
+                        desc: 'Fluent multi-digit calculations',
+                        example: '12×34',
+                      },
+                      {
+                        icon: '🧠',
+                        title: 'Mental calculation',
+                        desc: 'Visualize and compute without the tool',
+                        example: 'Anzan',
+                      },
                    ].map((skill, i) => (
-                      <div key={i} className={hstack({ gap: '3' })}>
-                        <span className={css({ color: 'yellow.400', fontSize: 'lg' })}>✓</span>
-                        <span className={css({ color: 'gray.300', fontSize: 'sm' })}>{skill}</span>
+                      <div
+                        key={i}
+                        className={css({
+                          bg: 'rgba(255, 255, 255, 0.05)',
+                          borderRadius: 'lg',
+                          p: '3',
+                          border: '1px solid',
+                          borderColor: 'rgba(255, 255, 255, 0.1)',
+                          transition: 'all 0.2s',
+                          _hover: {
+                            bg: 'rgba(255, 255, 255, 0.08)',
+                            borderColor: 'rgba(255, 255, 255, 0.2)',
+                          },
+                        })}
+                      >
+                        <div className={hstack({ gap: '3', alignItems: 'flex-start' })}>
+                          <div
+                            className={css({
+                              fontSize: '2xl',
+                              minW: '40px',
+                              textAlign: 'center',
+                            })}
+                          >
+                            {skill.icon}
+                          </div>
+                          <div className={stack({ gap: '1', flex: '1' })}>
+                            <div
+                              className={css({
+                                color: 'white',
+                                fontSize: 'sm',
+                                fontWeight: 'semibold',
+                              })}
+                            >
+                              {skill.title}
+                            </div>
+                            <div className={css({ color: 'gray.400', fontSize: 'xs' })}>
+                              {skill.desc}
+                            </div>
+                            <div
+                              className={css({
+                                color: 'yellow.400',
+                                fontSize: 'xs',
+                                fontFamily: 'mono',
+                                mt: '1',
+                              })}
+                            >
+                              {skill.example}
+                            </div>
+                          </div>
+                        </div>
                      </div>
                    ))}
                  </div>
--- a/apps/web/src/components/tutorial/TutorialPlayer.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.tsx
@@ -640,7 +640,7 @@ function TutorialPlayerContent({
                  maxWidth: '200px',
                  minWidth: '150px',
                  wordBreak: 'break-word',
-                  zIndex: 1000,
+                  zIndex: 50,
                  opacity: 0.95,
                  transition: 'all 0.3s ease',
                  transform: showCelebration ? 'scale(1.05)' : 'scale(1)',
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.21.1",
+  "version": "4.22.0",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [