Explore prompts

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.