chore(release): 4.23.0 [skip ci]

## [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](4ec1b952f2))
feat(homepage): add more visual embellishments to learning cards
2025-10-20 10:57:15 +00:00 · 2025-10-20 05:56:02 -05:00 · 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 137 additions and 14 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,22 @@
+## [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)
+
+
+### 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,30 +246,134 @@ export default function HomePage() {
                <div
                  className={css({
                    flex: '0 0 auto',
-                    minW: '300px',
-                    maxW: { base: '100%', md: '350px' },
+                    minW: '340px',
+                    maxW: { base: '100%', md: '420px' },
                  })}
                >
                  <h3
                    className={css({
-                      fontSize: 'xl',
+                      fontSize: '2xl',
                      fontWeight: 'bold',
                      color: 'white',
-                      mb: '4',
+                      mb: '6',
                    })}
                  >
                    What You'll Learn
                  </h3>
-                  <div className={stack({ gap: '3' })}>
+                  <div className={stack({ gap: '5' })}>
                    {[
-                      '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 from zero to thousands',
+                        example: '0-9999',
+                        badge: 'Foundation',
+                      },
+                      {
+                        icon: '🤝',
+                        title: 'Friends techniques',
+                        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 with advanced techniques',
+                        example: '12×34',
+                        badge: 'Advanced',
+                      },
+                      {
+                        icon: '🧠',
+                        title: 'Mental calculation',
+                        desc: 'Visualize and compute without the physical tool (Anzan)',
+                        example: 'Speed math',
+                        badge: 'Expert',
+                      },
                    ].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: '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',
+                              minW: '50px',
+                              textAlign: 'center',
+                              bg: 'rgba(255, 255, 255, 0.1)',
+                              borderRadius: 'lg',
+                              p: '2',
+                            })}
+                          >
+                            {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}
+                              </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({
+                                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>
--- 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.23.0",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	263237a152	chore(release): 4.23.0 [skip ci] ## [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`](`4ec1b952f2`))	2025-10-20 10:57:15 +00:00
Thomas Hallock	4ec1b952f2	feat(homepage): add more visual embellishments to learning cards Significantly enhance "What You'll Learn" section with: - Larger icons (3xl) with background containers - Skill level badges (Foundation/Core/Advanced/Expert) - More padding and spacing throughout - Gradient backgrounds on cards - Box shadows with depth - Hover lift animations - Longer, more detailed descriptions - Example text styled as highlighted code badges - Increased container width for better balance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 05:56:02 -05:00
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