fix(i18n): use useMessages() for tutorial translations

- Fixed tutorial translations not displaying in user's language
- Updated homepage to use useMessages() instead of useTranslations().raw()
- Updated tutorialConverter to use translated actionDescription
- Updated ArithmeticOperationsGuide to pass tutorial translations
- Tutorial content now displays fully in selected language

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/guide/components/ArithmeticOperationsGuide.tsx

@@ -2,6 +2,7 @@
 
 import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
 import Link from 'next/link'
+import { useMessages } from 'next-intl'
 import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
 import { getTutorialForEditor } from '@/utils/tutorialConverter'
 import { css } from '../../../../styled-system/css'
@@ -9,6 +10,7 @@ import { grid } from '../../../../styled-system/patterns'
 
 export function ArithmeticOperationsGuide() {
   const appConfig = useAbacusConfig()
+  const messages = useMessages() as any
 
   return (
     <div className={css({ maxW: '4xl', mx: 'auto' })}>
@@ -257,7 +259,7 @@ export function ArithmeticOperationsGuide() {
         </div>
 
         <TutorialPlayer
-          tutorial={getTutorialForEditor()}
+          tutorial={getTutorialForEditor(messages.tutorial || {})}
           isDebugMode={false}
           showDebugPanel={false}
         />

apps/web/src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { useTranslations } from 'next-intl'
+import { useTranslations, useMessages } from 'next-intl'
 import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
 import { HeroAbacus } from '@/components/HeroAbacus'
 import { HomeHeroProvider } from '@/contexts/HomeHeroContext'
@@ -76,9 +76,9 @@ function MiniAbacus({
 
 export default function HomePage() {
   const t = useTranslations('home')
-  const tutorialT = useTranslations('tutorial')
+  const messages = useMessages() as any
   const [selectedSkillIndex, setSelectedSkillIndex] = useState(1) // Default to "Friends techniques"
-  const fullTutorial = getTutorialForEditor(tutorialT.raw(''))
+  const fullTutorial = getTutorialForEditor(messages.tutorial || {})
 
   // Create different tutorials for each skill level
   const skillTutorials = [

apps/web/src/utils/tutorialConverter.ts

@@ -232,7 +232,10 @@ export function convertGuidedAdditionTutorial(tutorialMessages: Record<string, a
       // Use translated strings if available, otherwise keep original
       title: stepTranslations.title || step.title,
       description: stepTranslations.description || step.description,
-      actionDescription: generatedInstruction.actionDescription, // Keep generated for now
+      actionDescription:
+        stepTranslations.actionDescription ||
+        step.actionDescription ||
+        generatedInstruction.actionDescription,
       tooltip: {
         content: stepTranslations.tooltip?.content || step.tooltip.content,
         explanation: stepTranslations.tooltip?.explanation || step.tooltip.explanation,