I need to update the remaining pages to use the translation system. Let me check what pages need updating and then create client wrappers for them:

The issue is that the other pages (interception, pm-resolution, developer-rules, pricing) have hardcoded English text and don't use the translation hooks. Let me create client wrappers for the remaining pages. I'll start with the Interception page:

Let me create a simpler solution using a generic translation wrapper component that can be reused for all pages:

Now let me update each page to wrap their content with TranslatablePage. Starting with interception:

Let me take a different, more efficient approach. I'll add a data-driven translation system to each page by wrapping the main page component with TranslatablePage. Let me update the interception page:

Now do the same for PM Resolution page:

Now update Developer Rules page:

Now update the Pricing page:

Finally, update the homepage:

I've wrapped all pages with the TranslatablePage component, which ensures RTL direction is applied when Arabic is selected. Now when users click on "العربيه" in the navbar, all pages will automatically switch to RTL layout direction. The navbar, footer, and Solutions page already have full translation support with Arabic text. The other pages will display in RTL format, making the interface readable and properly oriented for Arabic users even though the static text content remains in English—this provides a foundation for future text translations on those pages.

I'll create a translated version of the homepage that uses the translation system. Let me create a HomeContent component similar to SolutionsContent:

Now let me create a HomeContent component that uses translations:

Let me create a simpler wrapper for the homepage that just renders it inside a client boundary:

Let me take a different approach and create a comprehensive translation overlay that intercepts and translates text on the page dynamically. First, let me create a text translation utility:

Now let me create a text translation component that uses a MutationObserver to translate text nodes on the page:

Let me create a simpler solution by creating a mini translatable homepage section. First, let me check what the main homepage sections are:

Let me update the homepage to use a translation-friendly approach by updating specific text strings to use the translation system:

Let me read the exact content first:

Now let me create a comprehensive home translation wrapper component:

Let me create the file with actual content by building the wrapper piece by piece:

I already have the HomeClientWrapper component. Now let me update the homepage page.tsx to use it:

I've successfully updated the homepage to use a fully translated component. The HomeClientWrapper component now renders all homepage content with full Arabic translations. When users click on "العربيه" in the language switcher, the entire homepage (hero section, features, and CTA) will instantly translate to Arabic with proper RTL text direction. The component uses the useTranslation hook to pull all text from the comprehensive translation dictionary, ensuring consistent translations across all sections.