i18n: Add Arabic language support to the website

components/Gaming.jsx

@@ -4,7 +4,8 @@ import { Download, Gamepad2, Layers, Database, Cpu, ChevronRight, MonitorPlay, E
 import { useLanguage } from '../i18n/LanguageContext';
 
 const Gaming = ({ onDownload }) => {
-  const { t } = useLanguage();
+  const { t, language } = useLanguage();
+  const isArabic = language === 'ar';
   return (
     <div className="min-h-screen bg-black text-white overflow-x-hidden">
 
@@ -52,7 +53,7 @@ const Gaming = ({ onDownload }) => {
 
       <section className="py-32 relative border-t border-white/5 bg-zinc-950 overflow-hidden">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex flex-col lg:flex-row items-center">
+          <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-16">
 
             <div className="flex-1 space-y-8 lg:max-w-xl relative z-10">
               <h2 className="text-4xl md:text-6xl font-bold tracking-tight text-white">
@@ -77,12 +78,12 @@ const Gaming = ({ onDownload }) => {
               </Link>
             </div>
 
-            <div className="flex-1 w-full relative lg:-mr-64 mt-12 lg:mt-0">
+            <div className={`flex-1 w-full relative mt-12 lg:mt-0 ${isArabic ? 'lg:-ml-64' : 'lg:-mr-64'}`}>
               <div className="absolute inset-0 bg-purple-900/20 blur-[100px] rounded-full pointer-events-none"></div>
               <img
                 src="https://usebottles.com/assets/hero/gaming-platforms.png"
                 alt="Supported Gaming Platforms"
-                className="relative z-10 max-w-none w-[150%] lg:w-[130%] transform translate-x-10 lg:translate-x-0"
+                className={`relative z-10 max-w-none w-[150%] lg:w-[130%] ${isArabic ? '-translate-x-10 lg:translate-x-0' : 'translate-x-10 lg:translate-x-0'}`}
               />
             </div>
 

components/Header.jsx

@@ -69,7 +69,7 @@ const Header = ({ currentView, onNavigate, onDownload, theme, onThemeChange, for
           </div>
 
           <div className="hidden md:block">
-            <div className="ml-10 flex items-center space-x-6">
+            <div className="flex items-center gap-6">
               {navItems.map((item) => {
                 const isActive = currentView === item.key;
                 return (

components/LanguageSwitcher.jsx

@@ -10,6 +10,7 @@ const LanguageSwitcher = () => {
         { value: 'en', label: 'English' },
         { value: 'it', label: 'Italiano' },
         { value: 'es', label: 'Español' },
+        { value: 'ar', label: 'العربية' },
     ];
 
     // Custom label rendering if we want "EN" instead of "English" in the button is not fully supported by generic Select

i18n/LanguageContext.jsx

@@ -8,13 +8,14 @@ const detectSystemLanguage = () => {
 
     if (browserLang.startsWith('it')) return 'it';
     if (browserLang.startsWith('es')) return 'es';
+    if (browserLang.startsWith('ar')) return 'ar';
     return 'en';
 };
 
 export const LanguageProvider = ({ children }) => {
     const [language, setLanguageState] = useState(() => {
         const stored = localStorage.getItem('bottles-language');
-        if (stored && (stored === 'en' || stored === 'it' || stored === 'es')) {
+        if (stored && (stored === 'en' || stored === 'it' || stored === 'es' || stored === 'ar')) {
             return stored;
         }
         return detectSystemLanguage();
@@ -24,6 +25,14 @@ export const LanguageProvider = ({ children }) => {
         localStorage.setItem('bottles-language', language);
     }, [language]);
 
+    useEffect(() => {
+        const root = document.documentElement;
+        const isArabic = language === 'ar';
+
+        root.dir = isArabic ? 'rtl' : 'ltr';
+        root.lang = isArabic ? 'ar' : language;
+    }, [language]);
+
     const setLanguage = (lang) => {
         setLanguageState(lang);
     };