chore(release): 4.25.0 [skip ci]

## [4.25.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.3...v4.25.0) (2025-10-20) ### Features * **levels:** add Kyu & Dan levels page with homepage link ([39b1e7d](39b1e7de16)) ### Styles * **homepage:** adjust journey emoji sizing and spacing ([2a0e469](2a0e469e83))
feat(levels): add Kyu & Dan levels page with homepage link
2025-10-20 11:51:46 +00:00 · 2025-10-20 06:50:35 -05:00 · 2025-10-20 06:37:59 -05:00 · 2025-10-20 11:22:23 +00:00 · 2025-10-20 06:21:25 -05:00
4 changed files with 233 additions and 10 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,22 @@
+## [4.25.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.3...v4.25.0) (2025-10-20)
+
+
+### Features
+
+* **levels:** add Kyu & Dan levels page with homepage link ([39b1e7d](https://github.com/antialias/soroban-abacus-flashcards/commit/39b1e7de16f15412c91cf648c714e31e2de7a6bc))
+
+
+### Styles
+
+* **homepage:** adjust journey emoji sizing and spacing ([2a0e469](https://github.com/antialias/soroban-abacus-flashcards/commit/2a0e469e83b99c88f091bfecd770e0b4c1cb6310))
+
+## [4.24.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.2...v4.24.3) (2025-10-20)
+
+
+### Code Refactoring
+
+* **homepage:** align all skill icon panes horizontally ([4b04e86](https://github.com/antialias/soroban-abacus-flashcards/commit/4b04e8673da228863d4ec1869897ee431fa3d753))
+
 ## [4.24.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.1...v4.24.2) (2025-10-20)


--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import { PageWithNav } from '@/components/PageWithNav'
+import { css } from '../../../styled-system/css'
+import { container, stack } from '../../../styled-system/patterns'
+
+export default function LevelsPage() {
+  return (
+    <PageWithNav navTitle="Kyu & Dan Levels" navEmoji="📊">
+      <div className={css({ bg: 'gray.900', minHeight: '100vh' })}>
+        {/* Hero Section */}
+        <div
+          className={css({
+            background:
+              'linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(124, 58, 237, 0.3) 50%, rgba(17, 24, 39, 1) 100%)',
+            color: 'white',
+            py: { base: '12', md: '16' },
+            position: 'relative',
+            overflow: 'hidden',
+          })}
+        >
+          {/* Background pattern */}
+          <div
+            className={css({
+              position: 'absolute',
+              inset: 0,
+              opacity: 0.1,
+              backgroundImage:
+                'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)',
+              backgroundSize: '40px 40px',
+            })}
+          />
+
+          <div className={container({ maxW: '6xl', px: '4', position: 'relative' })}>
+            <div className={css({ textAlign: 'center', maxW: '5xl', mx: 'auto' })}>
+              {/* Main headline */}
+              <h1
+                className={css({
+                  fontSize: { base: '3xl', md: '5xl', lg: '6xl' },
+                  fontWeight: 'bold',
+                  mb: '4',
+                  lineHeight: 'tight',
+                  background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
+                  backgroundClip: 'text',
+                  color: 'transparent',
+                })}
+              >
+                Understanding Kyu & Dan Levels
+              </h1>
+
+              {/* Subtitle */}
+              <p
+                className={css({
+                  fontSize: { base: 'lg', md: 'xl' },
+                  color: 'gray.300',
+                  mb: '6',
+                  maxW: '3xl',
+                  mx: 'auto',
+                  lineHeight: '1.6',
+                })}
+              >
+                Learn about the official Japanese soroban ranking system used by the Japan Abacus
+                Federation
+              </p>
+
+              {/* Journey progression emojis */}
+              <div
+                className={css({
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  gap: '4',
+                  mb: '8',
+                  flexWrap: 'wrap',
+                })}
+              >
+                {[
+                  { emoji: '🧒', label: '10 Kyu' },
+                  { emoji: '→', label: '', isArrow: true },
+                  { emoji: '🧑', label: '5 Kyu' },
+                  { emoji: '→', label: '', isArrow: true },
+                  { emoji: '🧔', label: '1 Kyu' },
+                  { emoji: '→', label: '', isArrow: true },
+                  { emoji: '🧙', label: 'Dan' },
+                ].map((step, i) => (
+                  <div
+                    key={i}
+                    className={css({
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      gap: '1',
+                      opacity: step.isArrow ? 0.5 : 1,
+                    })}
+                  >
+                    <div
+                      className={css({
+                        fontSize: step.isArrow ? 'xl' : '4xl',
+                        color: step.isArrow ? 'gray.500' : 'yellow.400',
+                      })}
+                    >
+                      {step.emoji}
+                    </div>
+                    {step.label && (
+                      <div className={css({ fontSize: 'xs', color: 'gray.400' })}>{step.label}</div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main content container */}
+        <div className={container({ maxW: '7xl', px: '4', py: '12' })}>
+          {/* Placeholder for Phase 2 */}
+          <section className={stack({ gap: '8' })}>
+            <div className={css({ textAlign: 'center' })}>
+              <h2
+                className={css({
+                  fontSize: { base: '2xl', md: '3xl' },
+                  fontWeight: 'bold',
+                  color: 'white',
+                  mb: '4',
+                })}
+              >
+                Kyu Levels (10th to 1st)
+              </h2>
+              <p className={css({ color: 'gray.400', fontSize: 'md', mb: '8' })}>
+                Content coming in Phase 2...
+              </p>
+            </div>
+
+            {/* Placeholder card */}
+            <div
+              className={css({
+                bg: 'rgba(0, 0, 0, 0.4)',
+                border: '1px solid',
+                borderColor: 'gray.700',
+                rounded: 'xl',
+                p: '8',
+                textAlign: 'center',
+              })}
+            >
+              <p className={css({ color: 'gray.300' })}>
+                Phase 1 Complete! Basic page structure and routing are ready for testing.
+              </p>
+              <p className={css({ color: 'gray.400', mt: '2', fontSize: 'sm' })}>
+                Test by visiting: <code>/levels</code>
+              </p>
+            </div>
+          </section>
+        </div>
+      </div>
+    </PageWithNav>
+  )
+}
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -54,7 +54,7 @@ function MiniAbacus() {
          value={currentValue}
          columns={3}
          beadShape={appConfig.beadShape}
-          styles={darkStyles}
+          customStyles={darkStyles}
        />
      </div>
    </div>
@@ -366,12 +366,14 @@ export default function HomePage() {
                          <div
                            className={css({
                              fontSize: '3xl',
-                              minW: '50px',
+                              width: '75px',
+                              height: '115px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
                              textAlign: 'center',
                              bg: 'rgba(255, 255, 255, 0.1)',
                              borderRadius: 'lg',
-                              py: i === 0 ? '4' : '2',
-                              px: i === 0 ? '3' : '2',
                            })}
                          >
                            {i === 0 ? <MiniAbacus /> : skill.icon}
@@ -572,25 +574,39 @@ export default function HomePage() {
              >
                {(
                  [
-                    { level: '10 Kyu', label: 'Beginner', color: 'colors.green.400' },
-                    { level: '5 Kyu', label: 'Intermediate', color: 'colors.blue.400' },
-                    { level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400' },
-                    { level: 'Dan', label: 'Master', color: 'colors.amber.400' },
+                    { level: '10 Kyu', label: 'Beginner', color: 'colors.green.400', emoji: '🧒' },
+                    {
+                      level: '5 Kyu',
+                      label: 'Intermediate',
+                      color: 'colors.blue.400',
+                      emoji: '🧑',
+                    },
+                    { level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400', emoji: '🧔' },
+                    { level: 'Dan', label: 'Master', color: 'colors.amber.400', emoji: '🧙' },
                  ] as const
                ).map((stage, i) => (
                  <div
                    key={i}
                    className={stack({
-                      gap: '2',
+                      gap: '0',
                      textAlign: 'center',
                      flex: '1',
                      position: 'relative',
                    })}
                  >
+                    <div
+                      className={css({
+                        fontSize: '5xl',
+                        mb: '0',
+                      })}
+                    >
+                      {stage.emoji}
+                    </div>
                    <div
                      className={css({
                        fontSize: 'xl',
                        fontWeight: 'bold',
+                        mt: '-2',
                      })}
                      style={{ color: token(stage.color) }}
                    >
@@ -638,6 +654,37 @@ export default function HomePage() {
              >
                You'll progress through all these levels eventually ↑
              </div>
+
+              {/* Learn More Link */}
+              <div className={css({ textAlign: 'center', mt: '6' })}>
+                <Link
+                  href="/levels"
+                  className={css({
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '2',
+                    px: '6',
+                    py: '3',
+                    bg: 'rgba(124, 58, 237, 0.2)',
+                    border: '1px solid',
+                    borderColor: 'violet.500',
+                    rounded: 'lg',
+                    color: 'violet.300',
+                    fontSize: 'sm',
+                    fontWeight: '500',
+                    transition: 'all 0.2s',
+                    _hover: {
+                      bg: 'rgba(124, 58, 237, 0.3)',
+                      borderColor: 'violet.400',
+                      color: 'violet.200',
+                      transform: 'translateY(-1px)',
+                    },
+                  })}
+                >
+                  Learn about Kyu & Dan Levels
+                  <span>→</span>
+                </Link>
+              </div>
            </div>
          </section>

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.24.2",
+  "version": "4.25.0",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	4968e2c846	chore(release): 4.25.0 [skip ci] ## [4.25.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.3...v4.25.0) (2025-10-20) ### Features * levels: add Kyu & Dan levels page with homepage link ([`39b1e7d`](`39b1e7de16`)) ### Styles * homepage: adjust journey emoji sizing and spacing ([`2a0e469`](`2a0e469e83`))	2025-10-20 11:51:46 +00:00
Thomas Hallock	39b1e7de16	feat(levels): add Kyu & Dan levels page with homepage link Create new /levels page with hero section explaining the Japanese soroban ranking system (10th Kyu to 10th Dan). Add navigation link from homepage "Your Journey" section with violet-themed button styling. Phase 1 complete: basic page structure and routing ready for content. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:50:35 -05:00
Thomas Hallock	2a0e469e83	style(homepage): adjust journey emoji sizing and spacing Increase emoji size from 3xl to 5xl for better visual presence. Tighten spacing between emojis and labels by setting gap to 0 and adding negative top margin (-2) to level labels. Changes: - Increase emoji fontSize from '3xl' to '5xl' - Remove emoji bottom margin (mb: '0') - Remove gap between emoji and labels (gap: '0') - Add negative top margin to level labels (mt: '-2') 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:37:59 -05:00
semantic-release-bot	b3541e6b8a	chore(release): 4.24.3 [skip ci] ## [4.24.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.2...v4.24.3) (2025-10-20) ### Code Refactoring * homepage: align all skill icon panes horizontally ([`4b04e86`](`4b04e8673d`))	2025-10-20 11:22:23 +00:00
Thomas Hallock	4b04e8673d	refactor(homepage): align all skill icon panes horizontally Removed horizontal padding for all skill icon containers to ensure consistent alignment across the "What You'll Learn" section. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-20 06:21:25 -05:00