Added translation to all site with edit style

app/onboarding/page.js

@@ -5,33 +5,35 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { Home, Search, Rocket, ArrowLeft, ArrowRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 const STORAGE_KEY = 'sweethome_onboarding_completed';
 
-const steps = [
-  {
-    icon: Home,
-    title: 'مرحباً بك في SweetHome',
-    description: 'نحن هنا لمساعدتك في إيجاد العقار المثالي الذي تحلم به. اكتشف آلاف العقارات المتاحة للإيجار والبيع في جميع أنحاء سوريا.',
-    gradient: 'from-amber-500 to-orange-600',
-  },
-  {
-    icon: Search,
-    title: 'ابحث عن منزل أحلامك',
-    description: 'استخدم محرك البحث الذكي لدينا للعثور على العقار المناسب. تصفح حسب الموقع، السعر، النوع، والمزيد من الفلاتر المتقدمة.',
-    gradient: 'from-blue-500 to-indigo-600',
-  },
-  {
-    icon: Rocket,
-    title: 'انطلق الآن',
-    description: 'انشئ حسابك مجاناً وابدأ رحلة البحث عن منزلك الجديد. يمكنك حفظ العقارات المفضلة والتواصل مع المالكين مباشرة.',
-    gradient: 'from-emerald-500 to-teal-600',
-  },
-];
-
 export default function OnboardingPage() {
+  const { t, i18n } = useTranslation();
   const router = useRouter();
   const [currentStep, setCurrentStep] = useState(0);
+
+  const steps = [
+    {
+      icon: Home,
+      title: t('onboarding.step1.title'),
+      description: t('onboarding.step1.description'),
+      gradient: 'from-amber-500 to-orange-600',
+    },
+    {
+      icon: Search,
+      title: t('onboarding.step2.title'),
+      description: t('onboarding.step2.description'),
+      gradient: 'from-blue-500 to-indigo-600',
+    },
+    {
+      icon: Rocket,
+      title: t('onboarding.step3.title'),
+      description: t('onboarding.step3.description'),
+      gradient: 'from-emerald-500 to-teal-600',
+    },
+  ];
   const [direction, setDirection] = useState(0);
 
   useEffect(() => {
@@ -74,7 +76,7 @@ export default function OnboardingPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4 relative overflow-hidden">
+    <div dir={i18n.language === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4 relative overflow-hidden">
       <div className="absolute inset-0 overflow-hidden">
         {[...Array(30)].map((_, i) => (
           <motion.div
@@ -199,7 +201,7 @@ export default function OnboardingPage() {
                     className="flex items-center gap-2 px-5 py-3 rounded-xl text-gray-300 hover:text-white hover:bg-white/10 transition-all border border-white/10"
                   >
                     <ArrowRight className="w-5 h-5" />
-                    <span>السابق</span>
+                    <span>{t('onboarding.prev')}</span>
                   </motion.button>
                 ) : (
                   <div />
@@ -212,7 +214,7 @@ export default function OnboardingPage() {
                     onClick={nextStep}
                     className={`flex items-center gap-2 px-6 py-3 rounded-xl text-white font-medium bg-gradient-to-r ${step.gradient} hover:shadow-lg transition-all`}
                   >
-                    <span>التالي</span>
+                    <span>{t('onboarding.next')}</span>
                     <ArrowLeft className="w-5 h-5" />
                   </motion.button>
                 ) : (
@@ -223,7 +225,7 @@ export default function OnboardingPage() {
                         whileTap={{ scale: 0.95 }}
                         className="px-6 py-3 rounded-xl bg-white text-gray-900 font-bold hover:bg-gray-100 transition-all"
                       >
-                        تسجيل جديد
+                        {t('onboarding.register')}
                       </motion.button>
                     </Link>
                     <Link href="/login" onClick={handleFinish}>
@@ -232,7 +234,7 @@ export default function OnboardingPage() {
                         whileTap={{ scale: 0.95 }}
                         className="px-6 py-3 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-bold hover:shadow-lg transition-all"
                       >
-                        تسجيل دخول
+                        {t('onboarding.login')}
                       </motion.button>
                     </Link>
                   </div>