I pulled the latest changes from v0/aldoyh-57801f8b in v0-katachi-bold.

Now let me read the remaining components to see all the Arabic text:

Now let me read the remaining components for a complete picture:

Now I have a complete picture. The issue is that the Arabic text is being split character by character in the AnimatedText component, which breaks Arabic letter connections. I also need to fix the layout properly for RTL, update the font configuration, add a theme provider for dark mode, and ensure all text is properly translated to Arabic with correct rendering.

Let me make all the necessary updates:

Now let me update the AnimatedText component to handle Arabic text properly (by words instead of characters):

Now let me update the hero section to fix the Arabic text animation and use proper styling:

Now let me update the hero section to use the new high-quality images you provided:

Now let me fix the MaterialsSection to use the correct Arabic text animation:

Now let me update the materials section to use the new high-quality images:

Now let me update the header component to support dark mode properly:

Now let me update the footer to use theme-aware colors and the high-quality image:

Now let me update the featured products with the new high-quality images and fix the colors:

Now let me update the featured products section to use theme-aware styling:

Now let me update the collection strip to use Arabic text and theme-aware styling:

Now let me update the collection strip section text to Arabic:

Now let me update the newsletter section styling for themes:

Now let me update the product card styling for themes:

Now let me update the quick look modal for themes:

Now let me read and update the theme-provider component to make sure it's properly set up:

Good, the theme provider is set up correctly. Now let me read and update the blur panel for dark mode:

Now let me update the page.tsx to ensure it has proper dark mode support:

I have successfully made comprehensive updates to the KATACHI project:

1. Fixed Arabic text rendering - Updated the AnimatedText component to split text by words instead of characters, which preserves Arabic letter connections. This was applied across all components including hero section and materials section.
2. Updated the font configuration - Ensured Tajawal font is properly configured in both layout.tsx and globals.css with proper Arabic font-feature settings for correct rendering.
3. Implemented light/dark theme support - Added ThemeProvider with next-themes, created a theme toggle button in the header, and updated all components to use semantic color tokens (text-foreground, bg-background, text-muted-foreground, etc.) instead of hardcoded colors.
4. Enhanced theme colors - Created a warm sandy desert color palette for light mode and a rich night desert palette for dark mode, giving the site an Arabian aesthetic that complements the horse imagery.
5. Updated all images - Replaced lower quality images with your high-resolution horse images throughout the site including hero, materials, featured products, collection strip, and footer sections.

The error might be coming from the theme provider or next-themes. Let me check the layout file to ensure the suppressHydrationWarning is properly placed:

The warning about script tags is a known issue with next-themes that injects a script to prevent flash of unstyled content. This is harmless and doesn't affect functionality. The suppressHydrationWarning is already in place on the html tag.

However, to completely suppress this warning, I can update the ThemeProvider to handle it more gracefully:

The script tag warning is a known behavior from next-themes that injects an inline script to prevent flash of unstyled content during theme switching. I've updated the ThemeProvider to handle the hydration more gracefully by only showing children after the component is mounted on the client. This prevents any hydration mismatches while still maintaining proper theme functionality.