Summary
Add multi-language (i18n) support to the presentation so that it can be viewed in languages other than Turkish.
Currently the slide deck, section content, FAQ, scenarios, and supporting docs under docs/ are Turkish-only (SUNUM-*-TR.md). We should make the UI and content translatable, starting with English as the second language.
Goals
- Allow the user to switch the active language at runtime (e.g. a language toggle in the header / title slide).
- Externalize all user-facing strings from React components into translation resources.
- Persist the user's language selection (e.g.
localStorage) and respect the browser's navigator.language on first visit.
- Set the correct
<html lang="..."> attribute based on the active language.
Scope
In scope for the first iteration:
- Languages:
tr (default) and en.
- All slide sections under
src/components/sections/.
- All interactive components under
src/components/interactive/ (labels, helper text, tooltips).
- All analogy components under
src/components/analogies/.
- Section titles / navigation defined in
src/components/sections.ts and src/lib/sections.ts.
- Markdown docs under
docs/ (add English variants, e.g. SUNUM-ACILIS-EN.md).
- Page metadata in
src/app/layout.tsx (title, description, lang).
Out of scope (follow-up issues):
- Additional languages beyond
en.
- Automated translation pipeline / CI checks for missing keys.
Proposed approach
- Introduce an i18n layer. Options:
- next-intl (recommended) — first-class App Router support, type-safe messages, server + client components.
react-i18next as an alternative if a lighter client-only setup is preferred.
- Create a
src/i18n/ folder with tr.json and en.json message catalogs, organized by section (intro, plans, budgets, faq, ...).
- Replace hard-coded Turkish strings in components with translation lookups (
t('intro.title') etc.).
- Add a
LanguageSwitcher component (e.g. in src/components/TitleSlide.tsx or the slide deck chrome).
- Update src/app/layout.tsx to set
<html lang> dynamically.
- Add English versions of the markdown decks under
docs/ (mirroring the existing -TR.md files).
Acceptance criteria
Notes
- Keep Turkish as the default to preserve current behavior for existing visitors.
- Translations should preserve the friendly, B1-level tone of the original content rather than being literal.
Summary
Add multi-language (i18n) support to the presentation so that it can be viewed in languages other than Turkish.
Currently the slide deck, section content, FAQ, scenarios, and supporting docs under
docs/are Turkish-only (SUNUM-*-TR.md). We should make the UI and content translatable, starting with English as the second language.Goals
localStorage) and respect the browser'snavigator.languageon first visit.<html lang="...">attribute based on the active language.Scope
In scope for the first iteration:
tr(default) anden.src/components/sections/.src/components/interactive/(labels, helper text, tooltips).src/components/analogies/.src/components/sections.tsandsrc/lib/sections.ts.docs/(add English variants, e.g.SUNUM-ACILIS-EN.md).src/app/layout.tsx(title,description,lang).Out of scope (follow-up issues):
en.Proposed approach
react-i18nextas an alternative if a lighter client-only setup is preferred.src/i18n/folder withtr.jsonanden.jsonmessage catalogs, organized by section (intro,plans,budgets,faq, ...).t('intro.title')etc.).LanguageSwitchercomponent (e.g. in src/components/TitleSlide.tsx or the slide deck chrome).<html lang>dynamically.docs/(mirroring the existing-TR.mdfiles).Acceptance criteria
src/components/orsrc/app/.<html lang>matches the active language.npm run buildandnpm run lintpass.Notes