translation added

src/features/auth/login/ui/form.tsx

@@ -11,9 +11,12 @@ import { MotionWrapper } from '../../../../shared/ui/motion';
 import { useLoginForm } from '../lib/useLoginForm';
 import { useLoginModal } from '@/shared/zustand/auth';
 import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 
 export function LoginForm() {
   const [isFocused, setIsFocused] = useState(false);
+  const t = useTranslations('Auth.Login');
+  const tCommon = useTranslations('Common');
 
   const { phone, setPhone, submit, error, loading } = useLoginForm();
   const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
@@ -49,14 +52,12 @@ export function LoginForm() {
 
             {/* Header */}
             <p className="mb-1 text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-stone-400">
-              Xush kelibsiz
+              {t('welcome')}
             </p>
             <h1 className="mb-1 font-serif text-3xl leading-tight text-stone-900">
-              Kirish
+              {t('title')}
             </h1>
-            <p className="mb-8 text-sm text-stone-400">
-              Telefon raqamingizni kiriting.
-            </p>
+            <p className="mb-8 text-sm text-stone-400">{t('description')}</p>
 
             <form onSubmit={submit} noValidate className="flex flex-col gap-5">
               {/* Phone field */}
@@ -65,7 +66,7 @@ export function LoginForm() {
                   htmlFor="phone"
                   className="text-[0.7rem] font-medium tracking-widest uppercase text-stone-500"
                 >
-                  Telefon raqam
+                  {t('phoneLabel')}
                 </label>
 
                 <div
@@ -75,7 +76,7 @@ export function LoginForm() {
                   <input
                     id="phone"
                     type="tel"
-                    placeholder="90 123 45 67"
+                    placeholder={t('phonePlaceholder')}
                     value={formatPhone(phone)}
                     onChange={handlePhoneChange}
                     onFocus={() => setIsFocused(true)}
@@ -98,11 +99,12 @@ export function LoginForm() {
                 {/* Digit counter / complete hint */}
                 <div className="flex items-center justify-between px-0.5">
                   <span className="text-[0.7rem] text-stone-400">
-                    {phone.length > 0 && `${phone.length} ta raqam kiritildi`}
+                    {phone.length > 0 &&
+                      t('digitsEntered', { count: phone.length })}
                   </span>
                   {phone.length === 9 && (
                     <span className="text-[0.7rem] font-medium text-emerald-600">
-                      ✓ To&lsquo;liq
+                      {tCommon('complete')}
                     </span>
                   )}
                 </div>
@@ -130,10 +132,10 @@ export function LoginForm() {
                 {loading ? (
                   <span className="flex items-center justify-center gap-2">
                     <span className="h-3.5 w-3.5 rounded-full border-2 border-stone-500 border-t-stone-100 animate-spin" />
-                    Yuborilmoqda…
+                    {t('sending')}
                   </span>
                 ) : (
-                  'Kodni yuborish'
+                  t('sendCode')
                 )}
               </button>
 
@@ -141,19 +143,19 @@ export function LoginForm() {
               <div className="relative flex items-center gap-3 py-1">
                 <span className="h-px flex-1 bg-stone-200" />
                 <span className="text-[0.65rem] font-medium uppercase tracking-widest text-stone-400">
-                  yoki
+                  {tCommon('or')}
                 </span>
                 <span className="h-px flex-1 bg-stone-200" />
               </div>
 
               {/* Register hint */}
               <p className="text-center text-[0.78rem] text-stone-400">
-                Hisobingiz yo&lsquo;qmi?
+                {t('registerPrompt')}
                 <Link
                   href="/register"
                   className="text-stone-800 underline underline-offset-2 hover:text-stone-600 transition-colors"
                 >
-                  Ro&lsquo;yxatdan o&lsquo;tish
+                  {t('registerLink')}
                 </Link>
               </p>
             </form>

src/features/auth/register/ui/form.tsx

@@ -4,6 +4,7 @@ import React, { useCallback } from 'react';
 import { useRegisterForm } from '../lib/useRegisterForm';
 import { formatPhone, normalizeDigits } from '@/shared/lib/formatPhone';
 import PhonePrefix from '@/shared/ui/phonePrefix';
+import { useTranslations } from 'next-intl';
 
 function Field({
   id,
@@ -64,6 +65,8 @@ function Field({
 
 export function RegisterFormUI() {
   const [phone, setPhone] = React.useState('');
+  const t = useTranslations('Auth.Register');
+  const tCommon = useTranslations('Common');
   const {
     registerData,
     errors,
@@ -97,11 +100,9 @@ export function RegisterFormUI() {
             ✓
           </div>
           <h2 className="mb-1 font-serif text-2xl text-stone-900">
-            You&lsquo;re registered
+            {t('successTitle')}
           </h2>
-          <p className="text-sm text-stone-400">
-            We&lsquo;ll be in touch shortly.
-          </p>
+          <p className="text-sm text-stone-400">{t('successMessage')}</p>
         </div>
       </div>
     );
@@ -112,14 +113,12 @@ export function RegisterFormUI() {
     <div className="w-full">
       {/* Header */}
       <p className="mb-1 text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-stone-400">
-        Create account
+        {t('headerLabel')}
       </p>
       <h1 className="mb-1 font-serif text-3xl leading-tight text-stone-900">
-        Register
+        {t('title')}
       </h1>
-      <p className="mb-8 text-sm text-stone-400">
-        Fill in your details to get started.
-      </p>
+      <p className="mb-8 text-sm text-stone-400">{t('description')}</p>
 
       <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-5">
         {/* Name + Surname row */}
@@ -128,7 +127,7 @@ export function RegisterFormUI() {
             id="name"
             name="name"
             label="Name"
-            placeholder="Ali"
+            placeholder={t('namePlaceholder')}
             value={registerData.name}
             onChange={handleChange}
             error={errors.name}
@@ -137,7 +136,7 @@ export function RegisterFormUI() {
             id="surname"
             name="surname"
             label="Surname"
-            placeholder="Karimov"
+            placeholder={t('surnamePlaceholder')}
             value={registerData.surname}
             onChange={handleChange}
             error={errors.surname}
@@ -150,7 +149,7 @@ export function RegisterFormUI() {
             htmlFor="phone"
             className="text-[0.7rem] font-medium tracking-widest uppercase text-stone-500"
           >
-            Telefon raqam
+            {t('phoneLabel')}
           </label>
           <div
             className={`relative transition-transform duration-200 ${isFocused ? 'scale-[1.01]' : ''}`}
@@ -159,7 +158,7 @@ export function RegisterFormUI() {
             <input
               id="phone"
               type="tel"
-              placeholder="90 123 45 67"
+              placeholder={t('phonePlaceholder')}
               value={formatPhone(phone)}
               onChange={handlePhoneChange}
               onFocus={() => setIsFocused(true)}
@@ -180,11 +179,11 @@ export function RegisterFormUI() {
           {/* Digit counter / complete hint */}
           <div className="flex items-center justify-between px-0.5">
             <span className="text-[0.7rem] text-stone-400">
-              {phone.length > 0 && `${phone.length} ta raqam kiritildi`}
+              {phone.length > 0 && t('digitsEntered', { count: phone.length })}
             </span>
             {phone.length === 9 && (
               <span className="text-[0.7rem] font-medium text-emerald-600">
-                ✓ To&lsquo;liq
+                {tCommon('complete')}
               </span>
             )}
           </div>
@@ -204,24 +203,7 @@ export function RegisterFormUI() {
               htmlFor="oferta"
               className="cursor-pointer text-[0.78rem] leading-relaxed text-stone-500"
             >
-              I agree to the
-              <a
-                href="/terms"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-stone-800 underline underline-offset-2 hover:text-stone-600"
-              >
-                Terms of Service
-              </a>
-              and
-              <a
-                href="/privacy"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-stone-800 underline underline-offset-2 hover:text-stone-600"
-              >
-                Privacy Policy
-              </a>
+              {t('terms')}
             </label>
           </div>
           {errors.oferta && (
@@ -244,10 +226,10 @@ export function RegisterFormUI() {
           {loading ? (
             <span className="flex items-center justify-center gap-2">
               <span className="h-3.5 w-3.5 rounded-full border-2 border-stone-500 border-t-stone-100 animate-spin" />
-              Submitting…
+              {tCommon('submitting')}
             </span>
           ) : (
-            'Create account'
+            t('submitButton')
           )}
         </button>
       </form>