Add language translation in client side , frontend
Dev help
## Task: Add Language Translation
Using the `@turbo/apps/client-web/src/hooks/useScreenTranslation.ts` hook, add translations to **{{files you want to translate}}**.
Use `@turbo/apps/client-web/src/pages/refer-earn/index.tsx` as the reference for how translations should be implemented in the codebase.
### Requirements
1. **Use the existing translation pattern**
* Follow the same implementation pattern used in `refer-earn/index.tsx`.
* Use `useScreenTranslation.ts` for adding translations.
* Reuse existing language tokens from `@turbo/apps/client-web/src/helpers/language_tokens` whenever an appropriate token already exists.
2. **Do not use `.replace()` for dynamic translations**
* The translation system does **not support dynamic text interpolation using `.replace()`**.
* Do not introduce translations that require `.replace()` to inject variables.
For example, if the existing text is:
```text
Minimum {min} character are required
```
Do **not** create a translation such as:
```ts
t('minimum_characters').replace('{min}', min)
```
Instead, restructure the text so the dynamic value is passed separately, following the existing pattern:
```text
Minimum character required : {min}
```
The translation token itself should contain only the static text, while the dynamic value should be rendered separately.
3. **Language tokens must not contain variables**
* Tokens in `@turbo/apps/client-web/src/helpers/language_tokens` should contain **static text only**.
* Do not create tokens containing placeholders or variables such as `{min}`, `{count}`, `{name}`, etc.
4. **Use specific, reusable token names**
* All language tokens are stored in a **single shared table**, without any page-specific namespace.
* Tokens can therefore be reused across different pages.
* **Do not use generic token names** such as:
* `heading`
* `subtitle`
* `title`
* `description`
* `label`
* `button`
* etc.
Generic names can cause incorrect translations because the first occurrence of a token is reused everywhere.
For example, avoid:
```text
heading = "Some Random Text"
```
because another page may have:
```text
heading = "Other Random Text"
```
Since both pages would reference the same `heading` token, whichever text is saved first would be used for both pages.
Instead, create a token that clearly identifies the **meaning/context of the text**, while still being reusable where appropriate.
5. **Before creating a new token**
* Check `@turbo/apps/client-web/src/helpers/language_tokens` for an existing token with the same or equivalent static text.
* Reuse an existing token when appropriate.
* Only add a new token when no suitable token exists.
* Make sure the new token name is specific enough to avoid collisions with unrelated text elsewhere in the application.
6. **Preserve dynamic values**
* If a translated string contains dynamic content, restructure the UI so that the dynamic value is rendered outside the translation token.
* Do not concatenate or inject dynamic values into translated strings using `.replace()`.
### Goal
Add complete translations to **{{files you want to translate}}** while following the existing translation architecture and conventions in the codebase.
Do not change unrelated functionality or refactor unrelated code. Only make the changes necessary to add the translations correctly.