Added translation to all site with edit style

app/forgot-password/page.js

@@ -6,10 +6,12 @@ import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import toast, { Toaster } from 'react-hot-toast';
 import { Mail, Key, Lock, CheckCircle, ArrowLeft, RefreshCw } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { requestForgetPasswordOtp, verifyForgetPasswordOtp } from '../utils/api';
 
 export default function ForgotPasswordPage() {
   const router = useRouter();
+  const { t } = useTranslation();
   const [step, setStep] = useState(1);
   const [email, setEmail] = useState('');
   const [code, setCode] = useState('');
@@ -20,17 +22,17 @@ export default function ForgotPasswordPage() {
     e.preventDefault();
 
     if (!email.trim()) {
-      toast.error('يرجى إدخال البريد الإلكتروني');
+      toast.error(t('forgotPassword.emailRequired'));
       return;
     }
 
     setIsLoading(true);
     try {
       await requestForgetPasswordOtp(email);
-      toast.success('تم إرسال رمز التحقق إلى بريدك الإلكتروني');
+      toast.success(t('forgotPassword.otpSent'));
       setStep(2);
     } catch (err) {
-      toast.error(err?.message || 'فشل إرسال رمز التحقق');
+      toast.error(err?.message || t('forgotPassword.otpSendFailed'));
     } finally {
       setIsLoading(false);
     }
@@ -40,22 +42,22 @@ export default function ForgotPasswordPage() {
     e.preventDefault();
 
     if (!code.trim()) {
-      toast.error('يرجى إدخال رمز التحقق');
+      toast.error(t('forgotPassword.otpRequired'));
       return;
     }
 
     if (newPassword.length < 6) {
-      toast.error('كلمة المرور الجديدة يجب أن تكون 6 أحرف على الأقل');
+      toast.error(t('validation.passwordMinLength'));
       return;
     }
 
     setIsLoading(true);
     try {
       await verifyForgetPasswordOtp(email, code, newPassword);
-      toast.success('تم إعادة تعيين كلمة المرور بنجاح');
+      toast.success(t('forgotPassword.resetSuccess'));
       setTimeout(() => router.push('/login'), 1200);
     } catch (err) {
-      toast.error(err?.message || 'فشل التحقق من الرمز');
+      toast.error(err?.message || t('forgotPassword.otpVerifyFailed'));
     } finally {
       setIsLoading(false);
     }
@@ -84,7 +86,7 @@ export default function ForgotPasswordPage() {
         >
           <Link href="/login" className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors group">
             <ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
-            <span>العودة لتسجيل الدخول</span>
+            <span>{t('forgotPassword.backToLogin')}</span>
           </Link>
         </motion.div>
 
@@ -95,7 +97,7 @@ export default function ForgotPasswordPage() {
               animate={{ y: 0, opacity: 1 }}
               className="text-3xl font-bold text-white mb-2"
             >
-              استعادة كلمة المرور
+              {t('forgotPassword.title')}
             </motion.h1>
             <motion.p
               initial={{ y: 20, opacity: 0 }}
@@ -103,7 +105,7 @@ export default function ForgotPasswordPage() {
               transition={{ delay: 0.1 }}
               className="text-amber-100"
             >
-              {step === 1 ? 'أدخل بريدك الإلكتروني لاستلام رمز التحقق' : 'أدخل رمز التحقق وكلمة المرور الجديدة'}
+              {step === 1 ? t('forgotPassword.step1Instruction') : t('forgotPassword.step2Instruction')}
             </motion.p>
           </div>
 
@@ -120,7 +122,7 @@ export default function ForgotPasswordPage() {
                 >
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
-                      البريد الإلكتروني
+                      {t('forgotPassword.emailLabel')}
                     </label>
                     <div className="relative group">
                       <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
@@ -131,7 +133,7 @@ export default function ForgotPasswordPage() {
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
                         className={inputClass}
-                        placeholder="أدخل بريدك الإلكتروني"
+                        placeholder={t('forgotPassword.emailPlaceholder')}
                         dir="ltr"
                         required
                       />
@@ -148,10 +150,10 @@ export default function ForgotPasswordPage() {
                     {isLoading ? (
                       <div className="flex items-center justify-center gap-2">
                         <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                        <span>جاري الإرسال...</span>
+                        <span>{t('forgotPassword.sending')}</span>
                       </div>
                     ) : (
-                      'إرسال رمز التحقق'
+                      t('forgotPassword.sendOtp')
                     )}
                   </motion.button>
                 </motion.form>
@@ -168,7 +170,7 @@ export default function ForgotPasswordPage() {
                 >
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
-                      رمز التحقق
+                      {t('forgotPassword.otpLabel')}
                     </label>
                     <div className="relative group">
                       <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
@@ -179,7 +181,7 @@ export default function ForgotPasswordPage() {
                         value={code}
                         onChange={(e) => setCode(e.target.value)}
                         className={inputClass}
-                        placeholder="أدخل رمز التحقق"
+                        placeholder={t('forgotPassword.otpPlaceholder')}
                         dir="ltr"
                         required
                       />
@@ -188,7 +190,7 @@ export default function ForgotPasswordPage() {
 
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
-                      كلمة المرور الجديدة
+                      {t('forgotPassword.newPasswordLabel')}
                     </label>
                     <div className="relative group">
                       <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
@@ -199,7 +201,7 @@ export default function ForgotPasswordPage() {
                         value={newPassword}
                         onChange={(e) => setNewPassword(e.target.value)}
                         className={inputClass}
-                        placeholder="أدخل كلمة المرور الجديدة"
+                        placeholder={t('forgotPassword.newPasswordPlaceholder')}
                         required
                         minLength={6}
                       />
@@ -216,10 +218,10 @@ export default function ForgotPasswordPage() {
                     {isLoading ? (
                       <div className="flex items-center justify-center gap-2">
                         <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                        <span>جاري التحقق...</span>
+                        <span>{t('forgotPassword.verifying')}</span>
                       </div>
                     ) : (
-                      'إعادة تعيين كلمة المرور'
+                      t('forgotPassword.resetPassword')
                     )}
                   </motion.button>
 
@@ -230,7 +232,7 @@ export default function ForgotPasswordPage() {
                       className="text-sm text-amber-600 hover:text-amber-700 transition-colors flex items-center justify-center gap-1 mx-auto"
                     >
                       <RefreshCw className="w-4 h-4" />
-                      <span>تغيير البريد الإلكتروني</span>
+                      <span>{t('forgotPassword.changeEmail')}</span>
                     </button>
                   </div>
                 </motion.form>