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 · 2025-10-20 10:52:32 +00:00 · 2025-10-20 05:51:29 -05:00 · 2025-10-20 10:50:59 +00:00
4 changed files with 145 additions and 39 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,29 @@
+## [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)
+
+
+### Code Refactoring
+
+* **homepage:** rearrange tutorial demo layout side by side ([8b4ecee](https://github.com/antialias/soroban-abacus-flashcards/commit/8b4eceebfaaaf07e38ea64c7fe015aec86ac754f))
+
+## [4.21.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.7...v4.21.0) (2025-10-20)
+
+
+### Features
+
+* **tutorial:** add silentErrors prop to suppress error messages ([8835e1c](https://github.com/antialias/soroban-abacus-flashcards/commit/8835e1c57ab8adcecefe0db082360dd98fbfaac7))
+
 ## [4.20.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.6...v4.20.7) (2025-10-20)


--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -216,54 +216,132 @@ export default function HomePage() {
                border: '1px solid',
                borderColor: 'gray.700',
                shadow: 'lg',
-                maxW: '900px',
+                maxW: '1200px',
                mx: 'auto',
              })}
            >
-              {/* What you'll learn - above tutorial */}
              <div
                className={css({
-                  mb: '8',
-                  pb: '6',
-                  borderBottom: '1px solid',
-                  borderColor: 'gray.700',
+                  display: 'flex',
+                  flexDirection: { base: 'column', md: 'row' },
+                  gap: '8',
+                  alignItems: { base: 'center', md: 'flex-start' },
                })}
              >
-                <h3
+                {/* Tutorial on the left */}
+                <div className={css({ flex: '1' })}>
+                  <TutorialPlayer
+                    tutorial={friendsOf5Tutorial}
+                    isDebugMode={false}
+                    showDebugPanel={false}
+                    hideNavigation={true}
+                    hideTooltip={true}
+                    silentErrors={true}
+                    abacusColumns={1}
+                    theme="dark"
+                  />
+                </div>
+
+                {/* What you'll learn on the right */}
+                <div
                  className={css({
-                    fontSize: 'xl',
-                    fontWeight: 'bold',
-                    color: 'white',
-                    mb: '4',
-                    textAlign: 'center',
+                    flex: '0 0 auto',
+                    minW: '320px',
+                    maxW: { base: '100%', md: '400px' },
                  })}
                >
-                  What You'll Learn
-                </h3>
-                <div className={grid({ columns: { base: 1, sm: 2 }, gap: '3' })}>
-                  {[
-                    'Read and set numbers on an abacus',
-                    'Add and subtract with "friends" techniques',
-                    'Multiply and divide fluently',
-                    'Calculate mentally without the abacus',
-                  ].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>
-                  ))}
+                  <h3
+                    className={css({
+                      fontSize: 'xl',
+                      fontWeight: 'bold',
+                      color: 'white',
+                      mb: '5',
+                    })}
+                  >
+                    What You'll Learn
+                  </h3>
+                  <div className={stack({ gap: '4' })}>
+                    {[
+                      {
+                        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={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>
                </div>
              </div>
-
-              <TutorialPlayer
-                tutorial={friendsOf5Tutorial}
-                isDebugMode={false}
-                showDebugPanel={false}
-                hideNavigation={true}
-                hideTooltip={true}
-                abacusColumns={2}
-                theme="dark"
-              />
            </div>
          </section>

--- a/apps/web/src/components/tutorial/TutorialPlayer.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.tsx
@@ -217,6 +217,7 @@ interface TutorialPlayerProps {
  showDebugPanel?: boolean
  hideNavigation?: boolean
  hideTooltip?: boolean
+  silentErrors?: boolean
  abacusColumns?: number
  theme?: 'light' | 'dark'
  onStepChange?: (stepIndex: number, step: TutorialStep) => void
@@ -233,6 +234,7 @@ function TutorialPlayerContent({
  showDebugPanel = false,
  hideNavigation = false,
  hideTooltip = false,
+  silentErrors = false,
  abacusColumns = 5,
  theme = 'light',
  onStepChange,
@@ -638,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)',
@@ -909,7 +911,7 @@ function TutorialPlayerContent({
          )
        })

-        if (!isCorrectBead) {
+        if (!isCorrectBead && !silentErrors) {
          const errorMessage = "That's not the highlighted bead. Try clicking the highlighted bead."
          dispatch({
            type: 'SET_ERROR',
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.20.7",
+  "version": "4.22.0",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	aa9d389540	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`))	2025-10-20 10:55:50 +00:00
Thomas Hallock	d1423420e6	feat(homepage): enhance "What You'll Learn" with visual cards Replace simple checklist with rich visual cards for each learning objective. Each card now includes: - Large prominent icon - Title and description - Example/demo text - Hover effects - Card-based layout with subtle borders Makes the section more engaging and less text-heavy, better balanced with the tutorial demo on the left. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 05:54:44 -05:00
Thomas Hallock	47640f3486	fix(tutorial): reduce tooltip z-index to scroll under nav bar Change tutorial tooltip z-index from 1000 to 50 so it scrolls under the app nav bar (z-index 100) along with the abacus. This prevents the coaching text from appearing layered above the nav while the abacus it points to is hidden beneath it. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 05:54:44 -05:00
semantic-release-bot	cb7595c95b	chore(release): 4.21.1 [skip ci] ## [4.21.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.21.0...v4.21.1) (2025-10-20) ### Code Refactoring * homepage: rearrange tutorial demo layout side by side ([`8b4ecee`](`8b4eceebfa`))	2025-10-20 10:52:32 +00:00
Thomas Hallock	8b4eceebfa	refactor(homepage): rearrange tutorial demo layout side by side Restructure "Learn by Doing" section to display tutorial and "What You'll Learn" side by side. Items now display vertically instead of in a 2x2 grid. Changes: - Tutorial positioned on left with flex: 1 - "What You'll Learn" section positioned on right - Items arranged vertically using stack layout - Increased container max-width from 900px to 1200px - Responsive: stacks vertically on mobile, side-by-side on md+ screens 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 05:51:29 -05:00
semantic-release-bot	850fd33943	chore(release): 4.21.0 [skip ci] ## [4.21.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.7...v4.21.0) (2025-10-20) ### Features * tutorial: add silentErrors prop to suppress error messages ([`8835e1c`](`8835e1c57a`))	2025-10-20 10:50:59 +00:00
Thomas Hallock	8835e1c57a	feat(tutorial): add silentErrors prop to suppress error messages Add silentErrors prop to TutorialPlayer to allow suppressing "That's not the highlighted bead" error messages. Used on homepage to provide a less intrusive demo experience. Changes: - Add silentErrors prop to TutorialPlayerProps interface - Conditionally skip error dispatch when silentErrors is true - Pass silentErrors={true} from homepage TutorialPlayer 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 05:49:43 -05:00
Thomas Hallock	b635ed1c2d	chore(home): reduce abacus tutorial to single column Changed abacusColumns from 2 to 1 for the homepage tutorial demo. Since the "Friends of 5" (2+3) demonstration only needs the ones place, a single column is more focused and less distracting. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 05:44:24 -05:00