Domain: Coding

Difficulty: Intermediate

• Description: Many hardcoded text strings exist in our core layout components, making translation impossible. This task involves refactoring header.tsx, footer.tsx, and navigation.tsx to use the useTranslations hook from next-intl instead of hardcoded English strings.

Expected Outcome:

• All user-visible strings in header.tsx, footer.tsx, and navigation.tsx are replaced with calls to a t() function (e.g., t('navigation.home')).
• The corresponding keys and English values are added to the messages/en.json file.
• The UI appears identical to before, but the text is now sourced from the translation file.

Links or References:

• src/components/layout/header.tsx.
• src/components/layout/footer.tsx.
• src/components/layout/navigation.tsx.
• [next-intl useTranslations Hook](https://next-intl.dog/docs/messages/usage#usetranslations)

Setup Steps:

1. Ensure the application has next-intl configured (see previous ticket).
2. Identify hardcoded strings in the specified files.
3. Import useTranslations and replace static text with dynamic calls.
4. Run npm run dev and verify the UI text is still present and correct.