All files / web/src/app/guide page.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { PageWithNav } from '@/components/PageWithNav'
import { css } from '../../../styled-system/css'
import { container, hstack } from '../../../styled-system/patterns'
import { ArithmeticOperationsGuide } from './components/ArithmeticOperationsGuide'
import { ReadingNumbersGuide } from './components/ReadingNumbersGuide'

type TabType = 'reading' | 'arithmetic'

export default function GuidePage() {
  const t = useTranslations('guide.page')
  const [activeTab, setActiveTab] = useState<TabType>('reading')

  return (
    <PageWithNav navTitle={t('navTitle')} navEmoji="📖">
      <div className={`with-fixed-nav ${css({ minHeight: '100vh', bg: 'bg.canvas' })}`}>
        {/* Hero Section */}
        <div
          className={css({
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            color: 'text.inverse',
            textAlign: 'center',
            py: '20',
          })}
        >
          <div className={container({ maxW: '4xl', px: '4' })}>
            <h1
              className={css({
                fontSize: '4xl',
                fontWeight: 'bold',
                mb: '4',
                textShadow: '0 4px 20px rgba(0,0,0,0.3)',
              })}
            >
              {t('hero.title')}
            </h1>
            <p
              className={css({
                fontSize: 'xl',
                opacity: '0.95',
                maxW: '2xl',
                mx: 'auto',
                lineHeight: 'relaxed',
              })}
            >
              {t('hero.subtitle')}
            </p>
          </div>
        </div>

        {/* Navigation Tabs */}
        <div
          className={css({
            bg: 'bg.surface',
            borderBottom: '1px solid',
            borderColor: 'border.default',
          })}
        >
          <div className={container({ maxW: '7xl', px: '4' })}>
            <div className={hstack({ gap: '0' })}>
              <button
                onClick={() => setActiveTab('reading')}
                className={css({
                  px: '6',
                  py: '4',
                  fontWeight: 'medium',
                  borderBottom: '2px solid',
                  borderColor: activeTab === 'reading' ? 'accent.emphasis' : 'transparent',
                  color: activeTab === 'reading' ? 'accent.emphasis' : 'text.secondary',
                  bg: activeTab === 'reading' ? 'accent.subtle' : 'transparent',
                  transition: 'all',
                  cursor: 'pointer',
                  _hover: {
                    bg: activeTab === 'reading' ? 'accent.subtle' : 'bg.muted',
                    color: activeTab === 'reading' ? 'accent.emphasis' : 'text.primary',
                  },
                })}
              >
                {t('tabs.reading')}
              </button>
              <button
                onClick={() => setActiveTab('arithmetic')}
                className={css({
                  px: '6',
                  py: '4',
                  fontWeight: 'medium',
                  borderBottom: '2px solid',
                  borderColor: activeTab === 'arithmetic' ? 'accent.emphasis' : 'transparent',
                  color: activeTab === 'arithmetic' ? 'accent.emphasis' : 'text.secondary',
                  bg: activeTab === 'arithmetic' ? 'accent.subtle' : 'transparent',
                  transition: 'all',
                  cursor: 'pointer',
                  _hover: {
                    bg: activeTab === 'arithmetic' ? 'accent.subtle' : 'bg.muted',
                    color: activeTab === 'arithmetic' ? 'accent.emphasis' : 'text.primary',
                  },
                })}
              >
                {t('tabs.arithmetic')}
              </button>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className={container({ maxW: '6xl', px: '4', py: '12' })}>
          <div
            className={css({
              bg: 'bg.default',
              rounded: '2xl',
              shadow: 'card',
              p: '10',
            })}
          >
            {activeTab === 'reading' ? <ReadingNumbersGuide /> : <ArithmeticOperationsGuide />}
          </div>
        </div>
      </div>
    </PageWithNav>
  )
}